/* ======= HERO (Section One) ======= */
.hero{position:relative;min-height:100vh; /* section height = full viewport height */}
.hero-media{position:absolute;inset:0;overflow:hidden;border-radius:0}
.hero-media video,.hero-media .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(105%) contrast(102%)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(1200px 600px at 65% 40%,rgba(0,0,0,.15),rgba(0,0,0,.55) 55%, rgba(0,0,0,.76));}

.hero-content{position:relative;z-index:2;display:grid;place-items:center;min-height:100vh;padding:7rem 0 5rem}
.hero-card{width:min(980px,92%);background:rgba(21,21,21,.55);backdrop-filter:blur(7px);border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);padding:2rem;transform: translateY(0);transition: transform 0.2s ease-out;}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
.hero h1{font-size:clamp(2.4rem,5vw,4.2rem);margin-top:.5rem}
.hero p{font-size:1.05rem;margin:.8rem 0 1.4rem}

.booking{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:1.2rem}
.booking .field{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.8rem .9rem}
.booking label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.35rem}
.booking input,.booking select{width:100%;background:transparent;border:0;outline:none;color:var(--text);font:inherit}
.booking button{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#0c0b09;border:0;border-radius:12px;font-weight:600}
.subtle{font-size:.85rem;color:var(--muted)}

@media (max-width: 960px){
  .booking{grid-template-columns:1fr 1fr}
  .booking button{grid-column:1/-1}
}

/* ======= HIGHLIGHTS ======= */
section{padding:4.6rem 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:1.6rem}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.76rem}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

.highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06)}
.tile img{height:220px;width:100%;object-fit:cover;opacity:.9;transition:transform .5s ease}
.tile:hover img{transform:scale(1.05)}
.tile .info{padding:1rem 1rem 1.3rem}
.tile .tag{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#0e0d0b;background:linear-gradient(180deg,var(--gold),var(--gold-2));padding:.35rem .5rem;border-radius:999px}

@media (max-width: 1100px){
  .highlights{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px){
  .highlights{grid-template-columns:1fr}
}

/* ======= SUITES ======= */
.suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.suite{background:linear-gradient(180deg,#141414,#121212);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.suite-media{position:relative}
.badge{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:999px;padding:.38rem .6rem;font-size:.72rem}
.suite-body{padding:1.1rem}
.price{color:var(--gold)}

@media (max-width: 1000px){
  .suite-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .suite-grid{grid-template-columns:1fr}
}

/* ======= TOURS ======= */
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tour{display:grid;grid-template-rows:auto 1fr;gap:0;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.tour img{width:100%;height:250px;object-fit:cover;object-position:center}
.tour-body{padding:1.1rem}
.pill{display:inline-flex;gap:.35rem;align-items:center;background:rgba(200,169,104,.12);border:1px solid rgba(200,169,104,.35);color:var(--gold);padding:.3rem .55rem;border-radius:999px;font-size:.72rem;margin-bottom:.6rem}

@media (max-width: 1000px){
  .tour-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .tour-grid{grid-template-columns:1fr}
}

/* ======= GALLERY ======= */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:240px;gap:12px}
.gallery .g{position:relative;border-radius:16px;overflow:hidden}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery .g:hover img{transform:scale(1.05)}
.gallery .g:nth-child(1){grid-row:span 2}

@media (max-width: 900px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .gallery .g:nth-child(1){grid-row:span 1}
}
@media (max-width: 600px){
  .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
}

/* ======= Calendar styles ======= */
.calendar-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(21,21,21,.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
  display: none;
  z-index: 1000;
  width: min(500px, 90%);
  box-shadow: 0 15px 40px rgba(0,0,0,.6);
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.calendar-nav {
  display: flex;
  gap: 8px;
}
.calendar-nav button {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar-nav button:hover {
  background: rgba(255,255,255,.2);
}
.calendar-month {
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.calendar-day-name {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.calendar-date {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.calendar-date:hover:not(.disabled):not(.booked) {
  background: rgba(255,255,255,.1);
}
.calendar-date.today {
  background: rgba(200,169,104,.15);
  border: 1px solid rgba(200,169,104,.3);
}
.calendar-date.selected {
  background: rgba(200,169,104,.35);
  color: #fff;
}
.calendar-date.disabled {
  color: rgba(255,255,255,.2);
  cursor: default;
}
.calendar-date.booked {
  color: var(--muted);
  cursor: not-allowed;
}
.calendar-date.booked::after {
  content: "×";
  position: absolute;
  font-size: 1.5rem;
  color: rgba(255, 80, 80, 0.7);
  font-weight: 700;
}
.calendar-date.in-range {
  background: rgba(200,169,104,.15);
}
.calendar-date.checkin {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.calendar-date.checkout {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.booking-toggle {
  text-align: center;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--gold);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  width: 100%;
  display: block;
}
.booking-toggle:hover {
  text-decoration: underline;
  color: var(--text);
}

/* Luxury scroll indicator */
.scroll-indicator {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid var(--gold);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  z-index: 50; /* Lower than mobile menu */
  opacity: 0.8;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-indicator.hidden {
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}

/* Hide scroll indicator on mobile devices */
@media (max-width: 768px) {
  .scroll-indicator {
    display: none;
  }
}

.scroll-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-top: 8px;
  animation: scrollAnimation 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollAnimation {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(25px); opacity: 0; }
  71% { transform: translateY(0); opacity: 0; }
  100% { opacity: 1; }
}

/* Calendar Selectors Styling Fix */
#monthSelector, #yearSelector {
  background: rgba(255,255,255,.1) !important;
  color: var(--text) !important;
}

#monthSelector option, #yearSelector option {
  background: #151515 !important;
  color: #f7f4ef !important;
}

/* Cross-browser select dropdown styling */
select::-webkit-scrollbar {
  width: 8px;
}

select::-webkit-scrollbar-track {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

select::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

select::-webkit-scrollbar-thumb:hover {
  background: var(--gold-2);
}