/* 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-event-card-price { color: #2271b1; font-weight: 600; margin: 0; }
.venus-no-events { color: #666; font-style: italic; }

/* Buy widget */
.venus-event-buy { margin: 32px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .venus-event-buy { grid-template-columns: 1fr; } }
.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-ticket-price { font-size: 24px; font-weight: 600; color: #2271b1; margin: 0 0 12px; }
.venus-buy-ticket label { display: block; margin: 12px 0; }
.venus-buy-ticket input[type="number"] { width: 80px; padding: 6px 8px; margin-left: 8px; }

.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__hint { display: none; color: #888; font-size: 12px; margin: 6px 0 0; }

/* polygons */
.venus-venue-table { pointer-events: auto; cursor: pointer; }
.venus-venue-table polygon {
    fill: rgba(34, 197, 94, 0.30);
    stroke: #22c55e;
    stroke-width: 5;
    transition: fill 0.15s, stroke 0.15s;
}
.venus-venue-table:hover polygon { fill: rgba(34, 197, 94, 0.55); }
.venus-venue-table text { fill: #fff; font-size: 60px; font-weight: 700; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.venus-venue-table.is-selected polygon { fill: rgba(34, 113, 177, 0.65); stroke: #2271b1; stroke-width: 7; }
.venus-venue-table.is-held polygon    { fill: rgba(255, 193, 7, 0.50); stroke: #d39e00; cursor: not-allowed; }
.venus-venue-table.is-held            { cursor: not-allowed; }
.venus-venue-table.is-sold polygon    { fill: rgba(120, 120, 120, 0.55); stroke: #777; cursor: not-allowed; }
.venus-venue-table.is-sold            { cursor: not-allowed; }
.venus-venue-table.is-sold text       { fill: #ccc; }

/* ── 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 `img { height: 45rem; object-fit: contain }` rule
      letterboxes the venue PNG inside a fixed-height box. Let it size
      naturally so polygons stay aligned with the image. */
.table-reservation__table-selection img,
.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 { opacity: 0; transition: opacity 0.18s ease-out; }
.venus-venue-map[data-image-ready="1"] .venus-venue-map__overlay { 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: var(--color-brand-primary);
    outline: 0.4rem solid var(--color-brand-primary);
    box-shadow: 0 0 2.5rem 0 var(--color-brand-primary);
}
.table-reservation__package.is-active .table-reservation__package-info {
    border-left-color: var(--color-brand-primary);
}

/* 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. */