/*
   ─────────────────────────────────────────────────────────────
   ادعُ صاحبك
   ─────────────────────────────────────────────────────────────
   صفحة الطالب (الكود والرصيد وصحابه)، شريط الخصم للزائر اللي جه
   من لينك دعوة، وقطع صغيرة في لوحة الأدمن. الألوان من طقم النحاسي
   (--a-*) زي الهدايا، وكلها أدوار بتتقلب في الليلي.
*/

/* ══════════════════════════════════════════
   شريط الخصم للزائر
   ══════════════════════════════════════════ */

.referral-banner {
    background: linear-gradient(90deg, var(--a-50), var(--p-50));
    border-bottom: 1px solid var(--a-100);
}

.referral-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-3);
}

.referral-banner__icon { font-size: 1.75rem; line-height: 1; }

.referral-banner__text { margin: 0; display: grid; gap: .1rem; }
.referral-banner__text strong { color: var(--text); }
.referral-banner__text span { color: var(--text-muted); font-size: var(--t-sm); }

/* ══════════════════════════════════════════
   كارت الدعوة المتكرر (كورساتي، الملف الشخصي، بعد النجاح)
   ══════════════════════════════════════════ */

.invite-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    margin-block: var(--s-4) var(--s-6);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--a-100);
    border-radius: var(--r-lg);
    background: linear-gradient(100deg, var(--a-50), var(--p-50));
}

.invite-cta__icon {
    flex: none;
    font-size: 2rem;
    line-height: 1;
    animation: invite-wiggle 3s ease-in-out infinite;
}

.invite-cta__body { flex: 1; min-width: 14rem; }
.invite-cta__title { display: block; color: var(--text); font-size: var(--t-md); }
.invite-cta__text { margin: .15rem 0 0; color: var(--text-muted); font-size: var(--t-sm); }
.invite-cta__btn { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); }

@keyframes invite-wiggle {
    0%, 80%, 100% { transform: rotate(0); }
    85% { transform: rotate(-12deg); }
    90% { transform: rotate(12deg); }
    95% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .invite-cta__icon { animation: none; }
}

@media (max-width: 599px) {
    .invite-cta__btn { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   صفحة الطالب
   ══════════════════════════════════════════ */

.invite-hero {
    padding-block: var(--s-7) var(--s-6);
    background:
        radial-gradient(50rem 18rem at 90% -20%, color-mix(in srgb, var(--a-500) 25%, transparent), transparent 70%),
        var(--a-50);
    border-bottom: 1px solid var(--a-100);
}

.invite-hero__inner { display: flex; align-items: center; gap: var(--s-4); }

.invite-hero__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    font-size: 2rem;
    box-shadow: 0 12px 24px -14px var(--a-600);
    transform: rotate(-6deg);
}

.invite-hero__title { margin: 0; font-size: var(--t-2xl); font-weight: var(--fw-bold); }
.invite-hero__subtitle { margin: var(--s-1) 0 0; color: var(--text-muted); max-width: 44rem; }

.invite { display: grid; gap: var(--s-7); max-width: 52rem; }

.invite-card {
    padding: var(--s-6);
    border: 2px dashed var(--a-500);
    border-radius: var(--r-xl);
    background: var(--surface);
    text-align: center;
}

.invite-card__label { margin: 0; color: var(--text-muted); font-weight: var(--fw-semibold); }

.invite-card__code {
    margin: var(--s-2) 0 var(--s-4);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    color: var(--text);
}

.invite-card__link { max-width: 30rem; margin: 0 auto var(--s-4); }
.invite-card__link .form-control { text-align: center; }

.invite-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.invite-card__actions .btn { display: inline-flex; align-items: center; gap: var(--s-2); }

.invite-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
}

