/* ========== Global Styles for Triz Hotel ========== */
:root{
  --bg: #fcfcf7;
  --paper: #ffffff;
  --ink: #003011;
  --muted: #5b6474;
  --brand: #2baebd; /* ocean blue */
  --brand-2: #0ea584; /* teal accent */
  --gold: #d9b66d;
  --beige: #be924e;
  --beige-2: #673503;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

/* Containers & Grid */
.container{ width:min(1120px, 92vw); margin-inline:auto; }
.section{ padding: clamp(48px, 8vw, 96px) 0; }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }
.span-12{ grid-column: 1 / -1; }
@media (max-width: 860px){
  .grid{ grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .span-6{ grid-column: 1 / -1; }
  .span-4{ grid-column: 1 / -1; }
}

/* Headings */
.h1{ font-size: clamp(36px, 6vw, 64px); line-height:1.05; letter-spacing: -0.02em; font-weight: 800; }
.h2{ font-size: clamp(28px, 4.8vw, 40px); line-height:1.1; font-weight: 750; }
.h3{ font-size: clamp(20px, 3.2vw, 24px); font-weight: 700; }
.lead{ font-size: clamp(16px, 2.2vw, 18px); color: var(--muted); }
.highlight{ font-size: clamp(16px, 2.2vw, 18px); color: var(--paper); }
/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-radius: 999px; border:1px solid transparent; background: var(--brand); color:white; text-decoration:none; font-weight:700; box-shadow: var(--shadow); }
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{ background: transparent; color: var(--brand); border-color: var(--brand); }
.btn.gold{ background: var(--gold); color:#2b2b2b; }

/* Cards */
.card{ background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card img{ width:100%; height: 240px; object-fit: cover; display:block; }
.card .body{ padding: 18px 18px 20px; }

/* Navbar */
/* NAVBAR + DROPDOWN (mobile) */
.nav{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.nav-inner{ position: relative; display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none; color:var(--ink); }
.brand-dot{ width:10px; height:10px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px rgba(43,139,189,.18); }

/* Desktop */
.nav-links{ display:flex; gap:1rem; align-items:center; }
.nav-links a{ text-decoration:none; color:var(--ink); padding:.5rem .8rem; border-radius:10px; }
.nav-links a:hover{ background: rgba(2,6,23,.06); }
.menu-toggle{ display:none; background:transparent; border:0; font-size:22px; }

/* Mobile: dropdown popover under the toggle */
@media (max-width: 860px){
  .menu-toggle{ display:block; }

  /* hide default row */
  .nav-links{ display:none; }

  /* dropdown panel */
  .nav-links.open{
    display:flex;
    position:absolute;
    right:12px;
    top:68px;              /* sits just under the bar */
    z-index:110;           /* above hero */
    flex-direction:column;
    min-width:56vw;
    background:#ffffff;    /* << white background for visibility */
    border:1px solid rgba(2,6,23,.08);
    border-radius:12px;
    box-shadow: 0 16px 40px rgba(16,24,40,.14);
    padding:10px;
  }

  .nav-links.open a{
    width:100%;
    padding:.7rem .9rem;
    border-radius:10px;
  }
  .nav-links.open a:hover{ background: rgba(2,6,23,.06); }
}


/* Hero */
.hero{ position: relative; min-height: clamp(560px, 70vh, 760px); display:grid; place-items:center; color:white; }
.hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(4,18,35,.35), rgba(4,18,35,.6)); }
.hero-inner{ position:relative; z-index:2; text-align:left; width:min(980px, 92vw); }
.hero .eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.85rem; opacity:.9; }
.hero p{ max-width: 720px; }
.hero-actions{ display:flex; gap: .8rem; flex-wrap:wrap; margin-top: 1rem; }

/* Booking Bar */
.booking{ position:relative; margin-top:-42px; z-index:3; align-items: center; }
.booking .bar{ background:white; border-radius: 14px; box-shadow: var(--shadow); padding: 14px; display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; }
.booking .bar label{ font-size:.8rem; color:var(--muted); display:block; margin-bottom:4px; }
.booking .bar input, .booking .bar select{ width:100%; padding:.7rem .8rem; border-radius: 10px; border:1px solid #e5e7eb; }
.booking .bar .actions{ display:flex; align-items:flex-end; }
@media (max-width: 860px){
  .booking{ margin-top: -26px; }
  .booking .bar{ grid-template-columns: repeat(2, 1fr); }
}

/* Sections */
.section-head{ margin-bottom: 18px; }
.muted{ color: var(--muted); }

/* Amenities list */
.list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 18px; }
.list li{ display:flex; gap:.6rem; align-items:flex-start; }
.list .dot{ width:8px; height:8px; margin-top:.4rem; border-radius:999px; background: var(--brand-2); box-shadow: 0 0 0 4px rgba(14,165,165,.12); }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(20px); }
.reveal.show{ opacity:1; transform: translateY(0); transition: all .7s cubic-bezier(.22,1,.36,1); }

