:root {
  --bg: #0c2e72;
  --text: #f4f9ff;
  --muted: rgba(244, 249, 255, 0.85);
  --surface: rgba(255, 255, 255, 0.08);
  --accent: #67b0ff;
  --accent-strong: #8fd6ff;
  --brand-blue: #5fb0ff;
  --border: rgba(255, 255, 255, 0.16);
  --shadow: 0 28px 80px rgba(0, 18, 61, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--bg);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.hero {
  min-height: 100vh;
  background-image: url("images/hero2.webp");
  background-size: cover;
  background-position: center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.5rem;
  position:relative;
}

.hero::before{
  content: "";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2, 12, 36, 0.86) 0%, rgba(4, 21, 58, 0.64) 43%, rgba(4, 17, 43, 0.36) 100%),
    linear-gradient(180deg, rgba(2, 10, 28, 0.48) 0%, rgba(2, 9, 24, 0.72) 100%);
  pointer-events:none;
}

.hero-header, .hero-content { position:relative; z-index:1; }

.hero-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:1200px; width:100%; margin:0 auto; padding:0.85rem 1.2rem;
  border-radius:999px; background: rgba(255,255,255,0.06);
  border:1px solid var(--border); box-shadow: 0 24px 60px rgba(0,15,52,0.12);
}

.brand{ display:inline-flex; align-items:center; gap:0.9rem; font-weight:700; font-size:1rem; }
.brand img{ height:42px; width:auto; border-radius:12px; background: rgba(255,255,255,0.08); padding:0.3rem; }
.brand span{ color: var(--brand-blue); white-space:nowrap; }

.hero-nav{ display:flex; align-items:center; gap:1.6rem; color:var(--text); font-weight:600; }
.hero-nav a{ position:relative; padding:0.35rem 0; opacity:0.95; }
.hero-nav a::after{ content:""; position:absolute; left:0; bottom:-0.35rem; width:100%; height:2px; background:transparent; transition:background .25s ease; }
.hero-nav a:hover::after, .hero-nav a:focus::after{ background:var(--accent); }

