/* GitStay unified theme — loaded AFTER page CSS so it overrides safely.
   Edit the tokens below to re-brand the whole public site. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#eff6ff;
  --accent:#f5a524; --accent-dark:#d98b0c;
  --dark:#0b1630; --text:#142038; --muted:#667085;
  --background:#f4f7fc; --white:#fff; --surface:#fff; --border:#e4e9f2;
  --success:#12a05c; --danger:#dc3545;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(11,22,48,.08);
  --shadow-lg:0 22px 50px rgba(11,22,48,.16);
  --font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
[data-theme="dark"]{
  --primary:#6b8cff; --primary-dark:#4f72f0; --primary-soft:#1b2848;
  --dark:#050b1a; --text:#e8edf8; --muted:#9aa6bf;
  --background:#0b1220; --white:#131c31; --surface:#131c31; --border:#25314d;
  --shadow:0 10px 30px rgba(0,0,0,.4); --shadow-lg:0 22px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--background);color:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.logo{font-family:var(--font-head);letter-spacing:-.02em}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:2px}

/* Header: frosted + sticky */
.header,.sr-header{background:color-mix(in srgb,var(--surface) 86%,transparent)!important;
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.logo-icon{background:linear-gradient(135deg,var(--primary),#7b5cff)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.main-nav a{border-radius:999px;transition:.2s}
.main-nav a:hover{background:var(--primary-soft);color:var(--primary)}
.login-link,.list-property{border-radius:999px!important}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(123,92,255,.55),transparent 60%),
  linear-gradient(125deg,#071433 0%,#12307a 55%,#2563eb 100%)!important;min-height:600px}
.hero-overlay{background:linear-gradient(90deg,rgba(5,11,26,.55),rgba(5,11,26,0))!important}
.hero h1{font-weight:800;line-height:1.08;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.hero-badge{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.28)!important;backdrop-filter:blur(8px);border-radius:999px!important}

/* Search card */
.search-card{background:var(--surface)!important;border-radius:20px!important;box-shadow:var(--shadow-lg)!important;border:1px solid var(--border)}
.search-field{border-radius:var(--radius-sm)!important;transition:.2s}
.search-field:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
.search-field input,.search-field select{background:transparent;color:var(--text)}

/* Buttons */
.search-button,.cta-booking-button,.owner-button,button.primary,.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;color:#fff!important;border:0!important;
  border-radius:12px!important;font-weight:700;box-shadow:0 8px 20px rgba(37,99,235,.32);transition:transform .15s,box-shadow .2s,filter .2s}
.search-button:hover,.cta-booking-button:hover,.owner-button:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(37,99,235,.4);filter:brightness(1.05)}
.search-button:active,.cta-booking-button:active{transform:translateY(0)}

/* Cards */
.hotel-card,.room-segment{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;transition:transform .25s ease,box-shadow .25s ease}
/* Do not set the destination-card background shorthand here: it would hide its inline photo. */
.destination-card{border:0!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;transition:transform .25s ease,box-shadow .25s ease}
.hotel-card:hover,.destination-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)!important}
.hotel-card img,.card-image-bo img{transition:transform .5s ease}
.hotel-card:hover img{transform:scale(1.06)}
.destination-card{border:0!important}
.destination-overlay{background:linear-gradient(180deg,transparent 30%,rgba(5,11,26,.82))!important}
.hotel-name-title{font-family:var(--font-head);font-weight:700}
.score-bo,.blue-star-badge{background:var(--primary)!important;color:#fff!important;border-radius:10px 10px 10px 2px!important}
.hotel-price-old{color:var(--muted)}
.bold-final-price{color:var(--text);font-family:var(--font-head);font-weight:800}
.location-tag,.eyebrow{color:var(--primary);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}

/* Sections */
.section{background:transparent}
.section-heading h2{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:800}
.step-number{background:linear-gradient(135deg,var(--primary),#7b5cff)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 8px 18px rgba(37,99,235,.3)}
.owner-section{background:linear-gradient(125deg,#071433,#16358a 60%,#2563eb)!important;color:#fff;border-radius:28px;margin:0 auto}
.owner-button{background:linear-gradient(135deg,var(--accent),var(--accent-dark))!important;color:#1b1200!important;box-shadow:0 10px 24px rgba(245,165,36,.35)}
.footer{background:var(--dark)!important}

/* Forms */
input,select,textarea{font-family:inherit;border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)!important;outline:0}

/* Loading skeleton */
.loading,.skeleton{background:linear-gradient(90deg,var(--border) 25%,color-mix(in srgb,var(--border) 40%,var(--surface)) 50%,var(--border) 75%);
  background-size:200% 100%;animation:sh-shimmer 1.3s infinite;border-radius:var(--radius-sm);color:transparent}
@keyframes sh-shimmer{to{background-position:-200% 0}}

/* Scroll reveal */
.sh-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.sh-reveal.sh-in{opacity:1;transform:none}

/* Theme toggle */
#sh-theme-toggle{position:fixed;right:18px;bottom:18px;z-index:99;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);cursor:pointer;font-size:20px;display:grid;place-items:center;transition:transform .2s}
#sh-theme-toggle:hover{transform:scale(1.1) rotate(12deg)}

/* Dark-mode fixes for hard-coded whites */
[data-theme="dark"] .hotel-card,[data-theme="dark"] .search-card,[data-theme="dark"] .header,[data-theme="dark"] .sr-header{background:var(--surface)!important}
[data-theme="dark"] .section,[data-theme="dark"] .properties-section{background:var(--background)!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f1830;color:var(--text);border-color:var(--border)}

@media (max-width:720px){.hero{min-height:520px}.owner-section{border-radius:0}#sh-theme-toggle{bottom:84px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sh-reveal{opacity:1;transform:none}}

/* ===== v2: OTA-style modern layer (Booking / Agoda / Expedia / Kayak inspired) ===== */
.sh-trust{background:var(--surface);border-bottom:1px solid var(--border)}
.sh-trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px 0}
.sh-trust-item{display:flex;gap:12px;align-items:center;padding:6px 10px}
.sh-trust-item svg{flex:none;color:var(--primary);background:var(--primary-soft);padding:9px;width:42px;height:42px;border-radius:12px}
.sh-trust-item b{display:block;font-size:.92rem;font-family:var(--font-head)}
.sh-trust-item span{font-size:.8rem;color:var(--muted)}
.sh-chips{display:flex;gap:10px;overflow-x:auto;padding:22px 0 4px;scrollbar-width:none}
.sh-chips::-webkit-scrollbar{display:none}
.sh-chip{flex:none;padding:10px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-weight:600;font-size:.9rem;text-decoration:none;transition:.2s;box-shadow:0 2px 6px rgba(11,22,48,.04)}
.sh-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)}
.sh-why{padding:72px 0;background:linear-gradient(180deg,transparent,var(--primary-soft) 140%)}
.sh-why-head{text-align:center;width:100%;max-width:none;margin:0 auto 38px}
/* Keep the full Why GitStay headline on one line on desktop. */
.sh-why-head h2{display:block;width:100%;white-space:nowrap;font-size:clamp(1.15rem,2.35vw,2.1rem);line-height:1.2;margin:8px 0 0;font-weight:800}
@media(max-width:700px){.sh-why-head h2{white-space:normal;font-size:clamp(1.35rem,5vw,1.8rem)}}
.sh-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sh-why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:.25s}
.sh-why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.sh-why-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:16px;
  background:linear-gradient(135deg,var(--primary),#7b5cff);box-shadow:0 8px 18px rgba(37,99,235,.3)}
.sh-why-card h3{margin:0 0 6px;font-size:1.05rem}.sh-why-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}

/* Booking.com-style: search bar overlaps the hero edge, bigger pill fields */
.hero{padding-bottom:70px}
.search-card{margin-bottom:-40px;position:relative;z-index:5;border:3px solid var(--accent)!important}
.sh-trust{padding-top:34px}
.search-button{min-width:150px;font-size:1rem}

/* Card polish: price emphasis, deal ribbon */
.hotel-card{position:relative}
.hotel-card .score-bo{box-shadow:0 4px 10px rgba(37,99,235,.3)}
.perk-line{color:var(--success);font-weight:600}
.hotel-price-old{text-decoration:line-through}
.discount-breakdown-row{color:var(--success)}
.hotel-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px transparent;transition:.25s}
.hotel-card:hover::after{box-shadow:inset 0 0 0 2px var(--primary)}

/* Kayak/Agoda-style sticky filters + mobile app bottom bar */
@media (min-width:900px){.sr-filters,.filters,.filter-panel{position:sticky;top:84px;align-self:flex-start}}
#sh-bottom-nav{display:none}
@media (max-width:780px){
  .sh-trust-inner,.sh-why-grid{grid-template-columns:1fr 1fr}
  .sh-trust-item span{display:none}
  .search-card{margin-bottom:-24px}
  body{padding-bottom:68px}
  #sh-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:98;background:var(--surface);border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(11,22,48,.1);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  #sh-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:.7rem;font-weight:600;color:var(--muted);text-decoration:none;border-radius:12px}
  #sh-bottom-nav a svg{width:22px;height:22px}
  #sh-bottom-nav a.on,#sh-bottom-nav a:active{color:var(--primary);background:var(--primary-soft)}
}
@media (max-width:480px){.sh-why-grid{grid-template-columns:1fr}}

/* print buttons */
.sh-print-size{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--text);font-weight:600;margin-right:8px}
.voucher-btn{border:1px solid var(--primary);background:var(--primary-soft);color:var(--primary);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}
@page{size:A4;margin:12mm}

