/* =========================================
   نظام ميرا لايت - الأنماط الموحدة (CSS)
   ========================================= */

/* =========================================
   1. المتغيرات ونظام الألوان (Themes)
   ========================================= */
:root { 
    --mira-gold: #b48a32; 
    --mira-gold-hover: #9e792c;
    --mira-navy: #1e2d4d;
    --mira-font: 'Cairo', sans-serif; 

    /* الوضع الفاتح (الافتراضي) */
    color-scheme: light; /* لحل مشكلة حقول التاريخ */
    --bg-main: #cbd5e1;
    --bg-app: #f4f6f9;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-input-focus: rgba(180, 138, 50, 0.05);
    --bg-nav: #ffffff;
    --bg-nav-item-active: #f8fafc;
    
    --text-primary: #1e2d4d;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    --border-color: #f1f5f9;
    --border-input: #e2e8f0;
    
    --header-gradient: linear-gradient(135deg, #1e2d4d 0%, #111827 100%);
    --header-text: #ffffff;
    
    --shadow-light: 0 4px 10px rgba(0,0,0,0.02);
    --shadow-medium: 0 5px 15px rgba(0,0,0,0.03);
    --shadow-nav: 0 10px 30px rgba(30, 45, 77, 0.12);
    
    --btn-outline-bg: #ffffff;
    --btn-outline-border: #e2e8f0;
    --btn-outline-text: #1e2d4d;
    
    --list-item-bg: #ffffff;
    --list-item-border: #f1f5f9;
    
    --pos-icon-bg: #f8fafc;
}

html[data-theme="dark"], body[data-theme="dark"], .mira-app-wrapper[data-theme="dark"] .mira-rep-shell {
    /* الوضع الداكن */
    color-scheme: dark; /* لحل مشكلة حقول التاريخ */
    --bg-main: #0f172a;
    --bg-app: #111827; 
    --bg-card: #1e293b; 
    --bg-input: #0f172a;
    --bg-input-focus: rgba(180, 138, 50, 0.1);
    --bg-nav: #1e293b; 
    --bg-nav-item-active: #334155;
    
    --text-primary: #f8fafc; 
    --text-secondary: #94a3b8; 
    --text-muted: #64748b;
    
    --border-color: #334155;
    --border-input: #334155;
    
    --header-gradient: linear-gradient(135deg, #0f172a 0%, #020617 100%); 
    --header-text: #f8fafc;
    
    --shadow-light: 0 4px 10px rgba(0,0,0,0.2);
    --shadow-medium: 0 5px 15px rgba(0,0,0,0.3);
    --shadow-nav: 0 -5px 20px rgba(0, 0, 0, 0.4);
    
    --btn-outline-bg: #1e293b;
    --btn-outline-border: #475569;
    --btn-outline-text: #f8fafc;
    
    --list-item-bg: #1e293b;
    --list-item-border: #334155;
    
    --pos-icon-bg: #334155;
}

/* =========================================
   2. الإعدادات الأساسية
   ========================================= */
#wpadminbar { display: none !important; }
html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
    background-color: var(--bg-main) !important; 
    font-family: var(--mira-font); 
    height: 100%; 
    transition: background-color 0.3s; 
}

/* =========================================
   3. نظام الحماية (GPS Gatekeeper)
   ========================================= */
#gps-gatekeeper, .gps-gatekeeper { 
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: var(--bg-app); 
    z-index: 999999; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; 
    padding: 30px; text-align: center; direction: rtl; 
    box-sizing: border-box;
}
#gps-gatekeeper h2 { color: var(--text-primary); }
#gps-gatekeeper p { color: var(--text-secondary); }
#gps-gatekeeper strong { color: var(--text-primary); }

.gps-pulse-icon { 
    width: 100px; height: 100px; 
    background: rgba(239, 68, 68, 0.1); 
    border-radius: 50%; display: flex; 
    align-items: center; justify-content: center; 
    font-size: 40px; color: #ef4444; margin-bottom: 20px; 
    border: 2px solid rgba(239, 68, 68, 0.3); 
    animation: gpsPulse 2s infinite; 
}
@keyframes gpsPulse { 
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 
    70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}

/* =========================================
   4. الهيكل الأساسي للتطبيق
   ========================================= */
