/* ==========================================================================
Chetouani CDH Travel — نظام التصميم المشترك
الفكرة: بطاقة صعود الطائرة + ختم التأشيرة (Boarding pass / Visa stamp)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700&display=swap');
:root{
/* --- الألوان --- */
--ink-night: #1A1A1A; /* خلفية داكنة رئيسية - سماء الليل / حبر الجواز */
--ink-night-2: #242422; /* بطاقات على الخلفية الداكنة */
--ink-night-3: #3A3A3A; /* حدود/فواصل على الداكن */
--sand-gold: #D4AF37; /* الذهبي - لون الشعار */
--gold-light: #E9CE7E; /* ذهبي فاتح للتفاصيل والنصوص على الداكن */
--parchment: #EAD7B5; /* خلفية فاتحة - ورق التأشيرة */
--parchment-2: #E3C79C; /* خلفية بطاقات فاتحة */
--teal-deep: #8B6B1F; /* ذهبي داكن - زخرفة */
--clay: #D4AF37; /* ذهبي - أزرار الفعل */
--clay-dark: #B8912B;
--ash: #1A1A1A; /* نص أساسي على الفاتح */
--ash-soft: #333333; /* نص ثانوي */
--line: rgba(26,26,26,0.14);
--line-dark: rgba(233,206,126,0.22);
--font-display: 'Amiri', 'Traditional Arabic', serif;
--font-body: 'Cairo', 'Tajawal', sans-serif;
--font-utility: 'Tajawal', sans-serif;
--radius: 4px;
--container: 1180px;
/* --- إضافات: نظام ظلال وانتقالات لواجهة أكثر حداثة (لوحة التحكم خصوصًا) --- */
--shadow-xs: 0 1px 2px rgba(26,26,26,.06);
--shadow-sm: 0 4px 12px -4px rgba(26,26,26,.10);
--shadow-md: 0 12px 28px -10px rgba(26,26,26,.16);
--shadow-lg: 0 24px 48px -16px rgba(26,26,26,.22);
--shadow-gold: 0 10px 24px -8px rgba(212,175,55,.45);
--radius-lg: 14px;
--radius-xl: 20px;
--ease: cubic-bezier(.4,0,.2,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
/* --- سطوح البطاقات وتظليل التمييز الخفيف (تتبدّل مع الوضع الليلي) --- */
--surface: #ffffff;
--tint-soft: #fff7e6;
color-scheme: light;
/* لون نص ثابت (لا يتبدّل مع الوضع الليلي) يُستخدم فوق العناصر الداكنة دائمًا
مثل الترويسة والفوتر والهيرو — لأن هذه العناصر تبقى داكنة في كلا الوضعين */
--parchment-fixed: #EAD7B5;
}
/* ==========================================================================
الوضع الليلي — يُفعَّل عبر data-theme="dark" على
========================================================================== */
html[data-theme="dark"]{
--parchment: #141210;
--parchment-2: #1E1B16;
--surface: #201D18;
--ash: #F3E7CC;
--ash-soft: #B8AA8C;
--line: rgba(255,255,255,.10);
--tint-soft: rgba(212,175,55,.16);
color-scheme: dark;
}
html[data-theme="dark"] img:not(.brand-mark):not(.invoice-logo){ filter: brightness(.94); }
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
margin:0;
font-family: var(--font-body);
background: var(--parchment);
color: var(--ash);
direction: rtl;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.25; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline: 2px solid var(--sand-gold); outline-offset: 3px; }
/* --------------------------------------------------------------------------
الشعار
-------------------------------------------------------------------------- */
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:42px; height:42px; flex-shrink:0; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.5px; }
.brand-text span{ font-family:var(--font-utility); font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; }
/* --------------------------------------------------------------------------
الترويسة / التنقل
-------------------------------------------------------------------------- */
.site-header{
position: sticky; top:0; z-index:100;
background: var(--ink-night);
color: var(--parchment-fixed);
border-bottom: 1px solid var(--line-dark);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-header .brand-text strong{ color:var(--gold-light); }
.site-header .brand-text span{ color: var(--parchment-fixed); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
padding:10px 16px; font-size:.95rem; font-weight:600; border-radius: var(--radius);
position:relative; transition: color .2s ease;
}
.nav-links a:hover{ color: var(--gold-light); }
.nav-links a.is-active{ color: var(--gold-light); }
.nav-links a.is-active::after{
content:""; position:absolute; right:16px; left:16px; bottom:4px; height:2px;
background: var(--sand-gold);
}
.nav-cta{
background: var(--sand-gold); color: var(--ink-night) !important;
padding:10px 22px; border-radius:10px; font-weight:700;
box-shadow: var(--shadow-gold);
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s ease;
}
.nav-cta:hover{ background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(201,151,75,.55); }
.nav-cta:active{ transform: translateY(0); }
/* ودجة الحساب في الترويسة (تظهر في كل الصفحات بعد تسجيل الدخول) */
.nav-account{ position:relative; margin-inline-start:6px; }
.nav-account-btn{
display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06);
border:1px solid var(--line-dark); color:var(--parchment-fixed); border-radius:999px;
padding:6px 12px 6px 6px; font-family:inherit; font-weight:600; font-size:.88rem;
}
.nav-account-btn:hover{ background:rgba(255,255,255,.12); }
.nav-account-avatar{
width:28px; height:28px; border-radius:50%; background:var(--sand-gold); color:var(--ink-night);
display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0;
}
.nav-account-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-account-caret{ font-size:.7rem; opacity:.7; transition: transform .2s ease; }
.nav-account.is-open .nav-account-caret{ transform: rotate(180deg); }
.nav-account-menu{
display:none; position:absolute; top: calc(100% + 8px); left:0; min-width:200px;
background:var(--surface); color:var(--ash); border:1px solid var(--line); border-radius:8px;
box-shadow:0 12px 28px rgba(0,0,0,.18); overflow:hidden; z-index:200;
}
.nav-account.is-open .nav-account-menu{ display:block; }
.nav-account-menu a, .nav-account-menu button{
display:block; width:100%; text-align:right; padding:12px 16px; font-size:.88rem;
font-weight:600; background:none; border:none; color:var(--ash); border-bottom:1px solid var(--line);
}
.nav-account-menu a:last-child, .nav-account-menu button:last-child{ border-bottom:none; }
.nav-account-menu a:hover, .nav-account-menu button:hover{ background:var(--parchment-2); }
.nav-account-menu .nav-account-logout{ color:var(--clay-dark); }
@media (max-width:900px){
.nav-links .nav-account{ margin:10px 16px 0; }
.nav-account-menu{ position:static; box-shadow:none; margin-top:8px; display:none; }
.nav-account.is-open .nav-account-menu{ display:block; }
}
/* جرس الإشعارات في الترويسة (يظهر بجانب ودجة الحساب، أعلى يسار الصفحة) */
.nav-notif{ position:relative; margin-inline-start:6px; }
.nav-notif-btn{
display:flex; align-items:center; justify-content:center; position:relative;
width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06);
border:1px solid var(--line-dark); color:var(--parchment-fixed); font-size:1rem; cursor:pointer;
}
.nav-notif-btn:hover{ background:rgba(255,255,255,.12); }
.nav-notif-badge{
position:absolute; top:-3px; left:-3px; min-width:16px; height:16px; padding:0 4px;
border-radius:999px; background:#b3261e; color:#fff; font-size:.62rem; font-weight:800;
display:flex; align-items:center; justify-content:center; line-height:1;
}
.nav-notif-menu{
display:none; position:absolute; top:calc(100% + 8px); left:0; width:320px; max-height:400px;
overflow-y:auto; background:var(--surface); color:var(--ash); border:1px solid var(--line);
border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.18); z-index:200; padding:8px;
}
.nav-notif.is-open .nav-notif-menu{ display:block; }
.nav-notif-menu-head{
display:flex; justify-content:space-between; align-items:center; padding:6px 8px 10px;
border-bottom:1px solid var(--line); margin-bottom:6px;
}
.nav-notif-menu-head strong{ font-size:.85rem; }
.nav-notif-menu-head button{ background:none; border:none; color:var(--clay); font-size:.72rem; font-weight:700; cursor:pointer; }
.nav-notif-item{ display:block; padding:8px; border-radius:6px; text-decoration:none; color:inherit; }
.nav-notif-item:hover{ background:var(--parchment-2); }
.nav-notif-item.unread{ background:var(--tint-soft); }
.nav-notif-item .t{ font-weight:700; font-size:.82rem; margin-bottom:2px; }
.nav-notif-item .m{ font-size:.78rem; color:var(--ash-soft); }
.nav-notif-item .d{ font-size:.68rem; color:var(--ash-soft); font-family:var(--font-utility); margin-top:4px; }
.nav-notif-empty{ padding:20px 8px; text-align:center; color:var(--ash-soft); font-size:.82rem; }
.nav-notif-menu-foot{ text-align:center; padding-top:8px; margin-top:6px; border-top:1px solid var(--line); }
.nav-notif-menu-foot a{ font-size:.8rem; font-weight:700; color:var(--clay); }
@media (max-width:900px){
/* الجرس يبقى ظاهرًا دومًا في الترويسة على الهاتف (خارج القائمة المنسدلة)،
لذا فقط نضبط قائمته المنسدلة لتفتح كنافذة ثابتة تناسب عرض الشاشة */
.header-actions .nav-notif-menu{
position:fixed; top:76px; left:12px; right:12px; width:auto;
max-height:70vh; margin-top:0;
}
}
/* شارة عدّاد الرسائل غير المقروءة — تُضاف كطفل لزر التواصل العائم */
.nav-chat-badge{
position:absolute; top:-3px; left:-3px; min-width:18px; height:18px; padding:0 4px;
border-radius:999px; background:#b3261e; color:#fff; font-size:.66rem; font-weight:800;
display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid #fff;
}
/* نافذة المحادثة الصغيرة — تُفتح من زر التواصل العائم أسفل يسار الصفحة،
وتتيح إرسال الرسائل والرد عليها دون الحاجة للذهاب لصفحة المحادثات الكاملة */
.nav-chat-menu{
display:none; flex-direction:column; position:fixed; bottom:94px; left:24px;
width:340px; max-height:480px; background:var(--surface); color:var(--ash); border:1px solid var(--line);
border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.25); z-index:250; overflow:hidden;
}
.nav-chat-menu.is-open{ display:flex; }
.nav-chat-menu-head{
display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
border-bottom:1px solid var(--line); flex-shrink:0;
}
.nav-chat-menu-head strong{ font-size:.85rem; }
.nav-chat-menu-head a{ font-size:.72rem; font-weight:700; color:var(--clay); }
.nav-chat-menu-head-actions{ display:flex; align-items:center; gap:12px; }
.nav-chat-new-btn{
display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700;
color:#fff; background: linear-gradient(135deg, var(--clay), var(--clay-dark)); border:none;
padding:6px 10px; border-radius:999px; cursor:pointer; box-shadow: 0 4px 10px -4px rgba(181,80,45,.5);
transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s ease;
}
.nav-chat-new-btn:hover{ transform:translateY(-1px); box-shadow: 0 6px 14px -4px rgba(181,80,45,.55); }
.nav-chat-new-btn:active{ transform:translateY(0); }
.nav-chat-new-btn.is-active{ background: var(--ash-soft); box-shadow:none; }
.nav-chat-body{ display:flex; flex-direction:column; overflow:hidden; flex:1; }
.nav-chat-empty{ padding:20px 12px; text-align:center; color:var(--ash-soft); font-size:.82rem; }
.nav-chat-threads{
display:flex; gap:6px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.nav-chat-thread-btn{
flex-shrink:0; text-align:right; background:var(--parchment-2); border:1px solid transparent;
border-radius:8px; padding:6px 10px; font-family:inherit; cursor:pointer; min-width:110px; max-width:150px;
}
.nav-chat-thread-btn span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-chat-thread-btn span:first-child{ font-weight:700; font-size:.78rem; }
.nav-chat-thread-sub{ font-size:.68rem; color:var(--ash-soft); }
.nav-chat-thread-btn.active{ border-color:var(--sand-gold); background:var(--tint-soft); }
.nav-chat-messages{ flex:1; overflow-y:auto; padding:10px 12px; min-height:160px; max-height:260px; }
.nav-chat-msg{ margin-bottom:10px; max-width:85%; }
.nav-chat-msg.mine{ margin-inline-start:auto; text-align:left; }
.nav-chat-msg-name{ font-size:.68rem; font-weight:700; color:var(--ash-soft); margin-bottom:2px; }
.nav-chat-msg-body{
display:inline-block; background:var(--parchment-2); border-radius:10px; padding:7px 10px;
font-size:.82rem; line-height:1.5; word-break:break-word;
}
.nav-chat-msg.mine .nav-chat-msg-body{ background:var(--sand-gold); color:var(--ink-night); }
.nav-chat-msg-date{ font-size:.64rem; color:var(--ash-soft); margin-top:2px; font-family:var(--font-utility); }
.nav-chat-compose{ display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--line); flex-shrink:0; }
.nav-chat-compose textarea{
flex:1; resize:none; min-height:36px; max-height:80px; border:1px solid var(--line);
border-radius:8px; padding:8px; font-family:inherit; font-size:.82rem;
}
.nav-chat-compose button{
background:var(--sand-gold); color:var(--ink-night); border:none; border-radius:8px;
padding:0 14px; font-weight:700; font-size:.8rem; cursor:pointer; flex-shrink:0;
transition: background .18s ease, transform .15s var(--ease);
}
.nav-chat-compose button:hover:not(:disabled){ background:var(--gold-light); transform:translateY(-1px); }
.nav-chat-compose button:active:not(:disabled){ transform:translateY(0); }
.nav-chat-compose button:disabled{ opacity:.5; cursor:not-allowed; }
.nav-chat-start{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.nav-chat-start p{ font-weight:700; font-size:.85rem; }
.nav-chat-start input, .nav-chat-start textarea{
border:1px solid var(--line); border-radius:8px; padding:8px; font-family:inherit; font-size:.82rem; resize:vertical;
transition: border-color .18s ease, box-shadow .18s ease;
}
.nav-chat-start input:focus, .nav-chat-start textarea:focus{ outline:none; border-color:var(--sand-gold); box-shadow:0 0 0 3px rgba(201,151,75,.18); }
.nav-chat-start button{
background:var(--sand-gold); color:var(--ink-night); border:none; border-radius:8px;
padding:8px 14px; font-weight:700; font-size:.82rem; cursor:pointer;
transition: background .18s ease, transform .15s var(--ease);
}
.nav-chat-start button:hover{ background:var(--gold-light); transform:translateY(-1px); }
.nav-chat-start button:active{ transform:translateY(0); }
.nav-chat-start-msg{ font-size:.78rem; font-weight:700; }
@media (max-width:900px){
.nav-chat-menu{
bottom:90px; left:12px; right:12px; width:auto;
max-height:70vh;
}
}
.nav-toggle{
display:none; background: rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:10px;
color:var(--parchment-fixed); font-size:1.3rem; width:42px; height:42px; align-items:center; justify-content:center;
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.nav-toggle:hover{ background: rgba(255,255,255,.1); border-color: var(--sand-gold); }
.nav-toggle:active{ transform: scale(.94); }
@media (max-width: 900px){
.nav-links{
position:fixed; inset: 76px 0 0 0; background: var(--ink-night);
flex-direction:column; align-items:stretch; padding:20px; gap:4px;
transform: translateX(100%); transition: transform .3s ease; overflow-y:auto;
}
.nav-links.is-open{ transform:translateX(0); }
.nav-links a{ padding:16px; border-bottom:1px solid var(--line-dark); }
.nav-toggle{ display:flex; }
}
/* --------------------------------------------------------------------------
العنصر المميز: ختم التأشيرة (Stamp Eyebrow)
-------------------------------------------------------------------------- */
.stamp{
display:inline-flex; align-items:center; gap:8px;
border:1.5px dashed currentColor; border-radius: 999px;
padding:6px 16px; font-family: var(--font-utility); font-weight:700;
font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
transform: rotate(-2deg);
}
.stamp.on-dark{ color: var(--gold-light); }
.stamp.on-light{ color: var(--clay); }
.stamp::before{ content:"✈"; font-size:.85rem; transform: rotate(45deg); display:inline-block; }
/* --------------------------------------------------------------------------
فاصل شريط التذكرة (Ticket-stub divider)
-------------------------------------------------------------------------- */
.ticket-divider{
position:relative; height:34px; margin: 0;
background-image: radial-gradient(circle at 0 50%, transparent 12px, var(--parchment) 13px),
radial-gradient(circle at 100% 50%, transparent 12px, var(--parchment) 13px);
background-size: 100% 100%;
}
.ticket-divider::after{
content:""; position:absolute; top:50%; right:24px; left:24px; border-top:2px dashed var(--line);
}
.ticket-divider.on-dark{ background-image: radial-gradient(circle at 0 50%, transparent 12px, var(--ink-night) 13px),
radial-gradient(circle at 100% 50%, transparent 12px, var(--ink-night) 13px); }
.ticket-divider.on-dark::after{ border-color: var(--line-dark); }
/* --------------------------------------------------------------------------
القسم الأول (Hero)
-------------------------------------------------------------------------- */
.hero{
background: var(--ink-night); color: var(--parchment-fixed);
position:relative; overflow:hidden;
padding: 90px 0 110px;
}
.hero::before{
content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
background-image:
radial-gradient(circle at 85% 20%, rgba(201,151,75,.18), transparent 45%),
radial-gradient(circle at 8% 85%, rgba(28,79,76,.35), transparent 40%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; }
.hero h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); color:#fff; margin: 18px 0 22px; }
.hero h1 em{ font-style:normal; color: var(--sand-gold); }
.hero p.lead{ font-size:1.1rem; color: var(--parchment-fixed); opacity:.85; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px;
border-radius:10px; font-weight:700; font-size:.95rem; border:1.5px solid transparent;
background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
box-shadow: var(--shadow-sm);
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:focus-visible{ outline:2px solid var(--sand-gold); outline-offset:2px; }
.btn:disabled, .btn.is-disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-primary{ background: linear-gradient(135deg, var(--clay), var(--clay-dark)); color:#fff; box-shadow: 0 10px 22px -10px rgba(181,80,45,.55); }
.btn-primary:hover{ background: linear-gradient(135deg, var(--clay-dark), var(--clay)); box-shadow: 0 14px 28px -10px rgba(181,80,45,.6); }
.btn-ghost{ border-color: var(--line-dark); color: var(--parchment-fixed); background: rgba(255,255,255,.05); box-shadow:none; }
.btn-ghost:hover{ border-color: var(--sand-gold); color: var(--gold-light); background: rgba(255,255,255,.09); }
.btn-ghost.on-light{ border-color: var(--line); color: var(--ash); background: var(--surface); }
.btn-ghost.on-light:hover{ border-color: var(--clay); color: var(--clay); background: var(--parchment-2); }
/* بطاقة الصعود (Boarding pass) داخل الهيرو */
.boarding-pass{
background: var(--parchment); color: var(--ash); border-radius: 10px;
padding: 26px 26px 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
transform: rotate(2deg);
}
.boarding-pass-row{ display:flex; justify-content:space-between; gap:16px; padding-bottom:20px; }
.boarding-pass-row .label{ font-family:var(--font-utility); font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:var(--ash-soft); display:block; margin-bottom:4px;}
.boarding-pass-row .value{ font-weight:700; font-size:1.05rem; }
.boarding-pass .route{ display:flex; align-items:center; justify-content:center; gap:14px; padding: 6px 0 22px; font-family:var(--font-display); font-size:1.5rem; }
.boarding-pass .route .plane{ color: var(--clay); font-size:1.2rem; }
.boarding-pass .stub{
border-top:2px dashed var(--line); margin-top:4px; padding: 14px 0;
display:flex; justify-content:space-between; font-family:var(--font-utility); font-size:.8rem; color:var(--ash-soft);
}
@media (max-width: 900px){
.hero-grid{ grid-template-columns:1fr; }
.boarding-pass{ transform:none; }
}
/* --------------------------------------------------------------------------
الأقسام العامة
-------------------------------------------------------------------------- */
section{ padding: 84px 0; }
.section-dark{ background: var(--ink-night); color: var(--parchment-fixed); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size: clamp(1.6rem,3vw,2.4rem); margin-top:14px; }
.section-dark .section-head h2{ color:#fff; }
.section-head p{ color: var(--ash-soft); margin-top:14px; font-size:1.05rem; }
.section-dark .section-head p{ color: var(--parchment-fixed); opacity:.8; }
/* شبكة الخدمات */
.services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.service-card{
background:var(--surface); border:1px solid var(--line); border-radius: 8px; padding:30px 26px;
transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(36,31,24,.35); }
.service-card .icon{ width:46px; height:46px; margin-bottom:18px; color: var(--clay); }
.service-card h3{ font-size:1.2rem; margin-bottom:10px; }
.service-card p{ color: var(--ash-soft); font-size:.94rem; }
.service-card .more{ display:inline-block; margin-top:16px; font-weight:700; color: var(--clay); font-family:var(--font-utility); font-size:.85rem; }
@media (max-width:1000px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns: 1fr; } }
/* إحصائيات */
.stats-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; text-align:center; }
.stat-item .num{ font-family:var(--font-display); font-size:2.6rem; color: var(--sand-gold); }
.stat-item .lbl{ font-family:var(--font-utility); font-size:.82rem; letter-spacing:.5px; opacity:.8; margin-top:6px; }
@media (max-width:700px){ .stats-row{ grid-template-columns: 1fr; gap:18px; } }
/* ===== آراء العملاء (شريط متحرك) ===== */
.testimonials-track-wrap{
overflow:hidden; position:relative; margin-top:8px;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.testimonials-track{
display:flex; gap:20px; width:max-content;
animation: testimonials-scroll 46s linear infinite;
}
.testimonials-track-wrap:hover .testimonials-track{ animation-play-state: paused; }
@keyframes testimonials-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.testimonials-track{ animation: none; }
}
.testimonial-card{
flex:0 0 auto; width:300px; background: var(--ink-night-2); border:1px solid var(--ink-night-3);
border-radius: var(--radius-lg); padding:22px; box-shadow: var(--shadow-md);
}
.testimonial-stars{ color: var(--sand-gold); font-size:1rem; letter-spacing:2px; direction:ltr; }
.testimonial-comment{ color: var(--parchment-fixed); opacity:.9; font-size:.92rem; margin-top:12px; line-height:1.7; min-height:3.4em; }
.testimonial-name{ color: var(--gold-light); font-weight:700; font-size:.88rem; margin-top:16px; }
.testimonial-meta{ color: var(--parchment-fixed); opacity:.6; font-size:.76rem; font-family:var(--font-utility); margin-top:2px; }
/* ===== معلومات الوكالة والخريطة ===== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:32px; align-items:stretch; }
.contact-info-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:14px; }
.contact-info-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; line-height:1.6; }
.contact-info-list li .ico{ flex-shrink:0; font-size:1.1rem; }
.contact-info-list a{ color:inherit; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
.contact-info-list a:hover{ color: var(--gold-light); }
.map-frame{ width:100%; height:280px; border:0; border-radius:14px; display:block; }
.map-card{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:16px; padding:14px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.footer-contact-mini{ display:flex; gap:20px; flex-wrap:wrap; font-size:.82rem; opacity:.85; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line-dark); }
.footer-contact-mini a{ color:inherit; }
.footer-contact-mini a:hover{ color: var(--gold-light); }
/* بطاقات الباقات / الرحلات — تصميم عصري:
بطاقة مرتفعة بظل ناعم يتقوّى عند التحويم، صورة بتدرّج علوي وتكبير خفيف عند التحويم،
شارات زجاجية (backdrop-blur) فوق الصورة، وسعر مُبرز بفاصل منقّط. */
.trips-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.trip-card{
background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; position:relative;
border:1px solid var(--line); box-shadow:var(--shadow-sm);
transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.trip-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:rgba(201,151,75,.35); }
.trip-card .cover{
height:190px; background: linear-gradient(135deg, var(--teal-deep), var(--ink-night));
position:relative; background-size:cover; background-position:center; overflow:hidden;
transform:scale(1); transition: transform .6s var(--ease);
}
.trip-card:hover .cover{ transform:scale(1.06); }
.trip-card .cover::before{
content:""; position:absolute; inset:0; z-index:0;
background: linear-gradient(to top, rgba(15,27,46,.5) 0%, rgba(15,27,46,0) 60%);
}
.trip-card .cover::after{ content:"✈"; position:absolute; z-index:1; font-size:2.2rem; color: rgba(255,255,255,.5); left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); }
.trip-card .cover.has-image::after{ display:none; }
.trip-card .body{ padding:24px; display:flex; flex-direction:column; gap:7px; }
.trip-card h3{ font-size:1.2rem; letter-spacing:.2px; }
.trip-card .body p.desc{ color:var(--ash-soft); font-size:.9rem; }
.trip-card .meta{
display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:8px;
font-family:var(--font-utility); font-size:.78rem; color:var(--ash-soft);
}
.trip-card .meta span{
display:inline-flex; align-items:center; background:var(--parchment-2); border:1px solid var(--line);
border-radius:999px; padding:4px 11px; line-height:1.4;
}
.trip-card .price{
font-family:var(--font-display); color:var(--clay); font-size:1.35rem; font-weight:700;
margin-top:10px; padding-top:14px; border-top:1px dashed var(--line);
}
.soon-badge{
position:absolute; top:14px; left:14px; background: var(--clay); color:#fff; font-family:var(--font-utility);
font-size:.68rem; font-weight:700; letter-spacing:1px; padding:5px 12px; border-radius:999px; text-transform:uppercase;
}
@media (max-width:1000px){ .trips-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .trips-grid{ grid-template-columns: 1fr; } }
.empty-state{ color: var(--ash-soft); font-size:.9rem; text-align:center; padding:20px 0; grid-column:1/-1; }
.trip-card .cover .status-badge{
position:absolute; z-index:2; top:14px; left:14px; font-family:var(--font-utility); font-size:.68rem; font-weight:700;
letter-spacing:.7px; padding:6px 14px; border-radius:999px; text-transform:uppercase; color:#fff;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.status-badge.open{ background:rgba(10,107,58,.88); }
.status-badge.coming_soon{ background:rgba(181,80,45,.88); }
.status-badge.closed{ background:rgba(107,107,107,.85); }
/* ==========================================================================
دليل التأشيرات — بطاقات الدول + جدول الإعفاءات
========================================================================== */
.visa-guide-search{ margin-bottom:32px; }
.visa-guide-search input{
width:100%; padding:16px 20px; border-radius:8px; border:1px solid var(--line);
background:var(--surface); font-family:var(--font-body); font-size:1rem; color:var(--ash);
}
.visa-guide-search input:focus{ outline:none; border-color: var(--sand-gold); box-shadow:0 0 0 3px rgba(201,151,75,.18); }
.visa-country-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
@media (max-width:800px){ .visa-country-grid{ grid-template-columns:1fr; } }
.visa-country-card{
background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px 26px 22px;
position:relative;
}
.visa-country-card.is-hidden{ display:none; }
.visa-country-card .vc-tag{
position:absolute; top:20px; left:26px; font-family:var(--font-utility); font-size:.7rem; font-weight:700;
color:#0a6b3a; background:#e5f4ec; padding:4px 12px; border-radius:999px;
}
.vc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.vc-head h3{ font-size:1.25rem; display:flex; align-items:center; gap:8px; }
.vc-source{ color:var(--ash-soft); font-size:.85rem; margin-bottom:16px; }
.vc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.vc-tab{
font-family:var(--font-utility); font-size:.82rem; font-weight:600; padding:7px 16px; border-radius:999px;
border:1px solid var(--line); background:var(--parchment-2); color:var(--ash); cursor:pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vc-tab:hover{ border-color: var(--clay); color: var(--clay); }
.vc-tab.is-active{ background: var(--ink-night); color:#fff; border-color: var(--ink-night); }
.vc-docs{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.vc-docs li{ font-size:.94rem; color:var(--ash); display:flex; gap:10px; align-items:flex-start; }
.vc-docs li::before{ content:"•"; color:var(--clay); font-weight:700; flex-shrink:0; }
.vc-docs li.is-warning{ color:var(--clay-dark); }
.vc-docs .vc-empty{ color:var(--ash-soft); font-size:.9rem; }
.vc-docs .vc-empty::before{ content:""; }
.visa-disclaimer{
font-size:.88rem; color:var(--ash-soft); background:var(--tint-soft); border:1px solid var(--line);
border-radius:8px; padding:14px 18px; margin-top:8px;
}
/* جدول الإعفاءات من التأشيرة */
.entry-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.entry-legend span{
font-family:var(--font-utility); font-size:.8rem; padding:7px 15px; border-radius:999px;
background:var(--parchment-2); color:var(--ash-soft); border:1px solid var(--line);
}
.section-dark .entry-legend span{ background:rgba(255,255,255,.06); color:var(--parchment-fixed); border-color:var(--line-dark); }
.entry-region-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.entry-region-tab{
font-family:var(--font-utility); font-size:.88rem; font-weight:700; padding:10px 20px; border-radius:8px;
border:1px solid var(--gold-light); background:rgba(231,206,147,.12); color:var(--gold-light); cursor:pointer;
}
.entry-region-tab:hover{ background:rgba(231,206,147,.2); }
.entry-region-tab.is-active{ background: var(--sand-gold); color: var(--ink-night); border-color: var(--sand-gold); }
.entry-table-wrap{ background:var(--surface); border-radius:10px; overflow:hidden; border:1px solid var(--line-dark); }
.entry-table{ width:100%; border-collapse:collapse; }
.entry-table th, .entry-table td{ padding:16px 20px; text-align:right; font-size:.95rem; color:var(--ash); }
.entry-table thead th{ font-family:var(--font-utility); font-size:.78rem; color:var(--ash-soft); background:var(--parchment-2); font-weight:700; }
.entry-table tbody tr{ border-top:1px solid var(--line); }
.entry-table tbody tr.is-hidden{ display:none; }
.entry-table td.country-cell{ font-weight:700; color:var(--ash); display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.entry-table td.notes-cell{ color:var(--ash-soft); font-size:.88rem; }
.entry-method-badge{
font-family:var(--font-utility); font-size:.75rem; font-weight:700; padding:5px 14px; border-radius:999px; display:inline-block; white-space:nowrap;
}
.entry-method-badge.tam{ background:#e5f4ec; color:#0a6b3a; }
.entry-method-badge.wusul{ background:#fbeade; color:var(--clay-dark); }
.entry-method-badge.eta{ background:#e6eefb; color:#1d4e9b; }
.entry-method-badge.combo{ background:#f1e9f7; color:#5b3a8c; }
.entry-method-badge.special{ background:#eee9e2; color:#5a5245; }
.entry-table-note{ padding:16px 20px; font-size:.85rem; color:var(--ash-soft); }
.entry-empty-region{ padding:40px 20px; text-align:center; color:var(--parchment-fixed); opacity:.75; }
/* صناديق معلومات (تنبيهات / قوانين الصرف) */
.info-box{
background: var(--parchment-2); border-right:4px solid var(--sand-gold); border-radius: 6px;
padding: 26px 28px; display:flex; gap:18px; align-items:flex-start;
}
.info-box .ico{ font-size:1.5rem; }
.info-box h4{ font-family:var(--font-body); font-weight:800; margin-bottom:8px; }
.info-box p{ color: var(--ash-soft); }
/* نماذج */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:36px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1/-1; }
.form-field label{ font-family:var(--font-utility); font-size:.85rem; font-weight:700; color: var(--ash); }
.form-field input, .form-field select, .form-field textarea{
border:1.5px solid var(--line); border-radius: var(--radius); padding:12px 14px; font-family:var(--font-body);
font-size:.95rem; background-color: var(--parchment); color: var(--ash);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--sand-gold); outline:none; background:var(--surface); box-shadow: 0 0 0 3px rgba(201,151,75,.18); }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
/* --------------------------------------------------------------------------
قوائم منسدلة عصرية (select) — إزالة المظهر الافتراضي للمتصفح واستبداله
بسهم مخصص متناسق مع باقي عناصر الموقع، في الوضعين الفاتح والداكن
-------------------------------------------------------------------------- */
select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position: left 14px center;
background-size:10px 6px;
padding-left:32px !important;
}
select::-ms-expand{ display:none; }
html[data-theme="dark"] select{
background-image:url("data:image/svg+xml;utf8,");
}
/* قائمة منسدلة مخصّصة بالكامل داخل الصفحة (تستبدل نافذة اختيار النظام/المتصفح) */
.csel{ position:relative; display:block; }
.csel > select{
position:absolute; inset:0; opacity:0; pointer-events:none;
}
.csel-btn{
display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
border:1.5px solid var(--line); border-radius: var(--radius); padding:12px 14px; font-family:var(--font-body);
font-size:.95rem; background-color:var(--parchment); color:var(--ash); cursor:pointer; text-align:right;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.csel-btn::after{
content:""; width:10px; height:6px; flex-shrink:0; margin-inline-start:6px;
background:url("data:image/svg+xml;utf8,") no-repeat center/contain;
transition: transform .2s var(--ease);
}
html[data-theme="dark"] .csel-btn::after{
background-image:url("data:image/svg+xml;utf8,");
}
.csel.is-open .csel-btn::after{ transform:rotate(180deg); }
.csel-btn:hover{ border-color:var(--sand-gold); }
.csel.is-open .csel-btn{ border-color:var(--sand-gold); box-shadow:0 0 0 3px rgba(201,151,75,.18); }
.csel-btn:disabled{ opacity:.55; cursor:not-allowed; }
.csel-btn.input-like{ width:100%; padding:10px 12px; border-radius:8px; background-color:var(--surface); font-size:.95rem; }
.csel-menu{
position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:400;
background:var(--surface); border:1px solid var(--line); border-radius:10px;
box-shadow: var(--shadow-lg); max-height:260px; overflow-y:auto; padding:6px;
display:none;
}
.csel.is-open .csel-menu{ display:block; }
.csel-item{
display:block; width:100%; text-align:right; background:none; border:none; color:var(--ash);
padding:10px 12px; border-radius:8px; font-family:inherit; font-size:.9rem; cursor:pointer;
transition: background .15s ease, color .15s ease;
}
.csel-item:hover{ background:var(--parchment-2); }
.csel-item.is-selected{ background:var(--tint-soft); color:var(--clay); font-weight:700; }
.csel-item:disabled{ opacity:.45; cursor:not-allowed; }
.form-field .csel-btn:focus-visible, .csel-item:focus-visible{ outline:2px solid var(--sand-gold); outline-offset:2px; }
/* --------------------------------------------------------------------------
نافذة تأكيد/تنبيه مخصّصة — بديل لـ confirm() و alert() الافتراضيتين
-------------------------------------------------------------------------- */
.cdlg-overlay{
position:fixed; inset:0; background:rgba(15,27,46,.55); backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center; padding:20px; z-index:20000;
opacity:0; transition:opacity .18s var(--ease); pointer-events:none;
}
.cdlg-overlay.is-open{ opacity:1; pointer-events:auto; }
.cdlg-box{
background:var(--surface); color:var(--ash); border-radius:14px; padding:26px; max-width:400px; width:100%;
box-shadow: var(--shadow-lg); transform:translateY(10px) scale(.97); transition: transform .18s var(--ease);
}
.cdlg-overlay.is-open .cdlg-box{ transform:translateY(0) scale(1); }
.cdlg-msg{ font-size:1rem; line-height:1.7; margin-bottom:22px; }
.cdlg-actions{ display:flex; justify-content:flex-end; gap:10px; }
.cdlg-actions .btn{ padding:10px 22px; font-size:.88rem; }
/* نافذة تأكيد الحجز — نموذج معلومات إضافية قبل إرسال الطلب */
.bkdlg-box{ max-width:440px; text-align:right; max-height:90vh; overflow-y:auto; }
.bkdlg-title{ margin:0 0 6px; font-size:1.15rem; }
.bkdlg-subtitle{ margin:0 0 18px; color:var(--sand-gold, #b08a3e); font-weight:600; font-size:.92rem; }
.bkdlg-box .form-field{ margin-bottom:14px; }
.bkdlg-box .form-field label{ display:block; font-size:.85rem; margin-bottom:6px; color:var(--ash); opacity:.85; }
.bkdlg-box input, .bkdlg-box textarea{
width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line, #d8d2c4);
font-family:inherit; font-size:.92rem; background:var(--surface); color:var(--ash); resize:vertical;
}
.bkdlg-box input:focus, .bkdlg-box textarea:focus{ outline:2px solid var(--sand-gold); outline-offset:1px; }
.bkdlg-error{ font-size:.85rem; margin:-4px 0 12px; }
/* بطاقات عملية (خطوات) */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.step{ position:relative; padding-top:10px; }
.step .n{ font-family:var(--font-display); font-size:1.1rem; color: var(--sand-gold); border:1.5px dashed var(--sand-gold); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.step h4{ font-family:var(--font-body); font-weight:800; margin-bottom:8px; }
.step p{ color: var(--parchment-fixed); opacity:.75; font-size:.92rem; }
@media (max-width:900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns: 1fr; } }
/* شريط تذييل (Footer) */
.site-footer{ background: var(--ink-night); color: var(--parchment-fixed); padding: 60px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-grid h5{ font-family:var(--font-utility); font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color: var(--gold-light); margin-bottom:16px; }
.footer-grid li{ margin-bottom:10px; opacity:.85; font-size:.92rem; }
.footer-grid li a:hover{ color: var(--gold-light); }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-top:22px; display:flex; justify-content:space-between; font-size:.82rem; opacity:.7; flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
/* زر تواصل عائم */
.whatsapp-float{
position:fixed; bottom:24px; left:24px; z-index:200; background:var(--clay); color:#fff;
width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
box-shadow: 0 10px 26px -8px rgba(0,0,0,.5); font-size:1.6rem;
transition: background .2s ease, transform .18s var(--ease), box-shadow .18s var(--ease);
}
.whatsapp-float:hover{ background:var(--clay-dark); transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -8px rgba(0,0,0,.55); }
.whatsapp-float:active{ transform: translateY(0) scale(.98); }
/* شارة "قريبًا" أعلى الصفحة */
.notice-bar{ background: var(--sand-gold); color: var(--ink-night); text-align:center; padding:10px 16px; font-family: var(--font-utility); font-weight:700; font-size:.88rem; }
/* صفحة تسجيل الدخول */
.auth-wrap{ min-height: calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding: 60px 20px; background: var(--ink-night); }
.auth-card{ width:100%; max-width:440px; background: var(--surface); border-radius:10px; padding:40px; box-shadow: var(--shadow-lg); }
.role-toggle{ display:flex; gap:8px; margin-bottom:22px; background: var(--parchment-2); padding:5px; border-radius: var(--radius); }
.role-toggle button{ flex:1; padding:10px; border:none; background:transparent; border-radius:3px; font-weight:700; font-family:var(--font-utility); font-size:.82rem; color: var(--ash-soft); }
.role-toggle button.active{ background:var(--surface); color: var(--clay); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.auth-tabs{ display:flex; gap:26px; margin-bottom:26px; border-bottom:1px solid var(--line); position:relative; }
.auth-tabs button{ background:none; border:none; padding:10px 2px; font-weight:700; color: var(--ash-soft); border-bottom:2px solid transparent; transition: color .2s var(--ease); }
.auth-tabs button.active{ color: var(--ash); border-color: transparent; }
.auth-tab-indicator{
position:absolute; bottom:-1px; left:0; height:2px; background: var(--clay); border-radius:2px;
transition: transform .32s var(--ease-spring), width .32s var(--ease-spring);
width:0; transform: translateX(0);
}
/* ==========================================================================
صفحة تسجيل الدخول — تصميم "الجواز المفتوح": لوحة تعريفية + بطاقة نماذج
========================================================================== */
.auth-wrap--split{
padding: 48px 20px; position:relative; overflow:hidden;
background:
radial-gradient(680px 420px at 14% 8%, rgba(201,151,75,.16), transparent 60%),
radial-gradient(560px 380px at 100% 100%, rgba(28,79,76,.18), transparent 60%),
var(--ink-night);
}
.auth-shell{
position:relative; z-index:1; width:100%; max-width:960px; margin:0 auto;
display:grid; grid-template-columns: 1.05fr 1.5px 1fr; align-items:stretch;
background: var(--ink-night-2); border-radius: var(--radius-xl); overflow:hidden;
box-shadow: 0 40px 80px -24px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
border: 1px solid var(--line-dark);
animation: authShellRise .55s var(--ease) both;
}
@keyframes authShellRise{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:translateY(0); } }
/* --- اللوحة اليسرى: تعريف الوكالة (تصميم صفحة جواز) --- */
.auth-showcase{
position:relative; padding:44px 38px; color: var(--parchment-fixed);
display:flex; flex-direction:column; justify-content:space-between; gap:28px;
}
.auth-showcase::before{
content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
background: url('../assets/logo.svg') center 120% / 260px no-repeat;
}
.auth-showcase-top{ display:flex; flex-direction:column; gap:16px; }
.auth-showcase h2{ font-size:1.55rem; color: var(--gold-light); line-height:1.35; }
.auth-showcase-lead{ font-size:.92rem; opacity:.82; max-width:36ch; }
.auth-feature-list{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.auth-feature-list li{ display:flex; align-items:flex-start; gap:12px; font-size:.88rem; opacity:.92; }
.auth-feature-list .ico{
flex-shrink:0; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
background: rgba(201,151,75,.16); border:1px solid var(--line-dark); font-size:.9rem;
}
.auth-route-mini{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.05rem; }
.auth-route-mini .dash{ flex:1; height:0; border-top:2px dashed var(--line-dark); position:relative; }
.auth-route-mini .dash .plane{ position:absolute; top:-9px; right:0; color: var(--sand-gold); animation: routeFly 3.6s linear infinite; }
@keyframes routeFly{ 0%{ right:0; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ right:100%; opacity:0; } }
.auth-trust-line{ display:flex; align-items:center; gap:8px; font-family:var(--font-utility); font-size:.72rem; letter-spacing:.4px; opacity:.7; }
/* --- الدرزة الوسطى: حافة تذكرة مثقّبة رأسية بين اللوحتين --- */
.auth-seam{ position:relative; background: transparent; }
.auth-seam::before{
content:""; position:absolute; inset:0; width:100%;
background-image: radial-gradient(circle at 50% 0, transparent 11px, var(--ink-night-2) 12px),
radial-gradient(circle at 50% 100%, transparent 11px, var(--ink-night-2) 12px);
}
.auth-seam::after{ content:""; position:absolute; top:24px; bottom:24px; right:50%; border-right:2px dashed var(--line-dark); }
.auth-seam-plane{
position:absolute; right:50%; top:50%; transform:translate(50%,-50%); color: var(--sand-gold);
background: var(--ink-night-2); font-size:.85rem; padding:4px 0;
}
/* --- بطاقة النموذج --- */
.auth-card--modern{
width:100%; max-width:none; border-radius:0; background: var(--surface);
padding:44px 40px; display:flex; flex-direction:column; justify-content:center;
}
.auth-card--modern .field-input{ position:relative; }
.auth-card--modern .form-field input{
width:100%; padding:13px 44px 13px 16px; border-radius:12px; transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.auth-card--modern .form-field input:focus{ transform: translateY(-1px); }
.field-icon{
position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:.95rem; opacity:.55; pointer-events:none;
}
.field-toggle-pass{
position:absolute; top:50%; left:12px; transform:translateY(-50%); background:none; border:none; padding:4px;
color: var(--ash-soft); display:flex; opacity:.7; transition: opacity .15s ease, color .15s ease;
}
.field-toggle-pass:hover{ opacity:1; color: var(--clay); }
.field-input.has-toggle input{ padding-left:42px; }
.auth-card--modern .btn-primary{ position:relative; overflow:hidden; }
.auth-card--modern .btn-primary::after{
content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .55s var(--ease);
}
.auth-card--modern .btn-primary:hover::after{ transform: translateX(120%); }
.auth-card--footnote{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); display:flex; gap:14px; flex-wrap:wrap; font-size:.72rem; color: var(--ash-soft); }
.auth-card--footnote span{ display:flex; align-items:center; gap:6px; }
@media (max-width:900px){
.auth-shell{ grid-template-columns:1fr; }
.auth-seam{ display:none; }
.auth-showcase{ padding:32px 28px 26px; border-bottom:2px dashed var(--line-dark); }
.auth-showcase-lead, .auth-feature-list{ display:none; }
.auth-card--modern{ padding:32px 26px; }
}
/* ==========================================================================
شريط تثبيت التطبيق — بطاقة عائمة أسفل الصفحة الرئيسية، بنفس هوية العلامة
(ليلي/ذهبي)، تظهر عندما يخبر المتصفح أن الموقع قابل للتثبيت
========================================================================== */
.install-banner{
position:fixed; z-index:300; left:50%; bottom:20px; transform:translate(-50%,140%);
width:min(420px, calc(100vw - 32px)); display:flex; align-items:center; gap:14px;
padding:16px 16px 16px 14px; border-radius:16px;
background: linear-gradient(160deg, var(--ink-night-2), var(--ink-night));
border:1px solid var(--ink-night-3); box-shadow: 0 24px 48px -16px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05) inset;
opacity:0; pointer-events:none;
transition: transform .42s var(--ease-spring), opacity .3s ease;
}
.install-banner.is-visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.install-banner::before{
content:""; position:absolute; inset:0; border-radius:16px; padding:1px; pointer-events:none;
background: linear-gradient(135deg, rgba(201,151,75,.55), transparent 40%, transparent 60%, rgba(201,151,75,.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.install-banner-icon{
flex-shrink:0; width:46px; height:46px; border-radius:12px; background: var(--surface);
display:flex; align-items:center; justify-content:center; overflow:hidden;
border:1px solid var(--ink-night-3); box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
}
.install-banner-icon img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.install-banner-body{ flex:1; min-width:0; }
.install-banner-title{ font-family:var(--font-utility); font-weight:700; font-size:.92rem; color:#fff; margin-bottom:2px; }
.install-banner-sub{ font-size:.78rem; color: var(--gold-light); opacity:.85; line-height:1.4; }
.install-banner-actions{ flex-shrink:0; display:flex; align-items:center; gap:6px; }
.install-banner-cta{
font-family:var(--font-utility); font-weight:700; font-size:.8rem; white-space:nowrap;
padding:9px 16px; border-radius:10px; border:none; color: var(--ink-night);
background: linear-gradient(135deg, var(--sand-gold), var(--gold-light));
box-shadow: 0 10px 20px -8px rgba(201,151,75,.55);
transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.install-banner-cta:hover{ transform:translateY(-1px); box-shadow: 0 14px 26px -8px rgba(201,151,75,.65); }
.install-banner-cta:active{ transform:translateY(0); }
.install-banner-close{
flex-shrink:0; width:28px; height:28px; border-radius:50%; border:none; background:transparent;
color: var(--ash-soft); opacity:.7; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
transition: opacity .15s ease, background .15s ease;
}
.install-banner-close:hover{ opacity:1; background: rgba(255,255,255,.08); }
@media (max-width:480px){
.install-banner{ flex-wrap:wrap; bottom:14px; }
.install-banner-actions{ width:100%; justify-content:flex-end; order:3; }
}
/* منافع */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }