/* =====================================================================
   كُن واعياً — نظام الكشك التفاعلي التوعوي
   الستايل الأساسي — سمة فاتحة احترافية (أبيض + أزرق ملكي + ذهبي)
   مع موشن جرافيك: خلفية حيّة، دخول متدرج، لمعان، وحركة أيقونات.
   ===================================================================== */

:root {
    /* الألوان — فاتحة ومريحة */
    --bg-0: #f4f7fe;
    --bg-1: #eaf0fc;
    --panel: #ffffff;
    --panel-border: rgba(28, 44, 85, 0.10);
    --navy: #1c2c55;
    --gold: #c9971f;
    --gold-soft: #eecd6f;
    --text: #1c2745;
    --text-dim: #64729a;
    --accent: #3ea6ff; /* يُعاد تعريفه لكل بطاقة */

    /* المقاسات */
    --radius: 22px;
    --gap: clamp(14px, 2.2vw, 28px);
    --shadow: 0 14px 38px rgba(30, 50, 110, 0.10);
    --shadow-hover: 0 22px 55px rgba(30, 50, 110, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* حقول الإدخال دائماً قابلة للتحديد والنسخ (حتى في وضع الكشك) */
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* صفحات المشغّل (الإدارة/الدخول/البوابة) — تحديد ونسخ كامل */
.admin-body, .auth-screen, .admin, .admin *, .auth-card, .auth-card *, .portal, .portal * {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* سمة hidden يجب أن تتغلّب على أي display في الكلاسات */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    font-family: "Tajawal", "Cairo", "Segoe UI", Tahoma, "Traditional Arabic", sans-serif;
    color: var(--text);
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 55%, #f9fbff 100%);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    position: relative;
}

/* ============ موشن جرافيك: فقاعات خلفية حيّة عائمة ============ */
body::before, body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
body::before {
    width: 46vmax; height: 46vmax;
    top: -18vmax; inset-inline-end: -12vmax;
    background: radial-gradient(circle at 35% 35%, rgba(238, 205, 111, .55), rgba(62, 166, 255, .20) 65%, transparent 75%);
    animation: blobFloat 22s ease-in-out infinite alternate;
}
body::after {
    width: 40vmax; height: 40vmax;
    bottom: -16vmax; inset-inline-start: -10vmax;
    background: radial-gradient(circle at 60% 40%, rgba(124, 107, 255, .28), rgba(79, 209, 165, .22) 60%, transparent 75%);
    animation: blobFloat 26s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-4vmax, 3vmax) scale(1.08); }
    100% { transform: translate(3vmax, -3vmax) scale(0.96); }
}

/* ============ حركات عامة ============ */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* غلاف الكشك — عمودي، بمنتصف مضبوط */
.kiosk-shell {
    min-height: 100vh;
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(20px, 3.5vw, 46px);
    display: flex;
    flex-direction: column;
    animation: pageIn .55s ease both;
}

/* الغلاف الوسيط الذي يحقنه Layout Dialect — نجعله عمود flex يملأ الشاشة
   حتى تتمدّد الشبكة وتختفي المساحات الفارغة على الشاشة العمودية. */
.kiosk-shell > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ======================= الترويسة ======================= */
.brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: clamp(14px, 2vw, 22px) clamp(18px, 2.6vw, 30px);
    background: var(--header-bg, var(--panel));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: fadeUp .6s ease both;
}
/* شريط ذهبي علوي متدرّج */
.brand::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--header-title, var(--gold)), color-mix(in srgb, var(--header-title, var(--gold)) 55%, #fff), var(--header-title, var(--gold)), transparent);
    background-size: 200% auto;
    animation: shimmer 5s linear infinite;
}

.brand__ministry { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.brand__crest { width: clamp(52px, 6.5vw, 78px); height: clamp(52px, 6.5vw, 78px); flex: none; object-fit: contain; }
.brand__ministry-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__ar { font-weight: 700; font-size: clamp(15px, 1.8vw, 20px); color: var(--header-text, var(--navy)); }
.brand__en { font-size: clamp(9px, 1vw, 11px); letter-spacing: 1.5px; color: color-mix(in srgb, var(--header-text, var(--text-dim)) 60%, transparent); }

.brand__campaign { text-align: center; flex: 1; }
/* العنوان: تدرّج لامع متحرك مشتق من لون الهيدر القابل للتحكم */
.brand__title {
    font-size: clamp(30px, 5.5vw, 58px);
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--header-title, var(--gold)) 62%, #000),
        var(--header-title, var(--gold)),
        color-mix(in srgb, var(--header-title, var(--gold)) 45%, #fff),
        var(--header-title, var(--gold)),
        color-mix(in srgb, var(--header-title, var(--gold)) 62%, #000));
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 6s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(201, 151, 31, .25));
}
.brand__slogan { margin-top: 4px; color: color-mix(in srgb, var(--header-text, var(--text-dim)) 65%, transparent); font-size: clamp(12px, 1.6vw, 18px); }

.brand__shield {
    width: clamp(38px, 5vw, 54px);
    height: clamp(42px, 5.6vw, 60px);
    flex: none;
    color: var(--gold);
    animation: iconFloat 3.6s ease-in-out infinite;
}

/* ======================= تلميح ======================= */
.home__hint {
    text-align: center;
    color: var(--text-dim);
    font-size: clamp(15px, 2vw, 22px);
    margin-top: -4px;
    animation: fadeUp .6s .15s ease both;
}

/* ======================= شبكة الأيقونات ======================= */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* صفوف بحد أدنى وأقصى: تملأ العمودي دون أن تتضخّم أفقياً */
    grid-auto-rows: minmax(230px, 340px);
    gap: var(--gap);
    flex: 1;
    align-content: center;
}

