/**
 * Yalla Thailand — Location Page Custom CSS
 *
 * Scope:       Two selectors — choose based on where the element lives in the DOM:
 *
 *   #st-content-wrapper.st-location   → elements INSIDE the location wrapper
 *                                        (tour list, cards, result string, container)
 *                                        Specificity: (1,1,0)
 *
 *   body.single-location              → elements OUTSIDE the wrapper: modals,
 *                                        .mfp-bg backdrop, breadcrumbs, nav-tabs
 *                                        Specificity: (0,2,0) — higher than most
 *                                        plugin/theme rules at (0,1,0)
 *
 * RULES:
 *   - Inside the wrapper  → use #st-content-wrapper.st-location
 *   - Outside the wrapper → use body.single-location
 *   - No rule may use a bare class/element selector without one of these scopes.
 *   - Use var(--yalla-*) for any value likely to change in redesign.
 *   - Fallback value (second arg to var()) must match yalla-tokens.css default.
 *   - Never use !important — EXCEPT to cancel an upstream !important (document why).
 *   - Never modify main.css for custom rules. This file owns all customisation.
 *
 * File:        wp-content/mu-plugins/yalla-theme-custom/css/yalla-custom.css
 * Loaded by:   wp-content/mu-plugins/yalla-theme-custom.php
 * Depends on:  yalla-tokens.css (enqueue dependency declared in PHP loader)
 *
 * Migrated from: main.css appended block (Phase 3 — 2026-05-28)
 */


/* ============================================================
   1. LIST RESET
   Remove bullets and left padding from tour listing wrappers.

   Context: Traveler's WordPress content reset applies list-style:disc
   at specificity (0,1,0). Our (1,1,0) scope wins cleanly.
   Source: migrated from main.css appended block.
   ============================================================ */

#st-content-wrapper.st-location ul.booking-list,
#st-content-wrapper.st-location ul.loop-tours {
    list-style:   none;
    padding-left: 0;
    margin-left:  0;
}

#st-content-wrapper.st-location ul.booking-list > li,
#st-content-wrapper.st-location ul.loop-tours > li {
    list-style: none;
}


/* ============================================================
   2. CARD SPACING
   Vertical gap between individual tour cards in the booking list.
   ============================================================ */

#st-content-wrapper.st-location ul.booking-list > li {
    margin-bottom: var(--yalla-card-gap, 15px);
}


/* ============================================================
   3. CONTAINER TOP SPACING
   Padding above the injected tour section, below the banner.
   Adjust --yalla-location-top-padding token to change globally.
   ============================================================ */

#st-content-wrapper.st-location .st-blog > .container {
    padding-top: var(--yalla-location-top-padding, 30px);
}


/* ============================================================
   4. CARD COSMETICS  — Patch Pack v1 (layout-safe revision)
   Cosmetic-only rules for .booking-item internals.

   REMOVED (caused production layout break):
   - img { display:block; width:100% } — un-hid lazy-load placeholder
     img tags inside .booking-item-img-wrap → duplicate images stacked
   - .btn_book { display:block; width:100% } — broke price/button
     inline layout inside col-md-3 → button pushed out of position

   KEPT: overflow/radius on wrapper (visual only, no layout impact).
   KEPT: .package-info spacing/colour (text-level, no layout impact).
   KEPT: .btn_book margin-top only (spacing, no display change).

   Traveler's native img and button display model is left untouched.
   ============================================================ */

#st-content-wrapper.st-location .booking-item-img-wrap {
    overflow:      hidden;
    border-radius: var(--yalla-radius-card, 6px);
}

#st-content-wrapper.st-location .booking-item .package-info {
    margin-bottom: var(--yalla-space-xs, 4px);
    font-size:     var(--yalla-font-size-sm, 13px);
    color:         var(--yalla-color-text-muted, #777777);
}

#st-content-wrapper.st-location .booking-item .btn_book {
    margin-top: var(--yalla-space-md, 16px);
}


