/* ============================================================================
   TIQETS STYLES
   ----------------------------------------------------------------------------
   Companion stylesheet for the Tiqets affiliate system (list + detail pages
   and the shared card renderer). Matches the visual language of the Viator
   tour-styles.css: plain CSS, red / dark-grey palette, 8px radius, soft
   shadows, hover-lift, single 768px mobile breakpoint.

   Palette (shared with the Viator sites for family consistency):
     Primary red        #d01824
     Red hover          #b01520
     Dark grey          #4a4a4a
     Text               #2b2b2b
     Muted text         #666
     Hairline / border  #e6e6e6
     Card shadow        0 4px 15px rgba(0,0,0,0.08)

   Enqueue after the child stylesheet, e.g. in the child theme:
     wp_enqueue_style('tiqets-styles',
        get_stylesheet_directory_uri() . '/tiqets-styles.css',
        array('child-stylesheet'));
   ============================================================================ */

/* ----------------------------------------------------------------------------
   LIST WRAPPER + FILTERS
   ---------------------------------------------------------------------------- */
.tiqets-list-wrapper {
    margin: 20px 0 40px;
}

/* Filter bar — matches the Viator (.cc-filters) design: white rounded card,
   soft shadow, 2px input borders with focus state, button pushed to the right
   via margin-left:auto, stacks full-width on mobile. Ported to the red Tiqets
   palette so it harmonises with the red cards/buttons rather than Viator's blue.
   To use Viator's literal blue instead, change #d01824 -> #0066a1 (button),
   #b01520 -> #005288 (hover) and the select focus border below. */
.tiqets-filters {
    background: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.tiqets-filters label {
    font-weight: 600;
    margin-right: 5px;
    color: #333;
    min-width: 60px;
}

.tiqets-filters select {
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    min-width: 150px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    font-size: 16px;
}

.tiqets-filters select:focus {
    outline: none;
    border-color: #d01824;
}

.tiqets-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tiqets-filters button {
    background: #d01824;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    margin-left: auto;
}

.tiqets-filters button:hover {
    background: #b01520;
    transform: translateY(-1px);
}

.tiqets-results-info {
    margin-bottom: 20px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tiqets-results-info .count {
    font-weight: 600;
    color: #333;
}

/* ----------------------------------------------------------------------------
   PRODUCT GRID
   ---------------------------------------------------------------------------- */
/* Grid caps at 3 columns on wide screens. `repeat(3, ...)` fixes the maximum
   at three; the 768px breakpoint drops it to a single column on mobile, and the
   intermediate rule below steps it to two on mid-width screens so cards don't
   get too narrow. */
.tiqets-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 32px;
}

.tiqets-grid-featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two columns on mid-width screens (tablet / small laptop). */
@media (max-width: 1024px) {
    .tiqets-grid,
    .tiqets-grid-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------------------
   CARD (shared by both modes)
   ---------------------------------------------------------------------------- */
.tiqets-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* Whole-card link (detail-pages mode) */
.tiqets-card-linked .tiqets-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.tiqets-card-linked:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Static card (list-only mode) — card itself does NOT lift; only the button
   is interactive, so we keep the card visually calm. */
.tiqets-card-static .tiqets-card-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Media -------------------------------------------------------------------- */
.tiqets-card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: #eee;
    overflow: hidden;
}

.tiqets-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tiqets-promo-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #d01824;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
}

.tiqets-soldout-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(43, 43, 43, 0.9);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
}

/* Body --------------------------------------------------------------------- */
.tiqets-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.tiqets-card-title {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #2b2b2b;
    margin: 0;
}

.tiqets-card-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* Rating ------------------------------------------------------------------- */
.tiqets-card-rating,
.tiqets-single-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #2b2b2b;
}

.tiqets-stars {
    display: inline-flex;
    line-height: 1;
    color: #f5a623;
    letter-spacing: 1px;
}

.tiqets-star-empty {
    color: #d9d9d9;
}

.tiqets-rating-num {
    font-weight: 700;
}

.tiqets-rating-count {
    color: #888;
    font-size: 13px;
}

/* Price --------------------------------------------------------------------
   Inline flex layout: the label, value and note flow left-to-right on one line
   and wrap onto the next line only when the card is too narrow. This is a flex
   ROW with wrap (not a column), so it never collapses to a near-zero width the
   way a nested flex column did (which previously broke the note per word).
   `min-width: 0` on the block plus normal word-break keeps the note wrapping by
   whole words, not characters. */
