/* Upcoming events grid */
.venus-upcoming-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 24px 0; }
.venus-event-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; transition: box-shadow 0.15s; }
.venus-event-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.venus-event-card-link { display: block; color: inherit; text-decoration: none; }
.venus-event-card-image { aspect-ratio: 16 / 10; overflow: hidden; }
.venus-event-card-image img { width: 100%; height: 100%; object-fit: cover; }
.venus-event-card-body { padding: 14px 16px; }
.venus-event-card-body h3 { margin: 0 0 6px; }
.venus-event-card-date { color: #666; font-size: 14px; margin: 0 0 8px; }
.venus-no-events { color: #666; font-style: italic; }

/* Buy widget */
.venus-event-buy { margin: 32px 0; }
.venus-buy-section { background: #fafafa; border: 1px solid #ddd; border-radius: 6px; padding: 20px; }
.venus-buy-section h2 { margin-top: 0; }
.venus-buy-section h3 { margin: 16px 0 8px; }
.venus-event-closed p { color: #666; font-style: italic; }

.venus-button { background: #2271b1; color: #fff; border: 0; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer; }
.venus-button:hover:not(:disabled) { background: #135e96; }
.venus-button:disabled { background: #ccc; cursor: not-allowed; }
.venus-button-primary { background: #00a32a; padding: 12px 24px; font-size: 16px; margin-top: 16px; }
.venus-button-primary:hover:not(:disabled) { background: #008a20; }

/* Table grid */
.venus-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-bottom: 12px; }
.venus-table-button { background: #fff; border: 2px solid #ddd; border-radius: 4px; padding: 16px 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.venus-table-button:hover:not(:disabled) { border-color: #2271b1; }
.venus-table-button.is-selected { background: #2271b1; border-color: #135e96; color: #fff; }
.venus-table-button.is-held { background: #fff8d4; border-color: #d9b800; color: #6f5800; cursor: not-allowed; }
.venus-table-button.is-sold { background: #f0f0f0; border-color: #ccc; color: #999; cursor: not-allowed; text-decoration: line-through; }

/* ── Venue map (SVG overlay over venue image) ──────────────────── */
.venus-venue-map { margin: 16px 0; }
.venus-venue-map__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #111;
    border-radius: 8px;
}
.venus-venue-map__inner {
    position: relative !important;
    display: block;
    line-height: 0;            /* prevents tiny gap from inline-block image */
    width: 100%;
}
.venus-venue-map__image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    position: relative;        /* in normal flow; defines the container height */
    z-index: 0;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;      /* clicks pass through to the SVG polygon overlay */
}
.venus-venue-map__inner { user-select: none; -webkit-user-select: none; }
.venus-venue-map__overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.venus-venue-map__labels {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.venus-venue-map__hint { display: none; color: #888; font-size: 12px; margin: 6px 0 0; }

/* ── Polygons ──
   Stroke-only with a violet drop-shadow stack from Figma. Non-scaling
   stroke keeps the line ~1px on screen regardless of how big the venue
   image renders. The clickable hit-area is the polygon itself plus the
   matching HTML label card (see .venus-venue-label). */
.venus-venue-table { pointer-events: auto; cursor: pointer; }
.venus-venue-table polygon {
    fill: transparent;
    stroke: #E8B3FF;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px #DE92FF) drop-shadow(0 0 9px #E19BFF);
    transition: fill 0.15s ease-out;
}
.venus-venue-table:hover polygon,
.venus-venue-table.is-hovered polygon { fill: rgba(232, 179, 255, 0.15); }
.venus-venue-table.is-selected polygon { fill: rgba(232, 179, 255, 0.40); }
.venus-venue-table.is-held polygon,
.venus-venue-table.is-sold polygon,
.venus-venue-table.is-unavailable polygon {
    fill: rgba(232, 179, 255, 0.40);
    cursor: not-allowed;
}
.venus-venue-table.is-held,
.venus-venue-table.is-sold,
.venus-venue-table.is-unavailable { cursor: not-allowed; }

/* ── Connector line ──
   Thin violet line linking the bubble (polygon centroid) to the label
   card. Same stroke + glow as the polygon so the table reads as one
   visual unit when the label is offset. */
.venus-venue-connector {
    fill: none;
    stroke: #E8B3FF;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px #DE92FF) drop-shadow(0 0 9px #E19BFF);
    pointer-events: none;
}

/* ── Centre bubble ──
   Small glowing dot at the polygon centroid. Positioned by inline %
   coords from the renderer; CSS centres it on that point. */
.venus-venue-bubble {
    position: absolute;
    width: 0.88rem;
    height: 0.88rem;
    background: #E8B3FF;
    border: 1px solid #E8B3FF;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 16px #E8B3FF) drop-shadow(0 0 16px rgba(255, 255, 255, 0.75));
}

/* ── Label card ──
   HTML card pinned to label_x/label_y (image-coord %, centred horizontally
   on that point and top-aligned). Clickable mirror of the polygon — JS
   toggles is-selected on both nodes. */
.venus-venue-label {
    position: absolute;
    width: 9.6rem;
    padding: 0.8rem 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    border-radius: 0.8rem;
    border: 1px solid #E8B3FF;
    background: rgba(31, 31, 40, 0.50);
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
    color: #FFF;
    font-family: "Red Hat Display", system-ui, sans-serif;
    text-align: center;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
/* When the editor set position=above the anchor is the polygon's TOP edge —
   pull the card up by its own height so its bottom sits on that anchor. */
.venus-venue-label[data-position="above"] { transform: translate(-50%, -100%); }

/* ── Bacardi variant ──
   Gold polygon (stroke + glow), gold bubble + connector, gold-bordered
   horizontal pill label with the bat crest on the left. Every Bacardi
   table also gets a bat-icon overlay anchored to the polygon centroid
   (see .venus-venue-icon[data-style="bacardi"]). */
.venus-venue-table[data-style="bacardi"] polygon {
    stroke: #FFC72C;
    filter: drop-shadow(0 0 4px #D2B346) drop-shadow(0 0 9px #FFC72C);
}
.venus-venue-table[data-style="bacardi"]:hover polygon,
.venus-venue-table[data-style="bacardi"].is-hovered polygon { fill: rgba(255, 199, 44, 0.15); }
.venus-venue-table[data-style="bacardi"].is-selected polygon { fill: rgba(255, 199, 44, 0.40); }
.venus-venue-connector[data-style="bacardi"] {
    stroke: #FFC72C;
    filter: drop-shadow(0 0 4px #D2B346) drop-shadow(0 0 9px #FFC72C);
}
.venus-venue-bubble[data-style="bacardi"] {
    background: #FFC72C;
    border-color: #FFC72C;
    filter: drop-shadow(0 0 16px #FFC72C) drop-shadow(0 0 16px rgba(255, 255, 255, 0.75));
}
.venus-venue-label[data-style="bacardi"] {
    /* Same vertical card as regular tables, just gold-bordered. The bat
       icon overlaps the top border — see .venus-venue-label--bacardi__icon.
       Extra top padding keeps the BACARDI wordmark clear of the icon's
       lower half (icon is 2.5rem, sticks ~1.25rem into the card). */
    border-color: #FFC72C;
    padding-top: 1.6rem;
}
.venus-venue-label[data-style="bacardi"].is-selected { background: #FFC72C; color: #1F1F28; }
.venus-venue-label--bacardi__icon {
    position: absolute;
    top: 0;
    left: 50%;
    /* !important here + on the Bombay assets — the bigeye theme has
       `.table-reservation__table-selection img { height: 45rem }` which
       would otherwise blow these icons up to 450px tall. */
    width: 2.5rem !important;
    height: 2.5rem !important;
    object-fit: initial !important;
    /* Centred horizontally on the label, vertically split by the top border. */
    transform: translate(-50%, -50%);
}
.venus-venue-label--bacardi__brand,
.venus-venue-label--bacardi__tier {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2rem;
}
.venus-venue-label--bacardi__tier { font-weight: 500; opacity: 0.85; }

/* ── Bombay Sapphire variant ──
   Cyan/blue polygon, yellow-green bubble, vertical card with crest emblem,
   BOMBAY SAPPHIRE wordmark, "VIP lounge" subtitle and a price line. */
.venus-venue-table[data-style="bombay"] polygon {
    stroke: #1FB3ED;
    filter: drop-shadow(0 0 4px #1FB3ED) drop-shadow(0 0 9px #1FB3ED);
}
.venus-venue-table[data-style="bombay"]:hover polygon,
.venus-venue-table[data-style="bombay"].is-hovered polygon { fill: rgba(31, 179, 237, 0.18); }
.venus-venue-table[data-style="bombay"].is-selected polygon { fill: rgba(31, 179, 237, 0.40); }
.venus-venue-connector[data-style="bombay"] {
    stroke: #1FB3ED;
    filter: drop-shadow(0 0 4px #1FB3ED) drop-shadow(0 0 9px #1FB3ED);
}
.venus-venue-bubble[data-style="bombay"] {
    background: #FFC72C;
    border-color: #FFC72C;
    width: 1.6rem;
    height: 1.6rem;
    filter: drop-shadow(0 0 16px #FFC72C) drop-shadow(0 0 16px rgba(255, 255, 255, 0.75));
}
.venus-venue-label[data-style="bombay"] {
    width: 10.1rem;
    /* Top padding clears the crest's lower half (crest is 4rem,
       overhangs ~2rem into the card). */
    padding: 2.4rem 1rem 1rem;
    gap: 0.4rem;
    border-color: #A86E2D;
    background: rgba(31, 179, 237, 0.50);
    align-items: center;
}
.venus-venue-label[data-style="bombay"]:hover,
.venus-venue-label[data-style="bombay"].is-hovered { background: rgba(31, 179, 237, 0.65); }
.venus-venue-label[data-style="bombay"].is-selected { background: #1FB3ED; color: #1F1F28; }
/* Crest PNG sits ON the top border like the Bacardi bat — centred
   horizontally, vertically bisected by the border line. !important
   defeats the theme's `.table-reservation__table-selection img
   { height: 45rem }` rule. */
.venus-venue-label--bombay__crest {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto !important;
    height: 4rem !important;
    object-fit: initial !important;
    transform: translate(-50%, -50%);
    display: block;
}
.venus-venue-label--bombay__wordmark {
    width: 7rem !important;
    height: auto !important;
    object-fit: initial !important;
    display: block;
}
.venus-venue-label--bombay__tier {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
}
.venus-venue-label--bombay__price {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.venus-venue-label__name,
.venus-venue-label__capacity {
    align-self: stretch;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem;
}
.venus-venue-label__capacity { font-weight: 500; opacity: 0.85; }
.venus-venue-label:hover,
.venus-venue-label.is-hovered { background: rgba(31, 31, 40, 0.70); }
.venus-venue-label.is-selected {
    background: #E8B3FF;
    color: #1F1F28;
}
.venus-venue-label.is-held,
.venus-venue-label.is-sold,
.venus-venue-label.is-unavailable {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ── Mobile: pin the venue map at a usable width and let it scroll ── */
@media (max-width: 768px) {
    .venus-venue-map__inner { width: 900px; max-width: none; }
    .venus-venue-map__hint  { display: block; }
}

.venus-table-legend { display: flex; gap: 16px; font-size: 12px; color: #666; margin: 12px 0; flex-wrap: wrap; }
.venus-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.venus-dot-free { background: #fff; border: 2px solid #ddd; }
.venus-dot-held { background: #fff8d4; border: 2px solid #d9b800; }
.venus-dot-sold { background: #f0f0f0; border: 2px solid #ccc; }

/* Package options */
.venus-selected-table { display: inline-block; min-width: 30px; padding: 2px 10px; background: #2271b1; color: #fff; border-radius: 4px; font-weight: 700; }
.venus-package-option { display: block; background: #fff; border: 2px solid #ddd; border-radius: 4px; padding: 12px 14px; margin: 8px 0; cursor: pointer; transition: border-color 0.15s; position: relative; }
.venus-package-option:hover { border-color: #2271b1; }
.venus-package-option.is-selected { border-color: #2271b1; background: #f6faff; }
.venus-package-option input[type="radio"] { margin-right: 8px; }
.venus-package-option-title { font-weight: 600; }
.venus-package-option-price { float: right; color: #2271b1; font-weight: 600; }
.venus-package-option-description { display: block; clear: both; color: #666; font-size: 13px; margin-top: 6px; }
.venus-package-option-description ul { margin: 4px 0; padding-left: 18px; }
.venus-package-choices { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #ddd; }
.venus-choice-group { border: 0; padding: 0; margin: 8px 0; }
.venus-choice-group legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.venus-choice-group label { display: block; padding: 3px 0; cursor: pointer; }
.venus-choice-group input[type="radio"] { margin-right: 6px; }

/* ────────────────────────────────────────────────────────────────────────
   Reservation-page layout fixes (overriding bigeye-theme defaults that
   shrink the venue map, letterbox the image, and leave huge gaps).
   ─────────────────────────────────────────────────────────────────────── */

/* 1) Right-column children should fill the column, not align-end and
      collapse to content width. The theme's `align-items: end` was making
      the venue map shrink to its natural content and float to the right. */
.table-reservation__table-selection {
    align-items: stretch !important;
    margin-bottom: 2.4rem !important;
    gap: 1.2rem;
}
.table-reservation__table-selection > * { width: 100%; box-sizing: border-box; }

/* 2) The theme's `.table-reservation__table-selection img { height: 45rem;
      object-fit: contain }` rule letterboxes the venue PNG AND forces every
      label-internal image to 45rem tall. We reset both kinds of images here
      so each variant CSS can declare its own dimensions normally. */
.table-reservation__table-selection .venus-venue-map__image {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: initial !important;
}
.venus-venue-map { width: 100%; margin: 0; }
.venus-venue-map__scroll { width: 100%; }

/* Hide the polygon overlay until the venue image has loaded — JS sets
   `data-image-ready="1"` on the wrapper from the <img> load handler.
   Prevents the "green boxes float in empty space" flash on slow networks. */
.venus-venue-map .venus-venue-map__overlay,
.venus-venue-map .venus-venue-map__labels { opacity: 0; transition: opacity 0.18s ease-out; }
.venus-venue-map[data-image-ready="1"] .venus-venue-map__overlay,
.venus-venue-map[data-image-ready="1"] .venus-venue-map__labels { opacity: 1; }

/* 3) Tighten the steps stack on the left so empty placeholders don't take
      half a screen between them. Theme uses 5rem; we drop to 2.4rem. */
.table-reservation__reservation-data {
    gap: 2.4rem !important;
    padding: 2.4rem 2rem !important;
}
.table-reservation__tab { margin-bottom: 0.8rem !important; }
.table-reservation__picked-empty { color: #888; font-style: italic; margin: 0; }

/* 4) Left column follows the user down the right column's long content —
      keeps the running total and checkout button visible without a sea
      of white space underneath. */
@media (min-width: 901px) {
    .table-reservation__col--left {
        position: sticky;
        top: 16px;
        align-self: flex-start;  /* sticky needs a height context */
    }
}

/* 5) Compact the package cards — the originals are very tall when 4 are
      shown vertically; tightens padding + heading rhythm. */
.table-reservation__package { padding: 1.6rem !important; }
.table-reservation__package-head { margin-bottom: 1.2rem !important; }
.table-reservation__package-body { gap: 0.8rem; }
.table-reservation__package ul { margin: 0.4rem 0; }
.table-reservation__drink { margin-bottom: 0.2rem; }

/* 6) Tighter top hero so the form starts closer to the fold. */
.table-reservation__hero h1 { line-height: 1.1; padding-bottom: 0.8rem; }
.table-reservation__hero p { width: 100%; max-width: 70ch; margin-top: 1rem; }

/* 7) Fallback button grid: align to the column, compact + wrap nicely. */
.table-reservation__fallback-hint { margin: 0.8rem 0 0.4rem; color: #888; }
.table-reservation__table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.6rem;
    margin: 0 0 0.8rem;
}
.table-reservation__table-button {
    padding: 0.8rem 0.4rem;
    font-weight: 600;
    border-radius: 0.4rem;
}

/* 8) On narrow screens the cols already stack (theme handles flex-wrap);
      keep sticky off there and revert margins. */
@media (max-width: 900px) {
    .table-reservation__col--left { position: static !important; }
}

/* 9) Legend chips below the map — theme renders the markup but ships no
      styles for .legend-item / .dot--free|held|sold so it looks like raw text. */
.table-reservation__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 1rem 0 0;
    font-size: 1.3rem;
    color: #bbb;
}
.table-reservation__legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.table-reservation__legend .dot {
    display: inline-block;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}
.table-reservation__legend .dot--free { background: rgba(34, 197, 94, 0.6);  border-color: #22c55e; }
.table-reservation__legend .dot--sold { background: rgba(120, 120, 120, 0.6); border-color: #777;    }

/* 10) "Selected" package highlight — only applies when JS marks the card
       `.is-active` (a drink inside the package was picked). The theme's
       legacy `.vip-package` rule used to apply this same look to the FIRST
       card by position; we removed that assignment in table-reservation.php
       so packages now look uniform until the buyer interacts with them. */
.table-reservation__package.is-active {
    border-color: #E8B3FF;
    background: #1F1F28;
    box-shadow: none;
    outline: none;
}
.table-reservation__package.is-active .table-reservation__package-info {
    border-left-color: #E8B3FF;
}
/* Bound packages (table-bundled offers) are rendered with the `hidden` HTML
   attribute and revealed by JS when the matching table is held. The browser's
   UA `[hidden] { display: none }` can be overridden by any author rule that
   sets `display` on the card (e.g. theme SCSS giving `.table-reservation__package`
   a flex layout). Force the hide so the bound package never leaks regardless of
   what the theme adds. */
.table-reservation__package[hidden] {
    display: none !important;
}

/* The card is a column flex with `align-items: flex-start` (designer spec), which
   makes children shrink to content width — so the price collapses next to the
   title and the body columns lose their full-width span (divider mis-aligns,
   right column doesn't reach the card edge). Stretch the head + body across
   the card's full width so internal `justify-content: space-between` and the
   2-column body layout work as designed. */
.table-reservation__package-head,
.table-reservation__package-body {
    align-self: stretch;
}

/* Gold package styling — bypasses the theme SCSS build pipeline so it works
   without rebuilding the theme. Once `npm run build` runs in bigeye-theme,
   the equivalent rules in _table-reservation.scss will compile into style.css;
   identical declarations so no conflict. */
.table-reservation__package.is-gold {
    border-color: #FFC72C;
}
.table-reservation__package.is-gold:hover {
    border-color: #FFC72C;
    box-shadow: 0 0 25px 0 #FFC72C;
}
.table-reservation__package.is-gold .table-reservation__package-title,
.table-reservation__package.is-gold .table-reservation__package-price {
    color: #FFC72C;
}
.table-reservation__package.is-gold .table-reservation__package-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.table-reservation__package.is-gold .table-reservation__package-title::before {
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 4rem;
    height: 4rem;
    padding: 0.5rem 0.2rem;
    border: 0.1rem solid #FFC72C;
    border-radius: 0.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.4669 8.69398L19.7129 8.12798C20.1454 7.12671 20.9375 6.3239 21.9329 5.87798L22.6919 5.53898C22.784 5.49662 22.862 5.42875 22.9166 5.34341C22.9713 5.25807 23.0004 5.15884 23.0004 5.05748C23.0004 4.95613 22.9713 4.85689 22.9166 4.77155C22.862 4.68621 22.784 4.61834 22.6919 4.57598L21.9749 4.25698C20.9545 3.79836 20.1488 2.96586 19.7239 1.93098L19.4709 1.31998C19.4337 1.22534 19.3689 1.14408 19.2849 1.08681C19.2009 1.02953 19.1016 0.998901 18.9999 0.998901C18.8982 0.998901 18.7989 1.02953 18.7149 1.08681C18.6309 1.14408 18.566 1.22534 18.5289 1.31998L18.2759 1.92998C17.8514 2.96506 17.0461 3.79792 16.0259 4.25698L15.3079 4.57698C15.2161 4.61946 15.1384 4.68732 15.0839 4.77256C15.0294 4.85779 15.0005 4.95683 15.0005 5.05798C15.0005 5.15914 15.0294 5.25818 15.0839 5.34341C15.1384 5.42864 15.2161 5.4965 15.3079 5.53898L16.0679 5.87698C17.0631 6.32335 17.8548 7.12651 18.2869 8.12798L18.5329 8.69398C18.7129 9.10798 19.2859 9.10798 19.4669 8.69398ZM13.3869 6.33898C13.6609 6.77232 14.0355 7.09265 14.5109 7.29998L15.0759 7.54698C15.6459 7.79565 16.0535 8.19498 16.2989 8.74498L16.6369 9.50498C17.3639 11.142 19.5279 11.399 20.7089 10.279L20.7999 10.4C20.9389 10.5854 21.0092 10.8132 20.9988 11.0447C20.9884 11.2761 20.8979 11.4968 20.7429 11.669L11.7429 21.669C11.6491 21.7731 11.5345 21.8563 11.4065 21.9133C11.2785 21.9703 11.14 21.9997 10.9999 21.9997C10.8598 21.9997 10.7212 21.9703 10.5932 21.9133C10.4652 21.8563 10.3507 21.7731 10.2569 21.669L1.25688 11.669C1.10185 11.4968 1.0114 11.2761 1.00101 11.0447C0.990612 10.8132 1.06091 10.5854 1.19988 10.4L4.19988 6.39998C4.29303 6.27579 4.41381 6.17498 4.55267 6.10556C4.69152 6.03613 4.84464 5.99998 4.99988 5.99998H13.2059C13.2572 6.11598 13.3172 6.22898 13.3859 6.33898' fill='%23FFC72C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.4rem 2.4rem;
    content: "";
}
.table-reservation__package.is-gold .table-reservation__package-info {
    border-left: 0.1rem solid #FFC72C;
}
.table-reservation__package.is-gold.is-active {
    border-color: #FFC72C;
}
.table-reservation__package.is-gold.is-active .table-reservation__package-info {
    border-left-color: #FFC72C;
}

/* 11) The theme's `.button { display: inline-block }` rule is loaded *after*
       `.table-reservation__checkout { display: flex }`, so the checkout
       button collapses to inline-block — the ::before icon then renders on
       its own line above the text. Force the flex layout back so the cart
       icon + label sit side-by-side, centred. */
.table-reservation__checkout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

/* 12) Picked-package chips in the left "VALI PAKETT" summary need breathing
       room when there's more than one — the markup stacks them with no gap
       so the borders run flush. */
.table-reservation__picked-packages {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
/* `.dot--held` removed: held+sold are now collapsed to a single "Hõivatud" state. */