.mira-app-wrapper { 
    display: none; align-items: center; 
    justify-content: center; min-height: 100%; 
    width: 100%; transition: background-color 0.3s;
}
.mira-rep-shell { 
    width: 100%; max-width: 480px; 
    height: 100vh; height: 100dvh; 
    background: var(--bg-app); direction: rtl; 
    position: relative; display: flex; flex-direction: column; 
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    transition: background-color 0.3s; 
}
@media (min-width: 768px) { 
    .mira-rep-shell { 
        height: 90vh; height: 90dvh; max-height: 850px; 
        border-radius: 40px; border: 12px solid #0f172a; 
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); 
    } 
}
.rep-scroll-area { 
    flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 110px; 
}
.rep-scroll-area::-webkit-scrollbar { display: none; }
.rep-main-area { padding: 25px 20px; }

/* =========================================
   5. الترويسة (Header) والملف الشخصي
   ========================================= */
.rep-header { 
    background: var(--header-gradient); padding: 25px 20px 50px; 
    border-radius: 0 0 35px 35px; position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: var(--header-text); 
    transition: background 0.3s;
}
.rep-profile { display: flex; align-items: center; gap: 15px; }
.rep-avatar { 
    width: 55px; height: 55px; 
    background: linear-gradient(135deg, var(--mira-gold), #8a6a26); 
    border-radius: 16px; display: flex; align-items: center; justify-content: center; 
    font-size: 22px; color: white; box-shadow: 0 8px 15px rgba(0,0,0,0.2); 
    border: 2px solid rgba(255,255,255,0.1); 
}
.theme-toggle-btn { 
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); 
    color: white; width: 32px; height: 32px; border-radius: 10px; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: 0.3s; font-size: 14px;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }

/* =========================================
   6. شريط التنقل السفلي (Bottom Nav)
   ========================================= */
.rep-bottom-nav { 
    position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); 
    width: 92%; max-width: 450px; background: var(--bg-nav); 
    height: 70px; border-radius: 25px; display: flex; 
    justify-content: space-around; align-items: center; 
    box-shadow: var(--shadow-nav); z-index: 2000; transition: background 0.3s;
}
.rep-nav-link { 
    flex: 1; display: flex; flex-direction: column; align-items: center; 
    color: var(--text-muted); cursor: pointer; font-size: 11px; 
    font-weight: 800; transition: 0.3s; text-decoration: none; position: relative; 
}
.rep-nav-link.active { color: var(--text-primary); }
.rep-nav-center { 
    background: linear-gradient(135deg, var(--mira-gold) 0%, var(--mira-gold-hover) 100%); 
    width: 60px; height: 60px; border-radius: 50%; display: flex; 
    align-items: center; justify-content: center; transform: translateY(-25px); 
    color: white !important; border: 5px solid var(--bg-app); 
    box-shadow: 0 8px 15px rgba(180,138,50,0.3); transition: transform 0.3s, border-color 0.3s; 
}
.rep-nav-center:active { transform: translateY(-20px) scale(0.95); }

/* =========================================
   7. الأزرار والحقول (Inputs & Buttons)
   ========================================= */
.mira-btn { 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    padding: 12px 20px; border-radius: 12px; font-weight: 800; 
    font-family: inherit; font-size: 14px; cursor: pointer; transition: all 0.3s ease; 
    border: none; outline: none; box-sizing: border-box; 
}
.mira-btn:active { transform: scale(0.96); }
.mira-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.mira-btn-full { width: 100%; }