/* ============================================================
   5. BANNER / HERO FALLBACK  — Patch Pack v1
   Two layout modes on the location page:

   a) Full hero  (menu_transparent === 'on')
      → .st-banner renders at natural height with background image.
        Ensure a minimum so it never collapses to 0.

   b) No hero  (menu_transparent !== 'on')
      → .st-banner may be absent; only breadcrumbs show.
        Add breathing room so breadcrumbs don't sit flush
        against the sticky nav.

   Scoped to body.single-location (outside #st-content-wrapper).
   ============================================================ */

body.single-location .st-banner {
    min-height: 300px;
}

body.single-location .breadcrumb-wrapper,
body.single-location .st-breadcrumb {
    padding-top:    var(--yalla-space-md, 16px);
    padding-bottom: var(--yalla-space-md, 16px);
}


/* ============================================================
   6. MFP OVERLAY — OVERRIDE yalla-design.css  — Patch Pack v1
   Root cause: yalla-design-system plugin unconditionally adds
   body.yalla-design and loads yalla-design.css which sets:
     .yalla-design .mfp-bg { background: var(--yalla-primary) !important; }
   where --yalla-primary resolves to #4B2E1E (dark brown).

   Fix: re-assert standard dark overlay for location pages only.
   Must use !important — we are cancelling an !important upstream.
   body.single-location has higher specificity than .yalla-design.

   Scope: body.single-location — .mfp-bg is appended to <body>,
   outside #st-content-wrapper, so that scope does not apply here.
   ============================================================ */

body.single-location .mfp-bg {
    background: #0b0b0b !important;
    opacity:    0.8;
}

body.single-location .mfp-close {
    color: #ffffff !important;
}


/* ============================================================
   7. MFP SEARCH DIALOG  — Patch Pack v1
   The "try your search again" popup from result_string.php.
   Renders inside .mfp-search-dialog appended to <body>.
   ============================================================ */

