:root {
    --edu-navy: #101828;
    --edu-navy-dark: #0c1424;
    --edu-navy-mid: #1a2d4a;
    --edu-orange: #FF5722;
    --edu-orange-light: #ff7043;
    --edu-orange-pale: #fff3ee;
    --edu-orange-border: #ffccbc;
    --portal-bg: #f1f5f9;
    --portal-card: #ffffff;
    --portal-muted: #64748b;
    --portal-border: #e2e8f0;
    --portal-green: #16a34a;
    --portal-radius: 14px;
}

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

/* Font Awesome — أيقونات احترافية في كل التطبيق */
.fa-solid,
.fa-regular,
.fa-brands,
.fas, .far, .fab,
i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}
.fa-solid, .fas { font-weight: 900; }
.fa-regular, .far { font-weight: 400; }
.fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400; }

.portal-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--edu-orange-pale);
    color: var(--edu-orange);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px var(--edu-orange-border);
}
.portal-icon-chip i { font-size: 20px; }
.portal-icon-chip--sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.portal-icon-chip--sm i { font-size: 15px; }
.portal-icon-chip--lg {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}
.portal-icon-chip--lg i { font-size: 24px; }

body.portal-body {
    font-family: 'Tajawal', system-ui, sans-serif;
    background: var(--portal-bg);
    color: var(--edu-navy);
    line-height: 1.5;
    min-height: 100dvh;
    padding-bottom: 72px;
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--edu-navy);
    color: #fff;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.15);
}
.portal-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.portal-logo { height: 32px; width: auto; background: #fff; border-radius: 6px; padding: 2px 6px; }
.portal-header__brand strong { display: block; font-size: 15px; }
.portal-header__brand small { display: block; font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-header__logout {
    color: #fff;
    font-size: 18px;
    padding: 8px;
    text-decoration: none;
}
.portal-header__back,
.portal-header__login {
    color: #fff;
    font-size: 18px;
    padding: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.portal-header--payer .portal-header__back {
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payer-layout--guest .portal-header__brand { flex: 1; min-width: 0; }
.portal-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.portal-header__bell {
    position: relative;
    color: #fff;
    font-size: 18px;
    padding: 8px;
    text-decoration: none;
}
.portal-header__badge {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--edu-orange);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.portal-notification.is-unread {
    background: #fff7ed;
    margin: 0 -12px;
    padding: 12px !important;
    border-radius: 10px;
}
.portal-notification__icon {
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.portal-main { padding: 16px; max-width: 520px; margin: 0 auto; }

.portal-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--portal-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.06);
}
.portal-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--portal-muted);
    text-decoration: none;
}
.portal-nav-item i { font-size: 18px; }
.portal-nav-item.is-active { color: var(--edu-orange); }

.portal-card {
    background: var(--portal-card);
    border-radius: var(--portal-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
    border: 1px solid var(--portal-border);
}
.portal-card h3 { margin: 0 0 8px; font-size: 15px; }
.portal-card p { margin: 0; font-size: 13px; color: var(--portal-muted); }

.portal-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.portal-stat {
    background: var(--portal-card);
    border-radius: var(--portal-radius);
    padding: 14px;
    border: 1px solid var(--portal-border);
    text-align: center;
}
.portal-stat__val { font-size: 22px; font-weight: 800; color: var(--edu-orange); }
.portal-stat__lbl { font-size: 11px; color: var(--portal-muted); margin-top: 2px; }

.portal-list-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
}
.portal-list-item:last-child { border-bottom: none; }
.portal-list-item strong { font-size: 14px; display: block; }
.portal-list-item small { font-size: 12px; color: var(--portal-muted); }

.portal-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.portal-badge--open { background: #fef9c3; color: #a16207; }
.portal-badge--done { background: #dcfce7; color: #15803d; }
.portal-badge--pending { background: var(--edu-orange-pale); color: var(--edu-orange); }
.portal-badge--paid { background: #dcfce7; color: #15803d; }

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.portal-btn--primary { background: var(--edu-orange); color: #fff; }
.portal-btn--navy { background: var(--edu-navy); color: #fff; box-shadow: none; }
.portal-btn--navy:active { opacity: .92; }
.portal-btn--outline { background: #fff; color: var(--edu-navy); border: 1px solid var(--portal-border); }

.portal-form-group { margin-bottom: 12px; }
.portal-form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--portal-muted); }
.portal-input, .portal-select, .portal-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
}

.portal-login-page {
    font-family: 'Tajawal', system-ui, sans-serif;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 87, 34, 0.18), transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(37, 99, 235, 0.15), transparent 30%),
        linear-gradient(145deg, #0b1220 0%, #101828 45%, #1a2d4a 100%);
}
.portal-login-page--trainer {
    background: linear-gradient(145deg, #0b1220 0%, #1a2d4a 100%);
}
.portal-login-shell {
    width: min(100%, 920px);
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: stretch;
}
.portal-login-shell--single {
    grid-template-columns: 1fr;
    max-width: 420px;
}
.portal-login-hero {
    color: #fff;
    padding: 28px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.portal-login-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}
.portal-login-hero h2 {
    margin: 0 0 10px;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.3;
}
.portal-login-hero p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.7;
    max-width: 420px;
}
.portal-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 420px;
}
.portal-login-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 600;
}
.portal-login-features i { color: var(--edu-orange); }
.portal-login-card {
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.portal-login-card__head { text-align: center; margin-bottom: 22px; }
.portal-login-card .portal-logo {
    height: 52px;
    margin: 0 auto 14px;
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
}
.portal-login-card h1 {
    text-align: center;
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--edu-navy);
}
.portal-login-card__head p {
    text-align: center;
    font-size: 13px;
    color: var(--portal-muted);
    margin: 0;
}
.portal-login-form { margin-top: 8px; }
.portal-input-wrap {
    position: relative;
}
.portal-input-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--portal-muted);
    font-size: 14px;
    pointer-events: none;
}
.portal-input-wrap .portal-input {
    padding-right: 38px;
}
.portal-input-wrap--password .portal-input {
    padding-left: 40px;
}
.portal-input-toggle {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-muted);
    font-size: 15px;
    cursor: pointer;
}
.portal-input-toggle:hover {
    color: var(--edu-navy);
    background: rgba(16, 24, 40, 0.05);
}
.portal-btn--login {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    padding: 13px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--edu-orange) 0%, var(--edu-orange-light) 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 87, 34, 0.28);
}
.portal-btn--login:hover {
    background: linear-gradient(135deg, #e64a19 0%, var(--edu-orange) 100%);
}
.portal-login-foot {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
}
.portal-login-foot a {
    color: var(--edu-orange);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.portal-login-foot a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .portal-login-shell {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .portal-login-hero {
        padding: 8px 4px 0;
        text-align: center;
        align-items: center;
    }
    .portal-login-features {
        width: 100%;
    }
}

.portal-alert {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}
.portal-alert--error { background: #fee2e2; color: #b91c1c; }
.portal-alert--success { background: #dcfce7; color: #15803d; }

.portal-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--portal-muted);
    font-size: 14px;
}

.portal-greeting { margin-bottom: 14px; }
.portal-greeting h2 { margin: 0 0 4px; font-size: 20px; }
.portal-greeting p { margin: 0; font-size: 13px; color: var(--portal-muted); }

.portal-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.portal-card__head h3 { margin: 0; }
.portal-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--edu-orange);
    text-decoration: none;
    white-space: nowrap;
}
.portal-card--warn {
    border-color: #fdba74;
    background: #fff7ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.portal-attendance-card h3 { margin-bottom: 12px; }
.portal-attendance-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
    text-align: center;
}
.portal-attendance-times > div {
    background: var(--portal-bg);
    border-radius: 10px;
    padding: 12px;
}
.portal-attendance-label {
    display: block;
    font-size: 11px;
    color: var(--portal-muted);
    margin-bottom: 4px;
}
.portal-attendance-times strong { font-size: 22px; color: var(--edu-navy); }

