/* Hotel Seating — Frontend Styles v2.0
   Layout: canvas left (vertical) + sidebar right
   Colors: client palette #9ecda3 / #f8bc6c / transparent booked
*/

/* ── Base wrap ── */
.hs-seating-wrap {
    margin: 20px 0;
    font-family: inherit;
    position: relative;
}

/* ── Main layout: map left + sidebar right ── */
.hs-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.hs-map-col {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 280px;
}

/* ── Controls above canvas ── */
.hs-map-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Legend ── */
.hs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}
.hs-leg {
    display: flex;
    align-items: center;
    gap: 5px;
}
.hs-leg::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
/* No color swatch for "Available" — each table's available color is set
   individually in the admin, so a single fixed swatch here would be
   misleading. The label text alone is enough. */
.hs-leg--available::before { display: none; }
.hs-leg--available{display: none;} 
.hs-leg--selected::before  { background: #f8bc6c; }
.hs-leg--locked::before    { background: #e5535a; border: 1px solid #d4971b; }
.hs-leg--booked::before    { background: transparent; border: 2px dashed #c62828; }

/* ── Zoom buttons ── */
.hs-zoom-btns {
    display: flex;
    gap: 4px;
}
.hs-btn-zoom {
    background: rgba(255,255,255,0.15);
    color: #665857;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 28px; height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.hs-btn-zoom:hover { background: #f8bc6c; border-color: #d4971b; color: #fff; }

/* ── Canvas ── */
.hs-canvas-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    background: transparent;
}
.hs-canvas-container:active { cursor: grabbing; }
.hs-canvas-container canvas { display: block !important; }

/* ── Sidebar ── */
.hs-sidebar {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
}

.hs-hint {
    color: #888;
    font-size: 13px;
    margin: 0 0 12px;
    font-style: italic;
}

/* ── Ticket picker (inline in sidebar) ── */
.hs-ticket-picker-wrap {
    margin-bottom: 12px;
}

.hs-ticket-picker {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.hs-tp-title {
    font-size: 13px;
    font-weight: 700;
    color: #665857;
    margin-bottom: 4px;
}
.hs-tp-sub {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.hs-ticket-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.hs-ticket-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 7px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.hs-ticket-opt:has(input:checked) {
    border-color: #f8bc6c;
    background: #fffbf0;
}
.hs-ticket-opt input[type=radio] {
    flex-shrink: 0;
    accent-color: #f8bc6c;
    width: 16px; height: 16px;    margin-bottom: 3px;
}
.hs-ticket-opt-label { flex: 1; font-size: 13px; color: #333; }
.hs-ticket-opt-price {
    font-size: 14px;
    font-weight: 700;
    color: #665857;
    white-space: nowrap;
}

.hs-ticket-age { margin-bottom: 10px; }
.hs-age-label { font-size: 12px; color: #555; display: block; margin-bottom: 4px; }
.hs-age-input {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
}
.hs-age-input:focus { outline: none; border-color: #f8bc6c; }

.hs-tp-actions {
    display: flex;
    gap: 8px;
}
.hs-ticket-cancel {
    flex: 1;
    padding: 9px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s;
}
.hs-ticket-cancel:hover { background: #e8e8e8; }

.hs-ticket-confirm {
    flex: 2;
    padding: 9px;
    background: #edb093;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
}
.hs-ticket-confirm:hover { background: #eec2a1; }
.hs-ticket-confirm:disabled { background: #ccc; cursor: not-allowed; }

/* ── Selected seats summary ── */
.hs-selected-summary {
    margin-bottom: 12px;
}

.hs-selected-list {
    list-style: none;
    padding: 0; margin: 0 0 10px;
}
.hs-selected-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}
.hs-seat-price {
    font-weight: 700;
    color: #665857;
    margin-left: auto;
}
.hs-seat-remove {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}

.hs-ticket-type-tag {
    display: inline-block;
    font-size: 10px;
    background: #fff8e8;
    color: #a07020;
    border-radius: 3px;
    padding: 1px 6px;
    border: 1px solid #f8bc6c;
}
.hs-age-tag {
    display: inline-block;
    font-size: 10px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── Total ── */
.hs-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 10px 0 0;
    border-top: 2px solid #f8bc6c;
    margin-top: 6px;
}
.hs-total-price {
    font-weight: 800;
    color: #665857;
    font-size: 18px;
}

/* ── Add-ons ── */
.hs-addons-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 6px;
}
.hs-addons-list { margin-bottom: 8px; }
.hs-addon-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    color: #444;
    flex-wrap: wrap;
}
.hs-addon-price { color: #665857; font-weight: 600; font-size: 12px; }
.hs-addon-qty-wrap { display: block; }
.hs-qty-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.hs-qty-btn {
    width: 26px; height: 26px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    color: #665857;
}
.hs-qty-btn:hover { background: #f8bc6c; color: #fff; border-color: #d4971b; }
.hsao_qty {
    width: 40px;
    text-align: center;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}
.hsao_sel {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 4px;
}

/* ── Book button ── */
.hs-add-to-cart {
    display: block;
    width: 100%;
    background: #edb093;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .1s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
}
.hs-add-to-cart:hover { background: #d4971b; transform: translateY(-1px); }
.hs-add-to-cart:active { transform: translateY(0); }
.hs-add-to-cart:disabled { background: #ccc; cursor: not-allowed; transform: none; }

/* Flatsome overrides */
button.hs-add-to-cart,
button.hs-add-to-cart:hover,
button.hs-add-to-cart:focus {
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-family: inherit !important;
}

/* ── Timer ── */
.hs-timer-bar {
    background: #fffbf0;
    border: 1px solid #f8bc6c;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin: 10px 0;
}
.hs-timer-val { font-weight: 700; font-size: 18px; color: #d4971b; font-variant-numeric: tabular-nums; }

/* ── Error ── */
.hs-error-msg {
    background: #fff0f0;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    color: #c62828;
    font-size: 13px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.hs-error { color: #c62828; font-size: 13px; }

/* ── Tooltip ── */
.hs-tooltip {
    position: fixed;
    background: rgba(50,30,25,.9);
    color: #fff;
    padding: 7px 11px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 9999;
    max-width: 180px;
}

/* ── Mobile picker overlay ── */
.hs-mobile-picker-overlay {
    display: none;           /* hidden by default always */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9990;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;    /* safe fallback — no blocking when hidden */
}
.hs-mobile-picker-overlay.hs-overlay-active {
    display: flex !important;
    pointer-events: all;
}
.hs-mobile-picker-inner {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}
/* Konva canvas — no CSS size overrides, JS controls dimensions */
    
/* ── Responsive ── */
@media (max-width: 900px) {
    .hs-layout { flex-direction: column; gap: 16px; }
    .hs-map-col { width: 100%; max-width: 100%; }
    .hs-sidebar { max-width: 100%; width: 100%; }
}

@media (max-width: 700px) {
    /* Hide inline picker — overlay used instead */
    .hs-ticket-picker-wrap .hs-ticket-picker { display: none !important; }
}

@media (min-width: 701px) {
    /* Overlay only for mobile — class hs-overlay-active controls visibility */
    .hs-mobile-picker-overlay.hs-overlay-active { display: none !important; }
}




.booking-seat{     z-index: 2; }

#hs-pay-later-wrap label input {margin-bottom: 5px;}