/* Font loaded via 's intrinsic minimum is its longest text (e.g.
"Single AC - ₹1500/night (up to 2 guests)", or a long city name in the site-wide "modify
search" bar). max-width:100% does NOT help there: it caps the element's rendered size once
space exists, but the browser still sizes the surrounding grid track around the intrinsic
minimum, so the whole column - and every sibling inside it, including plain text with no
width rule of its own - gets pushed past the viewport and cut off on the right.
That is the single root cause behind the repeated "every screen is cut off / scrolls
sideways on iPhone" reports: the same mistake in several different containers, plus the
mini search bar which appears on nearly every page. Setting min-width:0 on the controls
themselves fixes it once, everywhere, including any container added later that nobody has
re-tested on a phone - rather than needing min-width:0 added by hand to each new grid.
Safe by construction: min-width:0 only ever REMOVES a floor on shrinking, and any control
that genuinely needs a size still has its own width/max-width rule, which wins. */
select, input, textarea { min-width: 0; max-width: 100%; }
/* iOS Safari auto-zoom fix - THE cause of "the page breaks as soon as I tap a text box".
Mobile Safari zooms the entire page in whenever a focused form control's font-size is under
16px. That zoom shrinks the visual viewport, so the layout suddenly appears cut off and
scrolled to the right - looking exactly like a CSS overflow bug, but it is the browser
zooming, not the layout breaking, which is why it only ever started ON TAP and why fixing
container widths did nothing for it. iOS does not zoom at >= 16px, so declaring exactly
16px on form controls at mobile widths disables the behaviour outright.
Scoped to <=900px (the mobile breakpoint used throughout this file) so desktop keeps the
smaller, denser field sizes the design intends. !important is needed because several
component rules further down set their own smaller font-size on inputs (.msb-field,
.filter-card, .budget-inputs, the hero fields in index.css), and every one of them has to
be overridden for this to work - a single missed field re-triggers the zoom for the whole
page. */
@media (max-width: 900px) {
select, input, textarea { font-size: 16px !important; }
}
/* Horizontal-scroll guard lives on html, NOT body. Setting overflow-x on body (even to
"clip") forces the browser to also give body a computed overflow-y, which turns body
itself into the scrolling container instead of the viewport - and that breaks
position:sticky for every descendant (nav, mini search bar, section tabs, booking box).
Putting it on html instead uses the browser's normal viewport-overflow-propagation rules,
so the viewport stays the scroll container and sticky keeps working. */
html {
overflow-x: hidden;
}
body {
margin: 0;
background: var(--main-bg);
color: var(--charcoal);
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.5;
}
h1, h2, h3, h4, .display {
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
color: var(--ink);
margin: 0 0 0.4em;
letter-spacing: -0.01em;
}
h1, h2, .display { font-weight: 700; }
h3, h4 { font-weight: 600; }
/* Explicit type scale, matching the approved design system (H1 40/700, H2 32/700, H3 24/600,
H4 20/600 desktop; smaller via var(--fs-*) under 700px - see :root). Without this, h1-h4
fall back to raw browser defaults, which reads noticeably thinner/smaller than the bold
display headlines used elsewhere on the redesigned pages. Individual pages/components with
their own more specific classes (.hero h1, .top-dest-title, .sr-title, card titles, etc.)
still override this as before - this only sets the baseline for plain h1-h4 tags that don't
have one, e.g. the property name and section headers on the details page. */
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
.eyebrow {
display: inline-block;
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blue-mid);
}
a { color: inherit; text-decoration: none; }
.container {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
/* ---- Page-width guideline - three tiers, pick by what the page IS, not by habit:
1. Full-bleed - browsing/marketplace surfaces, or a page that specifically wants to make full
use of screen width (e.g. a tabbed results view). Two named classes exist for this
(body.home-page, body.city-linked-page below) for pages that are semantically "the
homepage" or "part of the city page family" - anything else reaches for the generic
body.wide-page class instead (see below .container-narrow) rather than inventing a new
semantic class per page.
2. Standard .container (1160px, above) - the default for everything else: search results,
guesthouse detail, dashboards, listing grids, most forms.
3. .container-narrow (760px, below) - long-form reading or a single focused task: content
pages, articles, how-to-reach guides, booking-messages, the list-your-property wizard.
1160px reads as too wide a line length for prose or a lone form, so these use the narrower
column instead - but they're still page content, not a form-card popup, so they keep
.container's standard padding/behavior rather than something bespoke.
Before this comment existed, five different pages independently picked 700px, 720px, or 760px
for this exact same role via an inline style="max-width:...px" override - same intent, three
different numbers, no shared class. Use .container-narrow (not a new inline value) so the
next page doesn't add a fourth. */
.container-narrow { max-width: 760px; }
/* ---- Homepage-only: every section on "/" (hero, offers, destinations, featured, etc. - 17
.container usages in index.html) left-aligns to the exact same x-position as the header
logo, rather than the site-wide centered 1160px column above. The header (.nav .container)
is deliberately full-width with its own fixed padding (see its comment), not the centered
column, so matching that here means overriding centering + max-width, not just padding.
Scoped to body.home-page specifically - .container is shared by every other page on the
site (search results, city pages, guesthouse detail, articles, etc.), which all keep the
centered column above untouched. Mobile drops back to the same 16px both .nav .container
and this use at the same 560px breakpoint, so alignment holds at every size. */
body.home-page .container {
max-width: none;
margin: 0;
/* padding-left/right only, NOT the padding shorthand - a few sections on this page
(.lp-banner, .purpose-strip, .topcity-wrap) set their own padding-top/bottom for vertical
spacing, meant to stack on top of the base .container's padding. The shorthand form here
would also set padding-top/bottom to 0 at this rule's higher specificity, silently
clobbering those sections' vertical spacing instead of just fixing horizontal alignment. */
padding-left: 70px;
padding-right: 70px;
}
@media (max-width: 560px) { body.home-page .container { padding-left: 16px; padding-right: 16px; } }
/* Same full-width treatment as the homepage above, for the city page and everything linked to
it (city-cluster/how-to-reach sub-pages, locality pages, tourist place pages, the city map) -
city-page.html, city-cluster.html, locality-page.html, tourist-place.html, city-map.html all
carry this class on . Longhand padding-left/right only, same reasoning as above - a
couple of sections on these pages have their own inline padding-top/padding-bottom (city
page's hero, locality page's grid section) that this must not clobber. */
body.city-linked-page .container {
max-width: none;
margin: 0;
padding-left: 70px;
padding-right: 70px;
}
@media (max-width: 560px) { body.city-linked-page .container { padding-left: 16px; padding-right: 16px; } }
/* Same full-width treatment as home-page/city-linked-page above, generalized into its own
reusable class for any other page that wants it without being semantically a "home" or "city"
page - my-bookings.html (Track My Stay) is the first one. Same longhand-padding reasoning as
the other two: don't use the shorthand, or a page with its own padding-top/bottom on a section
would get silently zeroed out. */
body.wide-page .container {
max-width: none;
margin: 0;
padding-left: 70px;
padding-right: 70px;
}
@media (max-width: 560px) { body.wide-page .container { padding-left: 16px; padding-right: 16px; } }
/* Hero content alignment - do not remove.
Several hero sections are flex containers (display:flex; flex-direction:column) so their
content can be vertically centred. Their child is a .container, which carries margin:0 auto.
In flexbox, an auto margin on the CROSS axis beats align-items:stretch - so instead of
filling the hero's width, .container shrink-wraps to its widest line and the auto margins
centre that shrunken box. The visible symptom is a hero whose breadcrumb/heading/subtitle
all sit in a floating block in the middle of the strip rather than starting at the page's
normal left gutter, and it gets worse the wider the screen. This is the same family of bug
as the earlier align-items:center regression, but switching to flex-direction:column does
NOT fix it on its own, because the auto margins are the actual cause.
Giving the container an explicit width restores normal behaviour: width is then min(100%,
max-width), the auto margins simply centre that full-width box, and the text inside starts
at the usual gutter - identical to how .cp-hero (city page) renders, which is not flex and
therefore never had the problem. */
.hero > .container,
.ar-hero > .container,
.ai-hero > .container,
.cc-hero > .container,
.dst-hero > .container,
.fi-hero > .container,
.lp-hero > .container,
.sr-hero > .container,
.tgi-hero > .container { width: 100%; }
/* ---------- Admin left sidebar navigation ---------- */
body:has(.admin-sidebar) { padding-left: 230px; }
@media (max-width: 900px) { body:has(.admin-sidebar) { padding-left: 0; } }
.admin-sidebar {
position: fixed; top: 0; left: 0; bottom: 0; width: 230px;
background: var(--ink); overflow-y: auto; z-index: 50;
display: flex; flex-direction: column;
}
@media (max-width: 900px) {
.admin-sidebar { position: static; width: 100%; height: auto; }
}
.admin-sidebar .brand-row {
padding: 18px 18px 14px; background: var(--white); border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px;
}
.admin-sidebar .brand-row img { height: 32px; width: 32px; object-fit: contain; object-position: left; }
.admin-sidebar .brand-row .brand-text { font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.admin-sidebar .brand-row small { font-size: 0.58rem; opacity: 0.75; color: var(--ink); letter-spacing: 1px; border: 1px solid var(--line); padding: 2px 5px; border-radius: 10px; margin-left: auto; }
.admin-sidebar .sidebar-links { flex: 1; padding: 10px 0; overflow-y: auto; }
.admin-sidebar .group-label { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8FC7F5; padding: 12px 18px 8px; }
.admin-sidebar .group-label .caret { font-size: 0.6rem; transition: transform 0.15s ease; }
.admin-sidebar .nav-group.open .group-label .caret { transform: rotate(180deg); }
.admin-sidebar .nav-group .group-links { display: none; }
.admin-sidebar .nav-group.open .group-links { display: block; }
.admin-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 0.87rem; font-weight: 500; color: #CFE3F5; border-left: 3px solid transparent; }
.admin-sidebar a:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.admin-sidebar a.active { background: rgba(255,255,255,0.1); color: #FFFFFF; font-weight: 700; border-left-color: #F2A900; }
.admin-sidebar .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 8px; }
.admin-sidebar .sidebar-footer a { padding: 6px 0; font-size: 0.82rem; }
/* ---------- Nav ---------- */
/* position: fixed instead of sticky - sticky can be silently broken by ANY ancestor with a
non-visible overflow (a very common real-world gotcha we kept re-hitting); fixed is only
affected by an ancestor transform/filter/perspective, none of which exist here, so this is
the reliable choice. Since fixed takes it out of normal flow, body gets matching top
padding below so content isn't hidden underneath it (scoped to non-admin pages, since
admin uses its own fixed sidebar layout instead of this nav). */
.nav {
background: var(--main-bg);
color: var(--ink);
padding: 0;
min-height: 70px;
display: flex;
align-items: stretch;
border-bottom: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
}
/* Brand-color accent line, sitting flush under the header (matches the reference design's
thin colored bar under the nav bar). A pseudo-element on .nav rather than a separate fixed
div, so it always moves and stacks together with the header with no extra positioning code -
bottom:-4px places it just outside .nav's own box (nav has no overflow:hidden, so this is
visible), and .nav-spacer/.mini-search-bar's top are both bumped by these same 4px below so
page content and the sticky mini search bar never sit underneath it. */
.nav::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
background: linear-gradient(90deg, var(--cta-primary), var(--brand-gold));
}
/* Reserves the space nav no longer occupies in normal flow now that it's fixed. Set to
.nav's own min-height PLUS the 4px accent line below it (rather than separately-eyeballed
numbers) so the two can never drift apart and leave a gap of body background showing
through - that gap is what read as a stray white/parchment line between the header and
hero. Lives inside the nav fragment itself (see fragments.html) rather than as blanket body
padding, so it only affects pages that actually include this nav - the admin login page,
for example, uses neither this nav nor the admin sidebar and would otherwise get an
unwanted gap. */
.nav-spacer { height: 74px; }
@media (max-width: 560px) { .nav { min-height: 50px; } .nav-spacer { height: 54px; } }
.nav .container {
display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; row-gap: 10px;
/* Full-width header, not the shared 1160px content column - the logo should sit flush
against the left edge of the screen and the CTA flush against the right edge, using the
whole header bar rather than staying clustered in a centered column on wide screens.
width:100% (not just max-width:none) is the part that actually matters here: .container
is a flex child of .nav with no explicit width, so without this it keeps shrink-wrapping
to its own content and centering via the inherited margin:auto - looking identical to the
centered-column layout even after max-width was removed. */
max-width: none;
width: 100%;
margin: 0;
padding: 0 70px;
}
@media (max-width: 560px) { .nav .container { padding: 0 16px; } }
.nav .brand { display: flex; align-items: center; gap: 14px; align-self: center; margin-right: 30px; }
/* ---- Mobile header: [back-arrow] [centered logo] [hamburger], via a 3-column grid rather
than flex + margin:auto tricks. Grid guarantees the middle (logo) column is always truly
centered regardless of whether the outer two columns are equal width - a flex-based center
would drift off-center the moment the back arrow (44px) and hamburger (its own width) don't
exactly match, which they don't. Only active <=900px - the same breakpoint the mobile bottom
nav and hamburger themselves already use, so this and the desktop flex-row layout above are
mutually exclusive by width, never fighting each other. ---- */
.nav-back-mobile { display: none; }
@media (max-width: 900px) {
.nav .container {
display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; column-gap: 8px;
}
.nav-back-mobile {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border: none; background: none; padding: 0; cursor: pointer;
color: var(--primary-navy); order: 1;
}
.nav .brand { grid-column: 2; justify-content: center; margin: 0; order: 2; }
.nav .nav-tabs, .nav .nav-right .nav-divider { display: none; }
.nav .nav-right { grid-column: 3; margin: 0; justify-self: end; order: 3; }
.nav-burger { display: flex; }
}
/* ---- Logo image badge - the YatriSutra logo file has an opaque near-white/cream background
baked in (not transparent). The site header (.nav) is now the same light color, so the badge
is invisible there by design - it still matters on the admin login page, which keeps its
dark gradient side panel, where dropping the logo directly on top would show as a jarring
white rectangle. Kept as one shared class so all three lockups (public nav, seller nav,
admin login) stay visually consistent even though only login still needs the contrast. ---- */
.brand-logo-badge { display: inline-flex; align-items: center; background: var(--main-bg); padding: 6px 14px; border-radius: 12px; }
.brand-logo-badge img { display: block; height: 52px; width: auto; }
@media (max-width: 560px) { .brand-logo-badge img { height: 36px; } .brand-logo-badge { padding: 5px 10px; border-radius: 10px; } }
.nav .nav-right { display: flex; align-items: center; gap: 26px; align-self: center; margin-left: auto; }
/* ---- Header category tabs (Stays / Planner / Airport Taxi / Car Rental) - relocated here
from the homepage's search card, icon-over-label like the reference design, flush against
the header's bottom edge so the active underline lands right at the header/accent-line
boundary (.nav .container is stretch, so this row fills the full header height). All 4 use
"/?tab=X" - same screen, tab panel swap - rather than navigating to a separate page, so
clicking a tab never reads as "leaving" the page. "active" comes from currentNavTab (see
GlobalModelAttributes) - path-aware, not just ?tab-aware, so it stays correct even for
someone who lands directly on /travel-planner or /airport-taxi via another link (e.g. the
footer). Hidden below 900px; reachable there via the existing hamburger menu instead (see
.nav-mobile-link below), same pattern already used for "List your property" on mobile. */
.nav-tabs { display: flex; align-items: stretch; gap: 2px; align-self: stretch; }
.nav-tab {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
padding: 0 14px; text-decoration: none; color: var(--text-secondary);
border-bottom: 3px solid transparent; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.nav-tab .nav-tab-ico { display: block; flex-shrink: 0; }
.nav-tab:hover { color: var(--ink); }
.nav-tab.active { color: var(--cta-primary); border-bottom-color: var(--cta-primary); }
@media (max-width: 900px) { .nav-tabs { display: none; } }
.nav .nav-divider { width: 1px; height: 40px; background: rgba(6,43,92,0.15); }
.nav a.navlink {
font-size: var(--fs-nav); font-weight: 500; color: var(--ink); opacity: 0.85; margin-left: 0;
padding: 8px 4px; border-radius: 20px; transition: background 0.12s ease;
}
.nav a.navlink:hover { background: rgba(6,43,92,0.08); opacity: 1; }
/* "List your property" - the strongest CTA in the header per the brand refresh: filled gold,
mini house icon on a navy roundel, two lines of copy (headline + supporting line). Hidden
on mobile (see the 560px media query below) - reachable there via the hamburger menu
instead, since the full two-line button is too wide for a small header. */
.nav a.nav-cta-btn {
display: flex; align-items: center; gap: 12px;
background: var(--gold); color: var(--navy-header); opacity: 1;
padding: 12px 24px; border-radius: 12px;
}
.nav .nav-cta-mark { flex-shrink: 0; }
.nav .nav-cta-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.nav .nav-cta-title { font-weight: 700; font-size: 1rem; }
.nav .nav-cta-sub { font-weight: 500; font-size: 0.74rem; color: #3B4F6B; }
.nav a.nav-cta-btn:hover { background: var(--gold-hover); }
/* Hamburger toggle - desktop never sees this, mobile-only trigger for .nav-mobile-menu.
44x44 for a comfortable tap target (was 34x34). */
.nav-burger {
display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0;
flex-shrink: 0;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile dropdown panel - collapsed by default (max-height:0, clipped), expanded via the
.open class toggled by fragments.html's inline script. Positioned absolutely against the
nav's own bounding box (not left in normal flex flow) so it renders as a proper full-width
overlay below the bar - as a plain flex child it was squeezing into the leftover horizontal
space next to the logo instead of dropping below it. .nav already has position:fixed above,
which (like relative/absolute/sticky) is enough on its own to anchor this - no extra
position rule needed on .nav itself. */
.nav-mobile-menu {
position: absolute; top: 100%; left: 0; right: 0;
max-height: 0; overflow: hidden; background: var(--main-bg);
box-shadow: 0 8px 20px rgba(6,43,92,0.15);
transition: max-height 0.22s ease;
}
.nav-mobile-menu.open { max-height: 280px; }
.nav-mobile-link {
display: flex; align-items: center; gap: 12px; padding: 14px 20px;
color: var(--ink); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 600;
border-top: 1px solid var(--border);
}
.nav-mobile-link svg { flex-shrink: 0; opacity: 0.85; }
.nav-mobile-link-cta { color: var(--cta-primary); }
.nav-mobile-link-cta svg { opacity: 1; }
/* ---- Persistent mobile bottom tab bar - app-style primary nav, ≤900px only (see
fragments.html for the full rationale/markup). --mobile-bottom-nav-height is the real
on-screen height (not counting the safe-area inset below it) - other fixed-bottom elements
reference this same variable to sit just above the bar instead of underneath/behind it,
rather than each hardcoding a guessed pixel offset that would silently drift out of sync
if this bar's height ever changes. Hidden entirely above 900px, same breakpoint where the
header's top .nav-tabs takes over instead - the two are mutually exclusive by design, never
both visible at once. */
:root { --mobile-bottom-nav-height: 60px; }
.mobile-bottom-nav { display: none; }
@media (max-width: 900px) {
.mobile-bottom-nav {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
height: var(--mobile-bottom-nav-height);
padding-bottom: env(safe-area-inset-bottom);
background: var(--main-bg);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(6,43,92,0.08);
}
/* Room for the fixed bottom bar so it never covers the last bit of real page content
(footer links, last card in a list, etc.) - the same problem .nav-spacer already solves
for the fixed header, mirrored at the bottom. */
body { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)); }
}
/* Toggled by the focusin/focusout listener in fragments.html while a text field has focus -
see that script for why (iOS keyboard + position:fixed). display:none rather than just
hiding visually, so it also stops being a tap target sitting invisibly over the keyboard. */
.mobile-bottom-nav.kb-hidden { display: none; }
.mbn-tab {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
text-decoration: none; color: var(--text-secondary); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
font-size: 0.68rem; font-weight: 600;
}
.mbn-tab span { line-height: 1; }
.mbn-tab.active { color: var(--cta-primary); }
/* The "More" tab is a , not an like its siblings - reset the UA button styling so
it sits identically in the flex row rather than rendering with a native border/background. */
button.mbn-tab { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
/* ---------- "More" bottom sheet (mobile) ----------
Holds the links that the footer carries on desktop - see the nav markup in fragments.html
for why. Always in the DOM but [hidden] until opened; the whole bottom nav (and therefore
this) is display:none above 900px, so desktop is completely unaffected. */
.mbn-sheet-overlay {
position: fixed; inset: 0; background: rgba(6,43,92,0.45); z-index: 210;
}
.mbn-sheet-overlay[hidden], .mbn-sheet[hidden] { display: none; }
.mbn-sheet {
position: fixed; left: 0; right: 0; z-index: 220;
bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
background: var(--white);
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 32px rgba(6,43,92,0.22);
padding: 8px 20px 20px;
max-height: 70vh; overflow-y: auto;
}
.mbn-sheet-handle {
width: 40px; height: 4px; border-radius: 2px; background: var(--line);
margin: 6px auto 14px;
}
.mbn-sheet-section { margin-bottom: 18px; }
.mbn-sheet-section h4 {
margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: #8A93A0;
}
.mbn-sheet-section a {
display: block; padding: 11px 0; font-size: 0.95rem; font-weight: 600;
color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.mbn-sheet-section a:last-child { border-bottom: none; }
.mbn-sheet-foot {
padding-top: 6px; font-size: 0.76rem; color: #8A93A0; text-align: center;
}
@media (max-width: 560px) {
.nav .nav-divider { display: none; }
.nav .nav-right { gap: 10px; }
.nav a.navlink { font-size: 0.78rem; padding: 6px 8px; }
/* "List your property" no longer shown as the full pill button on mobile - too wide for a
small header. Reachable instead through the hamburger menu (.nav-burger, shown below). */
.nav a.nav-cta-btn { display: none; }
.nav-desktop-only { display: none !important; }
}
/* ---------- Hero + overlapping search widget ---------- */
.hero {
background: none;
color: var(--ink);
padding: 6px 0 16px;
}
.hero h1 { color: var(--ink); font-size: var(--fs-h1); font-weight: 700; max-width: 640px; margin-bottom: 6px; }
.hero p.sub { color: var(--text-secondary); font-size: 0.96rem; max-width: 560px; margin: 0; }
.search-form {
background: var(--white);
border-radius: 10px;
padding: 16px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 0.7fr auto;
gap: 12px;
margin-top: -40px;
position: relative;
box-shadow: 0 16px 40px rgba(0,27,62,0.28);
border: 1px solid var(--line);
}
@media (max-width: 800px) {
.search-form { grid-template-columns: 1fr; margin-top: 24px; }
}
.search-form label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.search-form input, .search-form select {
width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px;
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: var(--fs-search); font-weight: 400; background: var(--parchment); color: var(--charcoal);
}
.search-form input:focus, .search-form select:focus { outline: 2px solid var(--blue-mid); outline-offset: 1px; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--cta-primary); color: var(--white); border: none; border-radius: 6px;
padding: 12px 22px; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-weight: 600; font-size: var(--fs-button);
cursor: pointer; transition: filter 0.12s ease;
}
.btn:hover { filter: brightness(0.94); }
.btn.secondary { background: var(--cta-secondary); color: var(--white); border: none; }
.btn.danger { background: #7B1E1E; color: var(--white); }
.btn.ghost { background: transparent; color: var(--blue-mid); border: 1px solid var(--blue-mid); padding: 7px 14px; font-size: 0.82rem; font-weight: 600; transition: background 0.12s ease; }
.btn.ghost:hover { background: rgba(11,114,217,0.08); }
/* ---------- Quick filter chips ---------- */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; }
.chip {
display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line);
border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
/* Areas with no live listings yet - same look as a normal chip, but not a link (see
city-page.html's popular-areas section: clicking through used to open a Search Results
page with zero results, which is worse than not linking at all). Slightly muted so it
still reads as "not clickable" without looking broken or like an error state. */
.chip--plain { opacity: 0.62; cursor: default; }
/* ---------- Trust / value row ---------- */
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 8px 0 12px; }
@media (max-width: 700px) { .trust-row { grid-template-columns: 1fr; } }
/* ---------- Popular destinations ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.dest-card {
position: relative; border-radius: 10px; overflow: hidden; height: 150px; display: block;
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-card .overlay {
position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,27,62,0) 40%, rgba(0,27,62,0.75) 100%);
display: flex; align-items: flex-end; padding: 12px;
}
.dest-card .overlay span { color: var(--white); font-weight: 700; font-size: 1rem; }
/* ---------- Listings grid ---------- */
.section { padding: 30px 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
/* Horizontal-scrolling version, used for Recommended/Featured/Recently onboarded on the
homepage - cards stay in a single row and scroll sideways instead of wrapping to new rows. */
.scroll-grid {
display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.scroll-grid .card { flex: 0 0 260px; scroll-snap-align: start; }
.scroll-grid::-webkit-scrollbar { height: 8px; }
.scroll-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.scroll-grid::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 620px) { .scroll-grid .card { flex-basis: 220px; } }
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 1px 3px rgba(0,27,62,0.06);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: 0 10px 24px rgba(0,27,62,0.16); transform: translateY(-2px); }
.card img { width: 100%; height: 148px; object-fit: cover; display: block; }
.card .body { padding: 14px 16px; }
.card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.card .loc { font-size: 0.78rem; color: var(--blue-mid); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.card .desc { font-size: 0.87rem; color: #556372; margin: 10px 0; }
.rating-line { font-size: 0.82rem; color: var(--charcoal); margin: 4px 0; display: flex; align-items: center; gap: 4px; }
.rating-line .star { color: #F2A900; }
.rating-line .rc { color: #616C76; font-size: 0.78rem; }
.card .price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; }
.card .price-row .amt { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.card .price-row .amt small { font-size: 0.75rem; font-weight: 500; color: #616C76; }
/* Rating-style badge, top-left corner of card image (OTA convention) */
.stamp {
position: absolute; top: 12px; left: 12px;
background: var(--sage); color: var(--white);
border-radius: 6px; padding: 6px 10px;
display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.stamp .amt { font-size: 0.82rem; font-weight: 800; }
.stamp .unit { font-size: 0.6rem; opacity: 0.9; }
.badge {
display: inline-block; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.7rem; font-weight: 700;
padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em;
}
.badge.approved { background: #E1F5EE; color: #085041; }
.badge.pending { background: #FDF1DA; color: #854F0B; }
.badge.rejected { background: #FCEBEB; color: #791F1F; }
.badge.confirmed { background: #E1F5EE; color: #085041; }
.badge.cancelled { background: #FCEBEB; color: #791F1F; }
.badge.checked-in { background: #EFE7FB; color: #5B3499; }
.badge.completed { background: #EDEFF2; color: #556372; }
/* ---------- Mini "modify search" bar (MakeMyTrip-style), used on detail/search pages ---------- */
.mini-search-bar {
background: var(--navy-hero);
border-bottom: 1px solid var(--line);
box-shadow: 0 2px 10px rgba(0,27,62,0.15);
padding: 12px 0;
position: sticky;
top: 74px; /* sits just below the fixed nav bar above it - matches .nav-spacer */
z-index: 60;
}
@media (max-width: 560px) { .mini-search-bar { top: 54px; } }
.mini-search-form {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 0.7fr auto;
gap: 10px;
align-items: stretch;
min-width: 0;
}
.msb-field {
min-width: 0;
background: var(--parchment);
border: 1px solid var(--line);
border-radius: 8px;
padding: 7px 12px;
}
.msb-field label {
display: block;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #616C76;
margin-bottom: 2px;
}
.msb-field select, .msb-field input {
width: 100%;
border: none;
background: transparent;
padding: 0;
font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
}
.msb-field select:focus, .msb-field input:focus { outline: none; }
.msb-btn { min-width: 110px; border-radius: 8px; padding: 0 20px; }
@media (max-width: 900px) {
.mini-search-form { grid-template-columns: repeat(2, 1fr); }
.msb-btn { grid-column: span 2; padding: 12px; }
}
@media (max-width: 560px) {
.mini-search-form { grid-template-columns: 1fr; }
.msb-btn { grid-column: span 1; }
/* Not sticky on mobile - stacked to 5 full-width rows (city/check-in/check-out/guests/
button) this is ~250-300px tall, and staying pinned at that height ate roughly half a
typical phone screen permanently, on every page that uses it (guesthouse detail, search
results) - reported from a real device as "half the screen has sticky search bar" and,
separately, the map on the guesthouse detail page appearing to "overflow" after scrolling,
which was actually this bar sitting fixed on top of it once scrolled below the real nav.
Reverting to normal document flow on mobile (matches .booking-box's own
@media(max-width:900px){position:static} a bit further down this file - same fix, same
reasoning: sticky-while-desktop-sized makes sense, sticky-while-stacked-to-5-rows doesn't)
fixes both: it now scrolls away like any other section instead of parking itself over
the map or the booking form underneath it. */
.mini-search-bar { position: static; top: auto; }
}
/* ---------- Detail page ---------- */
.detail-hero img { width: 100%; height: 360px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 32px; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
/* Same bug class documented elsewhere in this file (nowrap button + flex:1 input row) but the
grid version of it: grid items default to min-width:auto, so a 1fr track refuses to shrink
below its content's own intrinsic minimum width. The room type 's longest option text
("Single AC - ₹1500/night (up to 2 guests)") has real width even with max-width:100% applied
to the select itself (that only caps its RENDERED size once there's room - it doesn't change
the intrinsic minimum size the browser uses to size the grid track around it). So the whole
.detail-grid column - and everything else inside .booking-box along with it, including plain
text with no width rule at all like the "Host confirms/No hidden fees" checklist - was being
forced wider than the viewport and cut off on the right on a real phone. min-width:0 on the
grid items is what actually lets the track shrink to the viewport instead of the content. */
.detail-grid > * { min-width: 0; }
.amenity-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.amenity-tags span { font-size: 0.78rem; font-weight: 600; background: #E7F1FB; color: var(--blue-mid); padding: 6px 12px; border-radius: 20px; }
.booking-box {
background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px;
position: sticky; top: 196px; box-shadow: 0 4px 16px rgba(0,27,62,0.08);
/* Fixes the "Book Now button doesn't seem to do anything" report: the button calls
bookingBox.scrollIntoView({behavior:'smooth'}), which defaults to block:'start' - it DOES
scroll, but without this, the box's top edge lands exactly at the top of the viewport,
which is directly under the fixed .nav header (74px desktop / 54px mobile, see .nav-spacer
above) - so the price/"Starting from" line that should confirm the tap worked is hidden
behind the header instead. Same fix pattern already used for the same class of bug on
.cp-section in city-page.css (nav height + a small buffer). */
scroll-margin-top: 94px;
}
@media (max-width: 560px) { .booking-box { scroll-margin-top: 74px; } }
@media (max-width: 900px) { .booking-box { position: static; } }
/* Visible confirmation a "Book Now" tap actually registered, for the edge case where the box
is already fully in view and scrollIntoView has no distance to cover - without this there
was no feedback at all in that case, which read as "the button did nothing". Toggled briefly
by goToBookingBox() below. */
.booking-box.bb-pulse { animation: bbPulse 1.1s ease; }
@keyframes bbPulse {
0% { box-shadow: 0 4px 16px rgba(0,27,62,0.08), 0 0 0 0 rgba(245,106,0,0.45); }
50% { box-shadow: 0 4px 16px rgba(0,27,62,0.08), 0 0 0 9px rgba(245,106,0,0); }
100% { box-shadow: 0 4px 16px rgba(0,27,62,0.08), 0 0 0 0 rgba(245,106,0,0); }
}
.booking-box .price { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.booking-box form label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin: 12px 0 5px; color: var(--ink); }
.booking-box form input, .booking-box form select {
width: 100%; box-sizing: border-box; max-width: 100%; min-width: 0;
padding: 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment);
}
/* ---------- Tables (admin) ---------- */
table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #556372; background: var(--parchment); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: #F7FAFC; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 220px; }
.actions form { display: inline; }
.table-scroll { width: 100%; overflow-x: auto; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.stat-card .num { font-size: 2rem; font-weight: 800; color: var(--ink); }
.stat-card .label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #616C76; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 28px; max-width: 640px; }
.form-card label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; margin: 14px 0 5px; color: var(--ink); }
.form-card input, .form-card textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }
.form-card textarea { min-height: 90px; resize: vertical; }
.error { color: #C0392B; font-size: 0.8rem; margin-top: 4px; }
.admin-nav { display: flex; gap: 2px; margin-bottom: 28px; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.admin-nav > a, .admin-nav .nav-group > .nav-group-label { padding: 12px 16px; font-size: 0.88rem; font-weight: 600; color: var(--charcoal); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; user-select: none; }
.admin-nav > a:hover, .admin-nav .nav-group:hover > .nav-group-label { color: var(--blue-mid); }
.admin-nav > a.active, .admin-nav .nav-group.active > .nav-group-label { color: var(--blue-mid); border-bottom-color: var(--blue-mid); }
.admin-nav .nav-group { position: relative; }
.admin-nav .nav-group-label .caret { font-size: 0.65rem; transition: transform 0.15s ease; opacity: 0.6; }
.admin-nav .nav-group.open .nav-group-label .caret { transform: rotate(180deg); }
.admin-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,27,62,0.12); min-width: 190px; padding: 6px; margin-top: 2px; }
.admin-nav .nav-group.open .dropdown-menu, .admin-nav .nav-group:hover .dropdown-menu { display: block; }
.admin-nav .dropdown-menu a { display: block; padding: 9px 12px; font-size: 0.85rem; font-weight: 500; color: var(--charcoal); border-radius: 6px; border-bottom: none; }
.admin-nav .dropdown-menu a:hover { background: var(--parchment); color: var(--blue-mid); }
.admin-nav .dropdown-menu a.active { background: var(--parchment); color: var(--blue-mid); font-weight: 700; }
@media (max-width: 900px) {
.admin-nav { flex-wrap: wrap; }
.admin-nav .dropdown-menu { position: static; box-shadow: none; border: none; display: none; padding-left: 12px; }
.admin-nav .nav-group.open .dropdown-menu { display: block; }
}
.admin-city-filter { padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font-size: 0.85rem; font-weight: 600; color: var(--ink); min-width: 160px; }
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 36px; width: 320px; box-shadow: 0 8px 30px rgba(0,27,62,0.12); }
.footer { position: relative; background: #0B0E1A; color: #A9C4DC; padding: 0 0 0; margin-top: 60px; overflow: hidden; }
/* Hidden on mobile - every link it carries is in the bottom nav's "More" sheet instead (see
fragments.html). On a phone this 3-column block became a long wall of links between the end
of the real content and the bottom of the page, and buried the links people actually reach
for (Track My Stay, Help centre, Contact us) far below the fold. Same 900px breakpoint the
bottom nav itself uses, so exactly one of the two is present at any width - never both,
never neither. */
@media (max-width: 900px) { .footer { display: none; } }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #9333EA, #EC4899, #FB923C); }
.footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 36px 0 8px; }
@media (max-width: 700px) { .footer .cols { grid-template-columns: repeat(2, 1fr); } }
.footer h4 { color: var(--white); font-size: 0.78rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.footer a { display: block; font-size: 0.85rem; color: #A9C4DC; margin-bottom: 10px; text-decoration: none; }
.footer a:hover { color: #FFFFFF; }
.footer .bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; font-size: 0.78rem; color: #7FA0C0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; text-align: left; }
.empty { text-align: center; padding: 60px 20px; color: #556372; }
.empty .display { color: var(--ink); }
/* ---------- Search results: breadcrumb, top filter strip, list cards ---------- */
.breadcrumb { font-size: 0.82rem; color: #556372; margin-bottom: 18px; }
.breadcrumb a { color: var(--blue-mid); font-weight: 600; }
.breadcrumb span { margin: 0 4px; }
.results-layout { padding-bottom: 50px; }
.filter-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.filter-card h4 { margin: 0 0 12px; font-size: 0.85rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.filter-card form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter-card form > div { display: flex; flex-direction: column; }
.filter-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.budget-inputs { display: flex; align-items: center; gap: 8px; }
.budget-inputs > div { position: relative; }
.budget-inputs input { width: 90px; padding: 9px 10px 9px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-size: 0.85rem; box-sizing: border-box; }
.budget-inputs .rupee-prefix { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: #616C76; }
.budget-inputs .dash { color: #616C76; }
.filter-card select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-size: 0.85rem; min-width: 140px; }
.filter-card .filter-actions { display: flex; flex-direction: column; }
@media (max-width: 800px) { .filter-card form { flex-direction: column; align-items: stretch; } .filter-card select, .filter-card .filter-actions { width: 100%; } .filter-card .filter-actions label { display: none; } }
.results-header h1 { font-size: 1.4rem; margin-bottom: 18px; }
.results-list { display: flex; flex-direction: column; gap: 16px; }
.result-card {
display: grid; grid-template-columns: 220px 1fr 160px; gap: 18px;
background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,27,62,0.06); transition: box-shadow 0.15s ease;
}
.result-card:hover { box-shadow: 0 10px 24px rgba(0,27,62,0.14); }
@media (max-width: 700px) { .result-card { grid-template-columns: 1fr; } }
.result-img { height: 180px; }
@media (max-width: 700px) { .result-img { height: 200px; } }
.result-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-body { padding: 16px 0; }
.result-body .loc { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--blue-mid); }
.result-body h3 { font-size: 1.1rem; margin: 4px 0 2px; color: var(--ink); }
.result-body .desc { font-size: 0.85rem; color: #556372; margin-top: 6px; }
.result-price { padding: 16px 16px 16px 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
@media (max-width: 700px) { .result-price { align-items: flex-start; padding: 0 16px 16px; } }
.result-price .amt { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.result-price .per-night { font-size: 0.75rem; color: #616C76; }
/* Rich text content (from the admin WYSIWYG editor) */
.rich-content p { margin: 0 0 16px; }
.rich-content h2 { font-size: 1.25rem; margin: 24px 0 10px; color: var(--ink); }
.rich-content h3 { font-size: 1.1rem; margin: 20px 0 8px; color: var(--ink); }
.rich-content ul, .rich-content ol { margin: 0 0 16px; padding-left: 22px; }
.rich-content li { margin-bottom: 6px; }
.rich-content strong { font-weight: 700; }
.rich-content a { color: var(--blue-mid); text-decoration: underline; }
.rich-content blockquote { border-left: 3px solid var(--line); padding-left: 14px; color: #556372; margin: 0 0 16px; }
/* ---------- Mobile-only sticky "Search stays in {city}" bar ---------- */
.mobile-search-cta { display: none; }
@media (max-width: 560px) {
.mobile-search-cta {
display: block; position: fixed; left: 0; right: 0; z-index: 150;
/* Sits just above the persistent mobile bottom tab bar (see .mobile-bottom-nav above)
rather than under/behind it - bottom:0 would put this directly beneath the nav. */
bottom: var(--mobile-bottom-nav-height);
background: var(--navy-header); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.mobile-search-cta-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
background: var(--brand-gold); color: var(--navy-header); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
font-weight: 700; font-size: 0.95rem; text-decoration: none;
padding: 13px 18px; border-radius: 12px; min-height: 46px;
}
.mobile-search-cta-btn strong { font-weight: 800; }
/* Pages with this bar need bottom padding so the fixed bar never covers page content or
footer links - each page that includes the fragment must also add class "has-mobile-cta"
to its or last section, see individual templates. */
body.has-mobile-cta { padding-bottom: 74px; }
}
/* ---------- Grid/flex shrink safety net (see the select/input/textarea rule near the top) ----------
The rule above fixes the form-control case globally. This covers the same min-width:auto
trap for the remaining grid containers, where the intrinsic minimum can instead come from a
long unbreakable string (a property name, an email address, a URL) rather than a .
Listed explicitly rather than via a wildcard selector so it only ever touches known layout
containers and can't have surprise side effects on unrelated markup. */
.detail-grid > *, .mini-search-form > *, .trust-row > *, .dest-grid > *,
.grid > *, .stat-row > *, .footer .cols > * { min-width: 0; }