body.single-location .mfp-search-dialog {
    max-width:    600px;
    margin:       0 auto;
    padding:      var(--yalla-space-lg, 24px);
    background:   var(--yalla-color-surface, #ffffff);
    border-radius: var(--yalla-radius-card, 6px);
}


/* ============================================================
   8. RESULT STRING SEPARATOR  — Patch Pack v1
   result_string.php outputs a tour count + "view all" link.
   The <hr> divider between it and the listing inherits
   traveler.css defaults; align colour to our token.
   ============================================================ */

#st-content-wrapper.st-location .result_string hr {
    margin-top:    var(--yalla-space-md, 16px);
    margin-bottom: var(--yalla-space-md, 16px);
    border-color:  var(--yalla-color-border, #e0e0e0);
}


/* ============================================================
   9. MODAL — Z-INDEX + BASELINE  — Patch Pack v1
   Elementor sections default to z-index: 1 but stacked Elementor
   widgets can reach z-index: 9999.
   Bootstrap modal/.modal-backdrop sit at 1050/1040 by default —
   raise them above Elementor layers on location pages.

   .modal-header and .modal-content: align to our token colours.
   Scoped to body.single-location (modals live outside wrapper).
   ============================================================ */

body.single-location .modal {
    z-index: 10050;
}

body.single-location .modal-backdrop {
    z-index: 10040;
}

body.single-location .modal-header {
    border-bottom: 1px solid var(--yalla-color-border, #e0e0e0);
    padding:       var(--yalla-space-md, 16px);
}

body.single-location .modal-content {
    border-radius: var(--yalla-radius-card, 6px);
    border:        1px solid var(--yalla-color-border, #e0e0e0);
}


/* ============================================================
   10. NAV-TABS — ACCOUNT ACTIVE STATE  — Patch Pack v1
   yalla-design.css overrides .nav-tabs globally with brand
   colours. Restore the standard active-tab indicator style
   for the account/login tabs on location pages, but use our
   primary token so it stays on-brand.
   ============================================================ */

body.single-location .nav-tabs > li.active > a,
body.single-location .nav-tabs > li.active > a:hover,
body.single-location .nav-tabs > li.active > a:focus {
    border-bottom-color: transparent;
    border-top-color:    var(--yalla-color-primary, #e8a020);
    color:               var(--yalla-color-primary, #e8a020);
}


/* ============================================================
   11. RESPONSIVE — TABLET  (max-width: 991px)
   Spacing adjustments only. NO col-* width overrides.

   REMOVED: width:100% on .col-md-3 / .col-md-6
   Bootstrap 3 already handles column stacking below 992px natively.
   Explicit width:100% on floated Bootstrap columns fights the grid
   and causes layout collapse on any viewport ≤ 991px
   (laptops, zoomed desktops, iPads in landscape).
   Let Bootstrap own column layout. We own spacing only.
   ============================================================ */

@media (max-width: 991px) {

    #st-content-wrapper.st-location .booking-item-img-wrap {
        margin-bottom: var(--yalla-space-sm, 8px);
    }

}


/* ============================================================
   14. MICRO-POLISH — horizontal rhythm + premium centering
   Container max-width and column text alignment only.
   Zero structural overrides.
   ============================================================ */

/* max-width: 1024px on .st-blog > .container was tested and reverted.
   Narrowing to 1024px compressed the content area too aggressively at
   desktop widths — Bootstrap's native container (1170px at ≥1200px)
   is the correct width for this layout. Do not re-add a hard max-width
   here without a full responsive audit at all four Bootstrap breakpoints.

/* Right-align price and Book Now in the action column.
   Targets .col-md-2 — the price/CTA column after the grid rebalance
   in loop-1.php (col-md-3 image / col-md-7 content / col-md-2 price).
   Simple class selector — no fragile :last-child or :nth-child needed.
   text-align is cosmetic — no float, width, or display change.
   Inline-block .btn elements respect parent text-align natively. */

#st-content-wrapper.st-location .booking-item > .row > .col-md-2 {
    text-align: right;
}


/* ============================================================
   15. PRICE/CTA COLUMN — inner flex alignment (float-safe)

   DECISION: row-level flex was considered and rejected.
   .booking-item > .row must remain a Bootstrap float container.
   Reasons: Bootstrap 3 clearfix (.row:after{clear:both}) becomes
   a no-op inside a flex container; Traveler JS offset reads and
   any future theme updates assume float-based row behaviour.

   TRADE-OFF ACCEPTED: true vertical centering relative to row height
   is not achievable in Bootstrap 3 float layout without row flex.
   Price+button will sit at the top of the column — this matches
   Viator/Klook's actual listing pattern (top-right price group).
   The primary goal (compact, right-aligned group) is fully met.

   SELECTORS (inner content of .col-md-2 only):

   A) .col-md-2 { display:flex; flex-direction:column; align-items:flex-end }
      The column's own float:left and width:16.67% (Bootstrap-set) are
      completely preserved. display:flex on a floated element changes
      only how that element's children are laid out — the column's
      position within the grid row is unchanged.
      align-items:flex-end  → right-aligns all child elements
                               (replaces text-align:right from §14).

   B) .col-md-2 > * + * { margin-top: 4px }
      Adjacent-sibling spacing — Safari ≤14.0 safe alternative to gap.
      gap in flexbox requires Safari 14.1+ (May 2021); this margin
      pattern works everywhere. Adds 4px above every child after the
      first (from-label → price → .info_price → CTA anchor).

   C) .col-md-2 .btn_book { margin-top: 0 }
      The §4 rule sets margin-top:16px on .btn_book. The <a> wrapper
      around it already gets 4px from rule B. Zero the inner margin
      to prevent cumulative 16px + 4px = 20px double-spacing.

   Bootstrap float clearing: UNTOUCHED.
   Responsive stacking below 992px: UNTOUCHED (entire block is gated
   inside @media (min-width:992px)).
   ============================================================ */

@media (min-width: 992px) {

    #st-content-wrapper.st-location .booking-item > .row > .col-md-2 {
        display:        flex;
        flex-direction: column;
        align-items:    flex-end;
    }

    #st-content-wrapper.st-location .booking-item > .row > .col-md-2 > * + * {
        margin-top: var(--yalla-space-xs, 4px);
    }

    #st-content-wrapper.st-location .booking-item > .row > .col-md-2 .btn_book {
        margin-top: 0;
    }

}


