/* =============================================================
   KASHI OF NORTH — SINGLE LISTING TEMPLATE FIX + POLISH
   Covers single-hotels.php, single-places.php, single-businesses.php,
   single-taxi.php (single-news.php benefits from the shared bits too).

   WHY THIS FILE EXISTS
   Auditing kon-enhance.css + style.css showed these templates output
   markup for .kon-single-hero, .kon-single-layout, .kon-single-main,
   .kon-single-sidebar, .kon-contact-card, .kon-related-section and
   .kon-prose — but NONE of those classes had base rules anywhere in
   the theme. Only a tablet-width override for .kon-single-layout
   existed, assuming a grid that was never actually defined. Result:
   the hero image collapsed to 0 height on any listing with more than
   one photo (the slider is absolutely positioned inside a parent with
   no height), and main/sidebar just stacked as plain blocks with no
   grid, no gap, and no sticky behaviour at any screen size.
   Loaded after kon-enhance.css.
   ============================================================= */

:root {
    /* Astra's header is sticky (position:sticky;top:0) with no fixed
       height, so this is a safe estimate + breathing room for the
       sticky sidebar's top offset. Adjust here if the header height
       changes. */
    --kon-sticky-offset: 96px;
}

/* Breadcrumb styling lives in kon-enhance.css now — kon_breadcrumb()
   is used on single-listing pages AND taxonomy-location.php, and
   kon-single.css isn't loaded on the latter (see kon_enqueue_styles()
   in functions.php), so a shared, always-loaded file is the correct
   home for it. */

/* -------------------------------------------------------------
   2. HERO — ROOT-CAUSE FIX + VISUAL UPGRADE
   .kon-single-hero previously had no position/height at all, so the
   absolutely-positioned Swiper slider (height:100% of a 0-height
   parent) never showed. This gives it real height, a proper media
   layer, a legibility gradient, and bigger, bolder overlay type.
   Also covers .kon-biz-hero (shares the base class) and gives the
   image-only .kon-taxi-hero a matching gradient + type treatment.
   ------------------------------------------------------------- */
.kon-single-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(360px, 42vw, 560px);
    background: var(--kon-slate);
    border-radius: 0 0 var(--kon-radius-xl) var(--kon-radius-xl);
    isolation: isolate;
}

/* Single-photo listings render a plain <img class="kon-single-hero__img">
   as a sibling — make it fill the hero exactly like the slider does. */
.kon-single-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.kon-single-hero .kon-hero-slider,
.kon-single-hero .kon-hero-slider__empty {
    z-index: 1;
}

.kon-single-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(16, 41, 31, .05) 0%,
        rgba(16, 41, 31, .10) 35%,
        rgba(16, 41, 31, .78) 100%
    );
}

.kon-single-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--kon-space-xl) 0 var(--kon-space-xl);
    color: var(--kon-white);
}

.kon-single-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .92;
    margin-bottom: .6rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.kon-single-hero__eyebrow a { color: inherit; }

.kon-single-hero__title {
    font-family: var(--kon-font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    line-height: 1.12;
    margin: 0 0 var(--kon-space-md);
    color: var(--kon-white);
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    max-width: 46ch;
}

.kon-single-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.kon-single-hero__badges .kon-badge {
    backdrop-filter: blur(6px);
    font-weight: 600;
}

/* Taxi's own hero (image directly inside .kon-taxi-hero, not the
   shared slider system) gets the same legibility gradient + type
   sizing so it matches the other three templates. */
.kon-taxi-hero {
    position: relative;
}
.kon-taxi-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(16, 41, 31, .05) 0%,
        rgba(16, 41, 31, .15) 40%,
        rgba(16, 41, 31, .82) 100%
    );
}
.kon-taxi-hero__content {
    position: relative;
    z-index: 1;
    color: var(--kon-white);
}
.kon-taxi-hero .kon-single-hero__title {
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}

@media (max-width: 640px) {
    .kon-single-hero {
        min-height: clamp(300px, 78vw, 420px);
        border-radius: 0 0 var(--kon-radius-lg) var(--kon-radius-lg);
    }
    .kon-single-hero__content { padding-bottom: var(--kon-space-lg); }
}

/* -------------------------------------------------------------
   3. MAIN LAYOUT GRID — ROOT-CAUSE FIX
   .kon-single-layout had zero grid definition anywhere (only a
   tablet-width override that assumed one already existed), so main
   content and the sidebar were just stacking as plain full-width
   blocks at every screen size, and the sidebar could never be sticky.
   ------------------------------------------------------------- */
.kon-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--kon-space-2xl);
    align-items: start;
    margin-top: var(--kon-space-xl);
}

.kon-single-main {
    display: flex;
    flex-direction: column;
    gap: var(--kon-space-2xl);
    min-width: 0;
}

.kon-single-sidebar {
    min-width: 0;
}

@media (min-width: 861px) {
    /* Anchor point for .is-bottomed below (position:absolute relative
       to this). */
    .kon-single-layout {
        position: relative;
    }
    .kon-single-sidebar {
        /* Always keep this in grid column 2 explicitly — once JS
           switches it to position:fixed/absolute it would otherwise
           fall out of the grid's auto-placement and could collapse
           to the wrong column. */
        grid-column: 2;
    }
    /* NOTE: deliberately NOT position:sticky. Sticky positioning
       breaks the instant any ancestor — including ones in Astra's
       own parent-theme markup this child theme can't see or
       control — has `overflow` set to anything but `visible` (see
       §8 for the same issue on the tab-nav, and the full explanation
       in kon-enhance.js). JS (initStickySidebar()) toggles between
       three states instead, which only depends on position:fixed
       (immune to ancestor overflow):
       - normal flow  (page hasn't scrolled to the sidebar yet)
       - .is-pinned   (position:fixed while scrolling through the
                       main column — JS sets top/left/width inline)
       - .is-bottomed (position:absolute, rests at the bottom of
                       .kon-single-layout once the main column's end
                       comes into view, so it never overlaps footer /
                       related-content sections below) */
    .kon-single-sidebar.is-pinned {
        position: fixed;
        z-index: 60;
    }
    .kon-single-sidebar.is-bottomed {
        position: absolute;
        bottom: 0;
    }
}

/* Tablet/small-laptop: existing narrower-sidebar rule in
   kon-enhance.css (grid-template-columns: 1fr 280px) still applies
   between 861–1180px and now has a real base grid to override. */

@media (max-width: 860px) {
    .kon-single-layout {
        grid-template-columns: 1fr;
        gap: var(--kon-space-xl);
        margin-top: var(--kon-space-lg);
    }
    .kon-single-sidebar {
        position: static;
        max-height: none;
    }
}

/* -------------------------------------------------------------
   4. PROSE (the_content / description block)
   ------------------------------------------------------------- */
.kon-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--kon-slate-mid);
}
.kon-prose p:last-child { margin-bottom: 0; }
.kon-prose h2, .kon-prose h3, .kon-prose h4 {
    font-family: var(--kon-font-display);
    color: var(--kon-ink);
    margin: var(--kon-space-lg) 0 var(--kon-space-sm);
}
.kon-prose ul, .kon-prose ol {
    padding-left: 1.25em;
    margin: 0 0 var(--kon-space-md);
}
.kon-prose li { margin-bottom: .35em; }
.kon-prose a { color: var(--kon-pine-mid); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .2s ease; }
.kon-prose a:hover { text-decoration-color: currentColor; }
.kon-prose img {
    border-radius: var(--kon-radius-lg);
    box-shadow: var(--kon-shadow-card);
}

/* -------------------------------------------------------------
   5. RELATED / DETAIL SECTIONS
   ------------------------------------------------------------- */
.kon-related-section__title {
    font-family: var(--kon-font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--kon-ink);
    margin: 0 0 var(--kon-space-lg);
    padding-left: var(--kon-space-md);
    position: relative;
}
.kon-related-section__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: .12em;
    bottom: .12em;
    width: 4px;
    border-radius: var(--kon-radius-pill);
    background: var(--kon-amber);
}

.kon-related-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kon-space-lg);
}
@media (max-width: 480px) {
    .kon-related-cards { grid-template-columns: 1fr; }
}

/* Driver / business "details" definition list */
.kon-acf-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--kon-space-md) var(--kon-space-xl);
    margin: 0;
}
.kon-acf-item { display: flex; flex-direction: column; gap: .2rem; }
.kon-acf-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kon-slate-light);
}
.kon-acf-value { font-size: .95rem; color: var(--kon-slate); font-weight: 500; }
.kon-acf-value a { color: var(--kon-pine-mid); }

/* -------------------------------------------------------------
   6. CONTACT / BOOKING CARD (sidebar) — conversion-focused polish
   ------------------------------------------------------------- */