.portal-list-item--link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.portal-list-item.is-overdue {
    background: #fff7ed;
    margin: 0 -12px;
    padding: 12px !important;
    border-radius: 10px;
}

.portal-pull-indicator {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(-40px);
    z-index: 40;
    background: var(--edu-navy);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.portal-pull-indicator.is-visible { opacity: 1; }

.portal-btn.is-loading { opacity: .7; pointer-events: none; }

.portal-stats--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 400px) {
    .portal-stats--4 { grid-template-columns: repeat(4, 1fr); }
}

.portal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    background: var(--portal-card);
    border-radius: var(--portal-radius);
    padding: 10px 12px;
    border: 1px solid var(--portal-border);
}
.portal-month-nav__label { font-weight: 800; font-size: 15px; }
.portal-month-nav__btn {
    color: var(--edu-navy);
    padding: 8px 12px;
    text-decoration: none;
    font-size: 16px;
}

.portal-attendance-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
}
.portal-attendance-row.is-late { background: #fff7ed; margin: 0 -12px; padding: 12px !important; border-radius: 10px; }
.portal-attendance-row__times {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--portal-muted);
}
.portal-attendance-row__hours { font-weight: 700; font-size: 12px; white-space: nowrap; }

.portal-payslip-item {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.portal-payslip-item__amount { font-weight: 800; color: var(--edu-orange); white-space: nowrap; }

.portal-payslip-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.portal-payslip-detail__head h3 { margin: 0; }
.portal-payslip-detail__net { font-size: 20px; font-weight: 800; color: var(--edu-orange); }
.portal-payslip-section { font-size: 12px; color: var(--portal-muted); margin: 12px 0 4px; font-weight: 700; }
.portal-payslip-line {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0 !important;
}
.portal-payslip-line.is-deduction strong { color: #b91c1c; }
.portal-payslip-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid var(--edu-navy);
    font-weight: 800;
    font-size: 16px;
}

.portal-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 14px;
}
.portal-quick-link:last-child { border-bottom: none; }
.portal-quick-link i { color: var(--edu-orange); width: 20px; text-align: center; }

.portal-card--link { transition: box-shadow .15s; }
.portal-card--link:active { box-shadow: 0 0 0 2px var(--edu-orange); }

.portal-performance-hero { background: linear-gradient(135deg, #101828, #1a2d4a); color: #fff; border: none; }
.portal-performance-rate { display: flex; align-items: center; gap: 16px; }
.portal-performance-rate p { margin: 4px 0 0; font-size: 12px; opacity: .85; }
.portal-performance-rate__ring {
    width: 72px; height: 72px; border-radius: 50%;
    background: conic-gradient(var(--edu-orange) calc(var(--pct) * 1%), rgba(255,255,255,.15) 0);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.portal-performance-rate__ring span {
    width: 56px; height: 56px; border-radius: 50%; background: #101828;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}

.portal-finance-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px;
}
.portal-finance-grid > div {
    background: var(--portal-bg); padding: 10px; border-radius: 8px;
}
.portal-finance-grid span { display: block; color: var(--portal-muted); margin-bottom: 4px; }
.portal-finance-grid strong { font-size: 14px; }

.portal-kpi-item { margin-bottom: 14px; }
.portal-kpi-item__head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.portal-progress { height: 8px; background: var(--portal-bg); border-radius: 4px; overflow: hidden; }
.portal-progress__bar { height: 100%; background: var(--edu-orange); border-radius: 4px; transition: width .3s; }

.portal-review-stars { color: #f59e0b; font-size: 16px; letter-spacing: 1px; margin-bottom: 4px; }

.portal-mini-stats {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; font-weight: 600;
}
.portal-mini-stats span {
    background: var(--portal-bg); padding: 6px 10px; border-radius: 8px;
}

.portal-role-card { border-right: 3px solid var(--edu-orange); }

.portal-referral-box {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--portal-bg); padding: 12px; border-radius: 10px; margin-bottom: 8px;
}
.portal-referral-box--large { justify-content: space-between; }
.portal-referral-box small { display: block; font-size: 11px; color: var(--portal-muted); }
.portal-referral-box strong { font-size: 18px; letter-spacing: 1px; }

.portal-btn--sm { padding: 8px 12px; font-size: 12px; width: auto; }

.portal-directory-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
}
.portal-directory-item:last-child { border-bottom: none; }
.portal-directory-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--edu-navy); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.portal-directory-info { flex: 1; min-width: 0; }
.portal-directory-info strong { display: block; font-size: 14px; }
.portal-directory-info small { display: block; font-size: 11px; color: var(--portal-muted); }
.portal-directory-contact { display: flex; gap: 8px; }
.portal-directory-contact a {
    color: var(--edu-orange); font-size: 16px; padding: 8px;
}

.portal-announcement {
    padding: 16px 0; border-bottom: 1px solid var(--portal-border);
}
.portal-announcement:last-child { border-bottom: none; }
.portal-announcement__meta {
    display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--portal-muted); margin-bottom: 6px;
}
.portal-announcement__meta i { color: var(--edu-orange); }
.portal-announcement h3 { margin: 0 0 8px; font-size: 16px; }
.portal-announcement__body { font-size: 14px; line-height: 1.6; color: var(--edu-navy); }

.portal-pin-input {
    text-align: center; font-size: 24px; letter-spacing: 8px; font-weight: 800;
}
.portal-lock-card { max-width: 360px; }

.portal-offline-banner {
    position: sticky; top: 0; z-index: 60;
    background: #b45309; color: #fff; text-align: center;
    padding: 8px 12px; font-size: 12px; font-weight: 700;
}

