/* מבנה הפריסה הכללי שנוצר ע"י ה-JS */
.wva-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "left right"
        "total total"
        "button button";
    gap: 20px 40px;
}
.wva-left-column { grid-area: left; display: flex; flex-direction: column; gap: 20px; }
.wva-right-column { grid-area: right; }
#total-price-container { grid-area: total; }
.single_add_to_cart_button { grid-area: button; justify-self: center; width: 50%; max-width: 300px; }

/* ====================================================== */
/* --- עיצוב בוררי וריאציות (תאריך/שעה) ככפתורים --- */
/* ====================================================== */

/* Container for each variation group */
.wva-variation-group {
    margin-bottom: 20px;
    direction: rtl;
}

/* Hide WooCommerce table labels (we use our own instructional text) */
.variations th.label,
.variations th.label label,
.variations th[class*="label"],
table.variations th,
.variations thead,
.variations tr th {
    display: none !important;
    visibility: hidden !important;
}

/* Hide WooCommerce select dropdowns (we use radio buttons instead) */
.variations select,
.variations .value select,
.variations td.value select,
.variations_form select[name^="attribute_"],
table.variations select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide WooCommerce variation price element (we use our own total price container) */
.woocommerce-variation-price,
.woocommerce-variation-price *,
form.cart .woocommerce-variation-price,
form.cart .woocommerce-variation-price * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Hide WooCommerce single variation wrap element (we use our own layout) */
.single_variation_wrap,
.single_variation_wrap *,
form.cart .single_variation_wrap,
form.cart .single_variation_wrap *,
.woocommerce-variation,
.woocommerce-variation *,
.woocommerce-variation-description,
.woocommerce-variation-description *,
.woocommerce-variation-availability,
.woocommerce-variation-availability *,
.woocommerce-variation-add-to-cart,
.woocommerce-variation-add-to-cart * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Instructional text styling */
.wva-variation-instruction {
    font-family: "RAG Sans", sans-serif;
    color: white;
    font-size: 0.95em;
    margin-bottom: 12px;
    font-weight: 500;
    text-align: right; /* RTL alignment */
}

/* Error message styling */
.wva-variation-error {
    text-align: right;
    font-family: "RAG Sans", sans-serif;
    color: #ffffff;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid #e1cc85;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.9em;
}

/* Container for radio button group */
.wva-button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual variation option (traditional radio button style) */
.wva-variation-option {
    position: relative;
}

/* Label wraps the entire option (radio + text) - makes entire line clickable */
.wva-variation-option label {
    display: flex;
    flex-direction: row-reverse; /* RTL: radio on right, text on left */
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
    width: 100%;
    color: white;
    font-family: "RAG Sans", sans-serif;
    font-size: 1em;
    line-height: 1.5;
}

/* Traditional radio button styling - inside label, on the right side (before text in RTL) */
.wva-variation-option label input[type="radio"] {
    top: 4px;
    position: relative;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 0px;
    margin-left: 8px;
    cursor: pointer;
    accent-color: #9d5d2c;
    flex-shrink: 0;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Text part of the label */
.wva-variation-option label .wva-radio-label-text {
    flex: 1;
    line-height: 1.5;
}

/* Hover state */
.wva-variation-option label:hover {
    color: rgba(255, 255, 255, 0.9);
}

.wva-variation-option label:hover .wva-radio-label-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Selected state - radio button will use accent-color */
.wva-variation-option label input[type="radio"]:checked + .wva-radio-label-text,
.wva-variation-option.selected label .wva-radio-label-text {
    font-weight: 600;
    color: white;
}

/* Error state */
.wva-variation-option.error label input[type="radio"] {
    border-color: #dc3545;
    accent-color: #dc3545;
}

.wva-variation-option.error label,
.wva-variation-option.error label .wva-radio-label-text {
    color: #dc3545;
}

/* --- טיפוגרפיה ועיצובים כלליים --- */
.custom-addons-container h4, .custom-addons-container label, #total-price-container {
    font-family: "RAG Sans", sans-serif;
    color: white;
}
.custom-addons-container h4 { font-size: 1em; }
#total-price-container { padding: 10px 0; text-align: center; font-size: 1.5em; font-weight: bold; }

/* Ensure empty addons container maintains layout spacing */
.custom-addons-container:empty,
.custom-addons-container:not(:has(h4)) {
    min-height: 1px; /* Maintain space in grid layout */
}

/* --- עיצוב בורר כמות הכרטיסים (מספר כרטיסים) --- */
.my-custom-ticket-quantity-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quantity-label {
    font-family: "RAG Sans", sans-serif;
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-align: right;
    direction: rtl;
}

.ticket-quantity-wrapper {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 45px;
    width: 100%;
    max-width: 200px;
}

.ticket-quantity-wrapper .quantity {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-quantity-wrapper input[type="number"] {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    background-color: transparent !important;
    color: white !important;
    font-family: "RAG Sans", sans-serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ticket-quantity-wrapper input[type="number"]::-webkit-outer-spin-button,
.ticket-quantity-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.ticket-quantity-minus,
.ticket-quantity-plus {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    width: 45px;
    height: 100%;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.ticket-quantity-minus:hover,
.ticket-quantity-plus:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.ticket-quantity-minus:active,
.ticket-quantity-plus:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.15);
}

.ticket-quantity-minus:disabled,
.ticket-quantity-plus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* --- עיצוב שורת התוספת --- */
.custom-addon-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 67px;
}
.custom-addon-item:last-child { border-bottom: none; }