.hero-content{ width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:start; padding-top:4rem; }
.hero-copy{ max-width:600px; }
.hero-pill{ display:inline-flex; align-items:center; gap:.75rem; padding:.85rem 1.1rem; border-radius:999px; background: rgba(255,255,255,0.08); font-size:.95rem; color:var(--accent-strong); margin-bottom:1.3rem; }
.hero-pill{ white-space: nowrap; }
.hero-copy h1{ margin:0; font-size:clamp(3rem,6vw,5.2rem); line-height:0.98; text-shadow:0 18px 42px rgba(0, 8, 28, 0.55); }
.hero-copy h1 span{ display:block; }
.hero-title-blue{ color:var(--brand-blue); white-space:nowrap; }
.hero-title-white{ color:#fff; }
.hero-copy p{ margin:1.6rem 0 0; font-size:1.05rem; line-height:1.9; color:var(--muted); max-width:40rem; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-width:12rem; padding:1rem 1.7rem; border-radius:999px; font-weight:700; transition:transform .2s ease, background .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background: linear-gradient(135deg,#64b7ff,#4287f5); color:#041f4a; }
.btn-secondary{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:var(--text); }

.hero-panel{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:1.5rem; padding:2rem; backdrop-filter: blur(12px); box-shadow:var(--shadow); }
.hero-panel h2{ margin:0 0 1rem; font-size:1.35rem; }
.hero-panel ul{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.hero-panel li{ display:flex; align-items:flex-start; gap:.85rem; color:var(--text); line-height:1.6; }
.hero-panel li i{ color:var(--accent); min-width:1.2rem; font-size:1.05rem; margin-top:0.12rem; }

.hotels-section,
.reservation-section,
.cta-section{
  background:#d8f1ff;
  background-image:linear-gradient(180deg,#e9f8ff 0%,#ccecff 100%);
  position:relative;
  overflow:hidden;
}

.hotels-section::before,
.reservation-section::before,
.cta-section::before{
  content:"";
  position:absolute;
  width:18rem;
  height:18rem;
  left:7%;
  top:5rem;
  border-radius:50%;
  background:rgba(255,255,255,0.42);
  pointer-events:none;
}

.hotels-section::after,
.reservation-section::after,
.cta-section::after{
  content:"";
  position:absolute;
  width:24rem;
  height:24rem;
  right:4%;
  bottom:-7rem;
  border-radius:50%;
  background:rgba(255,255,255,0.32);
  pointer-events:none;
}

.hotels-section{
  color:#071832;
  padding:4rem 1.5rem 5rem;
}

.hotels-wrap{
  width:min(1440px,100%);
  margin:0 auto;
  position:relative;
  z-index:1;
}

.hotels-heading{
  max-width:720px;
  margin:0 auto 2.2rem;
  text-align:center;
}

.hotels-heading span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:2rem;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  background:rgba(36,120,255,0.1);
  color:#1674e8;
  font-size:0.85rem;
  font-weight:800;
}

.hotels-heading h2{
  margin:0.75rem auto 0;
  max-width:640px;
  color:#071832;
  font-size:clamp(2rem,3.2vw,3.1rem);
  line-height:1.08;
}

.hotels-heading h2 i{
  color:#1674e8;
  font-size:0.78em;
  margin-right:0.2rem;
}

.hotels-heading p{
  margin:0.75rem auto 0;
  max-width:580px;
  color:#52627a;
  font-size:1rem;
  line-height:1.6;
  font-weight:600;
}

.hotels-heading-icons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1.1rem;
}

.hotels-heading-icons span{
  min-height:2.35rem;
  padding:0.55rem 0.9rem;
  background:#fff;
  color:#1d3558;
  border:1px solid rgba(22,116,232,0.12);
  box-shadow:0 14px 34px rgba(18,48,91,0.08);
}

.hotels-heading-icons i{
  color:#1674e8;
}

.hotels-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.75rem;
}

.hotel-card{
  position:relative;
  min-height:580px;
  overflow:hidden;
  border-radius:1.7rem;
  background:#08152d;
  box-shadow:0 26px 70px rgba(8,24,54,0.2);
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease;
}

.hotel-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5, 15, 36, 0.22) 0%, rgba(5, 15, 36, 0.42) 43%, rgba(3, 9, 24, 0.94) 100%),
    linear-gradient(90deg, rgba(3, 9, 24, 0.3), rgba(3, 9, 24, 0.05));
  transition:background .28s ease;
}

.hotel-card img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  transform:scale(1);
  transition:transform .45s ease, filter .28s ease;
}

.hotel-card-content{
  position:relative;
  z-index:1;
  min-height:580px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.8rem;
  color:#fff;
}

.hotel-card:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 90px rgba(8,24,54,0.3);
}

.hotel-card:hover::after{
  background:
    linear-gradient(180deg, rgba(5, 15, 36, 0.12) 0%, rgba(5, 15, 36, 0.38) 43%, rgba(3, 9, 24, 0.96) 100%),
    linear-gradient(90deg, rgba(3, 9, 24, 0.25), rgba(3, 9, 24, 0.02));
}

.hotel-card:hover img{
  transform:scale(1.06);
  filter:saturate(1.08);
}

.hotel-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.hotel-stars,
.hotel-location{
  display:inline-flex;
  align-items:center;
  min-height:2.6rem;
  padding:0.65rem 0.9rem;
  border-radius:999px;
  background:rgba(17, 28, 52, 0.74);
  color:#fff;
  font-weight:800;
  box-shadow:0 14px 32px rgba(0,0,0,0.18);
  backdrop-filter:blur(8px);
}

