/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700;800&display=swap');

/* אכיפת פונט אסיסטנט על כל המערכת */
#mamacatering-order-app,
#mamacatering-order-app * {
    font-family: 'Assistant', sans-serif !important;
}

/* ביטול מסגרות פוקוס מציקות (אדום/כחול) */
#mamacatering-order-app *:focus,
#mamacatering-order-app *:active,
#mamacatering-order-app button:focus,
#mamacatering-order-app input:focus,
#mamacatering-order-app textarea:focus,
#mamacatering-order-app select:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* חומת מגן על כל המודאל וכל המסכים - חיסול הוורוד של התבנית */
.catering-font-open-sans button:hover,
.catering-font-open-sans button:focus,
.catering-font-open-sans input[type="submit"]:hover,
.catering-font-open-sans input[type="submit"]:focus,
.catering-font-open-sans input[type="button"]:hover,
.catering-font-open-sans input[type="button"]:focus {
    background-color: #ffaa2b !important;
    color: #000000 !important;
    border-color: transparent !important;
    text-decoration: none !important;
    outline: none !important;
}

/* הגנה על כפתורים משניים (אפורים/שחורים) כדי שלא יהפכו לכתומים מדי */
.catering-font-open-sans button[class*="bg-[#333]"]:hover,
.catering-font-open-sans button[class*="bg-[#333]"]:focus,
.catering-font-open-sans button[class*="bg-[#222]"]:hover,
.catering-font-open-sans button[class*="bg-[#222]"]:focus,
.catering-font-open-sans button.border-[#555]:hover,
.catering-font-open-sans button.border-[#555]:focus {
    background-color: #444444 !important;
    color: #ffffff !important;
}

/* הגנה על כפתור ה-X השקוף של המודאל */
.catering-font-open-sans button.bg-black\/60:hover,
.catering-font-open-sans button.bg-black\/60:focus {
    background-color: #F39402 !important;
    color: #000000 !important;
}

/* הגנה על כפתור הטריגר הצף (מבלי לדרוס לו את צבעי המערכת שהגדרת בניהול) */
div[class*="-wrap"] button:hover,
div[class*="-wrap"] button:focus {
    filter: brightness(1.05) !important;
    text-decoration: none !important;
}
/* ביטול מוחלט של המסגרת הוורודה מהתבנית לכל סוגי הכפתורים */
.catering-font-open-sans button,
.catering-font-open-sans [type="button"],
.catering-font-open-sans [type="submit"],
.catering-font-open-sans input[type="button"],
.catering-font-open-sans input[type="submit"],
#mamacatering-order-app button,
#mamacatering-order-app [type="button"],
#mamacatering-order-app [type="submit"] {
    border: 0 !important;
    border-style: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* החרגה לכפתורים שכן צריכים מסגרת (כמו כפתור "חזור") */
.catering-font-open-sans #back-to-menu-btn,
.catering-font-open-sans button#back-to-menu-btn,
#mamacatering-order-app button#back-to-menu-btn {
    border: 1px solid #333 !important;
}

/* החרגה לכפתורי רדיו/צ'קבוקס בתוך התוספות (שלא ייעלמו) */
.catering-font-open-sans input[type="checkbox"],
.catering-font-open-sans input[type="radio"] {
    border: 1px solid #444 !important;
}

#mamacatering-order-app button#back-to-menu-btn {
    border: 1px solid #333 !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* אפקט שיש יוקרתי */