/* --- בקשה מס' 1, 2, 3: סידור התוכן בתוך השורה --- */
.custom-addon-item input[type="checkbox"] {
    display: none; /* מסתירים את הצ'קבוקס המקורי */
}
.addon-label-content {
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start to prevent checkbox stretching */
    gap: 10px; /* רווח בין שם התוספת למחיר */
    cursor: pointer;
    margin-left: 15px; /* רווח בין הצ'קבוקס לטקסט */
    flex-grow: 1; /* גורם לטקסט לתפוס את כל המקום הפנוי ודוחף את הכמות שמאלה */
}
.addon-label-content .addon-title {
    font-size: 0.95em;
}
.addon-label-content .amount {
    color: #ffd8bf;
}
.addon-label-content .addon-price {
    font-size: 0.9em;
    opacity: 0.8; /* הופך את המחיר לקצת פחות בולט */
}
/* יצירת הצ'קבוקס המותאם אישית מימין */
.custom-addon-item .addon-label-content::before {
    content: '';
    order: -1; /* ממקם מימין (התחלה) ב-flex */
    width: 20px;
    height: 20px;
    min-width: 20px; /* Prevents shrinking */
    min-height: 20px; /* Prevents shrinking */
    flex-shrink: 0; /* Prevents checkbox from shrinking */
    flex-grow: 0; /* Prevents checkbox from growing */
    align-self: flex-start; /* Keeps checkbox at top when text wraps */
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-addon-item input[type="checkbox"]:checked + .addon-label-content::before {
    background-color: white;
    border-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d5d2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- עיצוב בורר הכמות של התוספות (גרסה סופית) --- */
.wva-quantity-wrapper {
    display: flex;
    background-color: rgba(0, 0, 0, 0.15);
    /* שינוי: פינות מרובעות יותר */
    border-radius: 5px; 
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* שינוי: גובה מופחת */
    height: 35px; 
    align-items: center;
}
.wva-quantity-wrapper .wva-addon-qty {
    padding: 0px 10px 0px 0 !important;
    font-weight: 800;
    width: 27px;
    height: 100%;
    text-align: center;
    border: none;
    background-color: transparent;
    color: white;
    font-family: "RAG Sans", sans-serif;
    font-size: 1em;
    -moz-appearance: textfield;
}
.wva-quantity-wrapper .wva-addon-qty::-webkit-outer-spin-button,
.wva-quantity-wrapper .wva-addon-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wva-quantity-wrapper .wva-plus,
.wva-quantity-wrapper .wva-minus {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    width: 35px;
    font-size: 1.4em;
    line-height: 1;
    height: 100%;
}

/* --- הסתרה והצגה של בורר הכמות --- */
.addon-quantity {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    visibility: hidden;
    opacity: 0;
}
.addon-quantity.visible {
    max-height: 100px;
    visibility: visible;
    opacity: 1;
}
/* ====================================================== */
/* --- עיצוב רספונסיבי למובייל (גרסה סופית) --- */
/* ====================================================== */

/* הכללים בתוך בלוק זה יופעלו רק על מסכים ברוחב של 768 פיקסלים או פחות */
@media (max-width: 768px) {

    /* 1. שוברים את הגריד לעמודה אחת */
    .wva-grid-container {
        grid-template-columns: 1fr; /* הגדרה של עמודה אחת בלבד */
        grid-template-areas:
            "left"   /* אזור שמאל (תאריך, שעה, כמות) יופיע ראשון */
            "right"  /* אזור ימין (התוספות) יופיע מתחתיו */
            "total"
            "button";
        gap: 10px;
    }

    /* 2. מבטלים רוחב קבוע לכפתור כדי שיתאים למסך – full width, aligned with qty selector */
    .single_add_to_cart_button {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    /* 3. דיוקים באזור התוספות */
    .custom-addons-container h4 {
        text-align: right; /* יישור הכותרת "תוספות" לימין */
        margin: 20px 10px 0px 10px;
    }

    .custom-addon-item {
        /* מחזירים למצב שורה, עם אפשרות גלישה אם אין מקום */
        margin-right: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; 
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        min-height: auto;
    }

    /* Responsive adjustments for variation radio buttons */
    .wva-button-group {
        gap: 10px;
    }

    .wva-variation-option label {
        font-size: 0.95em;
        padding: 6px 0;
    }

    .wva-variation-option label input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        margin-right: 10px;
        display: inline-block !important;
        visibility: visible !important;
    }

    .wva-variation-instruction {
        font-size: 0.9em;
        margin-bottom: 10px;
    }

    .wva-variation-error {
        font-size: 0.85em;
        padding: 6px 10px;
    }

    /* Responsive adjustments for ticket quantity selector */
    .ticket-quantity-wrapper {
        max-width: 100%;
        height: 40px;
    }

    .ticket-quantity-minus,
    .ticket-quantity-plus {
        width: 40px;
        font-size: 1.3em;
    }

    .ticket-quantity-wrapper input[type="number"] {
        font-size: 1em !important;
    }

    .quantity-label {
        font-size: 0.95em;
    }
}