/* ——— تطبيق المقسّطين (EDU Pay) — ألوان مطابقة لمنصة EDU ——— */
.portal-payer {
    --payer-navy: var(--edu-navy);
    --payer-navy-dark: var(--edu-navy-dark);
    --payer-navy-mid: var(--edu-navy-mid);
    --payer-orange: var(--edu-orange);
    --payer-teal: var(--edu-navy);
    --payer-teal-dark: var(--edu-navy-dark);
}
.portal-header--payer {
    background: linear-gradient(135deg, var(--edu-navy-dark), var(--edu-navy));
}
.portal-bottom-nav--payer .portal-nav-item.is-active { color: var(--edu-orange); }
.portal-bottom-nav--payer .portal-nav-item.is-active i { color: var(--edu-orange); }
.portal-login-page--payer,
.portal-login-page--employee {
    align-items: center;
    justify-content: center;
    padding:
        max(24px, env(safe-area-inset-top))
        20px
        max(24px, env(safe-area-inset-bottom));
    background: #ffffff;
}
.payer-login {
    width: min(100%, 400px);
    margin: 0 auto;
    flex: 0 0 auto;
}
.payer-login__brand {
    text-align: center;
    margin-bottom: 28px;
}
.payer-login__logo {
    height: 128px;
    width: auto;
    max-width: min(340px, 92vw);
    margin: 0 auto 20px;
    display: block;
    object-fit: contain;
}
.payer-login__title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--edu-navy);
    letter-spacing: -0.02em;
}
.payer-login__tagline {
    margin: 0;
    font-size: 14px;
    color: var(--portal-muted);
    font-weight: 500;
}
.payer-login__card {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.payer-login__card-head {
    margin-bottom: 20px;
    text-align: center;
}
.payer-login__card-head h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--edu-navy);
}
.payer-login__card-head p {
    margin: 0;
    font-size: 13px;
    color: var(--portal-muted);
    line-height: 1.6;
}
.payer-login__alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.payer-login__form { margin-top: 0; }
.payer-login__form .portal-form-group:last-of-type {
    margin-bottom: 18px;
}
.payer-login__form .portal-input {
    background: #f8fafc;
    border-color: #e2e8f0;
    transition: border-color .15s, background .15s;
}
.payer-login__form .portal-input:focus {
    outline: none;
    border-color: var(--edu-navy);
    background: #fff;
}
.payer-login__submit {
    padding: 13px 16px;
    font-size: 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--edu-orange) 0%, var(--edu-orange-light) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.35);
}
.payer-login__submit:hover {
    background: linear-gradient(135deg, #e64a19 0%, var(--edu-orange) 100%);
}
.payer-login__features {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
}
.payer-login__features li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--portal-muted);
}
.payer-login__features i {
    font-size: 12px;
    color: var(--edu-navy);
    opacity: .7;
}
.payer-login__footer {
    margin-top: 28px;
    text-align: center;
}
.payer-login__legal {
    margin: 0;
    font-size: 12px;
    color: var(--portal-muted);
}
.payer-login__legal a {
    color: var(--portal-muted);
    text-decoration: none;
    font-weight: 600;
}
.payer-login__legal a:hover {
    color: var(--edu-navy);
}
.payer-login__legal span {
    margin: 0 6px;
    opacity: .4;
}
.portal-login-hero--payer .portal-login-hero__badge {
    background: rgba(255, 87, 34, 0.2);
    color: #ffe0d6;
}
.portal-login-card--payer { border-top: 4px solid var(--edu-orange); }
.portal-btn--payer {
    background: linear-gradient(135deg, var(--edu-orange-light), var(--edu-orange));
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(255, 87, 34, 0.28);
}
.portal-btn--payer-outline { border-color: var(--edu-orange); color: var(--edu-orange); }
.portal-card--payer-highlight { border-right: 4px solid var(--edu-orange); }
.portal-stats--payer .portal-stat--warn .portal-stat__val { color: #b91c1c; }
.portal-plan-item {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--portal-border);
    text-decoration: none; color: inherit;
}
.portal-plan-item:last-child { border-bottom: none; }
.portal-plan-item__top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.portal-plan-item__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--portal-muted); margin-bottom: 8px; }
.portal-progress { background: #e2e8f0; border-radius: 8px; height: 8px; overflow: hidden; }
.portal-progress__bar { background: linear-gradient(90deg, var(--edu-navy), var(--edu-navy-mid)); height: 100%; border-radius: 8px; }
.portal-list-item--warn { background: #fef2f2; margin: 0 -16px; padding: 12px 16px; border-radius: 8px; }
.portal-directory-avatar--payer { background: var(--edu-navy); }
.portal-login-footnote { font-size: 12px; color: var(--portal-muted); text-align: center; margin-top: 16px; }
.portal-login-footnote a { color: var(--edu-orange); }
.portal-payer .badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
}
.portal-payer .badge-blue { background: var(--edu-orange-pale); color: var(--edu-orange); }
.portal-payer .badge-green { background: #dcfce7; color: #15803d; }
.portal-payer .badge-yellow { background: #fef9c3; color: #a16207; }
.portal-payer .badge-orange { background: #ffedd5; color: #c2410c; }
.portal-payer .badge-red { background: #fee2e2; color: #b91c1c; }
.portal-payer .badge-gray { background: #f1f5f9; color: #64748b; }

/* بوابة الدفع - تصميم محسّن */
.payer-pay-hero {
    position: relative;
    margin: -12px -16px 14px;
    padding: 22px 18px 20px;
    overflow: hidden;
    border-radius: 0 0 22px 22px;
}
.payer-pay-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--edu-navy) 0%, var(--edu-navy-mid) 100%);
}
.payer-pay-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(255, 87, 34, .25), transparent 45%);
}
.payer-pay-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.payer-pay-hero__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.payer-pay-hero__icon i { display: inline-block; }
.payer-pay-hero__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.payer-pay-hero__sub { margin: 0; font-size: 12px; opacity: .85; }

.payer-pay-flash { margin-bottom: 12px; }

.payer-pay-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1px solid #fed7aa;
    background: linear-gradient(135deg, #fff7ed, #fff);
}
.payer-pay-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffedd5;
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-pay-alert__icon i { display: inline-block; }
.payer-pay-alert__body { flex: 1; min-width: 0; }
.payer-pay-alert__body strong { display: block; font-size: 14px; color: #9a3412; margin-bottom: 4px; }
.payer-pay-alert__body p { margin: 0; font-size: 12px; color: #c2410c; line-height: 1.55; }
.payer-pay-alert__btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-pay-plan {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 1px solid var(--edu-orange-pale);
    background: linear-gradient(135deg, #fff8f5, #fff);
}
.payer-pay-plan__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--edu-orange-pale);
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-pay-plan__icon i { display: inline-block; }
.payer-pay-plan__tag {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--edu-orange);
    margin-bottom: 2px;
}
.payer-pay-plan__body strong {
    display: block;
    font-size: 14px;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-pay-plan__body p {
    margin: 0;
    font-size: 12px;
    color: var(--portal-muted);
}

.payer-pay-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.payer-pay-steps__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: var(--portal-muted);
}
.payer-pay-steps__item.is-active {
    border-color: var(--edu-orange-border);
    background: #fff8f5;
    color: var(--edu-navy);
}
.payer-pay-steps__item.is-done {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}
.payer-pay-steps__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.payer-pay-steps__item.is-active .payer-pay-steps__num {
    background: var(--edu-navy);
    color: #fff;
}
.payer-pay-steps__item.is-done .payer-pay-steps__num {
    background: #16a34a;
    color: #fff;
}

.payer-pay-due {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--edu-navy), var(--edu-navy-mid));
    color: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .2);
}
.payer-pay-due__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.payer-pay-due__eyebrow {
    display: block;
    font-size: 10px;
    opacity: .75;
    margin-bottom: 4px;
}
.payer-pay-due__plan {
    display: block;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 2px;
}
.payer-pay-due__inst {
    display: block;
    font-size: 12px;
    opacity: .85;
}
.payer-pay-due__chip {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, .15);
}
.payer-pay-due--overdue { background: #fecaca; color: #991b1b; }
.payer-pay-due--today { background: #fde68a; color: #92400e; }
.payer-pay-due--soon { background: rgba(255, 255, 255, .18); color: #fff; }
.payer-pay-due__bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.payer-pay-due__lbl {
    display: block;
    font-size: 10px;
    opacity: .7;
    margin-bottom: 2px;
}
.payer-pay-due__amount {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.payer-pay-due__date {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
}

.payer-pay-card {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}
.payer-pay-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.payer-pay-card__head--row { flex-wrap: wrap; }
.payer-pay-card__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--edu-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.payer-pay-card__head h3 i { color: var(--edu-navy); font-size: 14px; }
.payer-pay-card__count {
    font-size: 11px;
    color: var(--portal-muted);
    font-weight: 600;
}
.payer-pay-back {
    font-size: 12px;
    font-weight: 700;
    color: var(--edu-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payer-pay-empty {
    text-align: center;
    padding: 20px 10px;
}
.payer-pay-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.payer-pay-empty__icon i { display: inline-block; }
.payer-pay-empty strong { display: block; font-size: 15px; margin-bottom: 6px; }
.payer-pay-empty p { margin: 0 0 14px; font-size: 13px; color: var(--portal-muted); }
.payer-pay-empty__btn { max-width: 220px; margin: 0 auto; }

.payer-pay-methods {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.payer-pay-method { display: block; cursor: pointer; }
.payer-pay-method__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payer-pay-method__card {
    position: relative;
    display: block;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #fff;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.payer-pay-method__radio:checked + .payer-pay-method__card {
    border-color: var(--edu-navy);
    background: #f8fafc;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .08);
}
.payer-pay-method__check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all .12s;
}
.payer-pay-method__radio:checked + .payer-pay-method__card .payer-pay-method__check {
    border-color: var(--edu-navy);
    background: var(--edu-navy);
    color: #fff;
}
.payer-pay-method__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 28px;
}
.payer-pay-method__img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.payer-pay-method__img--fallback {
    background: #e2e8f0;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.payer-pay-method__img--fallback i { display: inline-block; }
.payer-pay-method__info {
    flex: 1;
    min-width: 0;
}
.payer-pay-method__info strong {
    display: block;
    font-size: 14px;
    color: var(--edu-navy);
}
.payer-pay-method__info em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--portal-muted);
    margin-top: 2px;
}
.payer-pay-method__hint {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: var(--portal-muted);
    line-height: 1.55;
}
.payer-pay-method__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--portal-muted);
}
.payer-pay-method__meta b { color: var(--edu-navy); font-weight: 700; }

.payer-pay-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--edu-orange-pale);
    background: linear-gradient(135deg, #f8fafc, #fff);
}
.payer-pay-selected__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--edu-orange-pale);
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.payer-pay-selected__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.payer-pay-selected__icon i { display: inline-block; font-size: 20px; }
.payer-pay-selected__body { flex: 1; min-width: 180px; }
.payer-pay-selected__body strong {
    display: block;
    font-size: 15px;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-pay-selected__body p {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--portal-muted);
    line-height: 1.55;
}
.payer-pay-selected__details {
    display: grid;
    gap: 6px;
}
.payer-pay-selected__details span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.payer-pay-selected__details em {
    font-style: normal;
    color: var(--portal-muted);
}
.payer-pay-selected__details b {
    color: var(--edu-navy);
    font-weight: 700;
    text-align: left;
    word-break: break-all;
}

.payer-pay-field {
    margin-bottom: 14px;
}
.payer-pay-field > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--edu-navy);
    margin-bottom: 8px;
}
.payer-pay-input-wrap {
    position: relative;
}
.payer-pay-input-wrap > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.payer-pay-input {
    padding-right: 36px !important;
    font-size: 14px;
}

.payer-pay-upload { display: block; cursor: pointer; }
.payer-pay-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.payer-pay-upload__box {
    display: block;
    padding: 18px 14px;
    border-radius: 14px;
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    text-align: center;
    transition: border-color .12s, background .12s;
}
.payer-pay-upload:hover .payer-pay-upload__box,
.payer-pay-upload:focus-within .payer-pay-upload__box {
    border-color: var(--edu-navy);
    background: #fff8f5;
}
.payer-pay-upload__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--edu-orange-pale);
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.payer-pay-upload__icon i { display: inline-block; }
.payer-pay-upload__text {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-pay-upload__box small {
    display: block;
    font-size: 11px;
    color: var(--portal-muted);
}

.payer-pay-submit {
    width: 100%;
    margin-top: 4px;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
}

.payer-pay-trust {
    padding: 18px;
    margin-bottom: 8px;
    border-radius: 18px;
    background: linear-gradient(140deg, var(--edu-navy) 0%, var(--edu-navy-mid) 100%);
    color: #fff;
}
.payer-pay-trust__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.payer-pay-trust__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 11px;
    font-weight: 700;
}
.payer-pay-trust__badge i { display: inline-block; }
.payer-pay-trust__brand {
    font-size: 12px;
    opacity: .8;
    font-weight: 700;
}
.payer-pay-trust h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
}
.payer-pay-trust p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}
.payer-pay-trust small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
}
.payer-pay-trust small i { display: inline-block; }

.payer-pay-form { margin: 0; }
.payer-pay-form--details { margin-top: 4px; }

.payer-method-card {
    padding: 14px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid var(--edu-orange-pale);
    border-radius: 12px;
}
.payer-method-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.payer-copy-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--edu-navy);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.payer-copy-btn:disabled { opacity: .45; cursor: not-allowed; }
.payer-copy-btn--lg {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
}
@media (min-width: 480px) {
    .payer-copy-btn--lg { width: auto; align-self: center; }
    .payer-pay-steps__item span:last-child { font-size: 12px; }
}
.payer-marketing-banner {
    background: linear-gradient(140deg,var(--edu-navy) 0%,var(--edu-navy-mid) 100%);
    color: #fff;
    border: none;
}
.payer-method-list-item {
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
}
.payer-copy-toast {
    position: fixed;
    bottom: 86px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--edu-navy);
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 120;
}
.payer-copy-toast.is-show { opacity: 1; }
.payer-submit-btn {
    background: linear-gradient(135deg, var(--edu-orange-light), var(--edu-orange)) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 8px 20px rgba(255, 87, 34, 0.28);
}

.payer-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    margin: 0 4px;
    vertical-align: middle;
}
.payer-live-dot.is-pulse {
    animation: payer-live-pulse 1.2s ease-in-out infinite;
}
@keyframes payer-live-pulse {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1); }
}

.payer-activation-toast {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: min(92%, 420px);
    background: var(--edu-navy);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 130;
}
.payer-activation-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.payer-activation-toast strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.payer-activation-toast span {
    display: block;
    font-size: 12px;
    opacity: .9;
    line-height: 1.6;
}
.payer-activation-toast.is-success {
    background: linear-gradient(135deg, #14532d, #15803d);
}
.payer-activation-toast.is-warn {
    background: linear-gradient(135deg, #9a3412, #c2410c);
}

/* ——— الصفحة الرئيسية للمقسّط ——— */
.payer-home-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.22);
}
.payer-home-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--edu-navy-dark) 0%, var(--edu-navy) 45%, var(--edu-navy-mid) 100%);
}
.payer-home-hero__bg::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    top: -60px;
    left: -40px;
}
.payer-home-hero__content {
    position: relative;
    z-index: 1;
    padding: 18px 16px 16px;
    color: #fff;
}
.payer-home-hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.payer-home-hero__avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}
.payer-home-hero__eyebrow {
    display: block;
    font-size: 11px;
    opacity: 0.75;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.payer-home-hero__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}
.payer-home-hero__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.payer-home-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}
.payer-home-status--ok {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}
.payer-home-hero__notif {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 87, 34, 0.35);
}

.payer-home-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74;
}
.payer-home-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: #c2410c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.payer-home-alert__body { flex: 1; min-width: 0; }
.payer-home-alert__body strong { display: block; font-size: 14px; margin-bottom: 4px; color: #9a3412; }
.payer-home-alert__body p { margin: 0; font-size: 12px; color: #c2410c; line-height: 1.5; }
.payer-home-alert__btn {
    align-self: center;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.payer-home-stat {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
}
.payer-home-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 6px;
    border-radius: 10px;
    background: #fff8f5;
    color: var(--edu-navy);
    font-size: 14px;
}
.payer-home-stat__val {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--edu-navy);
    line-height: 1.2;
    word-break: break-word;
}
.payer-home-stat__lbl {
    display: block;
    font-size: 10px;
    color: var(--portal-muted);
    margin-top: 3px;
}
.payer-home-stat--warn .payer-home-stat__icon { background: #fee2e2; color: #b91c1c; }
.payer-home-stat--warn .payer-home-stat__val { color: #b91c1c; }

.payer-home-paid-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--portal-muted);
    margin: 0 0 12px;
}
.payer-home-paid-note i { color: #16a34a; }
.payer-home-paid-note strong { color: var(--edu-navy); }

.payer-due-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--edu-orange-pale);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}
.payer-due-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.payer-due-card__label {
    display: block;
    font-size: 12px;
    color: var(--portal-muted);
    margin-bottom: 6px;
}
.payer-due-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.payer-due-chip--soon { background: var(--edu-orange-pale); color: var(--edu-orange); }
.payer-due-chip--today { background: #fef9c3; color: #a16207; }
.payer-due-chip--overdue { background: #fee2e2; color: #b91c1c; }
.payer-due-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--edu-navy), var(--edu-navy-mid));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.payer-due-card__amount {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--edu-navy);
    letter-spacing: -0.02em;
}
.payer-due-card__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--edu-navy);
}
.payer-due-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--portal-muted);
    margin-bottom: 14px;
}
.payer-due-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.payer-due-card__btn { margin-top: 0; }