.tiqets-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
}

.tiqets-price-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    line-height: 1.2;
    flex: 0 0 auto;
}

.tiqets-price-value {
    font-size: 22px;
    font-weight: 800;
    color: #2b2b2b;
    line-height: 1.15;
    flex: 0 0 auto;
}

.tiqets-price-value.has-discount {
    color: #d01824;
}

.tiqets-price-original {
    font-size: 15px;
    color: #999;
    text-decoration: line-through;
    margin-right: 0; /* gap handled by the flex column-gap */
    flex: 0 0 auto;
}

.tiqets-price-note {
    font-size: 12px;
    color: #888;
    /* Allow the note to take remaining space and wrap by whole words. When
       there isn't room beside the value, it wraps to its own line. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

/* Card eyebrow (product-type label above the title, e.g. GUIDED TOUR) ------- */
.tiqets-card-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 2px;
}

/* Card duration line -------------------------------------------------------- */
.tiqets-card-duration {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.tiqets-card-duration::before {
    content: "\1F552"; /* clock */
    margin-right: 5px;
    font-size: 12px;
}

/* Image credit -------------------------------------------------------------
   Tiqets require the credit to be shown when a `credits` value is present.
   By default we keep it on the DETAIL view (where the image is shown at size)
   and hide it only on the LIST/card thumbnails to keep the grid clean.

   To hide it EVERYWHERE instead, uncomment the second rule below. Note that
   fully hiding a present credit may conflict with Tiqets' image terms. */
.tiqets-img-credit {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    font-style: italic;
}

/* Hide credit on list/card thumbnails only. */
.tiqets-card .tiqets-img-credit {
    display: none;
}

/* Hide credit in BOTH views — uncomment to enable (see note above).
.tiqets-img-credit {
    display: none !important;
}
*/

/* Buttons ------------------------------------------------------------------ */
.tiqets-btn {
    display: inline-block;
    text-align: center;
    background: #d01824;
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.tiqets-btn:hover {
    background: #b01520;
    transform: translateY(-2px);
    color: #fff !important;
}

/* "View details" pill inside the linked card sits at the bottom */
.tiqets-btn-view {
    margin: 0 18px 18px;
}

/* Outbound button in list-only mode spans the card foot */
.tiqets-btn-outbound {
    margin: 0 18px 18px;
}

.tiqets-card-static {
    /* keep the button pinned to the bottom regardless of body height */
    justify-content: space-between;
}

/* ----------------------------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------------------------- */
.tiqets-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px 0;
}

.tiqets-pagination a,
.tiqets-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    color: #2b2b2b;
    background: #fff;
}

.tiqets-pagination a:hover {
    border-color: #d01824;
    color: #d01824;
}

.tiqets-pagination .current {
    background: #d01824;
    border-color: #d01824;
    color: #fff;
    font-weight: 700;
}

.tiqets-pagination .disabled {
    color: #bbb;
    background: #f7f7f7;
}

/* ----------------------------------------------------------------------------
   SINGLE (DETAIL) PAGE
   ---------------------------------------------------------------------------- */

/* Wrapper replaces the theme's #content.site-content on detail pages. Because
   the detail page is served via a rewrite rule (not a real Page), the theme
   may apply a .blog/.archive body class whose stylesheet turns .site-content
   into a multi-column grid — which previously shattered the layout. We render
   our own wrapper and force block display / full width so no inherited grid or
   flex rule from the theme can apply to it. */
.tiqets-single-wrapper {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.tiqets-single-header {
    margin-bottom: 24px;
}

.tiqets-single-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d01824;
    margin: 0 0 6px;
}

.tiqets-single-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    color: #2b2b2b;
    margin: 0 0 8px;
}

.tiqets-single-tagline {
    font-size: 18px;
    line-height: 1.5;
    color: #666;
    margin: 0 0 12px;
}

.tiqets-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: #666;
}

.tiqets-single-location::before {
    content: "\1F4CD";
    margin-right: 4px;
}

