/* ==========================================================================
   Breeter Travel Express — Wireframe Screens (shared styles)
   Grayscale · browser-frame · responsive via container queries
   ========================================================================== */
:root{
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg:#cfcfca;
  --page:#ffffff;
  --ink:#1c1c1c;
  --ink-2:#555550;
  --ink-3:#888882;
  --ink-4:#aeaea8;
  --line:#1f1f1f;
  --line-2:#cbcbc6;
  --fill:#ffffff;
  --fill-2:#ececea;
  --fill-3:#e1e1dd;
  --fill-4:#d6d6d1;
  --r:8px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; padding:0;}
@media (max-width:640px){ body{padding:0;} }

/* ---------- page frame (full-bleed, like a real web app) ---------- */
.browser{background:var(--page);}

/* ---------- horizontal slider ---------- */
.slider{display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding-bottom:8px;}
.slider .slide{min-width:300px; flex:0 0 auto; scroll-snap-align:start;}
.arrow{width:42px; height:42px; border:2px solid var(--line); border-radius:50%; background:var(--fill); color:var(--ink); cursor:pointer; font-size:20px; display:grid; place-items:center; line-height:1; padding:0;}
.arrow:hover{background:var(--fill-2);}
.browser .bar{display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--fill-3); border-bottom:2px solid var(--line);}
.dots{display:flex; gap:6px;}
.dots i{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); display:block;}
.url{flex:1; min-width:60px; background:var(--fill); border:1.5px solid var(--line-2); border-radius:16px; padding:5px 14px; font-size:12px; color:var(--ink-2); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* device toggle */
.dev{display:flex; border:1.5px solid var(--line); border-radius:16px; overflow:hidden; font-size:11px; flex:none;}
.dev .dev-r{display:none;}
.dev label{padding:5px 12px; cursor:pointer; color:var(--ink-2); background:var(--fill); user-select:none;}
.dev label:first-of-type{border-right:1.5px solid var(--line-2);}
.browser:has(#d-desk:checked) label[for="d-desk"],
.browser:has(#d-mob:checked) label[for="d-mob"]{background:var(--ink); color:#fff;}
@media (max-width:560px){ .dev{display:none;} }

/* the viewport */
.viewport{background:var(--page); transition:max-width .25s ease; position:relative;}
.browser:has(#d-mob:checked) .viewport{max-width:412px; margin:0 auto; border-left:2px dashed var(--line-2); border-right:2px dashed var(--line-2);}

/* ---------- header / nav ---------- */
.hdr{position:relative; display:flex; align-items:center; gap:18px; padding:16px 32px; border-bottom:2px solid var(--line);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.3px; font-size:18px;}
.brand .logo{width:30px; height:30px; border:2px solid var(--ink); border-radius:7px; display:grid; place-items:center; font-size:14px;}
.nav{display:flex; align-items:center; gap:6px; margin-left:auto;}
.nav a{text-decoration:none; color:var(--ink-2); font-size:14px; font-weight:500; padding:8px 12px; border-radius:6px;}
.nav a:hover{background:var(--fill-2); color:var(--ink);}
.nav a.active{color:var(--ink); font-weight:700;}
.nav a.cta{border:2px solid var(--line); background:var(--ink); color:#fff; margin-left:6px;}
.nav-toggle{display:none;}
.burger{display:none; margin-left:auto; width:40px; height:38px; border:2px solid var(--line); border-radius:7px; align-items:center; justify-content:center; font-size:20px; cursor:pointer; background:var(--fill);}

/* ---------- generic layout ---------- */
.container{max-width:1140px; margin:0 auto; padding:34px 32px;}
.with-side{display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start;}
.with-side.left{grid-template-columns:260px 1fr;}
.section{padding:34px 32px;}
.row{display:flex; gap:16px;} .row.wrap{flex-wrap:wrap;} .row.ac{align-items:center;} .row.jc{justify-content:center;}
.stack{display:flex; flex-direction:column; gap:16px;}
.grid{display:grid; gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
.spacer{flex:1;}

/* ---------- wireframe primitives ---------- */
.card{background:var(--fill); border:2px solid var(--line); border-radius:var(--r);}
.card.soft{border-style:dashed; border-color:var(--line-2);}
.pad{padding:20px;}
.pad-sm{padding:14px;}
.ph{position:relative; background:var(--fill-2); border:2px dashed var(--line-2); border-radius:6px; overflow:hidden; min-height:60px; display:grid; place-items:center;}
.ph::before,.ph::after{content:""; position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;}
.ph::before{background:linear-gradient(to bottom right, transparent calc(50% - 1px), var(--line-2) 50%, transparent calc(50% + 1px));}
.ph::after{background:linear-gradient(to bottom left, transparent calc(50% - 1px), var(--line-2) 50%, transparent calc(50% + 1px));}
.ph > span{position:relative; z-index:1; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); background:var(--page); padding:2px 8px; border-radius:4px;}
.avatar{width:46px; height:46px; border-radius:50%; background:var(--fill-2); border:2px dashed var(--line-2);}

.sk{background:var(--fill-2); border-radius:4px; height:12px;}
.sk.h1{height:30px;} .sk.h2{height:20px;} .sk.h3{height:16px;}
.sk.w20{width:20%;} .sk.w30{width:30%;} .sk.w40{width:40%;} .sk.w50{width:50%;} .sk.w60{width:60%;} .sk.w70{width:70%;} .sk.w80{width:80%;} .sk.w90{width:90%;} .sk.w100{width:100%;}
.lines{display:flex; flex-direction:column; gap:9px;}

.h-xl{font-size:26px; font-weight:800; letter-spacing:-.4px;}
.h-lg{font-size:20px; font-weight:700;}
.h-md{font-size:16px; font-weight:700;}
.h-sm{font-size:13px; font-weight:600;}
.txt{font-size:13px; color:var(--ink-2); line-height:1.6;}
.muted{font-size:12px; color:var(--ink-3);}
.eyebrow{font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-3); font-weight:600;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:2px solid var(--line); border-radius:7px; background:var(--fill-2); padding:11px 20px; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; text-decoration:none;}
.btn.primary{background:var(--ink); color:#fff;}
.btn.block{width:100%;}
.btn.lg{padding:14px 30px; font-size:15px;}
.btn.sm{padding:8px 14px; font-size:12.5px;}

.field{display:flex; flex-direction:column; gap:6px;}
.field > label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-2);}
.input{border:2px solid var(--line); border-radius:7px; background:var(--fill); padding:11px 13px; font-size:13px; color:var(--ink-3); min-height:42px; display:flex; align-items:center; gap:8px;}
.input.area{min-height:84px; align-items:flex-start;}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 13px; border:2px solid var(--line); border-radius:20px; background:var(--fill); font-weight:600; color:var(--ink); white-space:nowrap;}
.pill.on{background:var(--ink); color:#fff;}
.pill.ghost{border-style:dashed; border-color:var(--line-2); color:var(--ink-3); font-weight:500;}
.tag{font-size:11px; padding:3px 9px; border:1.5px solid var(--line-2); border-radius:14px; color:var(--ink-2); background:var(--fill);}
.check{width:18px; height:18px; border:2px solid var(--line); border-radius:4px; flex:none;}
.check.on{background:var(--ink);}
.radio{width:18px; height:18px; border:2px solid var(--line); border-radius:50%; flex:none;}
.radio.on{box-shadow:inset 0 0 0 4px var(--page); background:var(--ink);}
.divider{height:2px; background:var(--line-2); border:none; margin:22px 0;}
.kv{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:9px 0; border-bottom:1px dashed var(--line-2);}
.kv:last-child{border-bottom:none;}
.kv b{font-weight:700;}
.badge-state{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:5px 12px; border:2px solid var(--line); border-radius:18px; background:var(--fill-2);}

/* hero */
.hero{position:relative; min-height:340px; display:grid; place-items:center; padding:30px; background:var(--fill-2); border-bottom:2px solid var(--line); overflow:hidden;}
.hero .ph-bg{position:absolute; inset:0; border:none; border-radius:0;}
.hero .inner{position:relative; z-index:1; width:100%; max-width:860px;}

/* search widget */
.widget{background:var(--page); border:2px solid var(--line); border-radius:12px; padding:18px;}
.widget .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.widget .fields{display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr; border:2px solid var(--line); border-radius:9px; overflow:hidden;}
.widget .fields .f{padding:12px 16px; border-right:2px solid var(--line-2);}
.widget .fields .f:last-child{border-right:none;}
.widget .fields .f .lab{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;}
.widget .fields .f .val{font-size:16px; font-weight:700;}

/* booking step indicator */
.steps{display:flex; gap:0; overflow-x:auto; border-bottom:2px solid var(--line); background:var(--fill-3);}
.steps a{flex:1; min-width:120px; text-decoration:none; color:var(--ink-3); padding:13px 14px; text-align:center; font-size:12.5px; font-weight:600; border-right:2px solid var(--line-2); position:relative; white-space:nowrap;}
.steps a:last-child{border-right:none;}
.steps a .n{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); font-size:11px; margin-right:6px; vertical-align:middle;}
.steps a.done{color:var(--ink-2);}
.steps a.done .n{background:var(--ink-2); color:#fff; border-color:var(--ink-2);}
.steps a.active{color:var(--ink); background:var(--page);}
.steps a.active .n{background:var(--ink); color:#fff; border-color:var(--ink);}

/* footer */
.ftr{background:var(--ink); color:#cfccc4; padding:36px 32px 26px; border-top:2px solid var(--line);}
.ftr .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; max-width:1140px; margin:0 auto;}
.ftr h5{color:#fff; font-size:13px; margin:0 0 12px; letter-spacing:.4px;}
.ftr a, .ftr span{display:block; color:#b6b3aa; text-decoration:none; font-size:12.5px; margin-bottom:8px;}
.ftr .brand{color:#fff;}
.ftr .brand .logo{border-color:#fff;}
.ftr .base{max-width:1140px; margin:22px auto 0; padding-top:18px; border-top:1px solid #3a3a36; font-size:11.5px; color:#8d8a82; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* floating whatsapp */
.fab{position:absolute; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%; border:2px solid var(--line); background:var(--page); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--ink-2); box-shadow:0 6px 16px rgba(0,0,0,.18); text-align:center; line-height:1.1;}

/* breadcrumb */
.crumb{font-size:12px; color:var(--ink-3); padding:14px 32px 0;}
.crumb a{color:var(--ink-3); text-decoration:none;}

/* gallery */
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:120px; gap:8px;}
.gallery .ph:first-child{grid-row:span 2; grid-column:1;}

/* ==========================================================================
   RESPONSIVE — mobile layout
   Triggered two ways:
     (a) @media   → real device width / window resize
     (b) :has()   → the Desktop/Mobile toggle in the browser bar
   ========================================================================== */

/* --- tablet collapse --- */
@media (max-width:860px){
  .with-side, .with-side.left{grid-template-columns:1fr;}
  .g4{grid-template-columns:repeat(2,1fr);}
}
.browser:has(#d-mob:checked) .with-side,
.browser:has(#d-mob:checked) .with-side.left{grid-template-columns:1fr;}

/* --- mobile layout (shared rule list) --- */
@media (max-width:560px){
  .hdr{padding:14px 18px;}
  .nav{position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:var(--page); border-bottom:2px solid var(--line); display:none; z-index:20;}
  .nav a{padding:14px 18px; border-bottom:1px solid var(--line-2); border-radius:0;}
  .nav a.cta{margin:12px 18px; border-radius:7px; text-align:center;}
  .nav-toggle:checked ~ .nav{display:flex;}
  .burger{display:flex;}
  .container{padding:24px 18px;}
  .section{padding:24px 18px;}
  .g2, .g3, .g4{grid-template-columns:1fr;}
  .widget .fields{grid-template-columns:1fr;}
  .widget .fields .f{border-right:none; border-bottom:2px solid var(--line-2);}
  .widget .fields .f:last-child{border-bottom:none;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery .ph:first-child{grid-column:span 2; grid-row:auto;}
  .ftr .cols{grid-template-columns:1fr 1fr;}
  .hero{min-height:auto;}
  .h-xl{font-size:21px;}
  .crumb{padding:12px 18px 0;}
  .ftr{padding:26px 18px;}
}

/* same mobile rules, driven by the Mobile toggle (any window width) */
.browser:has(#d-mob:checked) .hdr{padding:14px 18px;}
.browser:has(#d-mob:checked) .nav{position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:var(--page); border-bottom:2px solid var(--line); display:none; z-index:20;}
.browser:has(#d-mob:checked) .nav a{padding:14px 18px; border-bottom:1px solid var(--line-2); border-radius:0;}
.browser:has(#d-mob:checked) .nav a.cta{margin:12px 18px; border-radius:7px; text-align:center;}
.browser:has(#d-mob:checked) .nav-toggle:checked ~ .nav{display:flex;}
.browser:has(#d-mob:checked) .burger{display:flex;}
.browser:has(#d-mob:checked) .container{padding:24px 18px;}
.browser:has(#d-mob:checked) .section{padding:24px 18px;}
.browser:has(#d-mob:checked) .g2,
.browser:has(#d-mob:checked) .g3,
.browser:has(#d-mob:checked) .g4{grid-template-columns:1fr;}
.browser:has(#d-mob:checked) .widget .fields{grid-template-columns:1fr;}
.browser:has(#d-mob:checked) .widget .fields .f{border-right:none; border-bottom:2px solid var(--line-2);}
.browser:has(#d-mob:checked) .widget .fields .f:last-child{border-bottom:none;}
.browser:has(#d-mob:checked) .gallery{grid-template-columns:1fr 1fr;}
.browser:has(#d-mob:checked) .gallery .ph:first-child{grid-column:span 2; grid-row:auto;}
.browser:has(#d-mob:checked) .ftr .cols{grid-template-columns:1fr 1fr;}
.browser:has(#d-mob:checked) .hero{min-height:auto;}
.browser:has(#d-mob:checked) .h-xl{font-size:21px;}
.browser:has(#d-mob:checked) .crumb{padding:12px 18px 0;}
.browser:has(#d-mob:checked) .ftr{padding:26px 18px;}

/* ---------- dropdown / select ---------- */
.input.select{justify-content:space-between; cursor:pointer;}
.input.select::after{content:"▾"; color:var(--ink-2); font-size:13px;}

/* ---------- Razorpay-style payment popup (wireframe) ---------- */
.rzp-toggle{display:none;}
.rzp-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:60;}
.rzp-modal{position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%);
  width:380px; max-width:92vw; max-height:90vh; overflow:auto; background:var(--page);
  border:2px solid var(--line); border-radius:14px; display:none; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.rzp-toggle:checked ~ .rzp-overlay,
.rzp-toggle:checked ~ .rzp-modal{display:block;}
.rzp-modal .rzp-head{padding:16px 18px; border-bottom:2px solid var(--line); display:flex; align-items:center; gap:12px;}
.rzp-modal .rzp-logo{width:34px; height:34px; border:2px solid var(--line); border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:13px;}
.rzp-modal .rzp-amt{margin-left:auto; text-align:right;}
.rzp-modal .rzp-x{width:30px; height:30px; border:2px solid var(--line); border-radius:7px; display:grid; place-items:center; cursor:pointer; font-size:16px; margin-left:6px;}
.rzp-modal .rzp-method{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-2); cursor:pointer;}
.rzp-modal .rzp-method:hover{background:var(--fill-2);}
.rzp-trust{display:flex; align-items:center; justify-content:center; gap:7px; padding:12px; font-size:11px; color:var(--ink-3); border-top:2px solid var(--line);}