.hotel-stars{ gap:0.22rem; color:#ffc928; }
.hotel-location{ gap:0.5rem; font-size:0.95rem; white-space:nowrap; }
.hotel-location i{ color:#35c2ff; }

.hotel-card-bottom h2{
  margin:0 auto;
  max-width:22rem;
  color:#fff;
  font-size:clamp(1.75rem,2.2vw,2.15rem);
  line-height:1.08;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 12px 28px rgba(0,0,0,0.42);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hotel-card-bottom p{
  margin:1rem auto 0;
  max-width:24rem;
  color:rgba(255,255,255,0.82);
  font-weight:600;
  line-height:1.6;
  text-align:center;
}

.hotel-card-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.85rem;
  margin-top:1.25rem;
}

.hotel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.7rem;
  min-width:9.4rem;
  min-height:3.4rem;
  padding:0.9rem 1.25rem;
  border-radius:1rem;
  font-size:1.05rem;
  font-weight:800;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.hotel-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 28px rgba(31,136,255,0.28); }
.hotel-btn-primary{ background:linear-gradient(135deg,#2478ff,#32c9ff); color:#fff; }
.hotel-btn-secondary{ background:linear-gradient(135deg,#2478ff,#32c9ff); color:#fff; }

.reservation-section{
  color:#071832;
  padding:4.5rem 1.5rem;
}

.reservation-wrap{
  width:min(1180px,100%);
  margin:0 auto;
  position:relative;
  z-index:1;
}

.reservation-heading{
  max-width:680px;
  margin:0 auto 2.4rem;
  text-align:center;
}

.reservation-heading span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:2rem;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  background:rgba(36,120,255,0.1);
  color:#1674e8;
  font-size:0.85rem;
  font-weight:800;
}

.reservation-heading h2{
  margin:0.8rem 0 0;
  font-size:clamp(2rem,3vw,3.1rem);
  line-height:1.08;
}

.reservation-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}

.reservation-step{
  position:relative;
  padding:2rem;
  border:1px solid rgba(22,116,232,0.12);
  border-radius:1.25rem;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  box-shadow:0 20px 48px rgba(18,48,91,0.08);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.reservation-step:hover{
  transform:translateY(-6px);
  border-color:rgba(22,116,232,0.28);
  box-shadow:0 28px 68px rgba(18,48,91,0.14);
}

.step-title{
  display:flex;
  align-items:center;
  gap:0.9rem;
}

.step-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  min-width:4.3rem;
  height:3.4rem;
  padding:0 0.7rem;
  border-radius:999px;
  background:linear-gradient(135deg,#2478ff,#32c9ff);
  color:#fff;
  font-weight:900;
  box-shadow:0 14px 30px rgba(31,136,255,0.28);
}

.step-icon span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.65rem;
  height:1.65rem;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
}

.step-icon i{
  font-size:1rem;
}

.reservation-step h3{
  margin:0;
  color:#071832;
  font-size:1.35rem;
  line-height:1.2;
}

.reservation-step p{
  margin:0.75rem 0 0;
  color:#52627a;
  font-weight:600;
  line-height:1.7;
}

.cta-section{
  padding:4.5rem 1.5rem;
  color:#fff;
}

.cta-wrap{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:2rem;
  align-items:center;
  padding:3rem;
  border-radius:1.6rem;
  background:
    linear-gradient(135deg, rgba(6, 30, 76, 0.96) 0%, rgba(13, 89, 179, 0.94) 58%, rgba(45, 190, 255, 0.9) 100%);
  box-shadow:0 30px 90px rgba(7, 30, 72, 0.24);
  overflow:hidden;
  position:relative;
  z-index:1;
}

.cta-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.16), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,0.18), transparent 30%);
  pointer-events:none;
}

.cta-content,
.cta-actions{
  position:relative;
  z-index:1;
}

.cta-content span{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  min-height:2rem;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  background:rgba(255,255,255,0.16);
  color:#fff;
  font-size:0.85rem;
  font-weight:800;
}

.cta-content h2{
  margin:1rem 0 0;
  max-width:720px;
  font-size:clamp(2.1rem,3.8vw,4rem);
  line-height:1.05;
}

.cta-content p{
  margin:1rem 0 0;
  max-width:680px;
  color:rgba(255,255,255,0.86);
  font-weight:600;
  line-height:1.75;
}

.cta-actions{
  display:grid;
  gap:0.9rem;
}

