/* ============================================ GLOBAL.CSS — الكائن 404 ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap'); :root { --bg: #07101e; --card-bg: #0d1f35; --card-border: rgba(0,180,255,0.18); --gold: #f5c542; --cyan: #00d4ff; --text: #e8f4ff; --muted: #7a9bb5; --danger: #ff4d4d; --green: #00e676; --radius: 16px; --max-w: 480px; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html { scroll-behavior:smooth; } body { font-family:'Tajawal',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; direction:rtl; max-width:var(--max-w); margin:0 auto; } @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .page-enter { animation:fadeUp 0.35s ease both; } /* Lang toggle */ .lang-btn { position:fixed; top:13px; left:13px; z-index:999; background:rgba(0,0,0,0.65); border:1px solid var(--cyan); color:var(--cyan); font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; padding:6px 15px; border-radius:30px; cursor:pointer; backdrop-filter:blur(12px); transition:background 0.25s; } /* Back button */ .back-btn { position:fixed; top:13px; right:13px; z-index:999; background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.18); color:var(--text); font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; padding:6px 16px; border-radius:30px; cursor:pointer; backdrop-filter:blur(12px); text-decoration:none; display:inline-block; } /* Buttons */ .btn-primary { display:block; width:100%; background:linear-gradient(135deg,#0099cc,#00d4ff); color:#fff; border:none; border-radius:14px; font-family:'Tajawal',sans-serif; font-size:18px; font-weight:900; padding:16px; cursor:pointer; box-shadow:0 4px 22px rgba(0,212,255,0.38); transition:transform 0.18s; text-align:center; text-decoration:none; } .btn-primary:active { transform:scale(0.97); } .btn-ghost { display:block; width:100%; background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.15); color:var(--text); border-radius:14px; font-family:'Tajawal',sans-serif; font-size:17px; font-weight:700; padding:14px; cursor:pointer; text-align:center; text-decoration:none; } .btn-ghost:active { background:rgba(255,255,255,0.13); } /* Card */ .card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:22px; box-shadow:0 8px 40px rgba(0,0,0,0.5); } /* Input */ .input-field { width:100%; background:rgba(0,0,0,0.35); border:1.5px solid rgba(0,212,255,0.22); border-radius:12px; color:var(--text); font-family:'Tajawal',sans-serif; font-size:19px; font-weight:700; padding:14px 16px; text-align:center; outline:none; letter-spacing:2px; transition:border-color 0.3s,box-shadow 0.3s; direction:ltr; } .input-field:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,0.12); } .input-field::placeholder { color:var(--muted); letter-spacing:0; font-size:14px; } .input-error { display:none; color:var(--danger); font-size:13px; margin-top:7px; text-align:center; font-weight:600; } .input-error.visible { display:block; } /* Section title */ .section-title { font-size:22px; font-weight:900; color:var(--cyan); text-shadow:0 0 18px rgba(0,212,255,0.45); text-align:center; } @keyframes glowPulse { 0%,100% { box-shadow:0 4px 20px rgba(0,0,0,0.5); } 50% { box-shadow:0 4px 30px rgba(0,0,0,0.5),0 0 20px rgba(0,212,255,0.2); } } /* ============================================ PAGE TRANSITIONS ============================================ */ /* Enter animations — applied via class on by previous page exit */ @keyframes slideInRight { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } } @keyframes slideInLeft { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:translateX(0); } } @keyframes slideInUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } } /* Exit animations — added by navigateTo() before leaving */ @keyframes slideOutLeft { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-60px); } } @keyframes slideOutRight { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(60px); } } body.exit-left { animation:slideOutLeft 0.3s ease forwards; } body.exit-right { animation:slideOutRight 0.3s ease forwards; } /* Default enter for all pages */ body.page-enter { animation:slideInRight 0.38s cubic-bezier(0.25,0.46,0.45,0.94) both; } body.page-enter-back { animation:slideInLeft 0.38s cubic-bezier(0.25,0.46,0.45,0.94) both; } body.page-enter-up { animation:slideInUp 0.38s cubic-bezier(0.25,0.46,0.45,0.94) both; } /* Staggered children fade-in */ @keyframes fadeStagger { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .stagger > * { opacity:0; animation:fadeStagger 0.4s ease forwards; } .stagger > *:nth-child(1) { animation-delay:0.05s; } .stagger > *:nth-child(2) { animation-delay:0.12s; } .stagger > *:nth-child(3) { animation-delay:0.19s; } .stagger > *:nth-child(4) { animation-delay:0.26s; } .stagger > *:nth-child(5) { animation-delay:0.33s; } .stagger > *:nth-child(6) { animation-delay:0.40s; } .stagger > *:nth-child(7) { animation-delay:0.47s; } .stagger > *:nth-child(8) { animation-delay:0.54s; } /* ══════════════════════════════════════ SEAT HEADER BAR — shown on all inner pages ══════════════════════════════════════ */ .seat-header-bar { position: fixed; top: 0; left: 0; right: 0; max-width: var(--max-w); margin: 0 auto; z-index: 900; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(7,16,30,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,180,255,0.12); } /* Left: lang toggle lives inside bar on inner pages */ .seat-header-bar .lang-btn { position: static; /* override fixed from global */ top: auto; left: auto; } /* Center: page title */ .seat-header-bar .bar-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: 0.3px; text-align: center; flex: 1; padding: 0 8px; } /* Right: seat chip */ .seat-header-bar .seat-chip { display: flex; align-items: center; gap: 5px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.28); border-radius: 99px; padding: 5px 11px; flex-shrink: 0; } .seat-header-bar .seat-chip .sc-lbl { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; } .seat-header-bar .seat-chip .sc-num { font-size: 14px; font-weight: 900; color: var(--cyan); text-shadow: 0 0 10px rgba(0,212,255,0.4); } /* push page body down so content isn't hidden under bar */ body.has-seat-bar { padding-top: 52px; } /* The old fixed lang-btn and back-btn are hidden when bar is active */ body.has-seat-bar > .lang-btn, body.has-seat-bar > .back-btn { display: none; }