.kon-contact-card {
    background: var(--kon-white);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-xl);
    padding: var(--kon-space-xl);
    box-shadow: var(--kon-shadow-card);
}
.kon-contact-card__title {
    font-family: var(--kon-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--kon-pine-dk);
    margin: 0 0 var(--kon-space-md);
}
.kon-contact-card__price-row {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: var(--kon-space-sm);
}
.kon-contact-card__price {
    font-family: var(--kon-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--kon-pine);
}
.kon-contact-card__per-night {
    font-size: .82rem;
    color: var(--kon-slate-light);
}
.kon-contact-card__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: var(--kon-space-md) 0;
}
.kon-contact-card__actions .kon-btn {
    width: 100%;
    justify-content: center;
}
.kon-contact-card__divider {
    height: 1px;
    background: var(--kon-border);
    margin: var(--kon-space-md) 0;
}
.kon-contact-card__detail-row {
    display: flex;
    gap: var(--kon-space-sm);
    font-size: .86rem;
    padding: .35rem 0;
    color: var(--kon-slate-mid);
}
.kon-contact-card__detail-label {
    min-width: 78px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--kon-slate-light);
}
.kon-contact-card__detail-row a { color: var(--kon-pine-mid); }

/* -------------------------------------------------------------
   7. MOBILE STICKY BOOKING BAR
   The sidebar's contact card is only reachable after scrolling past
   all the content on phones/tablets. This keeps Call + WhatsApp (or
   the most relevant actions) one tap away at all times on mobile,
   without disturbing the desktop sticky-sidebar experience.
   Rendered via kon_render_sticky_bar() in functions.php — markup is
   .kon-sticky-bar > (.kon-sticky-bar__price?) + .kon-sticky-bar__actions,
   followed by a sibling .kon-sticky-bar-spacer so the fixed bar never
   covers footer content.

   TWO LAYOUTS, chosen automatically by kon_render_sticky_bar():
   - No primary CTA: Call + WhatsApp render full-width, sharing the
     bar equally (.kon-sticky-bar__actions > .kon-btn, flex:1 each).
   - With a primary CTA (.kon-sticky-bar--with-primary): Call/WhatsApp
     collapse into compact round icon buttons (.kon-sticky-bar__icon-btn)
     so the primary action (.kon-sticky-bar__primary) gets the most
     thumb-reachable space — trekthehimalayas.com-style.
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   7. STICKY BOOKING BAR — mobile AND desktop
   Keeps Call/WhatsApp/primary-CTA reachable at all times, on any
   screen size, without duplicating the sidebar's contact card while
   it's already on screen. Rendered via kon_render_sticky_bar() in
   functions.php — markup is .kon-sticky-bar > (.kon-sticky-bar__price?)
   + .kon-sticky-bar__actions, followed by a sibling
   .kon-sticky-bar-spacer so the fixed bar never covers footer content.

   VISIBILITY is JS-driven (initStickyBar() in kon-enhance.js), not a
   width media query: an IntersectionObserver watches the sidebar's
   .kon-contact-card and toggles .is-visible on this bar whenever the
   contact card scrolls out of view — on mobile that's almost
   immediately (no sticky sidebar there), on desktop it's only once
   the pinned sidebar itself reaches the end of the main column and
   settles at the bottom (see §3 .kon-single-sidebar.is-bottomed).
   That way there's never a moment with two duplicate "Call/WhatsApp"
   bars fighting for attention on screen at once.

   TWO LAYOUTS, chosen automatically by kon_render_sticky_bar():
   - No primary CTA: Call + WhatsApp render full-width, sharing the
     bar equally (.kon-sticky-bar__actions > .kon-btn, flex:1 each).
   - With a primary CTA (.kon-sticky-bar--with-primary): on mobile,
     Call/WhatsApp collapse into compact round icon buttons
     (.kon-sticky-bar__icon-btn) so the primary action
     (.kon-sticky-bar__primary) gets the most thumb-reachable space.
     On desktop there's room for full labeled buttons throughout, so
     the icon-collapse is skipped.
   ------------------------------------------------------------- */
.kon-sticky-bar {
    display: none;
}
.kon-sticky-bar-spacer {
    display: none;
}

.kon-sticky-bar.is-visible {
    display: flex;
    align-items: center;
    gap: var(--kon-space-md);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    padding: .65rem var(--kon-space-md);
    padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--kon-white);
    border-top: 1px solid var(--kon-border);
    box-shadow: 0 -10px 28px -14px rgba(27,67,50,.28);
}