/* عدد فردي من البطاقات (5): الأخيرة تمتد بعرض العمودين */
.grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.4vh, 26px);
    padding: clamp(22px, 3.4vw, 42px) clamp(16px, 2.4vw, 30px);
    min-height: clamp(190px, 25vh, 300px);
    text-decoration: none;
    color: var(--text);
    /* الافتراضي (بطاقة الأيقونة SVG): تدرّج أبيض بلمسة لون */
    background:
        radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, #ffffff), #ffffff 62%);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--panel-border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.4), box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    animation: fadeUp .65s ease backwards;
}

/* خلفية كل بطاقة تأتي inline من لوحة الإدارة (item.bg) لتطابق خلفية صورتها */
/* دخول متدرّج (موشن) */
.card:nth-child(1) { animation-delay: .10s; }
.card:nth-child(2) { animation-delay: .18s; }
.card:nth-child(3) { animation-delay: .26s; }
.card:nth-child(4) { animation-delay: .34s; }
.card:nth-child(5) { animation-delay: .42s; }
.card:nth-child(6) { animation-delay: .50s; }

/* شريط علوي عريض بتدرّج لون البطاقة */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 55%, transparent),
        var(--accent),
        color-mix(in srgb, var(--accent) 55%, transparent));
}
/* هالة لونية ناعمة تتوهّج خلف الميدالية */
.card::after {
    content: "";
    position: absolute;
    inset: 8% 28% auto 28%;
    height: 46%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
    filter: blur(26px);
    opacity: .8;
    pointer-events: none;
    transition: opacity .25s ease;
}

.card:hover, .card:focus-visible {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border));
}
.card:hover::after { opacity: 1; }
.card:active { transform: scale(.965); }

.card__num {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 3;                    /* دائماً فوق الصورة */
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent),
                0 0 0 4px rgba(255, 255, 255, .9);
}

/* ميدالية ملوّنة متدرّجة خلف الأيقونة (تعطي العمق والغنى) */
.card__icon {
    position: relative;
    width: clamp(96px, 15vh, 148px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: color-mix(in srgb, var(--accent) 82%, #000);
    background:
        radial-gradient(circle at 35% 28%,
            color-mix(in srgb, var(--accent) 30%, #ffffff),
            color-mix(in srgb, var(--accent) 16%, #ffffff) 70%);
    box-shadow:
        inset 0 2px 8px rgba(255, 255, 255, .85),
        inset 0 -6px 14px color-mix(in srgb, var(--accent) 18%, transparent),
        0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent);
    animation: iconFloat 3.8s ease-in-out infinite;
    transition: transform .25s ease;
}
.card:nth-child(2) .card__icon { animation-delay: .5s; }
.card:nth-child(3) .card__icon { animation-delay: 1s; }
.card:nth-child(4) .card__icon { animation-delay: 1.5s; }
.card:nth-child(5) .card__icon { animation-delay: 2s; }
.card:hover .card__icon { transform: scale(1.08) rotate(-3deg); }
.card__icon svg { width: 50%; height: 50%; display: block; }
.card__icon svg [stroke] { stroke-width: 3.4; }

/* بطاقة بإيموجي بديل (بلا صورة مرفوعة) */
.card__emoji {
    display: grid; place-items: center;
    font-size: clamp(70px, 12vh, 130px);
    line-height: 1;
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent) 35%, transparent));
    animation: iconFloat 3.8s ease-in-out infinite;
}

/* الأقسام ذات الصور المولّدة: الصورة تتوسّط منطقتها بحجمها الطبيعي (بلا تمدد يلامس العنوان) */
.card__icon--img {
    flex: 1 1 auto;
    min-height: 0;                 /* يسمح للصورة بالانكماش حتى لا تزاحم العنوان */
    width: 100%;
    align-self: stretch;
    position: relative;            /* مرجع لتثبيت الصورة داخله تماماً */
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: hidden;
    animation: none;
}
.card:hover .card__icon--img { transform: none; }
.card__icon--img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;          /* الصورة محصورة داخل الصندوق تماماً بلا تجاوز */
    display: block;
}
/* إخفاء الهالة اللونية خلف الميدالية في بطاقات الصور (لا ميدالية فيها) */
.card:has(.card__icon--img)::after { display: none; }
/* الصورة أعلى، العنوان بمساحته الخاصة أسفلها بفاصل واضح */
.card:has(.card__icon--img) {
    justify-content: flex-start;
    gap: clamp(10px, 1.6vh, 20px);
    padding: clamp(22px, 3vw, 36px) clamp(14px, 2vw, 24px) clamp(18px, 2.6vh, 28px);
}
.card:has(.card__icon--img) .card__title {
    flex: 0 0 auto;                /* العنوان لا ينكمش ولا يُغطّى */
}