.tiqets-single-unavailable {
    background: #f0f0f0;
    color: #b01520;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}

/* Two-column layout: main + sticky booking aside ----------------------------
   Uses flexbox rather than grid. A CSS grid `1fr` track can resolve to almost
   zero width when the grid container itself has no resolved width in the host
   theme (e.g. when Sinatra's .si-entry is a flex item), which collapses the
   main column and makes text wrap one character per line. Flexbox with an
   explicit min-width on the main column avoids that failure mode entirely. */
/* ---- WOOCOMMERCE-STYLE PRODUCT LAYOUT -------------------------------------
   Top section: two columns (gallery 55% / summary 45%). Below: full-width
   stacked content. On mobile both columns stack; the summary's internal order
   (title, ratings, price, tagline, button, meta) already gives the desired
   mobile order, and the gallery sits above it. */

.tiqets-product-top {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: flex-start;
    margin: 0 0 40px;
    width: 100%;
    box-sizing: border-box;
}

.tiqets-product-top > * {
    box-sizing: border-box;
    min-width: 0;
}

/* Each column grows to share the row equally. flex-basis:0 (not 50%) means the
   36px gap is subtracted from the shared space rather than added on top of two
   literal 50% columns, which previously overflowed and wrapped the right column
   under the left. min-width:0 lets them shrink instead of forcing a wrap. */
.tiqets-gallery-col {
    flex: 1 1 0;
    min-width: 0;
}

.tiqets-summary-col {
    flex: 1 1 0;
    min-width: 0;
}

.tiqets-media {
    width: 100%;
}

/* Main square product image. */
.tiqets-main-image {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: #f2f2f2;
    cursor: zoom-in;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    aspect-ratio: 1 / 1;
}

.tiqets-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tiqets-main-credit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-style: italic;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Magnifier badge on the main image. */
.tiqets-hero-zoom {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
}

/* Thumbnail row beneath the main image. */
.tiqets-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.tiqets-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #f2f2f2;
    aspect-ratio: 1 / 1;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tiqets-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tiqets-thumb:hover {
    transform: translateY(-1px);
}

.tiqets-thumb.is-current {
    border-color: #d01824;
}

/* ---- Summary column ------------------------------------------------------- */
.tiqets-summary-col .tiqets-single-eyebrow {
    margin-bottom: 6px;
}

.tiqets-summary-col .tiqets-single-title {
    margin: 0 0 10px;
}

.tiqets-summary-rating {
    margin: 0 0 14px;
}

.tiqets-summary-price {
    margin: 0 0 14px;
}

.tiqets-summary-col .tiqets-single-tagline {
    margin: 0 0 18px;
}

.tiqets-summary-col .tiqets-btn-book {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    text-align: center;
}

.tiqets-summary-col .tiqets-booking-instant {
    text-align: center;
    color: #2e7d32;
    font-weight: 600;
    font-size: 13px;
    margin: 8px 0 0;
}

/* Button + "Instant confirmation" wrapper. Stacked by default (mobile); on
   desktop (1025px+, where the two-column layout applies) the button shrinks to
   its content width and the note sits inline to its right. */
.tiqets-book-row {
    /* Base/mobile: block flow, button full width, note below (unchanged look). */
    display: block;
}

@media (min-width: 1025px) {
    .tiqets-book-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }
    .tiqets-summary-col .tiqets-book-row .tiqets-btn-book {
        display: inline-block;
        width: auto;
    }
    .tiqets-summary-col .tiqets-book-row .tiqets-booking-instant {
        margin: 0;
        text-align: left;
    }
}

/* Compact meta list under the booking button.
   Uses a grid so any number of items lays out cleanly. On desktop it's two
   columns (items flow two-per-row regardless of count); on mobile one column.
   Each cell stacks its label above the value so longer values fit a half-width
   cell without colliding. */
.tiqets-meta {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eee;
    display: grid;
    grid-template-columns: 1fr; /* mobile: single column */
    gap: 12px 24px;
}

.tiqets-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.tiqets-meta-label {
    color: #888;
    flex: 0 0 auto;
}

.tiqets-meta-value {
    color: #2b2b2b;
    font-weight: 600;
    text-align: right;
}

/* Desktop (1025px+): two columns, each cell stacks label above value. */
@media (min-width: 1025px) {
    .tiqets-meta {
        grid-template-columns: 1fr 1fr;
    }
    .tiqets-meta-row {
        flex-direction: column;
        justify-content: flex-start;
        gap: 2px;
    }
    .tiqets-meta-value {
        text-align: left;
    }
}

