/* --- Base Styles --- */
html { scroll-behavior: smooth; }
body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    font-family: var(--font-main); 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; 
    transition: background-color 0.5s ease;
}
html[dir="rtl"] body { font-family: 'Cairo', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { display: none; }
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ======================================================= */
/* ==   ✨ قناع التلاشي الاحترافي لأسفل الصفحة ✨   == */
/* ======================================================= */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: linear-gradient(to top, var(--bg-color) 20%, transparent);
    z-index: 30; 
    pointer-events: none; 
}

/* 
 * ملاحظة: متغيرات الوضع المظلم الأساسية يتم تعريفها
 * في ملف Blade الرئيسي. هذا البلوك هنا للوضع الفاتح فقط.
 * لكن سنضيف المتغير الجديد هنا أيضاً ليكون الكود منظماً.
*/
:root {
    /* ✅ ✨ أضف هذا المتغير هنا للقيمة الافتراضية (الوضع المظلم) */
    --quantity-controls-bg: rgba(255, 255, 255, 0.05);
}


/* --- Light Mode Variables --- */
body.light-mode {
    --bg-color: #F4F4F6;
    --surface-color: #FFFFFF;
    --text-color: #1C1C23;
    --primary-color: #206E7A;
    --header-icon-bg: #FFFFFF;
    --header-icon-color: #1C1C23;
    --item-name: #1C1C23;
    --item-description: #5A5A5E;
    --item-price: #206E7A;
    --cart-btn-bg: #206E7A;
    --cart-btn-icon: #FFFFFF;
    
    /* ✅ ✨ وهنا القيمة الخاصة بالوضع الفاتح */
    --quantity-controls-bg: rgba(0, 0, 0, 0.05);
}

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-pop-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes star-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* --- Search Overlay Styles --- */
#search-overlay.visible {
    opacity: 1;
    visibility: visible;
}
#search-overlay.visible #search-modal-content {
    transform: translateY(0);
}
#search-input::placeholder {
    color: var(--item-description);
}
#search-input::-webkit-search-decoration,
#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-results-button,
#search-input::-webkit-search-results-decoration {
    -webkit-appearance:none;
}
.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: var(--text-color);
}
.search-result-item:hover {
    background-color: rgba(128, 128, 128, 0.1);
}
.search-result-image {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    margin-right: 1rem;
}
.search-result-details h4 {
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.search-result-details p {
    font-size: 0.875rem;
    color: var(--item-description);
    margin: 0;
    margin-top: 0.25rem;
}

/* --- Modal Visibility (Generic) --- */
.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease;
}
.visible #modal-content,
.visible #offer-modal-content,
.visible #search-modal-content {
    transform: scale(1) translateY(0) !important;
    transition: transform 0.3s ease;
}

/* --- Skeleton Loader --- */
.skeleton-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: loading 1.5s infinite;
}
@keyframes loading {
    to { left: 150%; }
}

/* --- Button States --- */
#offer-add-to-cart-btn.added {
    background-color: #28a745 !important;
    transform: scale(1.05);
}
#offer-add-to-cart-btn.added .icon {
    animation: checkmark-pop 0.4s ease-in-out;
}
@keyframes checkmark-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.header-icon-button:active,
.cart-quantity-btn:active,
.category-card-v2:active,
.subcat-tab:active,
.cta-button:active,
.add-to-cart-modal-btn:active,
.back-button:active,
.menu-button-modern-simple:active,
.lang-switcher-splash:active {
    transform: scale(0.95);
    transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}

/* ================================================================
   [NEW] THEME TOGGLE & MOBILE OPTIMIZATIONS
   ================================================================ */

/* Smooth Theme Transition */
body {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease !important;
}

body * {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* Prevent transition on images */
img,
.item-card-image,
.category-card-v2 .image-container {
    transition: transform 0.4s ease !important;
}

/* تصغير أزرار الهيدر */
.header-icon-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
}

/* زر الرجوع أصغر شوية */
#back-to-categories {
    min-width: 34px !important;
    min-height: 34px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
}

/* Theme toggle button animation */
#theme-toggle-btn {
    position: relative;
    overflow: visible !important;
}

#theme-toggle-btn i {
    transition: transform 0.3s ease;
}