/* Optional price readout on the leading edge (rooms/nightly rate
   listings). Kept compact so it never crowds the action buttons. */
.kon-sticky-bar__price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex-shrink: 0;
}
.kon-sticky-bar__price-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kon-slate-light);
}
.kon-sticky-bar__price-value {
    font-family: var(--kon-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kon-pine);
    white-space: nowrap;
}

.kon-sticky-bar__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.kon-sticky-bar .kon-btn {
    white-space: nowrap;
    padding-inline: .9rem;
}

/* Layout A — no primary CTA: Call + WhatsApp share the bar equally */
.kon-sticky-bar:not(.kon-sticky-bar--with-primary) .kon-sticky-bar__actions .kon-btn {
    flex: 1 1 0;
    justify-content: center;
}

.kon-sticky-bar--with-primary .kon-sticky-bar__primary {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.kon-sticky-bar-spacer.is-visible {
    display: block;
}

/* Desktop: centered within the same reading width as the rest of the
   page, and roomy enough that Call/WhatsApp don't need to collapse
   to icon-only even when a primary CTA is present. */
@media (min-width: 861px) {
    .kon-sticky-bar.is-visible {
        max-width: var(--kon-container-max);
        margin-inline: auto;
        padding-inline: var(--kon-container-pad);
        padding-block: var(--kon-space-md);
    }
    .kon-sticky-bar__price-value {
        font-size: 1.2rem;
    }
    .kon-sticky-bar .kon-btn {
        padding-inline: 1.3rem;
    }
}

/* Mobile: Call/WhatsApp collapse to round icon buttons when a
   primary CTA is present, so the primary action gets the most
   thumb-reachable space — trekthehimalayas.com-style. Skipped on
   desktop, where there's room for full labeled buttons throughout. */
@media (max-width: 860px) {
    .kon-sticky-bar--with-primary .kon-sticky-bar__icon-btn {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        font-size: 1.15rem;
    }
}

/* -------------------------------------------------------------
   8. STICKY SUB-NAV TAB BAR
   Rendered via kon_render_tab_nav() in functions.php:
   nav.kon-tab-nav > div.kon-tab-nav__inner.kon-container.kon-scroll-x
   > a.kon-tab-nav__link[.is-active][data-kon-tab-target].

   NOTE: this deliberately does NOT use `position: sticky`. Sticky
   positioning breaks the instant ANY ancestor — including ones in
   Astra's own parent-theme markup that this child theme can't see
   or control — has `overflow` set to anything but `visible`. That
   turned out to be happening on this site. `position: fixed`,
   toggled by JS (initTabNav() in kon-enhance.js) once the bar
   scrolls to the top, is immune to that class of bug: it only
   breaks if an ancestor has a `transform`/`filter`/`perspective`,
   which is far rarer and not present here. The .kon-tab-nav-spacer
   element (also rendered by kon_render_tab_nav()) takes over the
   bar's normal-flow space the instant it's unpinned, so the page
   never jumps.
   ------------------------------------------------------------- */
.kon-tab-nav {
    position: relative;
    z-index: 800; /* below the site header (999), above page content */
    background: var(--kon-glass-bg);
    backdrop-filter: blur(var(--kon-glass-blur));
    -webkit-backdrop-filter: blur(var(--kon-glass-blur));
    border-bottom: 1px solid var(--kon-border);
    margin-bottom: var(--kon-space-xl);
}
.kon-tab-nav.is-pinned {
    position: fixed;
    top: var(--kon-header-h);
    left: 0;
    right: 0;
    margin-bottom: 0;
}
.kon-tab-nav-spacer {
    display: none;
}
.kon-tab-nav-spacer.is-active {
    display: block;
}

.kon-tab-nav__inner {
    gap: .4rem;
    padding-block: .65rem;
    /* .kon-scroll-x already supplies flex/overflow-x/snap; .kon-container
       supplies max-width + side padding. */
}

.kon-tab-nav__link {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.05rem;
    border-radius: var(--kon-radius-pill);
    font-size: .86rem;
    font-weight: 600;
    color: var(--kon-slate-mid);
    white-space: nowrap;
    transition: background-color var(--kon-transition), color var(--kon-transition);
}
.kon-tab-nav__link:hover {
    color: var(--kon-pine);
    background: var(--kon-pine-light);
}
.kon-tab-nav__link.is-active {
    background: var(--kon-pine);
    color: var(--kon-white);
}

@media (max-width: 640px) {
    .kon-tab-nav__link { padding: .5rem .9rem; font-size: .82rem; }
}

/* When both the sub-nav (top, sticky) and the booking bar (bottom,
   fixed) are on screen at once on mobile, make sure jump-to-section
   scrolling lands below the sub-nav rather than under it — handled in
   JS, this is just the static fallback for users with JS disabled or
   for direct #hash links on load. */
[id^="kon-tab-"] {
    scroll-margin-top: calc(var(--kon-header-h) + 56px);
}

/* -------------------------------------------------------------
   9. MISSING COMPONENT STYLES — ROOT-CAUSE FIX (round 2)
   Audit found six more classes rendered by the single templates with
   zero rules anywhere in the theme: .kon-driver-card (single-taxi),
   .kon-routes-list/.kon-route-item (single-taxi),
   .kon-location-panel (single-places), .kon-claim-cta
   (single-businesses). Adding them here, in the same visual language
   as .kon-contact-card / .kon-related-cards.
   ------------------------------------------------------------- */

/* --- Taxi: driver identity strip, top of main column --- */
.kon-driver-card {
    display: flex;
    align-items: center;
    gap: var(--kon-space-lg);
    background: var(--kon-white);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-xl);
    padding: var(--kon-space-lg) var(--kon-space-xl);
    box-shadow: var(--kon-shadow-card);
}
.kon-driver-card__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kon-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kon-white);
    background: linear-gradient(135deg, var(--kon-pine-mid), var(--kon-pine-dk));
}
.kon-driver-card__info { min-width: 0; }
.kon-driver-card__name {
    font-family: var(--kon-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kon-ink);
    margin: 0 0 .2rem;
}
.kon-driver-card__subtitle {
    font-size: .84rem;
    color: var(--kon-slate-light);
    margin: 0 0 .3rem;
}
.kon-driver-card__vehicle {
    font-size: .88rem;
    color: var(--kon-slate-mid);
    margin: 0;
}
@media (max-width: 480px) {
    .kon-driver-card { padding: var(--kon-space-md) var(--kon-space-lg); gap: var(--kon-space-md); }
    .kon-driver-card__avatar { width: 52px; height: 52px; font-size: 1.3rem; }
}