.cta-contact{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-height:3.7rem;
  padding:0.85rem 1rem;
  border-radius:1rem;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(10px);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.cta-contact:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.2);
  box-shadow:0 18px 40px rgba(0, 22, 58, 0.18);
}

.cta-contact i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:#fff;
  color:#1674e8;
}

.site-footer{
  background:#061e4c;
  color:#fff;
  padding:3.2rem 1.5rem 1.4rem;
}

.footer-wrap{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1.4fr auto;
  gap:2rem;
  align-items:start;
}

.footer-logo{
  display:inline-flex;
  align-items:center;
  width:88px;
  padding:0.45rem;
  border-radius:1rem;
  background:rgba(255,255,255,0.1);
}

.footer-logo img{
  width:100%;
  height:auto;
}

.footer-brand p{
  margin:1rem 0 0;
  max-width:20rem;
  color:rgba(255,255,255,0.78);
  font-weight:600;
  line-height:1.7;
}

.footer-info{
  display:grid;
  gap:0.8rem;
}

.footer-info a{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  color:rgba(255,255,255,0.86);
  font-weight:700;
  line-height:1.5;
  transition:color .2s ease;
}

.footer-info a:hover,
.footer-bottom a:hover{
  color:#67b0ff;
}

.footer-info i{
  color:#67b0ff;
  min-width:1.1rem;
  margin-top:0.2rem;
}

.footer-socials{
  display:flex;
  gap:0.75rem;
}

.footer-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.8rem;
  height:2.8rem;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  transition:transform .2s ease, background .2s ease;
}

.footer-socials a:hover{
  transform:translateY(-2px);
  background:#1674e8;
}

.footer-bottom{
  width:min(1180px,100%);
  margin:2.2rem auto 0;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,0.14);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(255,255,255,0.68);
  font-size:0.92rem;
  font-weight:600;
}

.footer-bottom p{
  margin:0;
}

.footer-bottom a{
  color:#fff;
  transition:color .2s ease;
}

.hotel-detail-page{
  background:#d8f1ff;
  background-image:linear-gradient(180deg,#e9f8ff 0%,#ccecff 46%,#e9f8ff 100%);
  color:#071832;
}

.hotel-detail-hero{
  min-height:86vh;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background-image:
    linear-gradient(90deg, rgba(2, 12, 36, 0.9) 0%, rgba(4, 21, 58, 0.62) 48%, rgba(4, 17, 43, 0.28) 100%),
    var(--hotel-cover, url("https://cdn.halalstatic.com/2018%2F11%2F01%2F16%2F16%2F09%2F322b381e-f20e-4e1e-b2b8-9d1c3147bc1a%2F35506_IFGohZpMRBem9ish304SrQ.jpg?fit=bounds&format=jpg&width=1280"));
  background-size:cover;
  background-position:center;
}

.hotel-detail-nav{
  position:relative;
  z-index:1;
}

.hotel-detail-hero-inner{
  width:min(1180px,100%);
  margin:auto;
  position:relative;
  z-index:1;
  padding:5rem 0 3rem;
}

.hotel-detail-copy{
  max-width:760px;
}

.back-link,
.hotel-detail-badges span,
.section-pill,
.hotel-detail-heading span{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border-radius:999px;
  font-weight:800;
}

.back-link{
  color:#fff;
  margin-bottom:1.2rem;
}

.hotel-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
  margin-bottom:1.2rem;
}

.hotel-detail-badges span{
  min-height:2.35rem;
  padding:0.55rem 0.9rem;
  background:rgba(255,255,255,0.13);
  color:#fff;
  backdrop-filter:blur(8px);
}

.hotel-detail-badges i{
  color:#67b0ff;
}

.hotel-detail-copy h1{
  margin:0;
  color:#fff;
  font-size:clamp(3rem,7vw,6rem);
  line-height:0.96;
  text-shadow:0 18px 42px rgba(0, 8, 28, 0.55);
}

.hotel-detail-copy p{
  margin:1.2rem 0 0;
  max-width:680px;
  color:rgba(255,255,255,0.88);
  font-size:1.08rem;
  line-height:1.85;
  font-weight:600;
}