.mira-btn-primary { background: var(--mira-navy); color: white; box-shadow: 0 4px 15px rgba(30,45,77,0.2); }
html[data-theme="dark"] .mira-btn-primary { background: #3b82f6; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.mira-btn-primary:hover { opacity: 0.9; }

.mira-btn-gold { background: var(--mira-gold); color: white; box-shadow: 0 4px 15px rgba(180, 138, 50, 0.3); }
.mira-btn-gold:hover { background: var(--mira-gold-hover); }

.mira-btn-success { background: #10b981; color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2); }
.mira-btn-success:hover { background: #059669; }

.mira-btn-danger { background: #fff1f2; color: #e11d48; border: 1px solid #ffe4e6; }
html[data-theme="dark"] .mira-btn-danger { background: rgba(225, 29, 72, 0.1); border-color: rgba(225, 29, 72, 0.2); }

.mira-btn-outline { 
    background: var(--btn-outline-bg); color: var(--btn-outline-text); 
    border: 2px solid var(--btn-outline-border); transition: all 0.3s; 
}
.mira-btn-outline.active { 
    border-color: var(--mira-gold); background: var(--mira-gold); 
    color: white; box-shadow: 0 5px 15px rgba(180,138,50,0.2); 
}
.action-btn { 
    width: 40px; height: 40px; border-radius: 12px; display: flex; 
    align-items: center; justify-content: center; cursor: pointer; 
    transition: 0.3s; border: none; 
}

.mira-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
.mira-input-wrapper i.icon-right { position: absolute; right: 15px; color: var(--text-muted); z-index: 2; transition: color 0.3s;}
.mira-input { 
    width: 100%; 
    padding: 14px 20px; 
    border: 2px solid var(--border-input) !important; 
    border-radius: 15px; 
    font-family: var(--mira-font); 
    font-weight: 700; 
    font-size: 14px; 
    outline: none; 
    transition: all 0.3s; 
    background-color: var(--bg-input) !important; 
    color: var(--text-primary) !important; 
    box-sizing: border-box; 
}

.mira-input:focus { 
    border-color: var(--mira-gold) !important; 
    background-color: var(--bg-input-focus) !important; 
}

.mira-input::placeholder { 
    color: var(--text-muted) !important; 
    font-weight: 600; 
}
.mira-input.mira-input-with-icon { 
    padding-right: 45px !important; 
}

/* إصلاح مشكلة التعبئة التلقائية لتتوافق مع الوضع الداكن */
.mira-input:-webkit-autofill,
.mira-input:-webkit-autofill:hover, 
.mira-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* =========================================
   8. القوائم والبطاقات (Cards & Lists)
   ========================================= */
.list-container { display: flex; flex-direction: column; gap: 12px; }
.list-item { 
    background: var(--list-item-bg); border-radius: 18px; padding: 15px; 
    display: flex; justify-content: space-between; align-items: center; 
    border: 1px solid var(--list-item-border); box-shadow: var(--shadow-light); 
    transition: background 0.3s, border-color 0.3s; 
}
.product-size-badge { 
    background: var(--bg-app); padding: 3px 8px; border-radius: 8px; 
    font-size: 11px; color: var(--text-primary); margin-right: 5px; 
    display: inline-block; border: 1px solid var(--border-color); 
}

.finance-card { 
    background: var(--bg-card); border-radius: 20px; padding: 20px; 
    margin-bottom: 20px; box-shadow: var(--shadow-medium); transition: background 0.3s;
}
.finance-row { 
    display: flex; justify-content: space-between; padding: 10px 0; 
    border-bottom: 1px dashed var(--border-color); font-weight: 800; 
    font-size: 14px; transition: border-color 0.3s;
}
.finance-row:last-child { border-bottom: none; }

.danger-box { background: #fff1f2; color: #e11d48; border: none; }
html[data-theme="dark"] .danger-box { background: rgba(225, 29, 72, 0.1); color: #fb7185; }

.dash-title { 
    color: var(--text-primary); font-weight: 900; font-size: 15px; 
    margin: 25px 0 12px 0; display: flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.dash-quick-btn { 
    background: var(--bg-card); border-radius:18px; padding:15px 5px; 
    text-align:center; font-size:12px; font-weight:800; color:var(--text-primary); 
    box-shadow:var(--shadow-light); cursor:pointer; border:1px solid var(--border-color); 
    transition:0.3s; flex:1; display:flex; flex-direction:column; align-items:center; 
}
.dash-quick-btn i { font-size:24px; color:var(--mira-gold); margin-bottom:10px; display:block; }
.dash-quick-btn:active { background:var(--bg-app); border-color:var(--mira-gold); transform:translateY(2px); }

.rep-stats-grid { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; 
    padding: 0 20px; margin-top: -35px; position: relative; z-index: 10; 
}
.rep-stat-card { 
    background: var(--bg-card); padding: 15px 10px; border-radius: 20px; 
    text-align: center; box-shadow: var(--shadow-medium); transition: background 0.3s; 
}
.rep-stat-card b { 
    font-size: 18px; color: var(--text-primary); font-weight: 900; 
    display: block; margin-top: 5px; transition: color 0.3s;
}

/* صناديق محتوى إضافية (تساعد في تنظيف كود PHP) */
.mira-content-box {
    background: var(--bg-card); padding: 20px; border-radius: 24px; 
    margin: 15px 0; box-shadow: var(--shadow-light);
}

/* =========================================
   9. نقطة البيع (POS) والفواتير
   ========================================= */
.scan-icon-btn { 
    width: 60px; height: 60px; border-radius: 50%; background: var(--mira-navy); 
    color: white; border: none; display: flex; align-items: center; 
    justify-content: center; font-size: 24px; cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s; position: relative; 
}
.scan-icon-btn.gallery { background: var(--bg-card); color: var(--mira-navy); border: 2px solid var(--border-color); }
html[data-theme="dark"] .scan-icon-btn.gallery { color: var(--text-primary); }
.scan-icon-btn:active { transform: scale(0.95); }
.icon-row { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; }

#torch-btn { 
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.6); 
    color: white; border: none; width: 40px; height: 40px; border-radius: 50%; 
    font-size: 18px; z-index: 100; cursor: pointer; display: none; 
    backdrop-filter: blur(5px); transition: 0.3s; 
}
#torch-btn.active { background: var(--mira-gold); box-shadow: 0 0 15px rgba(180, 138, 50, 0.6); }

.offline-badge { 
    background: #ef4444; color: white; font-size: 8px; padding: 6px 12px; 
    border-radius: 10px; font-weight: 600; display: none; margin-bottom: 15px; text-align: center; 
}
.pay-type-btn { 
    flex: 1; padding: 12px; border-radius: 12px; border: 2px solid var(--border-input); 
    background: var(--bg-card); color: var(--text-primary); font-weight: 900; 
    font-size: 13px; cursor: pointer; transition: 0.3s; display: flex; 
    justify-content: center; align-items: center; gap: 8px; font-family: inherit; 
}
.pay-type-btn.active { 
    border-color: var(--mira-navy); background: var(--mira-navy); color: white; 
    box-shadow: 0 5px 15px rgba(30,45,77,0.2); 
}
html[data-theme="dark"] .pay-type-btn.active { background: #3b82f6; border-color: #3b82f6; }

.qty-ctrl { 
    display: flex; align-items: center; background: var(--bg-app); 
    border-radius: 10px; padding: 4px; border: 1px solid var(--border-input); 
}
.qty-btn { 
    width: 30px; height: 30px; border: none; background: var(--bg-card); 
    border-radius: 8px; color: var(--text-primary); font-weight: 900; 
    font-size: 18px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    display: flex; align-items: center; justify-content: center; 
}
.qty-val { width: 35px; text-align: center; font-weight: 900; color: var(--text-primary); font-size: 15px; }
.cart-del { 
    border: none; background: #fff1f2; color: #e11d48; width: 32px; height: 32px; 
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; 
}
html[data-theme="dark"] .cart-del { background: rgba(225, 29, 72, 0.1); }

.floating-checkout { 
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); 
    width: 92%; max-width: 450px; background: var(--mira-navy); padding: 15px 20px; 
    border-radius: 20px; color: white; display: flex; justify-content: space-between; 
    align-items: center; box-shadow: 0 15px 30px rgba(0,0,0,0.25); z-index: 1001; 
}

/* =========================================
   10. الإعدادات والملف الشخصي (Settings)
   ========================================= */
.mira-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.mira-toggle input { opacity: 0; width: 0; height: 0; }
.mira-slider { 
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; 
    background-color: var(--border-color); transition: .4s; border-radius: 34px; 
}
.mira-slider:before { 
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; 
    background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}
input:checked + .mira-slider { background-color: #10b981; }
input:checked + .mira-slider:before { transform: translateX(20px); }

.setting-card { 
    display:block; padding:15px; background:var(--bg-card); border-radius:15px; 
    margin-bottom:12px; border:1px solid var(--border-color); 
    box-shadow: var(--shadow-light); transition: background 0.3s, border-color 0.3s;
}
.setting-header { 
    color: var(--text-primary); font-weight: 900; font-size: 14px; margin-bottom: 12px; 
    display: flex; align-items: center; gap: 8px; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px;
}
.setting-row { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 0; border-bottom: 1px solid var(--bg-app); 
}
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-text { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.setting-subtext { font-size: 11px; color: var(--text-secondary); font-weight: 600; display: block; margin-top: 2px; }

/* =========================================
   11. تخصيص SweetAlert2 ليدعم الوضع الداكن
   ========================================= */
.swal2-popup { 
    font-family: var(--mira-font) !important; border-radius: 20px !important; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important; padding: 1em !important; 
    background: var(--bg-card) !important; color: var(--text-primary) !important; 
}
.swal2-title { 
    font-size: 14px !important; color: var(--text-primary) !important; 
    font-weight: 600 !important; float:right; direction:rtl; 
}
.swal2-html-container { 
    font-size: 12px !important; color: var(--text-secondary) !important; font-weight: 600 !important; 
}
.swal2-toast { background: var(--bg-card) !important; color: var(--text-primary) !important; }



/* =========================================
   12. تنسيقات الفاتورة والطباعة (Invoice Print)
   ========================================= */
body.invoice-print-body { 
    font-family: var(--mira-font); 
    background: #f0f2f5; 
    padding: 20px; 
    direction: rtl; 
}
.invoice-container { 
    max-width: 400px; 
    margin: 0 auto; 
    background: white; 
    padding: 25px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    position: relative; 
    overflow: hidden; 
}
.mira-watermark { 
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%) rotate(-30deg); 
    opacity: 0.04; width: 80%; z-index: 0; pointer-events: none; 
}
.invoice-container .header, 
.invoice-container .invoice-details, 
.invoice-container table, 
.invoice-container .total-box, 
.invoice-container .due-date, 
.invoice-container .footer-content { 
    position: relative; z-index: 1; 
}
.invoice-container .header { text-align: center; border-bottom: 2px solid var(--mira-gold); padding-bottom: 15px; margin-bottom: 20px; }
.invoice-container .company-name { color: var(--mira-navy); font-size: 22px; font-weight: 900; }
.invoice-container .invoice-details { background: #f8fafc; padding: 15px; border-radius: 12px; margin-bottom: 20px; font-size: 13px; line-height: 1.8; border: 1px solid #f1f5f9; color: #1e2d4d; }
.invoice-container table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 13px; color: #1e2d4d; }
.invoice-container th { text-align: right; padding: 8px 5px; border-bottom: 2px solid #e2e8f0; color: #64748b; }
.invoice-container td { padding: 8px 5px; border-bottom: 1px dashed #f1f5f9; font-weight: 700;}
.invoice-container .total-box { background: var(--mira-navy); color: white; padding: 15px; border-radius: 12px; margin-bottom: 20px; }
.invoice-container .t-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.invoice-container .t-row.main { font-size: 18px; font-weight: 900; color: var(--mira-gold); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 10px; }
.invoice-container .qr-code { text-align: center; }
.invoice-container .due-date { margin-top: 10px; font-size: 12px; color: #ef4444; background: #fef2f2; padding: 5px 10px; border-radius: 8px; text-align: center; }



/* إصلاح الطباعة الحرارية وتصدير PDF */
@media print { 
    @page { margin: 0; }
    body.invoice-print-body { 
        background: white !important; 
        padding: 5px !important; /* تقليل المسافات ليناسب ورق الكاشير الضيق */
        font-size: 12px !important; /* تصغير الخط للطباعة الحرارية */
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    } 
    .invoice-container { box-shadow: none !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; border-radius: 0 !important; } 
    .mira-watermark { display: none !important; } 
    
    /* إجبار كل النصوص على اللون الأسود الصريح لطباعة حرارية حادة الوضوح */
    .invoice-container, .invoice-container * { color: black !important; }
    
    /* تفريغ مربع الإجمالي من الخلفية لعدم حرق الورق الحراري */
    .invoice-container .total-box { background: transparent !important; border: 2px dashed black !important; padding: 10px !important; }
    .invoice-container .t-row.main { border-bottom: 1px solid black !important; }
    .invoice-container th { border-bottom: 2px solid black !important; }
    .invoice-container td { border-bottom: 1px dashed black !important; }
}



/* حاوية المعاينة */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 100px));
    gap: 10px;
    margin-top: 15px;
}

.preview-item {
    position: relative;
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ddd;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* مؤشر التحميل */
.status-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    margin-top: 10px;
}

.loader-ring {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden { display: none !important; }