.payer-home-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.payer-home-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    padding: 10px 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--portal-border);
    text-decoration: none;
    color: var(--edu-navy);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
    transition: transform .12s, box-shadow .12s;
}
.payer-home-action:active {
    transform: scale(0.97);
}
.payer-home-action i {
    font-size: 18px;
    color: var(--edu-navy);
}
.payer-home-action--primary {
    background: linear-gradient(135deg, var(--edu-navy-mid), var(--edu-navy));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.28);
}
.payer-home-action--primary i { color: #fff; }
.payer-home-action__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--edu-orange);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payer-home-plans { padding-bottom: 8px; }
.payer-home-plans__head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.payer-home-plans__head h3 i { color: var(--edu-navy); }
.payer-home-plans__count {
    font-size: 11px;
    color: var(--portal-muted);
    font-weight: 600;
}

.payer-plan-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--portal-border);
    text-decoration: none;
    color: inherit;
}
.payer-plan-card:last-child { border-bottom: none; padding-bottom: 4px; }
.payer-plan-card__main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.payer-plan-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--edu-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-plan-card__info { flex: 1; min-width: 0; }
.payer-plan-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.payer-plan-card__top strong {
    font-size: 14px;
    line-height: 1.35;
}
.payer-plan-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--portal-muted);
    margin-bottom: 8px;
}
.payer-plan-card__progress { height: 6px; }
.payer-plan-card__chevron {
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
}

.payer-home-empty {
    text-align: center;
    padding: 28px 12px 12px;
}
.payer-home-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.payer-home-empty strong { display: block; font-size: 15px; margin-bottom: 6px; }
.payer-home-empty p { margin: 0 0 14px; font-size: 13px; color: var(--portal-muted); }
.payer-home-empty__btn { max-width: 220px; margin: 0 auto; }

.payer-home-activation-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--portal-muted);
    margin-top: 4px;
    padding-bottom: 8px;
}
.payer-home-activation-note a {
    color: var(--edu-navy);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 380px) {
    .payer-home-stat__val { font-size: 13px; }
    .payer-home-action span { font-size: 10px; }
    .payer-due-card__amount { font-size: 22px; }
}

/* ——— صفحة تفعيل التقسيط ——— */
.payer-act-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--edu-navy);
    text-decoration: none;
    margin-bottom: 12px;
}
.payer-act-flash { margin-bottom: 12px; }

.payer-act-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.2);
}
.payer-act-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--edu-navy-dark) 0%, var(--edu-navy) 50%, var(--edu-navy-mid) 100%);
}
.payer-act-hero__bg::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    bottom: -50px;
    left: -30px;
}
.payer-act-hero__content {
    position: relative;
    z-index: 1;
    padding: 20px 16px 18px;
    text-align: center;
    color: #fff;
}
.payer-act-hero__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.payer-act-hero__title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
}
.payer-act-hero__sub {
    margin: 0 0 12px;
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.55;
}
.payer-act-hero__badge .badge { font-size: 12px; padding: 4px 10px; }

.payer-act-status-card {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05);
}
.payer-act-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.payer-act-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    border-radius: 999px;
}
.payer-act-chip i { color: var(--edu-navy); font-size: 10px; }
.payer-act-sync {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: 12px;
}
.payer-act-sync__time {
    color: var(--portal-muted);
    font-weight: 600;
}
.payer-act-progress__head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--portal-muted);
}
.payer-act-progress__head strong { color: var(--edu-navy); }

.payer-act-success-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #86efac;
}
.payer-act-success-banner > i {
    font-size: 28px;
    color: #16a34a;
    flex-shrink: 0;
}
.payer-act-success-banner strong { display: block; font-size: 14px; color: #14532d; }
.payer-act-success-banner p { margin: 4px 0 0; font-size: 12px; color: #15803d; }
.payer-act-success-banner__btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-act-card { padding-bottom: 10px; }
.payer-act-card__head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.payer-act-card__head h3 i { color: var(--edu-navy); }

.payer-act-timeline { padding: 4px 0 0; }
.payer-act-step {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}
.payer-act-step:last-child { padding-bottom: 0; }
.payer-act-step:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.payer-act-step.is-done:not(:last-child)::before { background: #86efac; }
.payer-act-step.is-active:not(:last-child)::before { background: var(--edu-orange-border); }
.payer-act-step__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.payer-act-step.is-done .payer-act-step__dot {
    border-color: #16a34a;
    background: #16a34a;
    box-shadow: inset 0 0 0 3px #fff;
}
.payer-act-step.is-active .payer-act-step__dot {
    border-color: var(--edu-orange);
    background: var(--edu-orange);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}
.payer-act-step.is-rejected .payer-act-step__dot {
    border-color: #dc2626;
    background: #dc2626;
}
.payer-act-step__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.payer-act-step__body strong { font-size: 13px; line-height: 1.4; }

.payer-act-form-card { overflow: hidden; }
.payer-act-form { margin-top: 4px; }
.payer-act-form-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
}
.payer-act-delegate {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
}
.payer-act-delegate__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--edu-navy);
}
.payer-act-ind-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8f5;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 600;
    color: var(--edu-navy-mid);
    line-height: 1.5;
}
.payer-act-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 400px) {
    .payer-act-form-row { grid-template-columns: 1fr; }
}

.payer-act-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.payer-act-type-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--portal-muted);
    transition: border-color .15s, background .15s, color .15s;
}
.payer-act-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.payer-act-type-opt i { font-size: 20px; color: #94a3b8; }
.payer-act-type-opt.is-active {
    border-color: var(--edu-navy);
    background: #fff8f5;
    color: var(--edu-navy);
}
.payer-act-type-opt.is-active i { color: var(--edu-navy); }

.payer-act-docs {
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.payer-act-docs__head strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-act-docs__head small {
    display: block;
    font-size: 11px;
    color: var(--portal-muted);
    margin-bottom: 12px;
}
.payer-act-file-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.payer-act-file-zone:hover { border-color: var(--edu-navy); background: #f8fafc; }
.payer-act-file-zone.has-file {
    border-color: #16a34a;
    background: #f0fdf4;
}
.payer-act-file-zone input { display: none; }
.payer-act-file-zone i { font-size: 22px; color: var(--edu-navy); }
.payer-act-file-zone span { font-size: 12px; font-weight: 700; color: var(--portal-muted); }
.payer-act-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--edu-navy);
    text-decoration: none;
}
.payer-act-submit {
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.22);
}

.payer-act-events { padding-top: 4px; }
.payer-act-event {
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
}
.payer-act-event:last-child { padding-bottom: 0; }
.payer-act-event__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--edu-navy);
    margin-top: 6px;
    flex-shrink: 0;
    opacity: 0.35;
}
.payer-act-event__body strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.4;
}
.payer-act-event__body small {
    font-size: 11px;
    color: var(--portal-muted);
}
.payer-act-events-empty { padding: 20px 12px; }

/* ——— صفحة إشعارات المقسّط ——— */
.payer-notif-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.2);
}
.payer-notif-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--edu-navy-dark) 0%, var(--edu-navy) 50%, var(--edu-navy-mid) 100%);
}
.payer-notif-hero__bg::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    top: -40px;
    left: -20px;
}
.payer-notif-hero__content {
    position: relative;
    z-index: 1;
    padding: 20px 16px 18px;
    text-align: center;
    color: #fff;
}
.payer-notif-hero__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.payer-notif-hero__title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
}
.payer-notif-hero__sub {
    margin: 0;
    font-size: 12px;
    opacity: 0.85;
}

.payer-notif-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.payer-notif-stat {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
}
.payer-notif-stat__val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--edu-navy);
    line-height: 1.2;
}
.payer-notif-stat__lbl {
    display: block;
    font-size: 11px;
    color: var(--portal-muted);
    margin-top: 4px;
}
.payer-notif-stat--active .payer-notif-stat__val { color: var(--edu-orange); }
.payer-notif-stat--active {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed, #fff);
}