/* Distinct accessible colors for inline SVG quick-navigation icons */
#sh-bottom-nav a:nth-child(1) svg{color:#2563eb}
#sh-bottom-nav a:nth-child(2) svg{color:#0d9488}
#sh-bottom-nav a:nth-child(3) svg{color:#d97706}
#sh-bottom-nav a:nth-child(4) svg{color:#7c3aed}
#sh-bottom-nav a.on svg{filter:saturate(1.15)}


/* GitStay search results: remove the global blue focus border from the four search fields. */
.sr-search-field input:focus,
.sr-search-field select:focus{
  border-color:transparent!important;
  box-shadow:none!important;
  outline:0!important;
}
.sr-search-field:focus-within{
  box-shadow:none!important;
}

/* Fix homepage room segment border inherited from unified theme. */
.properties-section .hotel-card .room-segment{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Permanent homepage fix: replace blue search focus effects with neutral focus indication and remove blue logo mark. */
.search-card .search-field:focus-within {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--dark) !important;
}
.search-card .search-field input:focus,
.search-card .search-field select:focus,
.search-card .search-field input:focus-visible,
.search-card .search-field select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--dark) !important;
}
.header .logo-icon,
.footer .logo-icon,
.footer-logo .logo-icon {
    background: var(--dark) !important;
    box-shadow: none !important;
}


/* GitStay.com brand standard: keep the wordmark typography identical across page families. */
.gs-brand,
.gs-brand strong,
a.gs-brand span,
a.gs-brand span strong,
.logo,
.logo strong,
.logo > div,
.logo > div strong,
.brand,
.brand strong,
.sidebar-brand,
.topbar-brand,
.header-brand,
.site-brand,
.brand-name,
.logo-text {
  font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.7px !important;
  color: #2563eb !important;
  text-decoration: none !important;
}
@media (max-width: 600px) {
  .gs-brand, .gs-brand strong, a.gs-brand span, a.gs-brand span strong,
  .logo, .logo strong, .logo > div, .logo > div strong,
  .brand, .brand strong, .sidebar-brand, .topbar-brand, .header-brand,
  .site-brand, .brand-name, .logo-text {
    font-size: 21px !important;
    letter-spacing: -0.55px !important;
  }
}