/* --- Taxi: "Destinations Covered" tappable route rows --- */
.kon-routes-list {
    display: flex;
    flex-direction: column;
    gap: var(--kon-space-sm);
}
.kon-route-item {
    display: flex;
    align-items: center;
    gap: var(--kon-space-md);
    padding: var(--kon-space-sm) var(--kon-space-md);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-lg);
    background: var(--kon-white);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--kon-transition), transform var(--kon-transition), box-shadow var(--kon-transition);
}
.kon-route-item:hover {
    border-color: var(--kon-pine-mid);
    box-shadow: var(--kon-shadow-card);
    transform: translateY(-1px);
}
.kon-route-item__img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--kon-radius-md);
    object-fit: cover;
}
.kon-route-item__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--kon-pine-light);
}
.kon-route-item__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 auto;
}
.kon-route-item__name {
    font-size: .96rem;
    color: var(--kon-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kon-route-item__meta {
    font-size: .78rem;
    color: var(--kon-slate-light);
}
.kon-route-item__arrow {
    flex-shrink: 0;
    color: var(--kon-pine-mid);
    font-weight: 700;
}

/* --- Places: "Location & Directions" panel --- */
.kon-location-panel {
    background: var(--kon-white);
    border: 1px solid var(--kon-border);
    border-radius: var(--kon-radius-xl);
    padding: var(--kon-space-xl);
    box-shadow: var(--kon-shadow-card);
}
.kon-location-panel__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kon-space-sm);
    margin-top: var(--kon-space-lg);
}
@media (max-width: 480px) {
    .kon-location-panel { padding: var(--kon-space-lg); }
    .kon-location-panel__cta .kon-btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Businesses: "Claim this listing" — deliberately QUIET.
   This CTA targets the business owner, not the visitor who is trying
   to convert (call/WhatsApp). Giving it the same visual weight as the
   contact card competes for attention and can pull clicks away from
   the action that actually earns you money. Muted/outlined treatment
   keeps it findable without competing. --- */
.kon-claim-cta {
    display: flex;
    align-items: flex-start;
    gap: var(--kon-space-md);
    background: var(--kon-bg-alt);
    border: 1px dashed var(--kon-border);
    border-radius: var(--kon-radius-lg);
    padding: var(--kon-space-lg);
}
.kon-claim-cta__icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    opacity: .7;
}
.kon-claim-cta__body { min-width: 0; }
.kon-claim-cta__title {
    font-family: var(--kon-font-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--kon-slate-mid);
    margin: 0 0 .3rem;
}
.kon-claim-cta__text {
    font-size: .84rem;
    line-height: 1.55;
    color: var(--kon-slate-light);
    margin: 0 0 var(--kon-space-md);
    max-width: 60ch;
}
.kon-claim-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kon-space-sm);
}
.kon-claim-cta__actions .kon-btn { padding: .55rem 1.1rem; font-size: .84rem; }
@media (max-width: 480px) {
    .kon-claim-cta { flex-direction: column; }
    .kon-claim-cta__actions .kon-btn { flex: 1 1 auto; justify-content: center; }
}