.payer-notif-toolbar { margin-bottom: 12px; }
.payer-notif-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--edu-navy);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.payer-notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.payer-notif-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05);
}
.payer-notif-card.is-unread {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fffbf5 0%, #fff 100%);
    box-shadow: 0 4px 16px rgba(255, 87, 34, 0.08);
}
.payer-notif-card__dot {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edu-orange);
}
.payer-notif-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.payer-notif-card__icon--activation {
    background: var(--edu-orange-pale);
    color: var(--edu-orange);
}
.payer-notif-card__icon--installment {
    background: #fff8f5;
    color: var(--edu-navy);
}
.payer-notif-card__icon--general {
    background: #f1f5f9;
    color: #64748b;
}
.payer-notif-card__body {
    flex: 1;
    min-width: 0;
}
.payer-notif-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.payer-notif-card__type {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--edu-navy);
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 999px;
}
.payer-notif-card.is-unread .payer-notif-card__type {
    background: #ffedd5;
    color: #c2410c;
}
.payer-notif-card__time {
    font-size: 10px;
    color: var(--portal-muted);
    white-space: nowrap;
}
.payer-notif-card__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--edu-navy);
}
.payer-notif-card__text {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--portal-muted);
    white-space: pre-line;
}
.payer-notif-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.payer-notif-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--edu-navy), var(--edu-navy-mid));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.payer-notif-card__form { margin: 0; }
.payer-notif-card__read {
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--edu-navy);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.payer-notif-empty {
    text-align: center;
    padding: 40px 16px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}
.payer-notif-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.payer-notif-empty strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--edu-navy);
}
.payer-notif-empty p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--portal-muted);
    line-height: 1.5;
}
.payer-notif-empty__btn {
    max-width: 220px;
    margin: 0 auto;
}

/* ——— صفحة طلب التقسيط ——— */
.payer-req-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.2);
}
.payer-req-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--edu-navy-dark) 0%, var(--edu-navy) 48%, var(--edu-navy-mid) 100%);
}
.payer-req-hero__content {
    position: relative;
    z-index: 1;
    padding: 20px 16px 18px;
    text-align: center;
    color: #fff;
}
.payer-req-hero__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.payer-req-hero__title { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.payer-req-hero__sub { margin: 0; font-size: 12px; opacity: 0.85; line-height: 1.5; }
.payer-req-flash { margin-bottom: 12px; }

.payer-req-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.payer-req-stat {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
}
.payer-req-stat__val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--edu-navy);
    line-height: 1.2;
}
.payer-req-stat__lbl {
    display: block;
    font-size: 10px;
    color: var(--portal-muted);
    margin-top: 4px;
}
.payer-req-stat--pending .payer-req-stat__val { color: #c2410c; }
.payer-req-stat--pending { border-color: #fed7aa; background: #fffbf5; }
.payer-req-stat--ok .payer-req-stat__val { color: #16a34a; font-size: 16px; }
.payer-req-stat--ok { border-color: #bbf7d0; background: #f0fdf4; }

.payer-req-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74;
}
.payer-req-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: #c2410c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.payer-req-alert__body { flex: 1; min-width: 0; }
.payer-req-alert__body strong { display: block; font-size: 14px; color: #9a3412; margin-bottom: 4px; }
.payer-req-alert__body p { margin: 0; font-size: 12px; color: #c2410c; line-height: 1.5; }
.payer-req-alert__btn {
    align-self: center;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-req-card { padding-bottom: 10px; overflow: visible; }
.payer-req-card.payer-req-card--history { padding: 16px 16px 8px; }
.payer-req-card__head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.payer-req-card__head h3 i { color: var(--edu-navy); }
.payer-req-count { font-size: 11px; color: var(--portal-muted); font-weight: 600; }

.payer-req-form { margin-top: 4px; }
.payer-req-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.payer-req-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--edu-navy);
}
.payer-req-hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--portal-muted);
}
.payer-req-select { font-size: 13px; }

.payer-req-preview {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--edu-orange-pale);
}
.payer-req-preview__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.payer-req-preview__body { flex: 1; min-width: 0; }
.payer-req-preview__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--edu-orange-pale);
    color: var(--edu-orange);
    margin-bottom: 6px;
}
.payer-req-preview__body strong {
    display: block;
    font-size: 14px;
    color: var(--edu-navy);
    margin-bottom: 4px;
    line-height: 1.35;
}
.payer-req-preview__body p {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--portal-muted);
    line-height: 1.45;
}
.payer-req-preview__meta { font-size: 11px !important; font-weight: 600; }

.payer-req-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 400px) {
    .payer-req-form-row { grid-template-columns: 1fr; }
    .payer-req-stat__lbl { font-size: 9px; }
}

.payer-req-rules {
    background: linear-gradient(135deg, #fff8f5, #f8fafc);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.payer-req-rules strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--edu-navy);
    margin-bottom: 8px;
}
.payer-req-rules ul {
    margin: 0;
    padding: 0 18px 0 0;
    font-size: 12px;
    color: #334155;
    line-height: 1.7;
}
.payer-req-submit {
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.22);
}

.payer-req-locked {
    text-align: center;
    padding: 28px 12px;
    color: var(--portal-muted);
}
.payer-req-locked i {
    font-size: 28px;
    color: #94a3b8;
    margin-bottom: 10px;
}
.payer-req-locked p { margin: 0 0 14px; font-size: 13px; }
.payer-req-locked__btn { max-width: 220px; margin: 0 auto; }

.payer-req-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.payer-req-card-item {
    position: relative;
    display: flex;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.04);
}
.payer-req-card-item__accent {
    width: 4px;
    flex-shrink: 0;
    background: #f59e0b;
}
.payer-req-card-item--approved .payer-req-card-item__accent { background: #16a34a; }
.payer-req-card-item--rejected .payer-req-card-item__accent { background: #dc2626; }
.payer-req-card-item--pending .payer-req-card-item__accent { background: #f59e0b; }

.payer-req-card-item__content {
    flex: 1;
    min-width: 0;
    padding: 12px 12px 12px 10px;
}
.payer-req-card-item__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.payer-req-card-item__main {
    flex: 1;
    min-width: 0;
}
.payer-req-card-item__status {
    margin-bottom: 6px;
}
.payer-req-card-item__status .badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.payer-req-card-item__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--edu-navy);
    line-height: 1.35;
    word-break: break-word;
}
.payer-req-card-item__amount {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--edu-navy-mid);
}
.payer-req-card-item__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--edu-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.payer-req-card-item--approved .payer-req-card-item__icon { background: #dcfce7; color: #15803d; }
.payer-req-card-item--rejected .payer-req-card-item__icon { background: #fee2e2; color: #b91c1c; }
.payer-req-card-item--pending .payer-req-card-item__icon { background: #ffedd5; color: #c2410c; }

.payer-req-card-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.payer-req-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}
.payer-req-chip i { color: var(--edu-navy); font-size: 10px; }
.payer-req-chip em {
    font-style: normal;
    opacity: 0.75;
    margin-right: 2px;
}
.payer-req-card-item__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}
.payer-req-card-item__note i {
    color: var(--edu-navy);
    margin-top: 2px;
    flex-shrink: 0;
}
.payer-req-card-item__note span { flex: 1; min-width: 0; }

.payer-req-empty {
    text-align: center;
    padding: 28px 12px;
}
.payer-req-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.payer-req-empty strong { display: block; font-size: 15px; margin-bottom: 6px; }
.payer-req-empty p { margin: 0; font-size: 13px; color: var(--portal-muted); }

/* ——— صفحة حسابي ——— */
.payer-profile-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.2);
}
.payer-profile-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--edu-navy-dark) 0%, var(--edu-navy) 50%, var(--edu-navy-mid) 100%);
}
.payer-profile-hero__content {
    position: relative;
    z-index: 1;
    padding: 24px 16px 20px;
    text-align: center;
    color: #fff;
}
.payer-profile-hero__avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
}
.payer-profile-hero__name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}
.payer-profile-hero__sub {
    margin: 0 0 12px;
    font-size: 12px;
    opacity: 0.8;
}
.payer-profile-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.2);
    color: #fde68a;
}
.payer-profile-hero__status.is-active {
    background: rgba(34, 197, 94, 0.22);
    color: #bbf7d0;
}

