/* ================================================================
    TEMECULA CUSTOM CHECKOUT - custom-style.css
    ================================================================ */

    /* ---- Hide default WC elements ---- */
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields,
    .woocommerce-account-fields,
    #order_review_heading,
    .woocommerce-form-coupon-toggle,
    .checkout_coupon {
        display: none !important;
    }

    /* ONLY target checkout area — NOT full site */
    body.woocommerce-checkout #tcc-wrap,
    body.woocommerce-checkout .tcc-layout,
    body.woocommerce-checkout .tcc-left,
    body.woocommerce-checkout .tcc-right {
        max-width: 1300px !important;
        width: 100% !important;
        margin: 0 auto;
        width: 100%;
    }

    /* Hide visually but keep functionality */
    .woocommerce-checkout-payment {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* .woocommerce-checkout-review-order {
        position: absolute !important;
        left: -9999px !important;
        opacity: 0 !important;
    } */
    /* .shop_table.woocommerce-checkout-review-order-table {
        position: absolute !important;
        left: -9999px !important;
    } */
    /* ================================================================
    VARIABLES
    ================================================================ */
    :root {
        --pink:      #672E68;
        --pink2:     #8a4a8b;
        --grad:      linear-gradient(135deg, #672E68 0%, #8a4a8b 100%);
        --bg:        #F4F4F6;
        --white:     #FFFFFF;
        --border:    #ddc8de;
        --text:      #2d1a2e;
        --muted:     #7a6a7b;
        --radius:    14px;
        --shadow-sm: 0 2px 10px rgba(103, 46, 104, 0.08);
    }

    /* ================================================================
    CHECKOUT FORM — full width reset
    ================================================================ */
    form.woocommerce-checkout.tcc-form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /*background: var(--bg) !important;*/
        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
        color: var(--text) !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    form.woocommerce-checkout.tcc-form ul.woocommerce-error{
        padding-left: 50px !important;
    }

    form.woocommerce-checkout.tcc-form .e-checkout__container{
        grid-template-columns: auto;
    }

    /* ================================================================
    INNER WRAPPER — centered, max 1100px
    ================================================================ */
    #tcc-wrap {
        max-width: 1300px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 40px 24px 80px !important;
        box-sizing: border-box !important;
    }

    /* ================================================================
    PAGE TITLE
    ================================================================ */
    .tcc-page-title {
        text-align: center !important;
        font-size: 36px !important;
        font-weight: 800 !important;
        color: #1A1A2E !important;
        margin: 0 0 36px !important;
        padding: 0 !important;
        border: none !important;
        font-family: Georgia, serif !important;
        line-height: 1.2 !important;
    }

    .tcc-script {
        font-family: 'Brush Script MT', cursive !important;
        color: var(--pink) !important;
        font-size: 44px !important;
        font-weight: 400 !important;
        font-style: normal !important;
    }

    /* ================================================================
    MAIN GRID  — CRITICAL: this must override everything
    ================================================================ */
    .tcc-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        grid-template-rows: auto !important;
        gap: 24px !important;
        align-items: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tcc-left {
        min-width: 0 !important;
        width: 100% !important;
        grid-column: 1 !important;
    }

    .tcc-right {
        min-width: 0 !important;
        width: 100% !important;
        grid-column: 2 !important;
        align-self: start !important;
    }

    @media (max-width: 880px) {
        .tcc-layout {
            grid-template-columns: 1fr !important;
            display: flex !important;
            flex-direction: column;
        }
        .tcc-left  { grid-column: 1 !important; grid-row: 2 !important; }
        .tcc-right { grid-column: 1 !important; grid-row: 1 !important; }
    }

    /* ================================================================
    CARDS
    ================================================================ */
    .tcc-card {
        background: var(--white) !important;
        border-radius: var(--radius) !important;
        padding: 24px 26px !important;
        margin-bottom: 18px !important;
        border: 1px solid var(--border) !important;
        box-shadow: var(--shadow-sm) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        display: block !important;
    }

    .tcc-card:last-child { margin-bottom: 0 !important; }

    .tcc-card-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--text) !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        border: none !important;
    }

    /* ================================================================
    ROUTE PILL
    ================================================================ */
    .tcc-route-pill {
        background: var(--grad) !important;
        border-radius: 10px !important;
        padding: 13px 16px !important;
        margin-bottom: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .tcc-route-name { color: #fff !important; font-weight: 700 !important; font-size: 14px !important; display: block !important; }
    .tcc-route-desc { color: rgba(255,255,255,.82) !important; font-size: 13px !important; display: block !important; }

    /* ================================================================
    TWO-COLUMN INNER ROW
    ================================================================ */
    .tcc-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 560px) {
        .tcc-row { grid-template-columns: 1fr !important; }
    }

    .tcc-field {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 5px !important;
    }

    /* ================================================================
    LABELS
    ================================================================ */
    .tcc-label,
    label.tcc-label {
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #666 !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }

    /* ================================================================
    QTY CONTROL
    ================================================================ */
    .tcc-qty-control {
        display: flex !important;
        align-items: center !important;
        border: 2px solid var(--border) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        height: 44px !important;
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tcc-qty-control button {
        width: 44px !important;
        height: 44px !important;
        border: none !important;
        background: var(--grad) !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: opacity .15s !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        border-radius: 0 !important;
    }

    .tcc-qty-control button:hover { opacity: 0.85 !important; }

    #tcc-qty-display {
        flex: 1 !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
    }

    /* ================================================================
    DATE INPUT
    ================================================================ */
    .tcc-date-wrap {
        display: flex !important;
        align-items: center !important;
        border: 2px solid var(--border) !important;
        border-radius: 10px !important;
        height: 44px !important;
        background: #fff !important;
        padding: 0 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .tcc-date-input {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        flex: 1 !important;
        font-size: 14px !important;
        color: var(--text) !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* ================================================================
    TEXT INPUTS & TEXTAREA
    ================================================================ */
    .tcc-input,
    input.tcc-input,
    .tcc-textarea,
    textarea.tcc-textarea {
        width: 100% !important;
        border: 2px solid var(--border) !important;
        border-radius: 10px !important;
        padding: 11px 13px !important;
        font-size: 14px !important;
        color: var(--text) !important;
        background: #FAFAFA !important;
        outline: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        transition: border-color .2s, box-shadow .2s !important;
        font-family: 'Segoe UI', sans-serif !important;
        line-height: 1.5 !important;
        -webkit-appearance: none !important;
        display: block !important;
    }

    .tcc-input:focus,
    .tcc-textarea:focus {
        border-color: var(--pink) !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(194,24,91,0.08) !important;
    }

    .tcc-input::placeholder,
    .tcc-textarea::placeholder { color: #C5C5D0 !important; }
    .tcc-textarea { resize: vertical !important; min-height: 86px !important; }

    /* ================================================================
    GUEST SUBTITLE
    ================================================================ */
    .tcc-guest-sub {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--pink) !important;
        margin: 0 0 14px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid var(--border) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* ================================================================
    EXTRA GUEST BLOCK
    ================================================================ */
    .tcc-extra-block {
        border-top: 1px solid var(--border) !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
        animation: tccSlide .22s ease !important;
    }

    .tcc-extra-block h3 {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--pink) !important;
        margin: 0 0 14px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid var(--border) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    @keyframes tccSlide {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ================================================================
    CHECKBOXES
    ================================================================ */
    .tcc-check-label {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        font-size: 14px !important;
        color: #444 !important;
        cursor: pointer !important;
        margin-bottom: 12px !important;
        line-height: 1.6 !important;
    }

    .tcc-check-label input[type="checkbox"] { display: none !important; }

    .tcc-check-box {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        border: 2px solid var(--border) !important;
        border-radius: 5px !important;
        background: #fff !important;
        margin-top: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all .15s !important;
        flex-shrink: 0 !important;
    }

    .tcc-check-label input:checked + .tcc-check-box {
        background: var(--pink) !important;
        border-color: var(--pink) !important;
    }

    .tcc-check-label input:checked + .tcc-check-box::after {
        content: '✓' !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* ================================================================
    TERMS & POLICIES — NEW DESIGN
    ================================================================ */
    .tcc-terms-section {
        border: 1.5px solid var(--tts-border, #ddc8de);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 18px;
    }

    .tcc-terms-section-header {
        background: #f3edf4;
        color: #672E68;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 8px 16px;
        border-bottom: 1.5px solid #ddc8de;
    }

    .tcc-terms-item {
        padding: 14px 16px;
        border-bottom: 1px solid #ede0ee;
    }

    .tcc-terms-item:last-child {
        border-bottom: none;
    }

    .tcc-terms-label {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        cursor: pointer !important;
        margin-bottom: 0 !important;
    }

    .tcc-terms-label input[type="checkbox"] {
        display: none !important;
    }

    .tcc-terms-label .tcc-check-box {
        margin-top: 2px;
        flex-shrink: 0;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        border: 2px solid #ddc8de !important;
        border-radius: 4px !important;
        background: #fff !important;
    }

    .tcc-terms-label input:checked + .tcc-check-box {
        background: #672E68 !important;
        border-color: #672E68 !important;
    }

    .tcc-terms-label input:checked + .tcc-check-box::after {
        content: '✓' !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .tcc-terms-title {
        font-size: 14px;
        font-weight: 700;
        color: #2d1a2e;
        line-height: 1.4;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tcc-terms-badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 2px 7px;
        border-radius: 4px;
    }

    .tcc-terms-badge-required {
        background: #FAEBEE;
        color: #672E68;
    }

    .tcc-terms-badge-optional {
        background: #f0edf1;
        color: #7a6a7b;
    }

    .tcc-terms-desc {
        font-size: 13px !important;
        color: #7a6a7b !important;
        margin: 6px 0 4px 28px !important;
        line-height: 1.5 !important;
    }

    .tcc-terms-link {
        display: inline-block;
        margin-left: 28px;
        font-size: 12px;
        color: #672E68;
        text-decoration: underline;
        font-weight: 600;
    }

    .tcc-terms-link:hover {
        color: #4e2050;
    }

    .tcc-terms-title-link {
        color: #672E68;
        text-decoration: underline;
        font-weight: 700;
    }

    .tcc-terms-title-link:hover {
        color: #4e2050;
    }

    .tcc-terms-optional-note {
        font-size: 13px !important;
        color: #7a6a7b !important;
        margin: 0 0 10px !important;
        font-style: italic !important;
    }

    /* ================================================================
    ORDER SUMMARY
    ================================================================ */
    .tcc-summary { position: sticky !important; top: 20px !important; align-self: start !important; }

    .tcc-sum-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .tcc-sum-label { font-size: 14px !important; color: var(--muted) !important; flex-shrink: 0 !important; }
    .tcc-sum-val   { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; text-align: right !important; }

    .tcc-divider { border: none !important; border-top: 1px solid var(--border) !important; margin: 14px 0 !important; }

    .tcc-sum-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 20px !important;
    }

    .tcc-sum-total span:first-child { font-size: 15px !important; font-weight: 700 !important; }
    .tcc-sum-total span:last-child  { font-size: 28px !important; font-weight: 900 !important; color: var(--pink) !important; }

    /* ================================================================
    PAYMENT SECTION
    ================================================================ */
    .tcc-payment-section {
        margin: 0 0 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--border) !important;
    }

    .tcc-payment-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--text) !important;
        margin: 0 0 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .tcc-payment-option {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border: 2px solid var(--border) !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        cursor: pointer !important;
        transition: all .2s !important;
        background: #FAFAFA !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tcc-payment-option:hover { border-color: var(--pink) !important; background: #fff !important; }

    .tcc-payment-option:has(input:checked) {
        border-color: var(--pink) !important;
        background: #fff9fb !important;
        box-shadow: 0 0 0 3px rgba(194,24,91,0.07) !important;
    }

    .tcc-payment-radio {
        width: 17px !important;
        height: 17px !important;
        margin: 3px 0 0 !important;
        flex-shrink: 0 !important;
        accent-color: var(--pink) !important;
        cursor: pointer !important;
    }

    .tcc-payment-label { flex: 1 !important; min-width: 0 !important; }
    .tcc-payment-name  { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; display: block !important; }
    .tcc-payment-desc  { font-size: 12px !important; color: var(--muted) !important; display: block !important; margin-top: 2px !important; line-height: 1.4 !important; }

    /* ================================================================
    STRIPE FIELDS
    ================================================================ */
    .tcc-payment-fields {
        margin: 4px 0 10px 26px !important;
        padding: 14px !important;
        background: #F8F8FA !important;
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    .tcc-payment-fields .StripeElement {
        border: 2px solid var(--border) !important;
        border-radius: 8px !important;
        padding: 11px 12px !important;
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }

    .tcc-payment-fields .StripeElement--focus {
        border-color: var(--pink) !important;
        box-shadow: 0 0 0 3px rgba(194,24,91,0.08) !important;
    }

    .tcc-payment-fields .StripeElement--invalid { border-color: #e53e3e !important; }

    .tcc-payment-fields p,
    .tcc-payment-fields .wc-stripe-elements-field p {
        font-size: 12px !important;
        color: var(--muted) !important;
        margin: 0 0 10px !important;
        line-height: 1.5 !important;
    }

    .tcc-payment-fields p a { color: var(--pink) !important; }

    .tcc-payment-fields .form-row {
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .tcc-payment-fields .form-row input,
    .tcc-payment-fields .form-row select {
        width: 100% !important;
        border: 2px solid var(--border) !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        background: #fff !important;
    }

    /* ================================================================
    PROCEED BUTTON
    ================================================================ */
    .tcc-btn,
    button#place_order.tcc-btn {
        display: block !important;
        width: 100% !important;
        background: var(--grad) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 15px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        text-align: center !important;
        box-shadow: 0 4px 18px rgba(194,24,91,0.28) !important;
        transition: opacity .2s, transform .15s !important;
        font-family: 'Segoe UI', sans-serif !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    .tcc-btn:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
    .tcc-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

    .tcc-secure {
        text-align: center !important;
        font-size: 12px !important;
        color: var(--muted) !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
    }

    /* ================================================================
    WC NOTICES
    ================================================================ */
    .woocommerce-NoticeGroup,
    .woocommerce-NoticeGroup-checkout {
        max-width: 1100px !important;
        margin: 0 auto 0 !important;
        padding: 0 0 !important;
        box-sizing: border-box !important;
    }

    .woocommerce-error {
        background: #fff0f3 !important;
        border: 1.5px solid #f5c0cc !important;
        border-radius: 10px !important;
        padding: 12px 16px !important;
        color: #c0143c !important;
        font-size: 14px !important;
        list-style: none !important;
        margin: 0 0 16px !important;
    }

    /* ================================================================
    DEBUG PANEL
    ================================================================ */
    #tcc-debug {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(15,15,25,0.97) !important;
        color: #a6e3a1 !important;
        font-family: 'Courier New', monospace !important;
        font-size: 12px !important;
        padding: 8px 16px 10px !important;
        max-height: 180px !important;
        overflow-y: auto !important;
        z-index: 999999 !important;
        border-top: 2px solid #C2185B !important;
    }

    #tcc-debug-title {
        color: #f38ba8 !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        margin-bottom: 4px !important;
        display: inline-block !important;
    }

    .tcc-dbrow { padding: 1px 0 !important; }
    .tcc-dbrow.ok   { color: #a6e3a1 !important; }
    .tcc-dbrow.err  { color: #f38ba8 !important; }
    .tcc-dbrow.warn { color: #f9e2af !important; }

    #tcc-debug-close {
        position: absolute !important;
        top: 6px !important;
        right: 12px !important;
        background: none !important;
        border: none !important;
        color: #f38ba8 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .tcc-extra-block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .tcc-extra-block .tcc-field {
        width: calc(50% - 6px);
    }

    .elementor-section.elementor-section-boxed > .elementor-container{
        max-width: 1140px !important;
    }
    .woocommerce-order-overview,
    .woocommerce-order-overview__wrapper,
    .woocommerce-order-details,
    .woocommerce-customer-details {
        display: none !important;
    }

    /* Fix payment box inside sidebar */
    .tcc-summary #payment {
        margin-top: 10px;
    }

    /* Fix Stripe container */
    .tcc-summary .payment_box {
        padding: 10px;
        border-radius: 10px;
    }

    /* Fix payment method radio alignment */
    .tcc-summary .wc_payment_methods {
        margin-bottom: 10px;
    }

    /* Fix Place Booking button */
    .tcc-summary #place_order {
        width: 100%;
        margin-top: 15px;
        background: linear-gradient(135deg, #C2185B, #E91E8C);
        color: #fff;
        border-radius: 50px;
        padding: 14px;
        font-weight: 700;
        border: none;
    }

    /* Remove ugly default borders */
    .tcc-summary .woocommerce-checkout-payment {
        background: transparent;
        border: none;
    }
    table.shop_table.woocommerce-checkout-review-order-table {
        display: none;
    }

    /* ============================================================
    Temecula Tasting Shuttle - Booking Popup Styles
    Colors: #672E68 (purple), #FAEBEE (light pink)
    ============================================================ */


    :root {
        --tts-purple:      #672E68;
        --tts-purple-dark: #4e2050;
        --tts-purple-light:#8a4a8b;
        --tts-pink:        #FAEBEE;
        --tts-pink-mid:    #f5c6d0;
        --tts-red-accent:  #e85d7a;
        --tts-white:       #ffffff;
        --tts-text:        #2d1a2e;
        --tts-muted:       #7a6a7b;
        --tts-border:      #ddc8de;
        --tts-radius:      12px;
        --tts-shadow:      0 24px 64px rgba(103, 46, 104, 0.22);
        --tts-transition:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Overlay ── */
    .tts-overlay {
        position: fixed;
        inset: 0;
        background: rgba(45, 26, 46, 0.72);
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        backdrop-filter: blur(4px);
    }

    .tts-overlay.active {
        display: flex;
    }

    @keyframes tts-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ── Popup Box ── */
    .tts-popup {
        background: var(--tts-white);
        border-radius: var(--tts-radius);
        box-shadow: var(--tts-shadow);
        width: 100%;
        max-width: 520px;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        animation: tts-slide-up 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        scrollbar-width: thin;
        scrollbar-color: var(--tts-border) transparent;
    }

    .tts-popup::-webkit-scrollbar { width: 5px; }
    .tts-popup::-webkit-scrollbar-track { background: transparent; }
    .tts-popup::-webkit-scrollbar-thumb { background: var(--tts-border); border-radius: 99px; }

    @keyframes tts-slide-up {
        from { transform: translateY(30px) scale(0.97); opacity: 0; }
        to   { transform: translateY(0) scale(1);       opacity: 1; }
    }

    /* ── Header ── */
    .tts-popup-header {
        background: linear-gradient(135deg, var(--tts-purple) 0%, var(--tts-purple-light) 100%);
        padding: 28px 28px 22px;
        position: relative;
        overflow: hidden;
    }

    .tts-popup-header::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 120px; height: 120px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
    }

    .tts-popup-header::after {
        content: '🍷';
        position: absolute;
        right: 28px; bottom: 12px;
        font-size: 36px;
        opacity: 0.35;
    }

    .tts-popup-title {
        color: var(--tts-white) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

    .tts-popup-subtitle {
        color: rgba(255,255,255,0.8) !important;
        font-size: 13px !important;
        margin: 0 !important;
    }

    /* ── Close Button ── */
    .tts-popup-close {
        position: absolute;
        top: 14px; right: 14px;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.2);
        color: var(--tts-white);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--tts-transition);
        z-index: 10;
    }

    .tts-popup-close:hover {
        background: rgba(255,255,255,0.38);
    }

    /* ── Body ── */
    .tts-popup-body {
        padding: 24px 28px 28px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* ── Field Group ── */
    .tts-field-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tts-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--tts-text);
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .tts-required {
        color: var(--tts-red-accent);
    }

    /* ── Inputs ── */
    .tts-input,
    .tts-select,
    .tts-textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1.5px solid var(--tts-border);
        border-radius: 8px;
        font-size: 14px;
        color: var(--tts-text);
        background: var(--tts-white);
        transition: border-color var(--tts-transition), box-shadow var(--tts-transition);
        box-sizing: border-box;
        font-family: inherit;
        appearance: none;
        -webkit-appearance: none;
    }

    .tts-input:focus,
    .tts-select:focus,
    .tts-textarea:focus {
        outline: none;
        border-color: var(--tts-purple);
        box-shadow: 0 0 0 3px rgba(103, 46, 104, 0.12);
    }

    .tts-input[readonly] {
        background: var(--tts-pink);
        color: var(--tts-muted);
        cursor: default;
    }

    .tts-select-wrapper {
        position: relative;
    }

    .tts-select-arrow {
        position: absolute;
        right: 12px; top: 50%;
        transform: translateY(-50%);
        color: var(--tts-muted);
        pointer-events: none;
        font-size: 11px;
    }

    .tts-textarea {
        resize: vertical;
        min-height: 80px;
    }

    /* ── Quantity ── */
    .tts-quantity-wrapper {
        display: flex;
        align-items: center;
        gap: 0;
        border: 1.5px solid var(--tts-border);
        border-radius: 8px;
        overflow: hidden;
        width: fit-content;
    }

    .tts-qty-btn {
        width: 42px;
        height: 42px;
        border: none;
        background: var(--tts-pink);
        color: var(--tts-purple);
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        transition: background var(--tts-transition);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .tts-qty-btn:hover {
        background: var(--tts-pink-mid);
    }

    .tts-qty-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .tts-qty-input {
        width: 64px;
        height: 42px;
        border: none;
        border-left: 1.5px solid var(--tts-border);
        border-right: 1.5px solid var(--tts-border);
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: var(--tts-text);
        -moz-appearance: textfield;
    }

    .tts-qty-input::-webkit-outer-spin-button,
    .tts-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .tts-qty-note {
        font-size: 12px;
        color: var(--tts-red-accent);
        margin: 0;
        min-height: 18px;
    }

    /* ── Calendar ── */
    .tts-calendar-container {
        border: 1.5px solid var(--tts-border);
        border-radius: 10px;
        /* overflow: hidden; */
    }

    .tts-cal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--tts-purple);
        color: var(--tts-white);
        padding: 10px 14px;
    }

    .tts-cal-nav {
        background: none;
        border: none;
        color: var(--tts-white);
        font-size: 18px;
        cursor: pointer;
        width: 28px; height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--tts-transition);
    }

    .tts-cal-nav:hover { background: rgba(255,255,255,0.2); }
    .tts-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

    .tts-cal-month {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .tts-cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .tts-cal-day-name {
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--tts-muted);
        padding: 8px 2px;
        background: var(--tts-pink);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tts-cal-cell {
        text-align: center;
        padding: 8px 2px;
        font-size: 13px;
        cursor: pointer;
        border: 0.5px solid rgba(221, 200, 222, 0.3);
        transition: background var(--tts-transition), color var(--tts-transition);
        position: relative;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tts-cal-cell:hover:not(.tts-cal-disabled):not(.tts-cal-empty) {
        background: var(--tts-pink);
        color: var(--tts-purple);
    }

    .tts-cal-cell.tts-cal-selected {
        background: var(--tts-purple) !important;
        color: var(--tts-white) !important;
        font-weight: 700;
    }

    .tts-cal-cell.tts-cal-today {
        border: 2px solid var(--tts-purple-light);
        font-weight: 600;
    }

    .tts-cal-cell.tts-cal-disabled {
        color: #ccc;
        background: #f8f8f8;
        cursor: not-allowed;
    }

    .tts-cal-cell.tts-cal-empty {
        cursor: default;
    }

    .tts-cal-cell.tts-cal-full {
        background: #f0f0f0;
        color: #bbb;
        cursor: not-allowed;
    }

    .tts-cal-cell.tts-cal-full::after {
        content: 'Full';
        position: absolute;
        bottom: 1px;
        font-size: 8px;
        color: var(--tts-red-accent);
    }

    /* Calendar tab switcher (for "both" mode) */
    .tts-cal-tabs {
        display: flex;
        border-bottom: 2px solid var(--tts-border);
        margin-bottom: -1px;
    }

    .tts-cal-tab {
        flex: 1;
        padding: 9px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        background: var(--tts-pink);
        color: var(--tts-muted);
        transition: all var(--tts-transition);
    }

    .tts-cal-tab.active {
        background: var(--tts-white);
        color: var(--tts-purple);
        border-bottom: 2px solid var(--tts-purple);
    }

    /* ── Booking Summary ── */
    .tts-summary {
        background: var(--tts-pink);
        border-radius: 10px;
        padding: 16px 18px;
        border-left: 4px solid var(--tts-purple);
    }

    .tts-summary-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--tts-purple) !important;
        margin: 0 0 10px !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .tts-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 13px;
        color: var(--tts-text);
        border-bottom: 1px solid rgba(103, 46, 104, 0.1);
    }

    .tts-summary-row:last-child { border-bottom: none; }

    .tts-summary-total {
        margin-top: 4px;
        font-weight: 600;
        color: var(--tts-purple);
    }

    .tts-summary-grand {
        margin-top: 6px;
        font-size: 16px !important;
        font-weight: 800;
    }

    .tts-summary-grand span:last-child {
        color: var(--tts-red-accent);
    }

    /* ── Buttons ── */
    .tts-cta-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tts-btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, var(--tts-purple) 0%, var(--tts-purple-light) 100%);
        color: var(--tts-white);
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--tts-transition);
        letter-spacing: 0.02em;
        box-shadow: 0 4px 16px rgba(103, 46, 104, 0.3);
    }

    .tts-btn-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(103, 46, 104, 0.4);
    }

    .tts-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .tts-btn-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px;
        background: transparent;
        color: var(--tts-purple);
        border: 2px solid var(--tts-purple);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--tts-transition);
    }

    .tts-btn-secondary:hover {
        background: var(--tts-pink);
    }

    .tts-btn-full { width: 100%; }

    .tts-btn-icon { font-size: 16px; }

    /* ── Contact Popup ── */
    .tts-contact-info-block {
        background: var(--tts-pink);
        border-radius: 8px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tts-info-row {
        display: flex;
        gap: 12px;
        font-size: 13px;
    }

    .tts-info-label {
        font-weight: 700;
        color: var(--tts-purple);
        min-width: 110px;
    }

    .tts-info-value {
        color: var(--tts-text);
    }

    .tts-contact-success {
        text-align: center;
        color: #27ae60;
        font-size: 14px;
        font-weight: 600;
        background: #eafaf1;
        padding: 12px;
        border-radius: 8px;
        margin: 0;
    }

    /* ── Loading spinner inside button ── */
    .tts-btn-spinner {
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: tts-spin 0.6s linear infinite;
        display: inline-block;
    }

    @keyframes tts-spin {
        to { transform: rotate(360deg); }
    }

    /* ── Responsive ── */
    @media (max-width: 560px) {
        .tts-popup {
            max-width: 100%;
            border-radius: 16px 16px 0 0;
            max-height: 95vh;
        }
        .tts-overlay {
            align-items: flex-end;
            padding: 0;
        }
        .tts-popup-body { padding: 20px 20px 24px; }
        .tts-popup-header { padding: 22px 20px 18px; }
    }

    /* ── WooCommerce checkout booking meta display ── */
    .tts-checkout-booking-info {
        background: var(--tts-pink);
        border-left: 4px solid var(--tts-purple);
        border-radius: 8px;
        padding: 14px 18px;
        margin-bottom: 20px;
    }

    .tts-checkout-booking-info h4 {
        color: var(--tts-purple);
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 8px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tts-checkout-booking-info p {
        margin: 3px 0;
        font-size: 13px;
        color: var(--tts-text);
    }

    /* ============================================================
    Checkout Page — TTS Booking Detail Block
    ============================================================ */

    .tts-checkout-detail-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .tts-cd-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 14px;
        background: var(--tts-pink);
        border-radius: 8px;
        border-left: 3px solid var(--tts-purple);
    }

    .tts-cd-icon {
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .tts-cd-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .tts-cd-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--tts-purple);
    }

    .tts-cd-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--tts-text);
    }


    /* ============================================================
    BOOKING BAR SHORTCODE STYLES
    Matches existing purple theme (#672E68)
    ============================================================ */

    .tts-booking-bar-wrapper {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }

    .tts-booking-bar {
        display: grid;
        grid-template-columns: 180px 180px 280px 150px 150px;
        gap: 12px;
        background: linear-gradient(135deg, #672E68 0%, #8a4a8b 100%);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(103, 46, 104, 0.3);
        align-items: end;
        justify-content: center;
    }

    @media (max-width: 1024px) {
        .tts-booking-bar {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .tts-bar-field-date {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 768px) {
        .tts-booking-bar {
            grid-template-columns: 1fr;
        }
        
        .tts-bar-field-date {
            grid-column: 1;
        }
    }

    .tts-bar-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .tts-bar-field-btn {
        justify-content: flex-end;
    }

    .tts-bar-label {
        font-size: 10px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
    }

    /* ── Select Dropdowns ── */
    .tts-bar-select-wrapper {
        position: relative;
    }

    .tts-bar-select {
        width: 100%;
        padding: 10px 32px 10px 12px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        font-size: 13px;
        color: #2d1a2e;
        background: #ffffff;
        transition: all 0.25s ease;
        box-sizing: border-box;
        font-family: inherit;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .tts-bar-select:disabled {
        background: rgba(255, 255, 255, 0.5);
        color: #999;
        cursor: not-allowed;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .tts-bar-select:not(:disabled):hover {
        border-color: rgba(255, 255, 255, 0.6);
    }

    .tts-bar-select:not(:disabled):focus {
        outline: none;
        border-color: #FAEBEE;
        box-shadow: 0 0 0 3px rgba(250, 235, 238, 0.3);
    }

    .tts-bar-select-arrow {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #672E68;
        pointer-events: none;
        font-size: 12px;
    }

    .tts-bar-select:disabled + .tts-bar-select-arrow {
        color: #999;
    }

    /* ── Date Input ── */
    .tts-bar-field-date {
        position: relative; /* Required for dropdown positioning */
    }

    .tts-bar-calendar-container {
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        /* overflow: hidden; */
        background: #ffffff;
        max-width: 100%;
        min-width: 280px; /* Ensure calendar has minimum width */
    }

    .tts-bar-calendar-container .tts-cal-inner {
        /* Calendar inner wrapper */
    }

    .tts-bar-calendar-container .tts-cal-header {
        background: #672E68;
        color: #ffffff;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tts-bar-calendar-container .tts-cal-nav {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.25s ease;
    }

    .tts-bar-calendar-container .tts-cal-nav:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .tts-bar-calendar-container .tts-cal-nav:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .tts-bar-calendar-container .tts-cal-month {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

    .tts-bar-calendar-container .tts-cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0;
    }

    .tts-bar-calendar-container .tts-cal-day-name {
        text-align: center;
        font-size: 9px;
        font-weight: 700;
        color: #7a6a7b;
        padding: 4px 2px;
        background: #FAEBEE;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .tts-bar-calendar-container .tts-cal-cell {
        text-align: center;
        padding: 4px 2px;
        font-size: 11px;
        cursor: pointer;
        border: 0.5px solid rgba(221, 200, 222, 0.2);
        transition: background 0.2s ease, color 0.2s ease;
        position: relative;
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tts-bar-calendar-container .tts-cal-cell:hover:not(.tts-cal-disabled):not(.tts-cal-empty) {
        background: #FAEBEE;
        color: #672E68;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-selected {
        background: #672E68 !important;
        color: #ffffff !important;
        font-weight: 700;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-today {
        border: 1.5px solid #8a4a8b;
        font-weight: 600;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-disabled {
        color: #ddd;
        background: #f8f8f8;
        cursor: not-allowed;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-empty {
        cursor: default;
        background: transparent;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-full {
        background: #f0f0f0;
        color: #bbb;
        cursor: not-allowed;
    }

    .tts-bar-calendar-container .tts-cal-cell.tts-cal-full::after {
        content: 'Full';
        position: absolute;
        bottom: 0px;
        font-size: 7px;
        color: #e85d7a;
    }

    /* ── Calendar Collapsed State (appears as input box) ── */
    .tts-bar-calendar-container.tts-cal-collapsed {
        border: 2px solid #ddc8de;
        border-radius: 8px;
        background: #f8f8fa;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        cursor: not-allowed;
        opacity: 0.6;
        position: relative;
    }

    .tts-bar-calendar-container.tts-cal-collapsed .tts-cal-placeholder {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        color: #7a6a7b;
        font-size: 14px;
    }

    .tts-bar-calendar-container.tts-cal-collapsed .tts-cal-placeholder-icon {
        font-size: 16px;
    }

    .tts-bar-calendar-container.tts-cal-collapsed .tts-cal-placeholder-text {
        font-size: 14px;
        color: #999;
    }

    /* ── Calendar Expanded State (dropdown below) ── */
    .tts-bar-calendar-container:not(.tts-cal-collapsed) {
        position: relative;
        border: 2px solid #ddc8de;
        border-radius: 8px;
        background: #f8f8fa;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        cursor: pointer;
    }

    .tts-bar-calendar-container:not(.tts-cal-collapsed) .tts-cal-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        color: #2d1a2e;
        font-size: 14px;
    }

    .tts-bar-calendar-container .tts-cal-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: #ffffff;
        border: 2px solid #ddc8de;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(103, 46, 104, 0.2);
        z-index: 1000;
        overflow: hidden;
        display: none !important; /* Hidden by default */
    }

    .tts-bar-calendar-container .tts-cal-dropdown.show {
        display: block !important; /* Show when active */
    }

    /* ── Checkout Calendar — trigger/dropdown pattern (scoped to checkout only) ── */
    .tcc-form .tts-calendar-container {
        position: relative;
        border: 2px solid var(--tts-border, #ddc8de);
        border-radius: 8px;
        background: #f8f8fa;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        cursor: pointer;
        box-sizing: border-box;
    }

    .tcc-form .tts-calendar-container.tts-cal-collapsed {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .tcc-form .tts-calendar-container .tts-cal-placeholder,
    .tcc-form .tts-calendar-container .tts-cal-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        color: #2d1a2e;
        font-size: 14px;
    }

    .tcc-form .tts-calendar-container .tts-cal-placeholder-text,
    .tcc-form .tts-calendar-container .tts-cal-trigger-text {
        font-size: 14px;
    }

    .tcc-form .tts-calendar-container.tts-cal-collapsed .tts-cal-placeholder-text {
        color: #999;
    }

    .tcc-form .tts-calendar-container .tts-cal-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 300px;
        background: #ffffff;
        border: 2px solid #ddc8de;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(103, 46, 104, 0.2);
        z-index: 1000;
        overflow: hidden;
        display: none !important;
    }

    .tcc-form .tts-calendar-container .tts-cal-dropdown.show {
        display: block !important;
    }

    .tts-bar-calendar-container .tts-cal-inner {
        /* Calendar inner wrapper - now inside dropdown */
    }

    /* ── Calendar Disabled State Overlay ── */
    .tts-bar-calendar-container {
        position: relative;
    }

    .tts-bar-calendar-container .tts-cal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        backdrop-filter: blur(2px);
    }

    .tts-bar-calendar-container .tts-cal-overlay span {
        background: #672E68;
        color: #ffffff;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(103, 46, 104, 0.3);
    }

    .tts-bar-calendar-container .tts-cal-disabled-state {
        opacity: 0.6;
        pointer-events: none;
    }

    /* ── Date Input ── */
    .tts-bar-date-wrapper {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        padding: 0 12px;
        gap: 8px;
        transition: all 0.25s ease;
    }

    .tts-bar-date-wrapper:has(.tts-bar-date-input:disabled) {
        background: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .tts-bar-date-wrapper:has(.tts-bar-date-input:not(:disabled):focus) {
        border-color: #FAEBEE;
        box-shadow: 0 0 0 3px rgba(250, 235, 238, 0.3);
    }

    .tts-bar-date-icon {
        font-size: 18px;
        flex-shrink: 0;
    }

    .tts-bar-date-input {
        border: none;
        outline: none;
        background: transparent;
        flex: 1;
        font-size: 14px;
        color: #2d1a2e;
        padding: 12px 0;
        font-family: inherit;
        cursor: pointer;
    }

    .tts-bar-date-input:disabled {
        color: #999;
        cursor: not-allowed;
    }

    /* ── Quantity Controls ── */
    .tts-bar-qty-wrapper {
        display: flex;
        align-items: center;
        gap: 0;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
        width: 100%;
        box-sizing: border-box;
    }

    .tts-bar-qty-wrapper:has(.tts-bar-qty-input:disabled) {
        background: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .tts-bar-qty-btn {
        max-width: 40px;
        height: auto;
        border: none;
        background: #FAEBEE;
        color: #672E68;
        font-size: 18px;
        font-weight: 700;
        transition: background 0.25s ease;
        flex-shrink: 0;
        padding: 0 !important;
        aspect-ratio: 1 / 1;
        width: 100%;
        border-radius: 2px !important;
    }

    .tts-bar-qty-btn:not(:disabled):hover {
        background: #f5c6d0;
    }

    .tts-bar-qty-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .tts-bar-qty-input {
        flex: 1;
        min-width: 0;
        height: 40px;
        border: 0 !important;
        /*border-left: 2px solid rgba(103, 46, 104, 0.2);
        border-right: 2px solid rgba(103, 46, 104, 0.2);*/
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #672E68;
        background: #ffffff;
        -moz-appearance: textfield;
        outline: none;
    }

    .tts-bar-qty-input:disabled {
        color: #999;
        background: #f5f5f5;
    }

    .tts-bar-qty-input::-webkit-outer-spin-button,
    .tts-bar-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    /* ── Book Button ── */
    .tts-bar-book-btn,
    .tts-bar-contact-btn {
        width: 100%;
        padding:13px 20px !important;
        background: #FAEBEE;
        color: #672E68;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.25s ease;
        font-family: inherit;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .tts-bar-book-btn:not(:disabled):hover,
    .tts-bar-contact-btn:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        color: #9a3f8f;
    }

    .tts-bar-book-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .tts-bar-contact-btn {
        background: #ffffff;
        border: 2px solid #FAEBEE;
    }

    .tts-bar-contact-btn:hover {
        background: #FAEBEE;
        border-color: #f5c6d0;
    }

    /* ── Error Message ── */
    .tts-bar-error {
        margin-top: 12px;
        padding: 12px 16px;
        background: #fff0f3;
        border: 2px solid #f5c0cc;
        border-radius: 8px;
        color: #c0143c;
        font-size: 14px;
        text-align: center;
        animation: tts-bar-error-slide 0.3s ease;
    }

    @keyframes tts-bar-error-slide {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Responsive Adjustments ── */
    @media (max-width: 1200px) {
        .tts-booking-bar {
            grid-template-columns: 160px 160px 240px 140px 130px;
            gap: 10px;
            padding: 18px;
        }
    }

    @media (max-width: 1024px) {
        .tts-booking-bar {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .tts-bar-field-date {
            grid-column: 1 / -1;
        }
        
        .tts-bar-field-btn {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .tts-booking-bar {
            padding: 16px;
            gap: 12px;
            grid-template-columns: 1fr;
        }
        
        .tts-bar-field-date {
            grid-column: 1;
        }
        
        .tts-bar-label {
            font-size: 11px;
        }
        
        .tts-bar-select,
        .tts-bar-date-input {
            font-size: 13px;
            padding: 10px 12px;
        }
        
        .tts-bar-book-btn {
            padding: 12px 20px;
            font-size: 14px;
        }
    }

/* ================================================================
   MULTI-BOOKING SECTION HEADER
   ================================================================ */
.tcc-booking-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

.tcc-booking-section-num {
    background: var(--grad) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

.tcc-booking-section-header + .tcc-card {
    margin-top: 10px !important;
}

/* Summary booking label */
.tts-summary-booking-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #672E68 !important;
    margin: 14px 0 8px !important;
    padding: 4px 10px !important;
    background: #f3edf4 !important;
    border-radius: 4px !important;
    display: block !important;
}

/* ================================================================
   CHECKOUT QTY + SUMMARY FIXES
   ================================================================ */

/* Hide booking summary block inside popup */
#tts-booking-overlay .tts-summary,
#tts-booking-overlay #tts-booking-summary {
    display: none !important;
}

/* Hide only the booking detail rows in checkout sidebar (keep price/total/payment) */
.tcc-summary .tts-checkout-detail-block,
.tcc-summary .tts-summary-booking-label,
.tcc-summary .tcc-divider {
    display: none !important;
}

/* ================================================================
   QTY CONTROL SPACING FIX
   ================================================================ */
.tcc-qty-control {
    gap: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    height: 44px !important;
    overflow: hidden !important;
}

.tcc-qty-control button {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tcc-qty-display {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* (booking detail rows hidden above) */


ul.pickup-locations-list{
        display: flex;
    flex-direction: column;
    gap: 20px;
    padding:0;
}
ul.pickup-locations-list li{
    position: relative;
    padding-left: 20px;
    list-style: none;
}
ul.pickup-locations-list li:before{
    content:"";
    width:8px;
    position: absolute;
    left: 0;
    top:7px;
    background:url(/wp-content/uploads/2026/03/gr-dot.svg);
    background-size: contain;
    height: 8px;
}


/* ================================================================
   REMOVE BOOKING BUTTON STYLES
   ================================================================ */
.tcc-card-header-with-remove {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tcc-card-header-with-remove .tcc-card-title {
    margin: 0;
}

.tcc-remove-booking-btn {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tcc-remove-booking-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.tcc-remove-booking-btn:active {
    transform: translateY(0);
}

.tcc-remove-booking-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.tcc-remove-icon {
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tcc-card-header-with-remove {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .tcc-remove-booking-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ================================================================
   GUEST ACCORDION STYLES
   ================================================================ */
.tcc-guest-accordion-card {
    overflow: hidden;
}

.tcc-accordion-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0 0 12px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.tcc-accordion-header:hover {
    opacity: 0.8;
}

.tcc-accordion-header .tcc-card-title {
    margin: 0 !important;
    text-align: left;
    font-size: 18px;
}

.tcc-accordion-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #fff;
    font-weight: bold;
    margin-left: 12px;
    flex-shrink: 0;
}
.tcc-accordion-header .tcc-card-title{
    color: #fff !important;
}
.tcc-accordion-header.active .tcc-accordion-icon {
    transform: rotate(180deg);
}

.tcc-accordion-content {
    display: none;
    padding-top: 12px;
}

.tcc-accordion-content.active {
    display: block;
}

/* Extra guests styling */
.tcc-extra-guests-heading {
    margin-top: 20px;
    margin-bottom: 12px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    font-size: 15px;
}

.tcc-guest-item {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 3px solid #6c2e8f;
}

.tcc-guest-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tcc-accordion-header {
        padding: 0 0 10px 0;
    }
    
    .tcc-accordion-header .tcc-card-title {
        font-size: 16px;
    }
    
    .tcc-accordion-icon {
        font-size: 12px;
    }
    
    .tcc-guest-item {
        padding: 10px;
    }
    
    .tcc-guest-item-title {
        font-size: 13px;
    }
}
/* ================================================================
   BILLING FORM STYLES
   ================================================================ */
.tcc-billing-note {
    color: #666;
    font-size: 14px;
    margin: -8px 0 16px 0;
    font-style: italic;
}

.tcc-required {
    color: #dc3545;
    font-weight: bold;
}

/* Select dropdown styling */
.tcc-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.tcc-select:hover {
    border-color: #6c2e8f;
}

.tcc-select:focus {
    outline: none;
    border-color: #6c2e8f;
    box-shadow: 0 0 0 3px rgba(108, 46, 143, 0.1);
}
/* Ensure billing fields match the existing tcc-input styling */
#billing_first_name,
#billing_last_name,
#billing_email,
#billing_phone,
#billing_address_1,
#billing_city,
#billing_state,
#billing_postcode,
#billing_country {
    width: 100%;
}

/* Country field readonly styling */
#billing_country[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}


body.woocommerce-checkout{
    background: #f4f4f6;
}