/* ---- Full-width content below both columns -------------------------------- */
.tiqets-product-content {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
}

.tiqets-product-content img {
    max-width: 100%;
    height: auto;
}

/* ---- LIGHTBOX ------------------------------------------------------------- */
.tiqets-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiqets-lightbox[hidden] {
    display: none;
}

.tiqets-lb-stage {
    margin: 0;
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tiqets-lb-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
}

.tiqets-lb-credit {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    text-align: center;
}

.tiqets-lb-close,
.tiqets-lb-prev,
.tiqets-lb-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
    /* Zero padding and line-height so flex centering uses the glyph's true box,
       stopping the ×/‹/› characters hanging low in their circles. */
    padding: 0;
    line-height: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.tiqets-lb-close:hover,
.tiqets-lb-prev:hover,
.tiqets-lb-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.tiqets-lb-close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 30px;
}

.tiqets-lb-prev,
.tiqets-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 34px;
}

.tiqets-lb-prev { left: 12px; }
.tiqets-lb-next { right: 12px; }

.tiqets-lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border-radius: 12px;
}

/* Legacy single-hero rules retained harmlessly for any old markup. */
.tiqets-single-hero {
    margin: 0 0 24px;
    border-radius: 8px;
    overflow: hidden;
}

.tiqets-single-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.tiqets-single-hero figcaption {
    padding: 6px 10px;
    background: #f7f7f7;
}

/* Quick facts --------------------------------------------------------------
   minmax(140px,1fr) so the panel tiles cleanly inside the (narrower) main
   column beside the 300px aside, instead of dropping single lopsided rows. */
.tiqets-facts {
    list-style: none;
    margin: 0 0 28px;
    padding: 18px 20px;
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px 20px;
}

.tiqets-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.tiqets-fact-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
}

.tiqets-fact-value {
    color: #2b2b2b;
    font-weight: 600;
}

/* Content sections --------------------------------------------------------- */
.tiqets-single-main h2 {
    font-size: 22px;
    font-weight: 700;
    color: #2b2b2b;
    margin: 32px 0 12px;
}

.tiqets-single-summary,
.tiqets-single-included,
.tiqets-single-excluded,
.tiqets-single-exhibitions,
.tiqets-single-gallery,
.tiqets-single-location-block {
    margin-bottom: 8px;
}