.milky-shadow {
    background: linear-gradient(135deg, #242427 0%, #161619 100%) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* עיצוב בסיסי לפריט מנה / תוספת */
.item-card, .extra-card {
    background: linear-gradient(135deg, #1e1e22 0%, #121214 100%) !important;
    border: 1px solid #333 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
    color: #fff !important;
}

.item-card:hover, .extra-card[data-type="per_person"]:hover {
    transform: translateY(-2px);
    border-color: #555 !important;
}

/* סטייל למנה/תוספת שנבחרה */
.item-card.selected, .extra-card.selected {
    background: linear-gradient(135deg, #333338 0%, #222226 100%) !important; 
    border: 2px solid #F39402 !important;
    box-shadow: 0 0 15px rgba(243, 148, 2, 0.15) !important;
}

/* חיווי V כתום */
.item-card .sel-checkmark, .extra-card .sel-checkmark {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #F39402;
    color: #000;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    z-index: 10;
}

.item-card.selected .sel-checkmark, .extra-card.selected .sel-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* --- תוספת: החשכת פריטים כשמגיעים למקסימום בחירות בקטגוריה --- */
.item-card.max-reached-disabled {
    opacity: 0.4;
    filter: grayscale(60%);
}


/* אנימציית פעימה עדינה למשיכת תשומת לב */
@keyframes subtlePulse {
    0% { border-color: #333; box-shadow: none; transform: scale(1); }
    50% { border-color: #F39402; box-shadow: 0 0 12px rgba(243, 148, 2, 0.3); transform: scale(1.02); }
    100% { border-color: #333; box-shadow: none; transform: scale(1); }
}

.flash-hint {
    animation: subtlePulse 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #F39402; }

@media (max-width: 1024px) {
    #side-cart { margin-top: 2rem; }
}

/* יצירת ריווח בתחתית העמוד במובייל כדי שהבר הצף לא יסתיר את התוכן התחתון */
@media (max-width: 1023px) {
    #main-grid {
        padding-bottom: 100px !important; 
    }
}

/* התאמה למכשירי אייפון - מניעת דריסה של קו הבית (Home Indicator) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
}

/* אנימציות גלובליות לווידג'טים */
@keyframes blink { 
    50% { opacity: 0; } 
}
@keyframes cateringRippleAnim {
    0% { box-shadow: 0 0 0 0 rgba(var(--ripple-rgb), 0.8); }
    70% { box-shadow: 0 0 0 15px rgba(var(--ripple-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ripple-rgb), 0); }
}

/* מסגרת כתומה וקונטור לכפתור "בחירה לפי סוג אירוע" */
div[x-show="!selectedEventName"] button {
    border: 2px solid #F39402 !important;
    box-shadow: 0 0 15px rgba(243, 148, 2, 0.15) !important;
    background-color: transparent !important;
}

/* מצב מעבר עכבר (Hover) - הופך לכתום מלא וזוהר יותר */
div[x-show="!selectedEventName"] button:hover {
    background-color: #F39402 !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(243, 148, 2, 0.4) !important;
}

/* ========================================================
   חומת מגן על ווקומרס: ביטול התנגשות העמודות של Tailwind
   ======================================================== */
ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
}

/* --- עיצוב חדש לכותר קטגוריה נדבק (Sticky Header) --- */

/* 1. שינוי הרקע לגרדיאנט כתום בולט */
.category-section .sticky {
    /* גרדיאנט כתום יוקרתי */
    background: linear-gradient(135deg, #F39402 0%, #ffaa2b 100%) !important;
    /* הוספת מסגרת תחתונה עדינה להפרדה */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    /* צל שנותן עומק בזמן הגלילה */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    /* ריכוך פינות עליונות */
    border-radius: 16px 16px 0 0 !important;
}

/* 2. התאמת צבע הטקסט של שם הקטגוריה (סלטים, עיקריות וכו') */
.category-section h4 {
    color: #000000 !important; /* שחור בולט על רקע כתום */
    font-weight: 800 !important;
}
/* 3. שינוי המלל "X לבחירה" לצבע שחור */
.category-section h4 span {
    color: #000000 !important; 
    text-shadow: none !important; /* ביטול הצללית למראה נקי יותר */
    font-weight: 700 !important;
    margin-right: 8px;
}

/* 4. עיצוב מחדש של בועית המונה (נבחרו: 0 / X) */
.category-section .counter-display {
    background: rgba(255, 255, 255, 0.3) !important; /* רקע קצת יותר בהיר לבועית כדי שהשחור יבלוט מעולה */
    border: 1px solid rgba(0, 0, 0, 0.2) !important; /* מסגרת שחורה עדינה */
    color: #000000 !important; /* צבע הטקסט הכללי ("נבחרו:") */
}

/* הדגשת המספר עצמו שנבחר בתוך הבועית */
.category-section .current-sel {
    color: #000000 !important; 
    font-weight: 900 !important;
}

/* התאמת כפתור האיפוס שיופיע בלבן/אפור בהיר על הכתום */
.category-section .btn-reset {
    color: #ffffff !important;
    text-decoration: underline !important;
    opacity: 0.9;
}

.category-section > .absolute.top-0.left-0.w-full.h-\[280px\] {
    display: none !important;
}

/* ========================================================
   עיצוב אזור חלוקת כמויות (Allocation Panel)
   ======================================================== */
.allocation-panel {
    background: rgba(30, 30, 34, 0.95);
    border: 1px solid #333;
    border-top: 3px solid #F39402;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.3);
}

.allocation-header {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    text-align: center;
}

.allocation-header .alloc-target {
    color: #F39402;
    font-size: 22px;
    margin: 0 4px;
    text-shadow: 0 0 10px rgba(243, 148, 2, 0.3);
}

/* השורות הכתומות של המנות */
.allocation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #F39402 0%, #d88100 100%);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 10px;
    color: #000;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.allocation-row-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.allocation-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.1);
    padding: 4px;
    border-radius: 30px;
}

.allocation-controls button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000 !important;
    color: #F39402 !important;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    border: none !important;
    padding-bottom: 3px; /* יישור פלוס/מינוס */
}

.allocation-controls button:active {
    transform: scale(0.9);
}

.allocation-controls span {
    width: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 900;
}

/* שורת הסטטוס למטה (נשארו לחלוקה...) */
.allocation-status {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
}

.allocation-status.incomplete {
    color: #ff5555;
    border: 1px dashed #ff5555;
}

.allocation-status.complete {
    color: #25D366;
    border: 1px dashed #25D366;
}

/* ========================================================
   התאמות אוטומטיות למובייל כאשר נבחרות 3 או 4 עמודות
   ======================================================== */
@media (max-width: 767px) {
   /* --- התאמות ל-3 עמודות --- */
    .grid-cols-3 .item-card { padding: 6px !important; }
    .grid-cols-3 .item-card .h-\[90px\] { height: 65px !important; margin-bottom: 6px !important; }
    .grid-cols-3 .item-card p.font-bold { font-size: 11px !important; line-height: 1.1 !important; padding: 0 4px !important; text-align: center !important; }
    .grid-cols-3 .item-card .card-plus-btn { width: 22px !important; height: 22px !important; bottom: 6px !important; left: 6px !important; }
    .grid-cols-3 .item-card.selected .sel-checkmark { transform: scale(0.85); top: -8px; right: -8px; }
    /* --- התאמות קפדניות יותר ל-4 עמודות --- */
    .grid-cols-4 .item-card { padding: 4px !important; }
    .grid-cols-4 .item-card .h-\[90px\] { height: 50px !important; margin-bottom: 4px !important; }
    .grid-cols-4 .item-card p.font-bold { font-size: 10px !important; line-height: 1.1 !important; padding: 0 4px !important; text-align: center !important; }
    .grid-cols-4 .item-card .card-plus-btn { width: 18px !important; height: 18px !important; bottom: 4px !important; left: 4px !important; }
    .grid-cols-4 .item-card .card-plus-btn svg { width: 12px !important; height: 12px !important; }
    .grid-cols-4 .item-card span.text-\[10px\] { font-size: 9px !important; }
    .grid-cols-4 .item-card.selected .sel-checkmark { transform: scale(0.7); top: -6px; right: -6px; }
}

/* ========================================================
   מרווח ביטחון לגריד החנות כדי שהווידג'ט הצף לא יסתיר אותו
   ======================================================== */
.catering-inline-wrap {
    padding-bottom: 100px !important; 
}