.card__title {
    font-size: clamp(18px, 2.6vw, 27px);
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
    color: var(--navy);
}

/* ======================= شريط المزايا ======================= */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px 18px;
    padding: clamp(12px, 1.8vw, 18px) clamp(16px, 2.4vw, 26px);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(30, 50, 110, 0.06);
    animation: fadeUp .65s .55s ease backwards;
}
.feature { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: clamp(12px, 1.5vw, 16px); font-weight: 600; }
.feature__ic { font-size: 1.25em; }

/* عدّاد السكون التنازلي (أسفل يمين) */
.ss-countdown {
    position: fixed;
    bottom: 18px;
    right: 78px;                 /* يسار زر الكتم */
    z-index: 55;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.ss-countdown__val { color: var(--navy); font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: .5px; }
.ss-countdown--soon { border-color: #e0a020; }
.ss-countdown--soon .ss-countdown__val { color: #c9971f; }

/* زر إظهار شاشة السكون يدوياً (أسفل يسار، بجانب زر الإدارة) */
.ss-launch {
    position: fixed;
    bottom: 18px;
    left: 150px;
    z-index: 55;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    font-family: inherit; font-weight: 700; font-size: 14px; color: var(--navy);
    cursor: pointer;
    transition: transform .15s ease;
}
.ss-launch:hover { transform: translateY(-2px); }

/* زر كتم الصوت العائم (كل صفحات الزوار) */
.mute-fab {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 60;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 22px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease;
}
.mute-fab:hover { transform: scale(1.06); }
.mute-fab:active { transform: scale(.94); }
.mute-fab--off { background: rgba(255, 107, 107, .14); border-color: rgba(255, 107, 107, .5); }

/* زر لوحة الإدارة (للمشغّل) — ثابت بزاوية النافذة، واضح لكنه صغير */
.admin-fab {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 14px;
    border-radius: 999px;
    background: var(--navy);
    color: #eaf0ff;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 10px 24px rgba(28, 44, 85, .35);
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    opacity: .9;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.admin-fab:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(28, 44, 85, .45); }
.admin-fab__ic { font-size: 18px; line-height: 1; }
.admin-fab__txt { color: var(--gold-soft); }

/* ======================= مساعدات عامة (لبقية الصفحات) ======================= */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px;
    font-family: inherit;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: #3d2c05;
    background: linear-gradient(180deg, var(--gold-soft), #e3b64a);
    border: none; border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(201, 151, 31, 0.30);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow: hidden;
}
/* لمعة تمر على الزر (موشن) */
.btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    inset-inline-start: -60%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: btnSheen 4.5s ease-in-out infinite;
}
@keyframes btnSheen {
    0%, 55%  { inset-inline-start: -60%; }
    75%, 100% { inset-inline-start: 130%; }
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(201, 151, 31, 0.40); }
.btn:active { transform: scale(.96); }
.btn:disabled { filter: grayscale(.45) opacity(.65); cursor: default; transform: none; }

.btn--ghost {
    color: var(--navy);
    background: #ffffff;
    border: 1.5px solid var(--panel-border);
    box-shadow: 0 6px 18px rgba(30, 50, 110, 0.08);
}
.btn--ghost::after { display: none; }

.page-back {
    align-self: flex-start;
    color: var(--text-dim);
    text-decoration: none;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--panel-border);
    transition: color .15s ease, transform .15s ease;
}
.page-back:hover { color: var(--navy); transform: translateX(3px); }
.page-back::before { content: "→ "; }

/* شاشة أفقية (لو رُكّبت أفقية) */
@media (orientation: landscape) and (min-width: 900px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .grid .card:last-child:nth-child(odd) { grid-column: auto; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}