/* /assets/css/hotelsub.css
   HotelSub – Navy + Champagne theme (SubWorks)
*/

/* =======================
   TOKENS
======================= */
:root{
  --navy:#0F2A44;
  --navy-2:#143658;
  --champ:#C9A24D;
  --champ-2:#B8903F;

  --bg:#F4F6F8;
  --bg-2:#EAF0F6;
  --off:#F7F2E7;

  --text:#0B1B2A;
  --muted:#3B4C5E;

  --border: rgba(15,42,68,.10);
  --shadow: 0 16px 50px rgba(0,0,0,.10);
  --shadow-soft: 0 12px 36px rgba(0,0,0,.08);

  --radius: 20px;
  --radius-sm: 14px;
}

/* =======================
   BASE / RESETS
======================= */
html, body{ height:100%; }
body{
  background:#fff;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Stop “bootstrap blue links” vibe */
a{ color: var(--navy); text-decoration:none; }
a:hover{ color: var(--navy-2); text-decoration:none; }

::selection{ background: rgba(201,162,77,.35); }

/* nicer focus */
:focus-visible{
  outline: 3px solid rgba(201,162,77,.45);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =======================
   LAYOUT SECTIONS
======================= */
.section{ padding:72px 0; background:#fff; }
.section-muted{ padding:72px 0; background: var(--bg); }
.section-title{ font-weight:950; color:var(--text); letter-spacing:-0.01em; }
.section-sub{ color:var(--muted); opacity:.92; }

/* handy max widths */
.max-720{ max-width:720px; }
.max-900{ max-width:900px; }

/* =======================
   BUTTONS / PILLS
======================= */
.btn-deep{
  display:inline-block;
  background: var(--navy);
  color:#fff !important;
  border: none;
  padding:12px 20px;
  border-radius:12px;
  font-weight:900;
  box-shadow: 0 8px 30px rgba(15,42,68,.22);
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.btn-deep:hover{
  background: var(--navy-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 38px rgba(15,42,68,.24);
}

.btn-champ{
  display:inline-block;
  background: rgba(201,162,77,.20);
  border: 1px solid rgba(201,162,77,.32);
  color: var(--navy);
  padding:12px 18px;
  border-radius:12px;
  font-weight:900;
  transition: background .2s ease, transform .05s ease;
}
.btn-champ:hover{
  background: rgba(201,162,77,.28);
  transform: translateY(-1px);
}

.pill-link{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(15,42,68,.06);
  border: 1px solid rgba(15,42,68,.10);
  color: var(--navy);
  font-weight:900;
  transition: background .2s ease;
}
.pill-link:hover{
  background: rgba(15,42,68,.10);
  color: var(--navy);
}

/* =======================
   CARDS
======================= */
.card-qeld{
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
}
.chip{
  display:inline-block;
  background: rgba(201,162,77,.18);
  border: 1px solid rgba(201,162,77,.28);
  color: var(--navy);
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:900;
  margin-bottom:10px;
}
.icon-wrap{
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(201,162,77,.18);
  border: 1px solid rgba(201,162,77,.25);
  color: var(--navy);
  margin-bottom:10px;
  font-size:1.2rem;
}

/* =======================
   HERO (INDEX)
   (matches your screenshot structure)
======================= */
.hero-hotelsub{
  position:relative;
  padding:72px 0 84px;
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 55%, #fff 100%);
  overflow:hidden;
}
.hero-hotelsub::before{
  content:"";
  position:absolute;
  inset:auto -10% 0 -10%;
  height:240px;
  background: radial-gradient(40% 60% at 70% 30%, rgba(15,42,68,.14) 0%, rgba(15,42,68,0) 70%);
  filter: blur(26px);
  pointer-events:none;
}
.hero-title{
  font-size: clamp(2.2rem, 2.4rem + 1.6vw, 4rem);
  line-height: 1.05;
  font-weight: 950;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing:-0.02em;
}
.hero-sub{
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 18px;
  max-width: 720px;
}
.hero-list{
  list-style:none;
  padding:0;
  margin:0 0 22px 0;
}
.hero-list li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.4rem 0;
  color: var(--text);
}
.hero-list .check{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background: rgba(201,162,77,.20);
  border: 1px solid rgba(201,162,77,.25);
  color: var(--navy);
  font-weight: 900;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* The right-side “calculator” card */
.hero-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 20px 60px rgba(15,42,68,.16);
  color: var(--text);
}
.hero-card .card-title{
  font-weight: 950;
  color: var(--text);
}

/* Range slider look */
.range-wrap input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  background: rgba(15,42,68,.18);
  outline:none;
}
.range-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background: var(--navy);
  border:3px solid rgba(201,162,77,.35);
  cursor:pointer;
}
.range-wrap input[type="range"]::-moz-range-thumb{
  width:28px;
  height:28px;
  border-radius:50%;
  background: var(--navy);
  border:3px solid rgba(201,162,77,.35);
  cursor:pointer;
}

.display-pair{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.big-number{
  font-size: clamp(1.8rem, 1.6rem + 1.2vw, 3rem);
  font-weight: 950;
  color: var(--navy);
}
.label{
  color: var(--muted);
  opacity: .9;
  font-size: .9rem;
}

/* Optional photo styling */
.hero-photo{
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(0,0,0,.12);
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* =======================
   NAVBAR (if you use same classes)
======================= */
header.header, header.header .navbar{
  border-bottom:none !important;
  box-shadow:none !important;
}
.navbar-nav .nav-link{
  color: var(--navy) !important;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  transition: background .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  background: rgba(15,42,68,.08);
  color: var(--navy) !important;
}

/* =======================
   ACCORDION (HotelSub style)
======================= */
.hotelsub-accordion .accordion-item{
  background: var(--off);
  border:0;
  border-radius: 14px;
  margin-bottom: 12px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.hotelsub-accordion .accordion-button{
  background: var(--off);
  color: var(--text);
  box-shadow:none;
  font-weight: 900;
}
.hotelsub-accordion .accordion-button:not(.collapsed){
  background: #F0E6D4;
  color: var(--text);
}
.hotelsub-accordion .accordion-body{
  color: var(--muted);
}

/* =======================
   TOP BAR (Launch offer)
======================= */
.offer-bar{
  background: var(--navy);
  color:#fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.offer-bar .code-badge{
  display:inline-block;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 900;
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 991.98px){
  .hero-hotelsub{ padding:56px 0 64px; }
  .hero-card{ margin-top: 10px; }
}

.module-card{
  background: var(--off);
  border-radius:20px;
  padding:22px;
  box-shadow:0 16px 50px rgba(0,0,0,.08);
  color:var(--text);
  border:1px solid rgba(15,42,68,.08);
}

.mini-list{
  list-style:none;
  padding:0;
  margin:12px 0 0 0;
  color:var(--muted);
}
.mini-list li{ margin:.35rem 0; }

.logo-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}
.logo-pill{
  background: rgba(15,42,68,.06);
  border:1px solid rgba(15,42,68,.08);
  color: var(--navy);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
}