/* =========================================
   1. الإعدادات العامة (Global)
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; }
body { background-color: #0b0c10; display: flex; justify-content: center; align-items: center; height: 100vh; height: 100dvh; width: 100vw; overflow: hidden; color: #ffffff; }
.app-container { width: 100%; height: 100%; max-width: 420px; background-color: #15161e; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.8); }

/* =========================================
   2. العناصر المشتركة (Shared)
   ========================================= */
.header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 10px 20px; flex-shrink: 0; }
.logo { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; }
.icon-box { position: relative; font-size: 22px; cursor: pointer; }
.tr-badge { position: absolute; top: -5px; left: -8px; font-size: 8px; background-color: #15161e; padding: 1px 3px; border: 1px solid #ffffff; border-radius: 3px; font-weight: bold; }
.header-right-icons { display: flex; gap: 15px; font-size: 22px; cursor: pointer; }
.icon-btn { font-size: 20px; cursor: pointer; color: #ffffff; }
.spacer-20 { width: 20px; }
.spacer-flex { flex-grow: 1; min-height: 0; }
.instruction-text { text-align: center; font-size: 13px; color: #a0a0a5; margin-bottom: 25px; flex-shrink: 0; line-height: 1.4; padding: 0 15px; }

/* =========================================
   3. الصفحة الأولى (Welcome)
   ========================================= */
.top-nav { display: flex; justify-content: space-between; padding: 10px 15px; flex-shrink: 0; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.circle-icon { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #38bdf8; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #ffffff; transition: transform 0.2s; }
.circle-icon:active { transform: scale(0.95); }
.nav-item span { font-size: 11px; font-weight: 500; text-align: center; }

.welcome-section { display: flex; flex-direction: column; align-items: center; padding: 15px 20px; flex-shrink: 0; }
.avatar { width: 75px; height: 75px; background-color: #2b2d3c; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 32px; color: #ffffff; margin-bottom: 15px; }
.welcome-text { font-size: 24px; font-weight: 600; margin-bottom: 25px; }

.button-group { display: flex; width: 100%; gap: 12px; margin-bottom: 15px; }
.btn { padding: 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; color: #ffffff; transition: opacity 0.2s, transform 0.1s; }
.btn:active { opacity: 0.8; transform: scale(0.98); }
.btn-light-blue { flex: 1; background-color: #3b82f6; }
.btn-dark-blue { flex: 1; background-color: #2563eb; }
.btn-outline { width: 100%; background-color: transparent; border: 1px solid #3b82f6; color: #e0e0e0; margin-bottom: 25px; }

.bottom-area { background-color: #1b1d28; border-top-left-radius: 20px; border-top-right-radius: 20px; padding-top: 10px; flex-shrink: 0; }
.upper-bottom-nav { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #2b2d3c; }
.nav-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.border-left { border-left: 1px solid #2b2d3c; }
.nav-box span { font-size: 12px; font-weight: 600; }
.icon-gray { font-size: 22px; color: #7a7c8b; }
.maximum-logo { font-size: 17px; font-weight: 800; color: #e11d48; letter-spacing: -1px; }
.maximum-logo span { font-size: 17px; color: #ffffff; }
.pink-text { color: #e11d48 !important; }
.main-bottom-nav { display: flex; justify-content: space-around; padding: 15px 5px 25px 5px; }
.bottom-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; }
.bottom-item span { font-size: 10px; color: #a0a0a5; font-weight: 500; }
.icon-blue { font-size: 22px; color: #3b82f6; }
.italic-icon { font-style: italic; }

/* =========================================
   4. الصفحة الثانية (Login)
   ========================================= */
.user-profile { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; flex-shrink: 0; }
.dropdown { display: flex; align-items: center; gap: 6px; background-color: #2b2d3c; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dropdown i { font-size: 10px; color: #ffffff; }
.sub-text { font-size: 13px; color: #a0a0a5; margin-top: 8px; }
.form-container { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; padding: 0 20px;}
.custom-input { width: 100%; background-color: #1b1d28; border: 1px solid #2b2d3c; color: #ffffff; padding: 16px; border-radius: 8px; font-size: 14px; outline: none; transition: 0.3s; }
.custom-input:focus { border-color: #4a4d65; }
.captcha-wrapper { display: flex; align-items: center; gap: 15px; }
.captcha-box { flex: 1; background-color: #a2b1c6; height: 50px; border-radius: 4px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; }
#captcha-text { font-family: "Courier New", Courier, monospace; font-size: 32px; font-weight: bold; color: #3b4252; letter-spacing: 4px; position: relative; z-index: 2; opacity: 0.8; }
.scratch-line { position: absolute; height: 1px; background-color: #2e3440; width: 120%; z-index: 3; opacity: 0.5; }
.line-1 { top: 30%; left: -10%; transform: rotate(-4deg); }
.line-2 { top: 50%; left: -10%; transform: rotate(2deg); height: 2px; }
.line-3 { top: 70%; left: -10%; transform: rotate(-1deg); }
.captcha-controls { display: flex; gap: 15px; padding-right: 5px; }
.control-icon { color: #3b82f6; font-size: 20px; cursor: pointer; transition: transform 0.3s ease; }
.bottom-actions { flex-shrink: 0; padding: 0 20px 20px 20px; }
.action-links { display: flex; justify-content: space-between; margin-bottom: 25px; }
.action-links a, .create-pass-link { color: #a0a0a5; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.action-links a { color: #ffffff; font-size: 11px; }
.primary-btn { width: 100%; background-color: #4a4a5a; color: #ffffff; border: none; padding: 16px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.primary-btn:active { background-color: #5c5c70; transform: scale(0.98); }

/* =========================================
   5. الصفحة الثالثة (Mobile Approval)
   ========================================= */
.main-content { display: flex; flex-direction: column; align-items: center; padding: 10px 25px; flex-shrink: 0; }
.lock-container { position: relative; width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; margin-bottom: 25px; }
.progress-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#f97316 0% 70%, #2b2d3c 70% 100%); mask: radial-gradient(transparent 55%, black 56%); -webkit-mask: radial-gradient(transparent 55%, black 56%); }
.lock-circle { width: 65px; height: 65px; background-color: #2b2d3c; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; }
.lock-circle i { font-size: 20px; margin-bottom: 2px; }
.lock-circle .stars { font-size: 14px; font-weight: bold; letter-spacing: 2px; }
.title-text { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.code-display-box { width: 100%; background-color: #1e1f2b; border-radius: 8px; padding: 15px 20px; display: flex; flex-direction: column; gap: 10px; }
.box-label { font-size: 12px; color: #ffffff; font-weight: 500; }
.dots-container { display: flex; gap: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background-color: #4a4d65; transition: background-color 0.2s; }
.dot.filled { background-color: #ffffff; }

.keypad-section { background-color: #2c2d38; padding-bottom: 25px; flex-shrink: 0; }
.keypad-header { display: flex; justify-content: flex-end; padding: 12px 20px; background-color: #242530; }
#close-btn { font-size: 12px; font-weight: 600; color: #ffffff; cursor: pointer; letter-spacing: 0.5px; }
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px; }
.key { background-color: #5c5e6b; border: none; border-radius: 8px; height: 55px; color: #ffffff; font-size: 22px; font-weight: 400; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: 0.1s; }
.key:active { background-color: #737585; transform: scale(0.95); }
.key span { font-size: 9px; font-weight: 600; letter-spacing: 1px; color: #a0a0a5; margin-top: 2px; }
.icon-key { background-color: transparent; font-size: 24px; }

/* =========================================
   6. Media Queries (للتجاوب مع الطول والعرض)
   ========================================= */

/* 1. الشاشات المتوسطة الارتفاع (تظبيط مبدئي للمسافات) */
@media (max-height: 750px) {
    .header { padding: 15px 20px 5px 20px; }
    .welcome-text { margin-bottom: 15px; }
    .main-bottom-nav { padding: 10px 5px 15px 5px; }
}

/* 2. الشاشات الصغيرة (مثل معظم الموبايلات العادية) */
@media (max-height: 650px) {
    .welcome-section { padding: 10px 20px; }
    .avatar { width: 50px; height: 50px; font-size: 20px; margin-bottom: 10px; }
    .welcome-text { font-size: 20px; margin-bottom: 15px; }
    .instruction-text { margin-bottom: 15px; }
    .button-group { margin-bottom: 10px; }
    .btn, .custom-input, .primary-btn { padding: 12px; }
    .circle-icon { width: 40px; height: 40px; font-size: 16px; }
    .captcha-box { height: 45px; }
    #captcha-text { font-size: 28px; }
    .lock-container { width: 75px; height: 75px; margin-bottom: 15px; }
    .lock-circle { width: 55px; height: 55px; }
    .key { height: 48px; font-size: 20px; }
    
    /* إنقاذ البار السفلي من الاختفاء وتقليل الهوامش */
    .bottom-area { padding-top: 5px; }
    .upper-bottom-nav { padding: 8px 0; }
    .main-bottom-nav { padding: 8px 5px 12px 5px; }
    .icon-gray, .icon-blue { font-size: 18px; }
}

/* 3. الشاشات القصيرة جداً (أو لو الموبايل بالعرض Landscape) */
@media (max-height: 550px) {
    .header { padding: 5px 20px; }
    .logo { font-size: 18px; }
    .welcome-section { padding: 5px 20px; }
    .avatar { width: 45px; height: 45px; font-size: 18px; margin-bottom: 5px; }
    .welcome-text { font-size: 18px; margin-bottom: 8px; }
    .btn { padding: 10px; font-size: 12px; }
    .upper-bottom-nav { padding: 5px 0; }
    .main-bottom-nav { padding: 5px; }
    .nav-box span, .bottom-item span { font-size: 9px; }
    .icon-gray, .icon-blue { font-size: 16px; }
}

/* 4. الشاشات الكبيرة (الكمبيوتر والتابلت) */
@media (min-width: 600px) {
    .app-container { height: 90vh; max-height: 850px; border-radius: 35px; border: 8px solid #2b2d3c; }
}

/* =========================================
   7. SPA Logic & Animations (أساسيات الـ SPA)
   ========================================= */
.view {
    display: none; /* إخفاء كل الشاشات افتراضياً */
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* الشاشة النشطة يتم عرضها مع حركة انزلاق */
.view.active {
    display: flex;
    animation: slideIn 0.3s ease-out forwards;
}

.view.approval-bg {
    background-color: #171821;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}