.invite-stat {
    display: grid;
    gap: .15rem;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.invite-stat--balance { border-color: var(--a-500); background: var(--a-50); }

.invite-stat__label { color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--fw-semibold); }
.invite-stat__value { font-size: var(--t-2xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.invite-stat__value small { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.invite-stat__hint { color: var(--text-muted); font-size: var(--t-xs); }

.invite-section-title { margin: 0 0 var(--s-3); font-size: var(--t-lg); font-weight: var(--fw-bold); }

.invite-steps ol {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.invite-steps li { display: flex; align-items: flex-start; gap: var(--s-3); }

.invite-steps li strong {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--a-100);
    color: var(--a-700);
}

.invite-steps li span { padding-top: .2rem; }

.invite-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: var(--s-4) 0 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    background: var(--surface-inset);
    color: var(--text-muted);
    font-size: var(--t-sm);
}

.invite-friends {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.invite-friends li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.invite-friends__name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); }
.invite-friends__reward { color: var(--ok-600); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════
   لوحة الأدمن
   ══════════════════════════════════════════ */

.referral-lookup {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
}

.referral-lookup.is-ok { background: var(--ok-50); color: var(--ok-700); }
.referral-lookup.is-error { background: var(--err-50); color: var(--err-600); }
.referral-lookup[hidden] { display: none; }

.referral-admin__balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    background: var(--a-50);
    color: var(--a-700);
}

.referral-admin__balance strong { font-size: var(--t-xl); }

.referral-admin__subtitle {
    margin: var(--s-4) 0 var(--s-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    color: var(--text-2);
}

.referral-admin__list {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
}

.referral-admin__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.referral-admin__list small { display: block; }

.referral-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }

@media (max-width: 599px) {
    .invite-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invite-card { padding: var(--s-5) var(--s-4); }
    .invite-card__code { font-size: var(--t-2xl); }
    .invite-card__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   الزر العائم جنب الواتساب
   ══════════════════════════════════════════
   نفس مقاس زر الواتساب وعلى نفس الخط، جنبه ناحية جوه الشاشة.
   الاسم بيتفرد جنب الهدية لما الماوس يعدّي عليه (على الكمبيوتر). */

.invite-float {
    --wa-size: 3.5rem;

    position: fixed;
    inset-inline-end: calc(var(--s-5) + var(--wa-size) + var(--s-3));
    inset-block-end: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-toast);

    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: var(--wa-size);
    min-width: var(--wa-size);
    padding-inline: calc((var(--wa-size) - 1.9rem) / 2);
    border-radius: var(--r-pill);
    background: linear-gradient(140deg, #fbbf24, #d97706);
    color: #fff;
    box-shadow: var(--sh-4);
    text-decoration: none;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.invite-float:hover,
.invite-float:focus-visible { color: #fff; text-decoration: none; transform: scale(1.06); }
.invite-float:focus-visible { outline: 2px solid #d97706; outline-offset: 3px; }

.invite-float__icon {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    font-size: 1.6rem;
    line-height: 1;
    animation: invite-wiggle 3s ease-in-out infinite;
}

.invite-float__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: var(--fw-bold);
    font-size: var(--t-sm);
    transition: max-width var(--dur) var(--ease);
}

@media (hover: hover) {
    .invite-float:hover .invite-float__label,
    .invite-float:focus-visible .invite-float__label { max-width: 10rem; padding-inline-end: var(--s-1); }
}

/* لو زر الواتساب مش موجود (رقم مش متظبط) أو مستخبّي، الهدية تاخد مكانه في الركن */
body:not(:has(.whatsapp-float)) .invite-float { inset-inline-end: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
    .invite-float__icon { animation: none; }
}

/* وضع التطبيق: فوق شريط التبويبات بنفس مقاس ومكان الواتساب هناك (app.css) */
@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .has-tabbar .invite-float {
        --wa-size: 3.25rem;
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
        inset-inline-end: calc(var(--s-4) + var(--wa-size) + var(--s-3));
    }

    .has-tabbar:not(:has(.whatsapp-float)) .invite-float,
    body:has(.app-cta) .invite-float { inset-inline-end: var(--s-4); }

    /* شريط التثبيت بيغطّي نفس الركن وبيخفي الواتساب — الهدية كمان */
    .has-tabbar .install-bar.is-visible ~ .invite-float { display: none; }

    /* شريط «احجز» السفلي فوق التبويبات: الهدية تطلع فوقه */
    body:has(.app-cta) .invite-float {
        inset-block-end: calc(var(--tabbar-h) + 5rem + env(safe-area-inset-bottom, 0px) + var(--s-2));
    }
}

/* ══════════════════════════════════════════
   زر «؟» سؤال اليوم — فوق الواتساب
   ══════════════════════════════════════════
   نفس العمود بتاع الواتساب (أو الهدية لو الواتساب مش موجود)، فوقه بمسافة.
   بيتشال من الصفحة لما الطالب يجاوب سؤال النهارده. */

.daily-float {
    --wa-size: 3.5rem;

    position: fixed;
    inset-inline-end: var(--s-5);
    inset-block-end: calc(var(--s-6) + var(--wa-size) + var(--s-3) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-toast);

    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: var(--s-2);
    height: var(--wa-size);
    min-width: var(--wa-size);
    padding-inline: calc((var(--wa-size) - 1.9rem) / 2);
    border-radius: var(--r-pill);
    background: linear-gradient(140deg, var(--p-500), var(--p-700));
    color: #fff;
    box-shadow: var(--sh-4);
    text-decoration: none;
    transition: transform var(--dur) var(--ease);
}

.daily-float:hover,
.daily-float:focus-visible { color: #fff; text-decoration: none; transform: scale(1.06); }
.daily-float:focus-visible { outline: 2px solid var(--p-700); outline-offset: 3px; }

.daily-float__icon {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    font-size: 1.9rem;
    font-weight: var(--fw-black);
    line-height: 1;
    animation: invite-wiggle 3s ease-in-out infinite;
}

.daily-float__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: var(--fw-bold);
    font-size: var(--t-sm);
    transition: max-width var(--dur) var(--ease);
}

@media (hover: hover) {
    .daily-float:hover .daily-float__label,
    .daily-float:focus-visible .daily-float__label { max-width: 10rem; padding-inline-start: var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
    .daily-float__icon { animation: none; }
}

/* وضع التطبيق: فوق شريط التبويبات، على عمود الواتساب */
@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .has-tabbar .daily-float {
        --wa-size: 3.25rem;
        inset-inline-end: var(--s-4);
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3) + var(--wa-size) + var(--s-3));
    }

    /* الواتساب بيختفي فوق شريط «احجز» والهدية بتطلع فوقه — «؟» فوق الهدية */
    body:has(.app-cta) .daily-float {
        inset-block-end: calc(var(--tabbar-h) + 5rem + env(safe-area-inset-bottom, 0px) + var(--s-2) + var(--wa-size) + var(--s-3));
    }

    .has-tabbar .install-bar.is-visible ~ .daily-float { display: none; }
}

/* لوحة الإدارة: مفيش واتساب ولا هدية — «؟» ياخد الركن نفسه */
body.console-page .daily-float {
    inset-block-end: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 991.98px) {
    body.console-page.has-tabbar .daily-float {
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
    }
}