/* Footer */
.footer{ background:#003011; color:#c7feed; padding: 56px 0; margin-top: 56px; }
.footer a{ color:#e5e7eb; }
.footer-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.foot-brand{ grid-column: span 4; }
.foot-links{ grid-column: span 4; }
.foot-contact{ grid-column: span 4; }
@media (max-width: 860px){
  .foot-brand,.foot-links,.foot-contact{ grid-column: 1 / -1; }
}

/* Utility */
.eyebrow{ color: var(--gold); font-weight: 700; letter-spacing:.18em; text-transform: uppercase; }
.sep{ width:64px; height:4px; border-radius:3px; background: var(--brand); }
img.round{ border-radius: var(--radius); box-shadow: var(--shadow); }


/* Button refinements */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.15rem; border-radius: 14px; border:1px solid transparent; background: var(--brand); color:white; text-decoration:none; font-weight:700; box-shadow: var(--shadow); line-height:1; }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }
.btn.ghost{ background: transparent; color: var(--brand); border-color: rgba(43,139,189,.45); }
.btn.gold{ background: var(--gold); color:#2b2b2b; }
.btn-lg{ padding:1rem 1.25rem; font-size:1rem; border-radius:16px; }

.btn-group{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Navbar mobile dropdown */
@media (max-width: 860px){
  .nav-inner{ position: relative; }
  .nav-links{ position: absolute; right: 12px; top: 68px; background: #fff; border:1px solid rgba(2,6,23,.08); border-radius: 12px; box-shadow: var(--shadow); padding:10px; display:none; flex-direction:column; min-width: 56vw; }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.7rem .9rem; border-radius:10px; }
}

/* Modal */
.modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index: 100; }
.modal.show{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(3,10,23,.55); }
.modal-dialog{ position:relative; z-index:2; background:#fff; border-radius: 16px; box-shadow: var(--shadow); width:min(520px, 90vw); padding: 22px; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.modal-title{ font-weight:800; }
.modal-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; margin-top: 8px; }
.modal-close{ background:transparent; border:0; font-size:22px; cursor:pointer; }


/* Amenities  */
/* Amenities section */
.amenities-grid{ align-items:start; column-gap:28px; row-gap:22px; }
.amenities-photo{ width:100%; height:360px; object-fit:cover; box-shadow:var(--shadow); border-radius:var(--radius); }
.amenities-card{ padding:18px; }

.amenity-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px 14px;
  margin-top:8px;
}
.amenity-tile{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow);
}
.amenity-tile b{ display:block; margin-bottom:2px; }
.small{ font-size:.9rem; line-height:1.45; }

/* Icon chips (brand palette) */
.icon-circle{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  font-size:16px; color:#0a1a2b;
}
.icon-circle.brand{
  background: color-mix(in oklab, var(--brand) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 40%, transparent);
  color:#063e34;
}
.icon-circle.teal{
  background: color-mix(in oklab, var(--brand-2) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-2) 42%, transparent);
  color:#064238;
}
.icon-circle.gold{
  background: color-mix(in oklab, var(--gold) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent);
  color: var(--ink);
}

/* Responsive */
@media (max-width: 860px){
  .amenities-photo{ height:240px; }
  .amenity-grid{ grid-template-columns: 1fr; }
  .amenity-tile{ grid-template-columns:38px 1fr; }
  .icon-circle{ width:38px; height:38px; font-size:15px; }
}

/* Transfers layout */
.transfers-grid{
  align-items: start;
  column-gap: 28px;
  row-gap: 22px;
}
.bullet-list{ margin-top: 8px; }
.transfer-badges{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:10px;
}
.badge{
  display:inline-flex; align-items:center;
  padding:.38rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid rgba(2,6,23,.08);
  background:#fff; color: var(--ink);
  box-shadow: var(--shadow);
}
.badge.ghost{
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border-color: color-mix(in oklab, var(--brand) 28%, transparent);
  color: var(--ink);
}