.tiqets-single-main p,
.tiqets-single-main li {
    font-size: 16px;
    line-height: 1.65;
    color: #333;
    /* Guard against per-character wrapping: force normal word breaking and
       whitespace handling regardless of any inherited theme rule. If a
       container is ever too narrow, text overflows visibly rather than
       stacking one glyph per line. */
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.tiqets-single-main ul {
    padding-left: 20px;
}

.tiqets-single-main li {
    margin-bottom: 6px;
}

.tiqets-fulldesc-link a {
    color: #d01824;
    font-weight: 600;
    text-decoration: none;
}

.tiqets-fulldesc-link a:hover {
    text-decoration: underline;
}

/* Exhibitions -------------------------------------------------------------- */
.tiqets-exhibitions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tiqets-exhibitions li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.tiqets-exh-dates {
    color: #888;
    font-size: 14px;
    font-weight: 400;
}

/* Gallery ------------------------------------------------------------------ */
.tiqets-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.tiqets-gallery-item {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tiqets-gallery-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.tiqets-gallery-item figcaption {
    padding: 4px 8px;
    background: #f7f7f7;
    font-size: 10px;
}

/* Location / supplier ------------------------------------------------------ */
.tiqets-venue-map a {
    color: #d01824;
    font-weight: 600;
    text-decoration: none;
}

.tiqets-venue-map a:hover {
    text-decoration: underline;
}

.tiqets-supplier {
    font-size: 13px;
    color: #999;
    margin-top: 24px;
}

/* Booking aside ------------------------------------------------------------ */
.tiqets-single-aside {
    flex: 0 0 300px;
    max-width: 300px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.tiqets-booking-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tiqets-booking-card .tiqets-promo-label {
    position: static;
    align-self: flex-start;
}

.tiqets-price-block-large .tiqets-price-value {
    font-size: 28px;
}

.tiqets-btn-book {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
}

.tiqets-booking-fee,
.tiqets-booking-cancel,
.tiqets-booking-instant {
    font-size: 13px;
    color: #666;
    margin: 0;
    text-align: center;
}

.tiqets-booking-instant {
    color: #2e7d32;
    font-weight: 600;
}

/* Not-found fallback ------------------------------------------------------- */
.tiqets-notfound h1 {
    font-size: 28px;
    color: #2b2b2b;
    margin-bottom: 12px;
}

.tiqets-grid-fallback {
    margin-top: 24px;
}

/* ----------------------------------------------------------------------------
   "MORE TICKETS & TOURS" CAROUSEL (detail page only)
   ----------------------------------------------------------------------------
   Full-bleed dark strip. Breaks out of the centred content column using the
   50vw margin technique so the dark background spans the whole viewport width.
   Cards use the shared renderer; the track slides one card per arrow click. */
.tiqets-carousel-strip {
    /* Full-bleed to viewport edges without causing horizontal scroll. The
       calc(-50vw + 50%) margins are scrollbar-safe, unlike a raw -50vw/100vw. */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: auto;
    box-sizing: border-box;
    background: #1e2230;
    padding: 40px 0;
    margin-top: 48px;
    overflow: hidden;
}

/* Inner wrapper re-centres the content to a sensible max width. */
.tiqets-carousel-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.tiqets-carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.tiqets-carousel-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.tiqets-carousel-nav {
    display: flex;
    gap: 10px;
}

.tiqets-carousel-arrow {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 26px;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    transition: background 0.2s ease;
}

.tiqets-carousel-arrow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}

.tiqets-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.tiqets-carousel-viewport {
    overflow: hidden;
}

.tiqets-carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Each item is sized so 4 show across (accounting for the 3 gaps of 24px). */
.tiqets-carousel-item {
    flex: 0 0 calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
    box-sizing: border-box;
}

/* Cards inside the carousel fill their item and keep equal heights. */
.tiqets-carousel-item .tiqets-card {
    height: 100%;
}

/* Carousel item counts step to match the JS perView() breakpoints:
   <=1200 -> 3, <=900 -> 2, <=600 -> 1. (Gap is 24px between items.) */
@media (max-width: 1200px) {
    .tiqets-carousel-item {
        flex: 0 0 calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
    }
}

@media (max-width: 900px) {
    .tiqets-carousel-item {
        flex: 0 0 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 600px) {
    .tiqets-carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .tiqets-carousel-title {
        font-size: 19px;
    }
}

/* ----------------------------------------------------------------------------
   CATEGORY LIST SHORTCODE
   ---------------------------------------------------------------------------- */
.tiqets-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.tiqets-category-list li {
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.tiqets-category-list li:hover {
    border-color: #d01824;
    transform: translateY(-2px);
}

.tiqets-category-list a {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
    color: #2b2b2b;
    font-weight: 600;
}

.tiqets-count {
    color: #888;
    font-weight: 400;
}

/* ============================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   Desktop (default, above 1024px): two columns — gallery 55% left, summary 45%
   right. Full-width stacked content below.

   Mobile (<=1024px): the two columns stack (gallery above summary), giving the
   order: image, [thumbnails], then summary internals: title, ratings, price,
   tagline, Check availability, meta. The main <img> keeps its square crop; the
   lightbox works on tap.
   ============================================================================ */

@media (max-width: 1024px) {

    .tiqets-product-top {
        flex-direction: column;
        gap: 24px;
    }

    .tiqets-gallery-col,
    .tiqets-summary-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Cap the gallery width on tablet so the square image isn't enormous. */
    .tiqets-gallery-col {
        max-width: 520px;
    }

    .tiqets-product-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .tiqets-single-title {
        font-size: 26px;
    }

    .tiqets-single-tagline {
        font-size: 16px;
    }

    .tiqets-gallery-col {
        max-width: 100%;
    }

    .tiqets-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    .tiqets-grid,
    .tiqets-grid-featured {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tiqets-facts {
        grid-template-columns: 1fr;
    }

    .tiqets-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .tiqets-filter-group {
        width: 100%;
    }

    .tiqets-filters select {
        min-width: 0;
        width: 100%;
    }

    .tiqets-filters button {
        margin-left: 0;
        width: 100%;
    }
}