.payer-profile-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.payer-profile-info__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}
.payer-profile-info__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff8f5;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-profile-info__text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.payer-profile-info__icon i,
.payer-profile-link__icon i,
.payer-profile-push-box__icon i,
.payer-profile-pwa__icon i,
.payer-profile-banner__icon i,
.payer-profile-card__head h3 i,
.payer-profile-hero__status i,
.payer-profile-logout i,
.payer-profile-push-btn i,
.payer-profile-push-fallback i,
.payer-profile-link__arrow {
    font-style: normal;
    line-height: 1;
    display: inline-block;
}
.payer-profile-info__icon i { font-size: 15px; }
.payer-profile-link__icon i { font-size: 16px; }

.payer-profile-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74;
}
.payer-profile-banner__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.payer-profile-banner__icon i { font-size: 18px; }
.payer-profile-banner strong { display: block; font-size: 14px; color: #9a3412; }
.payer-profile-banner p { margin: 4px 0 0; font-size: 12px; color: #c2410c; }
.payer-profile-banner__btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-profile-card { padding-bottom: 10px; }
.payer-profile-card__head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.payer-profile-card__head h3 i { color: var(--edu-navy); }

.payer-profile-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.payer-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    transition: background .12s, border-color .12s;
}
.payer-profile-link:active {
    background: #fff8f5;
    border-color: #bfdbfe;
}
.payer-profile-link__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06);
}
.payer-profile-link__label {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--edu-navy);
}
.payer-profile-link__badge {
    font-style: normal;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--edu-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.payer-profile-link__arrow {
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
}

.payer-profile-push-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--portal-muted);
    line-height: 1.5;
}
.payer-profile-push-box {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8f5, #f8fafc);
    border: 1px solid #bfdbfe;
}
.payer-profile-push-box__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-profile-push-box__icon i { font-size: 20px; }
.payer-profile-push-box__body strong {
    display: block;
    font-size: 14px;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-profile-push-box__body p {
    margin: 0;
    font-size: 12px;
    color: var(--portal-muted);
    line-height: 1.5;
}
.payer-profile-push-btn {
    display: flex;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.18);
}
.payer-profile-push-btn--off { display: none; }
.payer-profile-push-fallback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 13px;
    color: var(--portal-muted);
    line-height: 1.5;
}
.payer-profile-push-fallback i { color: var(--edu-navy); margin-top: 2px; }

.payer-profile-pwa {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px;
    border: none;
    text-align: right;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(135deg, #f8fafc, #fff);
    transition: background .12s, opacity .12s;
}
.payer-profile-pwa:active:not(:disabled) {
    background: #fff8f5;
}
.payer-profile-pwa.is-waiting {
    opacity: .72;
    cursor: wait;
}
.payer-profile-pwa:disabled {
    cursor: default;
}
.payer-profile-pwa__body {
    flex: 1;
    min-width: 0;
}
.payer-profile-pwa__arrow {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
}
.payer-profile-pwa__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff8f5;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-profile-pwa__icon i { font-size: 18px; }
.payer-profile-pwa strong {
    display: block;
    font-size: 14px;
    color: var(--edu-navy);
    margin-bottom: 4px;
}
.payer-profile-pwa p {
    margin: 0;
    font-size: 12px;
    color: var(--portal-muted);
    line-height: 1.55;
}

.payer-pwa-guide {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, .45);
}
.payer-pwa-guide[hidden] {
    display: none !important;
}
.payer-pwa-guide__sheet {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 24px 20px 28px;
    border-radius: 20px 20px 16px 16px;
    background: #fff;
    box-shadow: 0 -8px 40px rgba(16, 24, 40, .18);
}
.payer-pwa-guide__close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.payer-pwa-guide__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: #fff8f5;
    color: var(--edu-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.payer-pwa-guide__icon i { display: inline-block; }
.payer-pwa-guide h3 {
    margin: 0 0 16px;
    text-align: center;
    font-size: 17px;
    color: var(--edu-navy);
}
.payer-pwa-guide__steps {
    margin: 0;
    padding: 0 20px 0 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.7;
}
.payer-pwa-guide__steps li { margin-bottom: 10px; }
.payer-pwa-guide__steps i {
    color: var(--edu-navy);
    margin: 0 4px;
}

.payer-profile-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s;
}
.payer-profile-logout:active {
    background: #fef2f2;
}

.portal-payer .payer-profile-info__icon .fa-regular {
    font-weight: 400;
}
.portal-payer .payer-profile-info__icon .fa-solid,
.portal-payer .payer-profile-link__icon .fa-solid,
.portal-payer .payer-profile-push-box__icon .fa-solid,
.portal-payer .payer-profile-pwa__icon .fa-solid,
.portal-payer .payer-profile-banner__icon .fa-solid {
    font-weight: 900;
}

/* تفعيل — عرض الحساب المفعّل */
.payer-act-hero--active .payer-act-hero__bg {
    background: linear-gradient(145deg, #14532d 0%, #15803d 45%, var(--edu-navy) 100%);
}
.payer-act-hero__icon--active {
    background: rgba(255, 255, 255, .18) !important;
    color: #bbf7d0;
}
.payer-act-active-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.payer-act-active-stat {
    padding: 12px 8px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-align: center;
}
.payer-act-active-stat__val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--edu-navy);
    margin-bottom: 2px;
}
.payer-act-active-stat__val i { font-size: 16px; }
.payer-act-active-stat__lbl {
    display: block;
    font-size: 10px;
    color: var(--portal-muted);
    font-weight: 600;
}
.payer-act-active-stat--ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.payer-act-active-stat--ok .payer-act-active-stat__val { color: #15803d; }

.payer-act-active-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.payer-act-active-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: var(--edu-navy);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    transition: background .12s, border-color .12s;
}
.payer-act-active-action:active { background: #f8fafc; }
.payer-act-active-action--primary {
    background: linear-gradient(135deg, var(--edu-orange-light), var(--edu-orange));
    border-color: transparent;
    color: #fff;
}
.payer-act-active-action__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff8f5;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.payer-act-active-action--primary .payer-act-active-action__icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.payer-act-active-action__icon i { display: inline-block; }

.payer-act-profile-readonly { margin-bottom: 12px; }
.payer-act-readonly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.payer-act-readonly-grid div {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.payer-act-readonly-grid em {
    display: block;
    font-style: normal;
    font-size: 10px;
    color: var(--portal-muted);
    margin-bottom: 3px;
}
.payer-act-readonly-grid strong {
    font-size: 13px;
    color: var(--edu-navy);
    word-break: break-word;
}
.payer-act-done-tag {
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.payer-act-timeline--compact .payer-act-step { padding-bottom: 10px; }

@media (max-width: 400px) {
    .payer-act-active-actions { grid-template-columns: repeat(2, 1fr); }
    .payer-act-readonly-grid { grid-template-columns: 1fr; }
}

/* إيصالاتي */
.payer-rcpt-hero {
    position: relative;
    margin: -12px -16px 14px;
    padding: 22px 18px 20px;
    overflow: hidden;
    border-radius: 0 0 22px 22px;
}
.payer-rcpt-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--edu-navy) 0%, var(--edu-navy-mid) 100%);
}
.payer-rcpt-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.payer-rcpt-hero__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.payer-rcpt-hero__icon i { display: inline-block; }
.payer-rcpt-hero__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.payer-rcpt-hero__sub { margin: 0; font-size: 12px; opacity: .85; line-height: 1.5; }