.hotel-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.hotel-detail-section{
  position:relative;
  padding:4.5rem 1.5rem;
}

.hotel-detail-wrap{
  width:min(1180px,100%);
  margin:0 auto;
}

.hotel-gallery{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-auto-rows:180px;
  gap:0.8rem;
}

.gallery-item{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:1rem;
}

.hotel-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:1rem;
  box-shadow:0 18px 42px rgba(18,48,91,0.12);
  transition:transform .28s ease, filter .28s ease;
}

.gallery-item:hover img,
.gallery-item:focus img{
  transform:scale(1.04);
  filter:saturate(1.08);
}

.gallery-item:focus{
  outline:3px solid rgba(22,116,232,0.38);
  outline-offset:3px;
}

.hotel-gallery .gallery-main{
  grid-row:span 2;
}

.hotel-detail-grid{
  display:grid;
  grid-template-columns:1.35fr 0.85fr;
  gap:1.25rem;
}

.hotel-detail-card,
.feature-card{
  border:1px solid rgba(22,116,232,0.12);
  border-radius:1.25rem;
  background:rgba(255,255,255,0.9);
  box-shadow:0 20px 54px rgba(18,48,91,0.1);
}

.hotel-detail-card{
  padding:2rem;
}

.section-pill,
.hotel-detail-heading span{
  min-height:2rem;
  padding:0.4rem 0.8rem;
  background:rgba(36,120,255,0.1);
  color:#1674e8;
  font-size:0.85rem;
}

.hotel-detail-card h2,
.hotel-detail-heading h2{
  margin:0;
  color:#071832;
  line-height:1.1;
}

.hotel-overview h2{
  margin-top:1rem;
  font-size:clamp(2rem,3vw,3rem);
}

.hotel-detail-card h2 i{
  color:#1674e8;
  margin-right:0.4rem;
}

.hotel-detail-card p{
  color:#52627a;
  font-weight:600;
  line-height:1.75;
}

.hotel-detail-card ul{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  gap:0.8rem;
}

.hotel-detail-card li{
  color:#1d3558;
  font-weight:700;
  line-height:1.55;
}

.hotel-quick-facts li{
  display:flex;
  gap:0.75rem;
}

.hotel-quick-facts i{
  color:#1674e8;
  min-width:1.15rem;
  margin-top:0.2rem;
}

.hotel-detail-heading{
  max-width:760px;
  margin:0 auto 2rem;
  text-align:center;
}

.hotel-detail-heading h2{
  margin:0.85rem auto 0;
  font-size:clamp(2rem,3.2vw,3.4rem);
  max-width:720px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.feature-card{
  padding:1.5rem;
  transition:transform .24s ease, box-shadow .24s ease;
}

.feature-card:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 70px rgba(18,48,91,0.16);
}

.feature-card > i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border-radius:50%;
  background:linear-gradient(135deg,#2478ff,#32c9ff);
  color:#fff;
  box-shadow:0 14px 30px rgba(31,136,255,0.28);
}

.feature-card h3{
  margin:1rem 0 0;
  color:#071832;
  font-size:1.15rem;
}

.feature-card p{
  margin:0.65rem 0 0;
  color:#52627a;
  font-weight:600;
  line-height:1.65;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.inquiry-modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  padding:1.25rem;
  align-items:center;
  justify-content:center;
}

.inquiry-modal.is-open{
  display:flex;
}

.inquiry-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3, 13, 34, 0.72);
  backdrop-filter:blur(8px);
}

.inquiry-dialog{
  position:relative;
  z-index:1;
  width:min(860px,100%);
  max-height:min(92vh,900px);
  overflow:auto;
  border-radius:1.35rem;
  background:#fff;
  color:#071832;
  padding:2rem;
  box-shadow:0 34px 90px rgba(0, 16, 45, 0.34);
}

.modal-close{
  position:absolute;
  top:1rem;
  right:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border:0;
  border-radius:50%;
  background:#eef5ff;
  color:#1674e8;
  cursor:pointer;
}

.modal-heading{
  max-width:640px;
  padding-right:2rem;
}