/* Image */
.transfer-figure{ margin:0 0 12px 0; }
.transfer-img{
  width:100%; height: 260px; object-fit:cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Card */
.transfer-card{ padding: 16px; }
.transfer-title{ margin: 0 0 8px; text-transform: capitalize; }

.transfer-fields{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
}
.transfer-fields .field{ grid-column: span 3; }
.transfer-fields label{
  font-size:.8rem; color: var(--muted); margin-bottom:4px; display:block;
}
.transfer-fields input{
  width:100%; padding:.7rem .8rem;
  border-radius:10px; border:1px solid #e5e7eb; background:#fff;
}
.transfer-fields .actions{
  grid-column: 1 / -1;
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-start;
}

/* Responsive */
@media (max-width: 860px){
  .transfer-img{ height: 220px; }
  .transfer-fields{ grid-template-columns: repeat(2, 1fr); }
  .transfer-fields .field{ grid-column: span 1; }
  .transfer-fields .actions{ justify-content:center; }
}

.transfer-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

@media (max-width: 860px){
  .transfer-img{ height: 240px; }
}
/* Grid version of room policies */
.room-policies-grid{
  padding: 18px;
}

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

.policy-tile{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: var(--shadow);
}

.icon-circle{
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px;
  color: #0a1a2b;
}

/* color accents (using your tokens) */
.icon-circle.brand{
  background: rgba(43,139,189,.18);
  box-shadow: inset 0 0 0 1px rgba(43,139,189,.35);
  color: #0b3750;
}
.icon-circle.teal{
  background: rgba(14,165,165,.18);
  box-shadow: inset 0 0 0 1px rgba(14,165,165,.35);
  color: #0a3b3b;
}
.icon-circle.gold{
  background: rgba(217,182,109,.22);
  box-shadow: inset 0 0 0 1px rgba(217,182,109,.45);
  color: #5b460e;
}

.tile-body .small{ font-size: .9rem; }

/* badges with soft gold theme */
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:6px; }
.badge{
  display:inline-flex; align-items:center;
  padding:.38rem .6rem;
  border-radius: 999px;
  font-size:.85rem;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.badge.gold-soft{
  background: #fff7e6;                  /* soft gold background */
  border-color: rgba(217,182,109,.55);
  color: #6b4e00;
}
/*ROOMS PAGE*/
/* Booking card – tidy layout & spacing */
.booking-card{
  padding: 16px;
  margin-top: 16px;
}

.booking-card .booking-fields{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
}

.booking-card .field{
  grid-column: span 2;
}

.booking-card label{
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}

.booking-card input,
.booking-card select{
  width: 100%;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* CTA row spans full width and aligns nicely */
.booking-card .actions{
  grid-column: 1 / -1;
  display: flex;
  gap: .6rem;
  justify-content: flex-end; /* center on mobile via media query */
}

/* Mobile tweaks */
@media (max-width: 860px){
  .booking-card .booking-fields{
    grid-template-columns: repeat(2, 1fr);
  }
  .booking-card .field{ grid-column: span 1; }
  .booking-card .actions{
    justify-content: center;
  }
}

/* Facilities grid (reuses the same visual language as policies) */
.room-facilities-grid{ padding: 18px; }

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

.facility-tile{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: var(--shadow);
}

.icon-circle{
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px;
  color: #0a1a2b;
}
.icon-circle.brand{
  background: rgba(43,139,189,.18);
  box-shadow: inset 0 0 0 1px rgba(43,139,189,.35);
  color: #0b3750;
}
.icon-circle.teal{
  background: rgba(14,165,165,.18);
  box-shadow: inset 0 0 0 1px rgba(14,165,165,.35);
  color: #0a3b3b;
}
.icon-circle.gold{
  background: rgba(217,182,109,.22);
  box-shadow: inset 0 0 0 1px rgba(217,182,109,.45);
  color: #5b460e;
}

.tile-body .small{ font-size: .9rem; }

@media (max-width: 860px){
  .facility-grid{ grid-template-columns: 1fr; }
  .facility-tile{ grid-template-columns: 44px 1fr; }
  .icon-circle{ width:44px; height:44px; font-size:16px; }
}

/* responsive: collapse to 1 column */
@media (max-width: 860px){
  .policy-grid{ grid-template-columns: 1fr; }
  .policy-tile{ grid-template-columns: 44px 1fr; }
  .icon-circle{ width:44px; height:44px; font-size:16px; }
}

/* FAQ */
.faq{
  max-width: 920px;
  margin: 0 auto;
}
.faq-item{
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0;
  margin: 10px 0;
  overflow: hidden;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span{
  display:inline-block;
  padding-right: 8px;
}
.faq-item summary::after{
  content: "▾";
  font-size: 18px;
  transition: transform .25s ease;
  opacity: .8;
}
.faq-item[open] summary::after{
  transform: rotate(180deg);
}
.faq-item .answer{
  padding: 0 18px 16px 18px;
  color: var(--muted);
  border-top: 1px solid rgba(2,6,23,.06);
}
.faq a{ color: var(--brand); text-decoration: none; }
.faq a:hover{ text-decoration: underline; }