.payer-rcpt-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}
.payer-rcpt-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffedd5;
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-rcpt-alert__icon i { display: inline-block; }
.payer-rcpt-alert strong { display: block; font-size: 14px; color: #9a3412; margin-bottom: 4px; }
.payer-rcpt-alert p { margin: 0; font-size: 12px; color: #c2410c; line-height: 1.5; }
.payer-rcpt-alert__btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--edu-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payer-rcpt-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.payer-rcpt-stat {
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-align: center;
}
.payer-rcpt-stat__val {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--edu-navy);
}
.payer-rcpt-stat__lbl {
    display: block;
    font-size: 11px;
    color: var(--portal-muted);
    margin-top: 2px;
}
.payer-rcpt-stat--ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.payer-rcpt-stat--ok .payer-rcpt-stat__val { color: #15803d; font-size: 18px; }

.payer-rcpt-card { padding-bottom: 8px; }
.payer-rcpt-card__head h3 {
    margin: 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.payer-rcpt-card__head h3 i { color: var(--edu-navy); }

.payer-rcpt-list { display: grid; gap: 10px; }
.payer-rcpt-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 14px 18px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    overflow: hidden;
}
.payer-rcpt-item__accent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: #16a34a;
}
.payer-rcpt-item__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #dcfce7;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payer-rcpt-item__icon i { display: inline-block; }
.payer-rcpt-item__body { flex: 1; min-width: 160px; }
.payer-rcpt-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.payer-rcpt-item__top strong { font-size: 13px; color: var(--edu-navy); }
.payer-rcpt-item__amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--edu-navy);
    white-space: nowrap;
}
.payer-rcpt-item__plan {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--portal-muted);
}
.payer-rcpt-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11px;
    color: var(--portal-muted);
}
.payer-rcpt-item__meta i { color: var(--edu-navy); margin-left: 4px; }
.payer-rcpt-item__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
@media (min-width: 480px) {
    .payer-rcpt-item__actions {
        width: auto;
        margin-right: auto;
    }
}
.payer-rcpt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--edu-navy);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.payer-rcpt-btn--primary {
    background: linear-gradient(135deg, var(--edu-orange-light), var(--edu-orange));
    border-color: transparent;
    color: #fff;
}

.payer-rcpt-empty {
    text-align: center;
    padding: 24px 12px;
}
.payer-rcpt-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fff8f5;
    color: var(--edu-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.payer-rcpt-empty__icon i { display: inline-block; }
.payer-rcpt-empty strong { display: block; font-size: 15px; margin-bottom: 6px; }
.payer-rcpt-empty p { margin: 0 0 14px; font-size: 13px; color: var(--portal-muted); line-height: 1.55; }
.payer-rcpt-empty__btn { max-width: 220px; margin: 0 auto; }

/* إيصال سداد — نصف A4 بنفس تصميم سندات النظام */
.payer-receipt-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--edu-navy);
    text-decoration: none;
}
.payer-receipt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.payer-receipt-toolbar__btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    padding: 12px !important;
    font-size: 13px !important;
}
.payer-receipt-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.payer-voucher-sheet {
    --edu-navy: #101828;
    --edu-orange: #FF5722;
    --edu-border: #e2e8f0;
    width: 210mm;
    height: 148.5mm;
    max-width: 100%;
    background: #fff;
    border: 1.5px solid var(--edu-navy);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.12);
    flex-shrink: 0;
}
.payer-voucher-sheet__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px 6px;
    border-bottom: 2.5px solid var(--edu-orange);
    flex-shrink: 0;
}
.payer-voucher-sheet__logo img {
    height: 42px;
    width: auto;
    display: block;
}
.payer-voucher-sheet__meta { text-align: left; }
.payer-voucher-sheet__type {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .08em;
}
.payer-voucher-sheet__no {
    font-size: 14px;
    font-weight: 800;
    color: var(--edu-navy);
    font-family: monospace;
}
.payer-voucher-sheet__date { font-size: 11px; color: #475569; }
.payer-voucher-sheet__stamp {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    border: 1px solid transparent;
}
.payer-voucher-sheet__stamp--paid {
    background: #f0fdf4;
    color: #15803d;
    border-color: #86efac;
}
.payer-voucher-sheet__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.payer-voucher-sheet__amount {
    background: var(--edu-navy);
    color: #fff;
    padding: 7px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.payer-voucher-sheet__amount-lbl { font-size: 12px; opacity: .9; }
.payer-voucher-sheet__amount-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--edu-orange);
    line-height: 1;
}
.payer-voucher-sheet__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    font-size: 12px;
    border-bottom: 1px solid var(--edu-border);
}
.payer-voucher-sheet__cell {
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    border-left: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
}
.payer-voucher-sheet__cell:nth-child(odd) { border-left: none; }
.payer-voucher-sheet__cell--full {
    grid-column: 1 / -1;
    background: #fff8f5;
}
.payer-voucher-sheet__lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}
.payer-voucher-sheet__val {
    font-weight: 700;
    color: var(--edu-navy);
    line-height: 1.35;
    word-break: break-word;
    font-size: 12px;
}
.payer-voucher-sheet__val--mono {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .03em;
}
.payer-voucher-sheet__verify {
    padding: 5px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f8fafc;
    flex-shrink: 0;
}
.payer-voucher-sheet__verify-text { flex: 1; }
.payer-voucher-sheet__verify-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 2px;
}
.payer-voucher-sheet__verify-code {
    font-size: 10px;
    color: var(--edu-orange);
    font-family: monospace;
    font-weight: 700;
    letter-spacing: .1em;
}
.payer-voucher-sheet__barcode {
    background: #fff;
    padding: 3px 8px 2px;
    border: 1px solid var(--edu-border);
    border-radius: 4px;
    flex-shrink: 0;
}
.payer-voucher-sheet__barcode svg { display: block; height: 36px; width: auto; }
.payer-voucher-sheet__foot {
    padding: 5px 14px;
    background: var(--edu-navy);
    color: rgba(255, 255, 255, .8);
    font-size: 9px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}
.payer-voucher-sheet__foot strong { color: var(--edu-orange); }

@media screen and (max-width: 800px) {
    .payer-voucher-sheet {
        width: min(210mm, calc(100vw - 32px));
        height: auto;
        min-height: 148.5mm;
    }
}

@page {
    size: 210mm 148.5mm;
    margin: 0;
}
@media print {
    .portal-header,
    .portal-bottom-nav,
    .payer-receipt-back,
    .payer-receipt-toolbar,
    .no-print { display: none !important; }
    .portal-body.portal-payer { background: #fff !important; }
    .portal-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .payer-receipt-wrap {
        margin: 0;
        padding: 0;
        overflow: visible;
        justify-content: center;
    }
    .payer-voucher-sheet {
        box-shadow: none;
        border-radius: 0;
        width: 210mm;
        height: 148.5mm;
        max-width: none;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    .payer-voucher-sheet__amount,
    .payer-voucher-sheet__foot,
    .payer-voucher-sheet__stamp--paid,
    .payer-voucher-sheet__cell--full {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* صفحات السياسات داخل التطبيق */
.payer-legal-doc {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    padding: 20px 18px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.04);
    margin-bottom: 12px;
}
.payer-legal-doc__updated {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--portal-muted);
}
.payer-legal-section {
    margin-bottom: 20px;
}
.payer-legal-section:last-child { margin-bottom: 0; }
.payer-legal-section h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--edu-navy);
}
.payer-legal-section p {
    margin: 0 0 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.75;
}
.payer-legal-section ul {
    margin: 0;
    padding: 0 20px 0 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.75;
}
.payer-legal-section li { margin-bottom: 6px; }
.payer-legal-section a { color: var(--edu-orange); }
.payer-legal-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.payer-legal-switch__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--portal-border);
    color: var(--edu-navy);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}
.payer-legal-switch__item.is-active {
    background: var(--edu-navy);
    border-color: var(--edu-navy);
    color: #fff;
}
.payer-legal-switch__item i { font-size: 14px; }
.portal-login-legal {
    font-size: 12px;
    color: var(--portal-muted);
    text-align: center;
    margin-top: 10px;
}
.portal-login-legal a {
    color: var(--edu-navy);
    text-decoration: none;
    font-weight: 600;
}
.portal-login-legal span { opacity: .5; }