.modal-heading span{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  min-height:2rem;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  background:rgba(36,120,255,0.1);
  color:#1674e8;
  font-size:0.85rem;
  font-weight:800;
}

.modal-heading h2{
  margin:0.85rem 0 0;
  font-size:clamp(1.8rem,3vw,2.7rem);
  line-height:1.08;
}

.modal-heading p{
  margin:0.75rem 0 0;
  color:#52627a;
  font-weight:600;
  line-height:1.65;
}

.inquiry-form{
  display:grid;
  gap:1.1rem;
  margin-top:1.5rem;
}

.hotel-select-group{
  margin:0;
}

.hotel-select-label{
  display:block;
  margin-bottom:0.45rem;
  color:#071832;
  font-weight:800;
}

.hotel-multiselect{
  position:relative;
}

.hotel-select-toggle{
  width:100%;
  min-height:3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border:1px solid rgba(22,116,232,0.18);
  border-radius:0.9rem;
  background:#f8fbff;
  color:#071832;
  padding:0.7rem 0.9rem;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.hotel-select-toggle span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hotel-select-toggle:focus{
  outline:none;
  border-color:#1674e8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(22,116,232,0.12);
}

.hotel-select-toggle i{
  color:#1674e8;
  transition:transform .2s ease;
}

.hotel-multiselect.is-open .hotel-select-toggle i{
  transform:rotate(180deg);
}

.hotel-options{
  position:absolute;
  top:calc(100% + 0.5rem);
  left:0;
  right:0;
  z-index:4;
  display:none;
  max-height:15rem;
  overflow:auto;
  padding:0.4rem;
  border-radius:0.9rem;
  background:#fff;
  border:1px solid rgba(22,116,232,0.16);
  box-shadow:0 22px 54px rgba(18,48,91,0.16);
  transition:box-shadow .2s ease;
}

.hotel-multiselect.is-open .hotel-options{
  display:grid;
  gap:0.3rem;
}

.hotel-options.has-error{
  box-shadow:0 0 0 4px rgba(225, 56, 56, 0.16);
}

.hotel-option{
  display:flex;
  align-items:center;
  gap:0.5rem;
  min-height:2.25rem;
  padding:0.45rem 0.6rem;
  border-radius:0.65rem;
  background:#f8fbff;
  color:#1d3558;
  font-size:0.86rem;
  font-weight:800;
  cursor:pointer;
  transition:background .2s ease;
}

.hotel-option:hover{
  background:#eef5ff;
}

.hotel-option input{
  accent-color:#1674e8;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.inquiry-form label{
  display:grid;
  gap:0.45rem;
  color:#1d3558;
  font-weight:800;
}

.inquiry-form input,
.inquiry-form textarea{
  width:100%;
  border:1px solid rgba(22,116,232,0.18);
  border-radius:0.9rem;
  background:#f8fbff;
  color:#071832;
  padding:0.9rem 1rem;
  font:inherit;
  font-weight:600;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus{
  border-color:#1674e8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(22,116,232,0.12);
}

.child-ages{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.85rem;
}

.modal-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.7rem;
  min-height:3.5rem;
  border:0;
  border-radius:1rem;
  background:linear-gradient(135deg,#2478ff,#32c9ff);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.modal-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(31,136,255,0.26);
}

.modal-submit:disabled{
  cursor:not-allowed;
  opacity:0.68;
  transform:none;
  box-shadow:none;
}

.form-status{
  display:none;
  margin:0;
  padding:0.85rem 1rem;
  border-radius:0.9rem;
  font-weight:800;
  line-height:1.5;
}

.form-status.is-loading,
.form-status.is-success,
.form-status.is-error{
  display:block;
}

.form-status.is-loading{
  background:#eef5ff;
  color:#1d5fd1;
}

.form-status.is-success{
  background:#e8f8ef;
  color:#0c6b36;
}

.form-status.is-error{
  background:#fff0f0;
  color:#b42318;
}

body.modal-open{
  overflow:hidden;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
}

.gallery-lightbox.is-open{
  display:flex;
}

.gallery-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3, 13, 34, 0.82);
  backdrop-filter:blur(8px);
}

