/* ==========================================
   1. GLOBAL VARIABLES & MASTER COLORS
   ========================================== */
:root {
    --sky: #00d2ff;        --sky-glow: rgba(0, 210, 255, 0.4);
    --emerald: #00ff88;    --emerald-glow: rgba(0, 255, 136, 0.4);
    --gold: #ffcc00;       --gold-glow: rgba(255, 204, 0, 0.4);
    --tuning: #b026ff;     --tuning-glow: rgba(176, 38, 255, 0.4);
    --tesla-red: #e31937;  --tesla-glow: rgba(227, 25, 55, 0.4);
    --bg-black: #050505;   --card-bg: rgba(10, 10, 10, 0.8); 
    --border: #1a1a1a;     --text-main: #ffffff;
}

/* ==========================================
   2. GLOBAL RESET & LAYOUT
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }

body { 
    background-color: var(--bg-black); 
    background-image: radial-gradient(circle at top right, #102010, transparent), url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); 
    color: var(--text-main); height: 100vh; overflow: hidden; -webkit-tap-highlight-color: transparent; 
}

/* عرض المشروع الاحترافي */
@media (min-width: 600px) {
    body { max-width: 480px; margin: 0 auto; border-left: 1px solid #222; border-right: 1px solid #222; position: relative; }
}

#app-container { height: calc(100vh - 65px); overflow-y: auto; padding: 15px 15px 120px; display: none; }
.view-section { display: none; animation: slideUp 0.3s ease-out; }
.active-section { display: block; }
.back-nav { display: inline-flex; align-items: center; gap: 8px; color: var(--text-main); font-weight: 700; margin-bottom: 15px; cursor: pointer; background: #111; padding: 12px 18px; border-radius: 10px; border: 1px solid #222; font-size: 0.8rem; text-transform: uppercase; transition: 0.3s; }
.back-nav:active { transform: scale(0.95); background: #000; }

/* ==========================================
   3. MASTER SCROLLBAR
   ========================================== */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #050505; border-left: 1px solid #111; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; border: 3px solid #050505; transition: 0.3s; }
::-webkit-scrollbar-thumb:hover { background: var(--sky); box-shadow: 0 0 15px var(--sky-glow); }
.country-dropdown::-webkit-scrollbar { width: 8px; }

/* ==========================================
   4. ANIMATIONS
   ========================================== */
@keyframes breathe-emerald { 0%, 100% { box-shadow: 0 0 5px rgba(0,255,136,0.1); border-color: #1a1a1a; } 50% { box-shadow: 0 0 15px var(--emerald-glow); border-color: var(--emerald); } }
@keyframes breathe-sky { 0%, 100% { box-shadow: 0 0 5px rgba(0,210,255,0.1); border-color: #1a1a1a; } 50% { box-shadow: 0 0 15px var(--sky-glow); border-color: var(--sky); } }
@keyframes breathe-gold { 0%, 100% { box-shadow: 0 0 5px rgba(255,204,0,0.1); border-color: #1a1a1a; } 50% { box-shadow: 0 0 15px var(--gold-glow); border-color: var(--gold); } }
@keyframes breathe-tuning { 0%, 100% { box-shadow: 0 0 5px rgba(176,38,255,0.1); border-color: #1a1a1a; } 50% { box-shadow: 0 0 15px var(--tuning-glow); border-color: var(--tuning); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes alertPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================
   5. LOGIN SCREEN & COUNTRY SELECTOR
   ========================================== */
#login-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #050505; z-index: 10000; flex-direction: column; align-items: center; justify-content: center; }
.login-card { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 30px; border-radius: 25px; width: 92%; max-width: 380px; box-shadow: 0 15px 50px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; overflow: visible !important; position: relative; }
.input-group { display: flex; gap: 10px; margin: 20px 0; width: 100%; height: 50px; position: relative; }
.country-select-container { position: relative; flex: 0 0 100px; height: 100%; background: #0a0a0a; border: 1px solid var(--emerald); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.country-select-container:hover { box-shadow: 0 0 15px var(--emerald-glow); }
.selected-country { display: flex; align-items: center; gap: 8px; font-weight: bold; color: var(--emerald); }
.selected-country img { width: 24px; border-radius: 3px; }
.country-dropdown { display: none; position: absolute; top: 55px; left: 0; width: 250px; max-height: 250px; background: #0d0d0d; border: 1px solid #222; border-radius: 12px; overflow-y: auto; z-index: 10000; box-shadow: 0 10px 40px rgba(0,0,0,0.9); }
.country-option { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #1a1a1a; transition: 0.2s; }
.country-option:hover { background: rgba(0, 255, 136, 0.1); }
.show-dropdown { display: block !important; animation: slideUp 0.2s ease; }
.login-input { flex: 1; width: 0; height: 100%; background: #000; border: 1px solid #333; color: #fff; border-radius: 12px; font-size: 18px; text-align: center; font-family: 'Orbitron', monospace; }
.login-input:focus { border-color: var(--sky); box-shadow: 0 0 15px var(--sky-glow); }
.error-card-purple { width: 100%; padding: 20px; background: rgba(176, 38, 255, 0.05); border: 1px solid var(--tuning); border-radius: 20px; text-align: center; box-shadow: 0 0 25px var(--tuning-glow); animation: slideUp 0.3s ease; }

/* ==========================================
   6. HEADER & MAIN CARDS
   ========================================== */
.header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.9); border-bottom: 1px solid #111; z-index: 100; position: relative; }
.logo { font-family: 'Orbitron'; font-weight: 900; font-size: 1.3rem; letter-spacing: 2px; cursor: pointer; }
.ds-capsule { border: 1px solid var(--sky); padding: 5px 12px; border-radius: 8px; text-align: right; background: rgba(0,0,0,0.5); box-shadow: 0 0 10px var(--sky-glow); }
.ds-capsule span { display: block; font-size: 0.5rem; color: #888; text-transform: uppercase; }
.ds-capsule b { font-size: 1rem; color: var(--sky); font-family: 'Orbitron'; }

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: flex; align-items: center; gap: 15px; margin-bottom: 15px; cursor: pointer; transition: 0.3s; backdrop-filter: blur(10px); }
.card:active { transform: scale(0.97); }
.card-emerald { border-left: 5px solid var(--emerald); animation: breathe-emerald 3.5s infinite; }
.card-sky { border-left: 5px solid var(--sky); animation: breathe-sky 4s infinite; }
.card-gold { border-left: 5px solid var(--gold); animation: breathe-gold 3.8s infinite; }
.card-tuning { border-left: 5px solid var(--tuning); animation: breathe-tuning 3.2s infinite; }

.number-box { font-family: 'Orbitron'; font-size: 1.8rem; font-weight: 900; }
.card-info h3 { margin: 0; font-size: 1.1rem; font-family: 'Orbitron'; letter-spacing: 1px; }
.card-info p { margin: 4px 0 0; font-size: 0.7rem; color: #666; font-weight: 700; text-transform: uppercase;}

/* ==========================================
   7. IMMO MASTER 
   ========================================== */
.brand-toolbar { display: flex; justify-content: center; background: rgba(255, 255, 255, 0.02); padding: 10px; border-radius: 15px; border: 1px solid #151515; margin-bottom: 25px; width: 100%; }
.brand-scroller-mini { display: flex; gap: 15px; }
.brand-chip-rect { flex: 0 0 60px; height: 40px; background: #080808; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #222; transition: 0.3s; cursor: pointer; }
.brand-chip-rect.active { border-color: var(--sky); background: rgba(0,210,255,0.1); box-shadow: 0 0 12px var(--sky-glow); }
.brand-chip-rect img { width: 32px !important; height: 24px !important; object-fit: contain; filter: grayscale(1) brightness(0.7); transition: 0.3s; }
.brand-chip-rect.active img { filter: grayscale(0) brightness(1); }

.model-item { background: #0a0a0a; padding: 18px; border-radius: 15px; margin-bottom: 15px; border: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.3s; }
.model-item.border-emerald { border-left: 4px solid var(--emerald); animation: breathe-emerald 3.5s infinite ease-in-out; }
.model-item.border-sky { border-left: 4px solid var(--sky); animation: breathe-sky 4s infinite ease-in-out 0.5s; }
.model-item.border-gold { border-left: 4px solid var(--gold); animation: breathe-gold 3.8s infinite ease-in-out 1s; }
.model-item.border-tuning { border-left: 4px solid var(--tuning); animation: breathe-tuning 3.2s infinite ease-in-out 0.2s; }

.badge { font-size: 0.6rem; padding: 5px 10px; border-radius: 6px; font-weight: 900; letter-spacing: 0.5px; }
.bg-emerald { background: rgba(0,255,136,0.1); color: var(--emerald); }
.bg-sky { background: rgba(0,210,255,0.1); color: var(--sky); }
.bg-gold { background: rgba(255,204,0,0.1); color: var(--gold); }
.bg-tuning { background: rgba(176,38,255,0.1); color: var(--tuning); }

/* ==========================================
   8. V42 HUB (FLASH & EEPROM)
   ========================================== */
.v42-container { padding: 10px 0; }
.v42-engine-box { padding: 15px; border-radius: 12px; border: 1px solid var(--emerald); background: rgba(0, 255, 136, 0.05); margin-bottom: 15px; text-align: center; animation: breathe-emerald 3s infinite; }
.v42-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.v42-card { height: 95px; padding: 15px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 15px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s; }
.v42-card.disabled { opacity: 0.4; pointer-events: none; }
.active-glow { border-color: var(--emerald) !important; background: rgba(0, 255, 136, 0.05) !important; box-shadow: 0 0 15px var(--emerald-glow) !important; }
.active-glow-red { border-color: var(--tesla-red) !important; background: rgba(227, 25, 55, 0.05) !important; box-shadow: 0 0 20px var(--tesla-glow) !important; }

.v42-fan-card { padding: 18px; background: #0a0a0a; border: 1px solid #222; border-radius: 15px; margin-bottom: 20px; }

/* Switches & Sliders */
.neon-switch { position: relative; display: inline-block; width: 42px; height: 24px; } 
.neon-switch input { opacity: 0; width: 0; height: 0; }
.neon-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #222; border-radius: 34px; border: 1px solid #444; transition: .3s; }
.neon-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .3s; }
input:checked + .neon-slider { background-color: var(--emerald); border-color: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
input:checked + .neon-slider:before { transform: translateX(18px); }

#card-virgin .neon-slider { border-color: var(--tesla-red); }
#card-virgin input:checked + .neon-slider { background-color: var(--tesla-red); box-shadow: 0 0 10px var(--tesla-red); }

input[type=range] { width: 100%; height: 12px; background: linear-gradient(to right, var(--emerald) 0%, #222 100%); border-radius: 8px; outline: none; appearance: none; -webkit-appearance: none; margin-top: 15px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: #fff; border: 5px solid var(--emerald); border-radius: 50%; cursor: pointer; box-shadow: 0 0 15px var(--emerald); }

/* ==========================================
   9. WALLET & VIRTUAL CARD
   ========================================== */


.sellax-virtual-card::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.05) 0%, transparent 60%);
    animation: spin 8s linear infinite;
}

.balance-text-fix { font-family: 'Segoe UI', Tahoma, sans-serif !important; font-weight: 900; color: #fff; font-size: 2.8rem; margin: 0; letter-spacing: -1px; }

.card-brand-circles { position: absolute; bottom: 20px; right: 20px; display: flex; }
.circle-1 { width: 30px; height: 30px; background: rgba(0, 255, 136, 0.6); border-radius: 50%; }
.circle-2 { width: 30px; height: 30px; background: rgba(0, 210, 255, 0.6); border-radius: 50%; margin-left: -12px; }

.payment-method-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; margin-bottom: 8px !important; transition: 0.3s; padding: 12px; }
.copy-box-mini { background: #000; border: 1px solid #111; padding: 10px 15px; border-radius: 8px; }

/* ==========================================
   10. BUTTONS & BOTTOM NAVBAR
   ========================================== */
.btn-upload-3d { background: linear-gradient(145deg, #111, #050505); border: 1px solid #333; border-radius: 15px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 15px; cursor: pointer; margin-bottom: 20px; box-shadow: 0 5px 0 #000; transition: 0.2s; }
.btn-upload-3d:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }

.btn-main { width: 100%; color: #000; font-weight: 900; font-size: 1.1rem; border: none; padding: 18px; border-radius: 15px; cursor: pointer; text-transform: uppercase; margin-top: 15px; transition: 0.2s; }
.btn-main:active { transform: scale(0.98); }

/* القائمة السفلية الموحدة (بدون تكرار) */
.nav-bar { 
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); 
    background: rgba(10,10,10,0.98); padding: 10px 30px; border-radius: 25px; 
    display: flex; gap: 30px; align-items: center; border: 1px solid #222; 
    z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
}
.nav-item { color: #555; font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
.nav-item i { display: block; transition: 0.3s; }
.nav-item.active { color: var(--sky); transform: translateY(-5px); text-shadow: 0 0 15px var(--sky-glow); }
.nav-item:active { transform: scale(0.8); opacity: 0.5; }

/* ==========================================
   11. OVERLAYS & CUSTOM ALERTS
   ========================================== */
#loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 99999; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
.spinner { width: 65px; height: 60px; border: 4px solid #111; border-top: 4px solid var(--sky); border-radius: 50%; animation: spin 1s linear infinite; }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.modal-content { background: #0a0a0a; width: 88%; max-width: 350px; border-radius: 20px; border: 1px solid #333; padding: 25px; text-align: center; animation: slideUp 0.3s; }
.modal-content img { width: 100%; border-radius: 12px; margin-bottom: 20px; border: 1px solid #222; }

/* تنبيهات النيون المخصصة */
.alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 100000; }
.alert-card { background: #0a0a0a; border: 1px solid #333; width: 85%; max-width: 320px; padding: 35px 25px; border-radius: 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
.alert-icon { font-size: 45px; margin-bottom: 20px; text-shadow: 0 0 15px currentColor; }
#alert-title { font-family: 'Orbitron', sans-serif; font-size: 14px; margin-bottom: 12px; color: #fff; letter-spacing: 1px; }
#alert-message { font-size: 13px; color: #bbb; line-height: 1.6; margin-bottom: 30px; font-weight: 300; }
.alert-btn { background: #111; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 14px; font-size: 11px; cursor: pointer; transition: 0.3s; width: 100%; font-family: 'Orbitron'; letter-spacing: 1px; }
.alert-btn:active { transform: scale(0.95); background: #000; }

.alert-error { border-color: #ff3131; box-shadow: 0 0 25px rgba(255, 49, 49, 0.15); }
.alert-error .alert-icon { color: #ff3131; }
.alert-success { border-color: #00ff88; box-shadow: 0 0 25px rgba(0, 255, 136, 0.15); }
.alert-success .alert-icon { color: #00ff88; }
.animate-pop { animation: alertPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Drag & Drop States */
.drag-over { border-style: dashed !important; border-color: var(--sky) !important; background: rgba(0, 210, 255, 0.1) !important; transform: scale(1.03); box-shadow: 0 0 25px var(--sky-glow) !important; }
.drag-over-v42 { border-color: var(--emerald) !important; background: rgba(0, 255, 136, 0.1) !important; box-shadow: 0 0 25px var(--emerald-glow) !important; }



/* تصميم البطاقة الافتراضية SELLAX CARD (حجم أصغر) */
.sellax-virtual-card {
    width: 100%;
    max-width: 330px; 
    height: 165px; /* تقليل الارتفاع */
    background: linear-gradient(135deg, #050505 0%, #111 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; /* حواف أصغر */
    padding: 15px; /* تقليل الحشو */
    position: relative;
    margin: 0 auto 10px; /* تقليل المسافة السفلية */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* الشريحة الذهبية (Chip) */

/* تصحيح خط الرصيد (D واضحة جداً وتصغير الخط) */
.balance-text-fix {
    font-family: 'Arial Black', sans-serif !important;
    font-weight: 900;
    color: #fff;
    font-size: 2.2rem !important; /* تصغير الخط ليتناسب مع البطاقة */
    margin: 0;
    letter-spacing: -1px;
}
.currency-label {
    color: var(--sky);
    font-size: 1rem !important;
    margin-left: 5px;
    font-weight: 900;
    font-family: 'Orbitron' !important;
}

/* بطاقة الدفع الاحترافية (حجم مضغوط) */
.payment-card-premium {
    background: #000;
    border: 1px solid #1a1a1a;
    border-radius: 12px; /* حواف أصغر */
    padding: 10px 12px; /* تقليل الحشو لرفع المحتوى */
    margin-bottom: 8px !important; /* تقليل المسافة بين البطاقات */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
}

.copy-text-area {
    font-family: 'Monaco', 'Consolas', monospace;
    color: #fff;
    font-size: 12px !important; /* خط أصغر للأرقام */
    letter-spacing: 1px;
    font-weight: bold;
}

/* كبسولة السعر الجديدة */
.rate-capsule {
    background: rgba(176, 38, 255, 0.1);
    padding: 4px 15px; /* تصغير الكبسولة */
    border-radius: 50px;
    border: 1px solid var(--tuning);
    display: inline-block;
    color: var(--tuning);
    font-weight: 900;
    font-size: 9px !important;
    margin-bottom: 10px; /* تقليل المسافة */
    letter-spacing: 1px;
}

/* الشريحة الذهبية الواقعية (EMV Chip) */
.card-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* الخطوط التقنية داخل الشريحة */
.card-chip::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; width: 1px; height: 100%;
    background: rgba(0,0,0,0.1);
}
.card-chip::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 1px;
    background: rgba(0,0,0,0.1);
}

/* رمز الدفع عن بعد (Contactless) */
.contactless-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    transform: rotate(90deg); /* تدويره ليكون مثل البطاقات الحقيقية */
    margin-left: 10px;
}