#theme-toggle-btn:active i {
    transform: rotate(180deg) scale(1.2);
}

/* ================================================================
   MOBILE OPTIMIZATIONS
   ================================================================ */
@media (max-width: 768px) {
    /* أزرار أصغر على الموبايل */
    .header-icon-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    
    #back-to-categories {
        min-width: 30px !important;
        min-height: 30px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    /* منع التكبير عند الضغط على الأزرار */
    .header-icon-btn,
    .pill-button,
    .quick-add-btn,
    .subcat-tab {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
    }
    
    /* تحسين الـ Transition على الموبايل */
    body {
        transition: background-color 0.3s ease !important;
    }
    
    * {
        transition-duration: 0.2s !important;
    }
    
    /* تقليل الأنيميشن على الموبايل */
    .item-card-modern:hover,
    .category-card-v2:hover {
        transform: translateY(-3px) !important;
    }
    
    /* تحسين الـ Header على الموبايل */
    .category-title-bar {
        height: 52px !important;
        padding: 0 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    #category-hero-title {
        font-size: 0.95rem !important;
        max-width: calc(100vw - 200px);
    }
    
    .header-actions {
        gap: 0.35rem !important;
    }
    
    /* تحسين spacing */
    #sub-category-tabs-container {
        padding: 0 0.75rem !important;
        height: 42px !important;
    }
    
    .subcat-tab {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.4rem !important;
    }
}

/* Performance للموبايل */
@media (hover: none) and (pointer: coarse) {
    /* تقليل الـ Effects الثقيلة */
    .pill-container,
    .bottom-drawer,
    .nav-overlay {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* إزالة الـ 3D effects على الموبايل */
    .item-card-modern::before,
    .category-card-v2::after {
        display: none !important;
    }
    
    /* تبسيط الـ Shadows */
    .item-card-modern,
    .category-card-v2 {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* تقليل الـ hover effects */
    .item-card-modern:active {
        transform: scale(0.98) !important;
    }
    
    .header-icon-btn:active {
        transform: scale(0.9) !important;
    }
}

/* ================================================================
   iOS SAFARI FIXES
   ================================================================ */
@supports (-webkit-touch-callout: none) {
    /* iPhone X and newer - Safe Area */
    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .floating-action-bar {
        bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    
    .bottom-drawer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    
    /* منع الـ Bounce Effect */
    body {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    /* تحسين الـ Touch على الأزرار */
    .header-icon-btn,
    .pill-button,
    .quick-add-btn {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 167, 38, 0.2);
    }
    
    /* Fix للـ input zoom على iOS */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ================================================================
   LANDSCAPE MODE ON MOBILE
   ================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .category-title-bar {
        height: 48px !important;
    }
    
    #sub-category-tabs-container {
        height: 40px !important;
    }
    
    #unified-category-bar {
        position: sticky !important;
    }
}

/* ================================================================
   ULTRA SMALL SCREENS (iPhone SE, etc.)
   ================================================================ */
@media (max-width: 375px) {
    .header-icon-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
    }
    
    #back-to-categories {
        width: 26px !important;
        height: 26px !important;
    }
    
    #category-hero-title {
        font-size: 0.9rem !important;
        max-width: calc(100vw - 180px);
    }
    
    .header-actions {
        gap: 0.25rem !important;
    }
}
/* =================================================================
   SUCCESS BUTTON STATE (GREEN WITH CHECKMARK)
   ================================================================= */

/* الزر لما يتحول للأخضر */
.quick-add-btn.btn-success,
.offer-modal-btn.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    transform: scale(1.15) rotate(360deg) !important;
    box-shadow: 
        0 8px 25px rgba(40, 167, 69, 0.4),
        0 0 30px rgba(40, 167, 69, 0.3) !important;
    animation: successPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* أنيميشن النجاح */
@keyframes successPulse {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        box-shadow: 0 0 0 15px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(1.15) rotate(360deg);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* علامة الصح */
.quick-add-btn.btn-success i,
.offer-modal-btn.btn-success i {
    animation: checkmarkBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmarkBounce {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* الزر في حالة disabled */
.quick-add-btn:disabled,
.offer-modal-btn:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

/* تأثير الـ ripple لما تضغط */
.quick-add-btn.btn-success::before,
.offer-modal-btn.btn-success::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}