.gallery-lightbox-dialog{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-lightbox-dialog img{
  max-width:100%;
  max-height:84vh;
  border-radius:1rem;
  box-shadow:0 34px 90px rgba(0, 16, 45, 0.34);
}

.gallery-lightbox-close,
.gallery-lightbox-arrow{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#1674e8;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(0, 16, 45, 0.22);
}

.gallery-lightbox-close{
  top:-1rem;
  right:-1rem;
  width:2.7rem;
  height:2.7rem;
}

.gallery-lightbox-arrow{
  width:3.2rem;
  height:3.2rem;
  top:50%;
  transform:translateY(-50%);
}

.gallery-lightbox-prev{
  left:-1.6rem;
}

.gallery-lightbox-next{
  right:-1.6rem;
}

@media (max-width:960px){ .hero-content{ grid-template-columns:1fr; } .hero-panel{ order:-1; } }
@media (max-width:1100px){
  .hotels-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .reservation-steps{ grid-template-columns:1fr; }
  .cta-wrap{ grid-template-columns:1fr; }
  .footer-wrap{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .child-ages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hotel-detail-grid,
  .info-grid{ grid-template-columns:1fr; }
  .hotel-gallery{ grid-template-columns:1fr 1fr; }
  .hotel-gallery .gallery-main{ grid-column:span 2; }
}
@media (max-width:720px){
  .hero{ padding:1rem; }
  .hero-header{ justify-content:center; padding:0.75rem 1rem; }
  .hero-nav{ display:none; }
  .hero-copy h1{ font-size:clamp(2rem,10vw,3.4rem); }
  .hero-actions{ flex-direction:column; width:100%; }
  .btn{ width:100%; }
  .hotels-section{ padding:3rem 1rem 4rem; }
  .hotels-grid{ grid-template-columns:1fr; }
  .hotel-card, .hotel-card-content{ min-height:560px; }
  .hotel-card-content{ padding:1.25rem; }
  .hotel-card-top{ flex-direction:column; align-items:flex-start; }
  .hotel-card-bottom h2{ font-size:clamp(1.65rem,7vw,2rem); }
  .hotel-card-actions{ flex-direction:column; }
  .hotel-btn{ width:100%; }
  .reservation-section{ padding:3.5rem 1rem; }
  .reservation-step{ padding:1.5rem; }
  .step-title{ align-items:flex-start; }
  .cta-section{ padding:3rem 1rem; }
  .cta-wrap{ padding:2rem 1.25rem; border-radius:1.25rem; }
  .cta-content h2{ font-size:clamp(2rem,10vw,2.8rem); }
  .site-footer{ padding:2.6rem 1rem 1.2rem; }
  .inquiry-modal{ padding:0.75rem; }
  .inquiry-dialog{ padding:1.4rem; border-radius:1rem; }
  .form-grid,
  .child-ages{ grid-template-columns:1fr; }
  .hotel-options{
    position:static;
    margin-top:0.5rem;
    max-height:13rem;
    box-shadow:0 14px 34px rgba(18,48,91,0.12);
  }
  .hotel-detail-hero{ padding:1rem; min-height:78vh; }
  .hotel-detail-copy h1{ font-size:clamp(2.7rem,14vw,4rem); }
  .hotel-detail-actions{ flex-direction:column; }
  .hotel-detail-section{ padding:3rem 1rem; }
  .hotel-gallery{ grid-template-columns:1fr; grid-auto-rows:180px; }
  .hotel-gallery .gallery-main{ grid-column:auto; grid-row:span 1; }
  .feature-grid{ grid-template-columns:1fr; }
  .hotel-detail-card{ padding:1.5rem; }
  .gallery-lightbox-arrow{ width:2.7rem; height:2.7rem; }
  .gallery-lightbox-prev{ left:0.5rem; }
  .gallery-lightbox-next{ right:0.5rem; }
  .gallery-lightbox-close{ top:0.5rem; right:0.5rem; }
}