/* ============================================================
   16. PRICE/CTA MICRO-POLISH
   Typography and spacing inside .col-md-2 only.
   No widths. No floats. No display changes. No layout systems.
   Bootstrap box-sizing:border-box is global in Bootstrap 3 —
   border-left does NOT add to the column's computed width.
   ============================================================ */

/* Button padding reduction — Bootstrap default is 6px 12px.
   Slightly smaller padding keeps the CTA proportional in a
   narrow column without changing its display model or width. */

#st-content-wrapper.st-location .booking-item > .row > .col-md-2 .btn_book {
    padding-top:    5px;
    padding-bottom: 5px;
    padding-left:   10px;
    padding-right:  10px;
}

/* Wishlist icon — visually subordinate to the Book Now CTA.
   Smaller font-size reduces icon size; slight opacity de-emphasises
   it without hiding it. Only affects the icon anchor in this column. */

#st-content-wrapper.st-location .booking-item > .row > .col-md-2 .add-item-to-wishlist {
    font-size: var(--yalla-font-size-sm, 13px);
    opacity:   0.7;
}


/* ============================================================
   12. RESPONSIVE — MOBILE  (max-width: 480px)
   Populate in Phase 5 after responsive baseline audit.
   ============================================================ */

@media (max-width: 480px) {

    /* Phase 5 — to be completed after responsive baseline audit */

}


/* ============================================================
   13. PHASE 2 POLISH  — cosmetic only, zero structural overrides
   No col-* widths. No display changes on structural elements.
   No float/flex on Bootstrap rows. Padding/margin/color/typo only.
   ============================================================ */

/* ── Card separator
   Adds a hairline border between cards so rows read as distinct
   items rather than a continuous wall. margin-bottom (Section 2)
   still provides the gap; border-bottom adds visual definition.
   :last-child removes the trailing line before the result string.
   ─────────────────────────────────────────────────────────── */

#st-content-wrapper.st-location ul.booking-list > li.booking-item {
    border-bottom: 1px solid var(--yalla-color-border, #e0e0e0);
}

#st-content-wrapper.st-location ul.booking-list > li.booking-item:last-child {
    border-bottom: none;
}

/* ── Inner row breathing room
   padding-top/bottom on .row only — safe with Bootstrap 3's
   negative horizontal margins (we never touch left/right padding).
   Gives card content vertical air without changing column widths.
   ─────────────────────────────────────────────────────────── */

#st-content-wrapper.st-location ul.booking-list > li.booking-item > .row {
    padding-top:    var(--yalla-space-sm, 8px);
    padding-bottom: var(--yalla-space-sm, 8px);
}

/* ── Thumbnail consistent height
   min-height on wrapper (not img) — overflow:hidden from Section 4
   already clips. Ensures short-portrait images don't make short cards.
   ─────────────────────────────────────────────────────────── */

#st-content-wrapper.st-location .booking-item-img-wrap {
    min-height: 110px;
}

/* ── Title spacing
   Traveler h5 default has generous bottom margin.
   Reduce to token xs so title → meta reads as a tight unit.
   ─────────────────────────────────────────────────────────── */

#st-content-wrapper.st-location .booking-item .booking-item-title {
    margin-top:    0;
    margin-bottom: var(--yalla-space-xs, 4px);
    line-height:   1.35;
}

/* ── Price "from" label
   Visual secondary treatment — smaller, muted.
   No display change; Traveler's inline rendering preserved.
   ─────────────────────────────────────────────────────────── */

#st-content-wrapper.st-location .booking-item .booking-item-price-from {
    font-size: var(--yalla-font-size-sm, 13px);
    color:     var(--yalla-color-text-muted, #777777);
}