/* -------------------------------------------------------------
   10. TRUST MICRO-LINE (sidebar contact cards)
   One honest, low-key line of reassurance directly above the CTA
   buttons — no invented stats/urgency, just what's actually true.
   Rendered via kon_render_trust_line() in functions.php.
   ------------------------------------------------------------- */
.kon-trust-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--kon-pine-mid);
    background: var(--kon-pine-light);
    border-radius: var(--kon-radius-md);
    padding: .5rem .75rem;
    margin-bottom: var(--kon-space-md);
}

/* -------------------------------------------------------------
   11. "PLAN YOUR TRIP / CONTACT US" — platform-wide sidebar CTA
   Rendered via kon_render_platform_enquiry_cta() in functions.php.
   Deliberately a shade quieter than the listing's own contact card
   above it (outline-style border, no colored background) — this is
   a secondary path for people who haven't found what they need yet,
   not competition for the primary per-listing WhatsApp/Call CTA.
   ------------------------------------------------------------- */
.kon-platform-cta {
    border-style: dashed;
}
.kon-platform-cta__text {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--kon-slate-light);
    margin: 0 0 var(--kon-space-md);
}
.kon-platform-cta__btn {
    width: 100%;
    justify-content: center;
}

/* -------------------------------------------------------------
   12. "PLAN YOUR TRIP" POPUP MODAL
   Rendered once per page via kon_render_platform_enquiry_modal()
   (hooked to wp_footer), opened by any button with
   data-kon-modal-open="kon-enquiry-modal" — see initModals() in
   kon-enhance.js. Holds either the site's actual Fluent Form (once
   configured) or a WhatsApp/Call/Email fallback.
   ------------------------------------------------------------- */
.kon-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}
.kon-modal.is-open {
    display: block;
}
.kon-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 20, .55);
}
.kon-modal__panel {
    position: relative;
    max-width: 480px;
    width: calc(100% - 2rem);
    margin: 6vh auto;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--kon-white);
    border-radius: var(--kon-radius-xl);
    padding: var(--kon-space-xl);
    box-shadow: 0 24px 60px -20px rgba(15, 30, 20, .4);
}
.kon-modal__close {
    position: absolute;
    top: var(--kon-space-md);
    right: var(--kon-space-md);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--kon-border);
    background: var(--kon-white);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.kon-modal__heading {
    font-family: var(--kon-font-display);
    font-size: 1.3rem;
    margin: 0 0 var(--kon-space-sm);
    padding-right: 2rem;
}
.kon-modal__intro {
    font-size: .88rem;
    color: var(--kon-slate-mid);
    margin: 0 0 var(--kon-space-lg);
}
.kon-modal__fallback {
    display: flex;
    flex-direction: column;
    gap: var(--kon-space-sm);
}
.kon-modal__fallback .kon-btn {
    width: 100%;
    justify-content: center;
}
/* A light touch on Fluent Forms' own markup so it doesn't look
   totally foreign inside the modal — real field-level styling still
   belongs in Fluent Forms' own settings, this is just enough to blend
   in (rounded corners, matching border/font). */
.kon-modal__form input[type="text"],
.kon-modal__form input[type="tel"],
.kon-modal__form input[type="email"],
.kon-modal__form input[type="date"],
.kon-modal__form input[type="number"],
.kon-modal__form select,
.kon-modal__form textarea {
    border-radius: var(--kon-radius-md) !important;
    border-color: var(--kon-border) !important;
    font-family: var(--kon-font-body) !important;
}

body.kon-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .kon-modal__panel {
        margin: 4vh auto;
        padding: var(--kon-space-lg);
    }
}