/* Explain: Styles for reusable UI components, buttons, cards, and thematic elements. */
.brand-bar-style {
    background-color: var(--brand-bar-bg);
    border-top: var(--brand-bar-border-width) solid var(--brand-bar-border-top);
    border-bottom: var(--brand-bar-border-width) solid var(--brand-bar-border-bottom);
}

.brand-bar-reverse {
    border-top-color: var(--brand-bar-border-bottom);
    border-bottom-color: var(--brand-bar-border-top);
}

.tide-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.tide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(143, 227, 207, 0.45);
    background: rgba(143, 227, 207, 0.16);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tide-btn-primary,
.tide-btn-secondary,
.tide-btn-ghost,
.tide-btn-orange {
    min-height: 3rem;
    border-radius: 999px;
    font-weight: 800;
    transition: all 220ms ease;
    cursor: pointer;
}

.tide-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 14px 32px rgba(6, 43, 73, 0.22);
}

.tide-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.tide-btn-secondary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.tide-btn-secondary:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.tide-btn-orange {
    background: var(--safety-orange);
    border-color: var(--safety-orange);
    color: var(--primary-color);
}

.tide-btn-orange:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
}

.tide-btn-ghost {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
}

.tide-btn-ghost:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.wave-card {
    border: 1px solid rgba(216, 231, 236, 0.9);
    border-radius: var(--radius-wave);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.product-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    border: 1px solid rgba(216, 231, 236, 0.95);
    border-radius: var(--radius-wave);
    background: var(--surface-color);
    box-shadow: 0 12px 34px rgba(6, 43, 73, 0.08);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 119, 182, 0.35);
    box-shadow: 0 22px 48px rgba(6, 43, 73, 0.14);
}

.product-image-frame {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(6, 43, 73, 0.08), rgba(143, 227, 207, 0.22));
    overflow: hidden;
}

.product-image-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.product-card:hover .product-image-frame img {
    transform: scale(1.04);
}

.stock-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    background: rgba(143, 227, 207, 0.2);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 800;
}

.wishlist-active {
    background: rgba(255, 138, 61, 0.16) !important;
    color: var(--safety-orange) !important;
    border-color: rgba(255, 138, 61, 0.4) !important;
}

.catalog-input {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: white;
    color: var(--text-color);
}

.tide-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 70;
    max-width: min(420px, calc(100vw - 2rem));
    border-radius: 1.25rem;
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem;
    transform: translateY(120%);
    opacity: 0;
    transition: all 220ms ease;
}

.tide-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
}

.spec-table td {
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 1rem;
}

.spec-table tr:last-child td {
    border-bottom: 0;
}

/* تفاصيل الدورة — سهم انسدال المحاور يدور عند الفتح */
.syl-chevron {
    transition: transform 0.3s ease;
}
details[open] .syl-chevron {
    transform: rotate(180deg);
}

@keyframes whatsapp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes whatsapp-ping {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}
.whatsapp-anim-wrap {
    animation: whatsapp-float 3s ease-in-out infinite;
}
.whatsapp-ping-anim {
    animation: whatsapp-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* المستشار الذكي — روابط الصفحات داخل المحادثة */
.chat-inline-link {
    display: inline;
    color: #0A8CA6;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    border-radius: 6px;
    padding: 0 3px;
    background: rgba(0, 172, 193, 0.08);
    transition: color 0.2s ease, background 0.2s ease;
}
.chat-inline-link:hover {
    color: #007b8b;
    background: rgba(0, 172, 193, 0.18);
}
html.dark-mode .chat-inline-link {
    color: #67E8F9;
    background: rgba(6, 182, 212, 0.16);
}
html.dark-mode .chat-inline-link:hover {
    color: #A5F3FC;
    background: rgba(6, 182, 212, 0.28);
}

/* Mawthooq Certificate */
.mw-cert-bg {
    background-color: #fdfcf8;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

.mw-cert-corner-tl {
    clip-path: polygon(0 0, 100% 0, 15% 15%, 15% 100%, 0 100%);
}

.mw-cert-corner-br {
    clip-path: polygon(100% 100%, 0 100%, 85% 85%, 85% 0, 100% 0);
}

.mw-entity-name {
    display: block;
    width: 100%;
    margin: 2cqi auto;
    line-height: 1.4;
    font-size: 3.4cqi;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

@media print {
    @page {
        size: portrait;
        margin: 0;
    }
    html, body {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: hidden !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body * {
        visibility: hidden;
    }
    #digital-certificate, #digital-certificate * {
        visibility: visible !important;
    }
    #digital-certificate {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100vw !important;
        height: auto !important;
        aspect-ratio: 210/297 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border: 2vw solid #0A4045 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        break-inside: avoid !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 4vw 2vw !important;
        overflow: hidden !important;
    }
    #digital-certificate h2 { font-size: 7vw !important; margin-bottom: 2vw !important; }
    #digital-certificate .cert-logo-container { width: 22vw !important; height: 22vw !important; margin-bottom: 2.5vw !important; }
    #digital-certificate h3 { font-size: 3vw !important; margin-bottom: 3.5vw !important; }
    #digital-certificate p.cert-intro { font-size: 3vw !important; line-height: 1.6 !important; margin-bottom: 2vw !important; }
    #digital-certificate .cert-name { font-size: 3.3vw !important; margin-bottom: 3vw !important; margin-top: 1.5vw !important; white-space: nowrap !important; display: block !important; letter-spacing: -0.5px !important; }
    #digital-certificate p.cert-body { font-size: 2.5vw !important; line-height: 1.8 !important; margin-bottom: 4vw !important; max-width: 80% !important; margin-inline: auto !important; }
    #digital-certificate .cert-badge { font-size: 2.5vw !important; padding: 1.5vw 4vw !important; margin-bottom: 4vw !important; }
    #digital-certificate .cert-seal { width: 20vw !important; height: 20vw !important; bottom: -2vw !important; }
    #digital-certificate .cert-qr { width: 14vw !important; height: 14vw !important; }
    #digital-certificate .cert-meta-title { font-size: 2vw !important; margin-bottom: 1.5vw !important; }
    #digital-certificate .cert-meta-value { font-size: 2vw !important; }
    #digital-certificate .cert-meta-container { min-height: 15vw !important; padding-top: 2vw !important; }
    #digital-certificate .mw-cert-corner-tl, 
    #digital-certificate .mw-cert-corner-br {
        width: 16vw !important;
        height: 16vw !important;
    }
}

@keyframes btn-attention {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.03); }
}
.animate-btn-attention {
    animation: btn-attention 2s infinite ease-in-out;
}
.animate-btn-attention:hover {
    animation: none;
}

/* Mawthooq — شارة دليل المنشآت: مميزة وملفتة */
.mw-dir-badge {
    position: relative;
    overflow: hidden;
    color: #FFF3CC;
    background: #0A4045;
    border: 2px solid #D4AF37;
    box-shadow: 0 6px 0 0 #04191B, 0 14px 26px rgba(6, 30, 32, 0.35);
    letter-spacing: 0.03em;
}
.mw-dir-badge::before {
    content: none;
}
.mw-dir-badge .mw-dir-badge-glow {
    display: none;
}
.mw-dir-badge .mw-dir-badge-spark {
    display: none;
}
.mw-dir-badge:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 9px 0 0 #04191B, 0 20px 34px rgba(6, 30, 32, 0.45);
}
@keyframes mwBadgeSway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes mwBadgeShine {
    0% { left: -60%; }
    50%, 100% { left: 150%; }
}
@keyframes mwBadgePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}
@keyframes mwBadgeSpark {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
    .mw-dir-badge,
    .mw-dir-badge::before,
    .mw-dir-badge .mw-dir-badge-glow,
    .mw-dir-badge .mw-dir-badge-spark {
        animation: none;
    }
}



/* Mawthooq — زر الدليل: دخول وانسياب جانبي متتالٍ */
@keyframes mwBtnSideIn {
    0% { opacity: 0; transform: translateX(70px) skewX(-6deg); }
    60% { opacity: 1; transform: translateX(-6px) skewX(0deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0deg); }
}
@keyframes mwBtnSideSway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-9px); }
}
.mw-btn-side {
    position: relative;
    overflow: hidden;
    animation: mwBtnSideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both, mwBtnSideSway 2.6s ease-in-out 0.9s infinite;
}
.mw-btn-side::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(212, 175, 55, 0.28), transparent);
    transform: skewX(-18deg);
    animation: mwBtnShine 3.2s ease-in-out 1.2s infinite;
    pointer-events: none;
}
@keyframes mwBtnShine {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
.mw-btn-side:hover {
    animation: mwBtnSideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .mw-btn-side,
    .mw-btn-side::after {
        animation: none;
    }
}

/* Mawthooq — زر الانضمام: 3D غني مع لمعان حركي */
.mw-verify-btn {
    background: linear-gradient(180deg, #103f7a 0%, #082B55 55%, #041833 100%);
    border: 2px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 6px 0 0 #B58500, 0 14px 26px rgba(180, 133, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mw-verify-btn:hover {
    transform: translateY(-3px);
    border-color: #FFDF73;
    box-shadow: 0 9px 0 0 #B58500, 0 20px 34px rgba(180, 133, 0, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}
.mw-verify-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #B58500, 0 6px 14px rgba(180, 133, 0, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.55);
}
.mw-verify-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    transform: skewX(-18deg);
    animation: mwVerifyShine 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mwVerifyShine {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-verify-shine {
        animation: none;
    }
}

/* Mawthooq — زر الدليل الذهبي: 3D مع لمعان حركي */
.mw-gold-3d {
    background: linear-gradient(180deg, #FFE68A 0%, #FFD23F 45%, #D4AF37 72%, #B58500 100%);
    border: 2px solid rgba(255, 255, 255, 0.75);
    color: #0A4045;
    box-shadow: 0 6px 0 0 #8A6600, 0 14px 26px rgba(180, 133, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(120, 80, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mw-gold-3d:hover {
    transform: translateY(-3px);
    border-color: #FFFFFF;
    box-shadow: 0 9px 0 0 #8A6600, 0 20px 34px rgba(180, 133, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(120, 80, 0, 0.25);
}
.mw-gold-3d:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #8A6600, 0 6px 14px rgba(180, 133, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -2px 5px rgba(120, 80, 0, 0.3);
}
.mw-gold-3d .mw-gold-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-18deg);
    animation: mwVerifyShine 3s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .mw-gold-3d .mw-gold-shine {
        animation: none;
    }
}

/* Mawthooq — زر الدليل: أزرق ملكي #4169E1 مطابق لأيقونة زر الانضمام */
.mw-royal-3d {
    background: linear-gradient(180deg, #4169E1 0%, #4169E1 52%, #3355D1 100%);
    border: 2px solid #4169E1;
    color: #FFFFFF;
    box-shadow: 0 6px 0 0 #233A8F, 0 14px 26px rgba(65, 105, 225, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.32), inset 0 -3px 6px rgba(0, 0, 0, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mw-royal-3d:hover {
    transform: translateY(-3px);
    border-color: #4169E1;
    box-shadow: 0 9px 0 0 #233A8F, 0 20px 34px rgba(65, 105, 225, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
.mw-royal-3d:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #233A8F, 0 6px 14px rgba(65, 105, 225, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
}
.mw-royal-3d .mw-royal-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-18deg);
    animation: mwVerifyShine 3s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .mw-royal-3d .mw-royal-shine {
        animation: none;
    }
}

/* Mawthooq — شارة "التفاصيل": ملفتة للانتباه بلمعان ونبض */
.mw-details-pill {
    position: relative;
    overflow: hidden;
    color: #0A4045 !important;
    background: linear-gradient(135deg, #FFE68A 0%, #FFD23F 42%, #D4AF37 78%, #B58500 100%);
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 4px 0 0 #8A6600, 0 9px 18px rgba(180, 133, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.9);
    animation: mwDetailsSway 2.2s ease-in-out infinite;
}
.mw-details-pill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-20deg);
    animation: mwDetailsShine 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.mw-details-pill <i {
    position: relative;
    z-index: 3;
}
.mw-details-pill:hover {
    animation: none;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 0 0 #8A6600, 0 13px 22px rgba(180, 133, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
@keyframes mwDetailsSway {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.04); }
}
@keyframes mwDetailsShine {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-details-pill,
    .mw-details-pill::after {
        animation: none;
    }
}

/* إطار ذهبي مميز لرمز التحقق QR في الشهادات */
.cert-qr-link {
    position: relative;
    display: block;
    box-sizing: border-box;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFE9A6 0%, #D4AF37 32%, #B58500 55%, #D4AF37 80%, #FFE9A6 100%);
    box-shadow: 0 6px 16px rgba(180, 133, 0, 0.35), inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
.cert-qr-link:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(180, 133, 0, 0.5), inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
.cert-qr-link::before,
.cert-qr-link::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border: 2px solid #B58500;
    pointer-events: none;
}
.cert-qr-link::before {
    top: -5px;
    right: -5px;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 6px;
}
.cert-qr-link::after {
    bottom: -5px;
    left: -5px;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 6px;
}
.cert-qr-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.cert-qr-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* براند ويب — ظهور البطاقات وكأنها تأتي من بعيد عند التمرير */
.bw-reveal {
    opacity: 0;
    transform: perspective(1000px) translateZ(-380px) scale(0.72);
    will-change: transform, opacity;
    pointer-events: none;
}
.bw-reveal-in {
    animation: bwRevealIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    pointer-events: auto;
}
@keyframes bwRevealIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateZ(-380px) scale(0.72);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bw-reveal {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .bw-reveal-in {
        animation: none;
    }
}

/* الصفحة الرئيسية — انبثاق بطاقات المميزات بحركة شيقة عند التمرير */
.features-reveal {
    opacity: 0;
    transform: perspective(1000px) translateZ(-280px) translateY(28px) scale(0.7);
    will-change: transform, opacity;
    pointer-events: none;
}
.features-reveal-in {
    animation: featuresPopIn 0.8s cubic-bezier(0.22, 1.35, 0.4, 1) both;
    pointer-events: auto;
}
@keyframes featuresPopIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateZ(-280px) translateY(28px) scale(0.7);
    }
    55% {
        opacity: 1;
        transform: perspective(1000px) translateZ(40px) translateY(-6px) scale(1.06);
    }
    75% {
        transform: perspective(1000px) translateZ(0) translateY(0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) translateY(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .features-reveal {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .features-reveal-in {
        animation: none;
    }
}

/* كيف تبدأ — بطاقات الخطوات تنبثق بحركة انسيابية فريدة قادمة من الجانب بعمق ثلاثي الأبعاد */
.start-step-reveal {
    opacity: 0;
    transform: perspective(1100px) rotateY(-38deg) translateX(-64px) scale(0.86);
    transform-origin: right center;
    will-change: transform, opacity;
    pointer-events: none;
}
.start-step-reveal-in {
    animation: startStepIn 0.95s cubic-bezier(0.18, 1.3, 0.4, 1) both;
    pointer-events: auto;
}
@keyframes startStepIn {
    0% {
        opacity: 0;
        transform: perspective(1100px) rotateY(-38deg) translateX(-64px) scale(0.86);
    }
    55% {
        opacity: 1;
        transform: perspective(1100px) rotateY(11deg) translateX(14px) scale(1.045);
    }
    78% {
        transform: perspective(1100px) rotateY(-5deg) translateX(-5px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: perspective(1100px) rotateY(0) translateX(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .start-step-reveal {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .start-step-reveal-in {
        animation: none;
    }
}

/* كيف تبدأ — أيقونة فخمة ثلاثية الأبعاد (ميدالية ذهبية) */
.hs-hero-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 5px;
    background: linear-gradient(145deg, #FFE68A 0%, #D4AF37 38%, #B58500 62%, #FFE68A 100%);
    box-shadow: 0 14px 28px rgba(180, 133, 0, 0.45), 0 4px 10px rgba(8, 43, 85, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    isolation: isolate;
}
.hs-hero-icon::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 68%);
    z-index: -1;
    animation: hsIconGlow 3s ease-in-out infinite;
}
.hs-hero-icon-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    color: #FFD23F;
    background: radial-gradient(circle at 50% 28%, #16407f 0%, #0A2A55 55%, #041833 100%);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(255, 255, 255, 0.08);
}
.hs-hero-icon-inner::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 60%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: hsIconShine 3.6s ease-in-out infinite;
    pointer-events: none;
}
.hs-hero-spark {
    position: absolute;
    color: #FFE68A;
    font-size: 0.6rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255, 214, 63, 0.95));
    animation: hsSpark 2.6s ease-in-out infinite;
}
.hs-hero-spark-1 { top: -3px; right: 8px; animation-delay: 0s; }
.hs-hero-spark-2 { bottom: 3px; left: -3px; animation-delay: 0.85s; }
.hs-hero-spark-3 { top: 12px; left: -8px; font-size: 0.42rem; animation-delay: 1.7s; }
@keyframes hsIconGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.09); }
}
@keyframes hsIconShine {
    0% { left: -60%; }
    45%, 100% { left: 140%; }
}
@keyframes hsSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hs-hero-icon::before,
    .hs-hero-icon-inner::after,
    .hs-hero-spark {
        animation: none;
    }
    .hs-hero-spark { opacity: 1; }
}

/* عروض الباقات — شارات تتحرك باستمرار باتجاه اليمين (نفس حركة شركاء النجاح) */
.pkg-badge-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.pkg-badge-marquee {
    display: flex;
    width: max-content;
    align-items: center;
    animation: pkgBadgeSlideRight 12s linear infinite;
}
.pkg-hero-badge {
    flex-shrink: 0;
    margin-inline-end: 0.5rem;
}
@media (min-width: 640px) {
    .pkg-hero-badge {
        margin-inline-end: 1rem;
    }
}
@keyframes pkgBadgeSlideRight {
    from { transform: translateX(-33.3333%); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-badge-marquee {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* عروض الباقات — معادلة "دورات من اختيارك = شهادات معتمدة": لمعان ذهبي متحرك */
.pkg-certs-equation {
    position: relative;
}
.pkg-certs-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-18deg);
    animation: pkgCertsShine 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pkgCertsShine {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-certs-shine {
        animation: none;
    }
}

/* عروض الباقات — زر الاشتراك: ثلاثي الأبعاد فخم مع نبض مستمر ولمعان وانسياب الأيقونة */
.pkg-cta-elegant {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform;
    animation: pkgCtaFloat 3.4s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
/* طبقة زجاجية علوية تمنح إحساس البروز ثلاثي الأبعاد */
.pkg-cta-elegant::before {
    content: "";
    position: absolute;
    inset: 1.5px 1.5px 52% 1.5px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 1;
}
/* لمعان فخم يمرّ على الزر باستمرار */
.pkg-cta-elegant::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    width: 38%;
    left: -70%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: pkgCtaShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.pkg-cta-elegant > i {
    position: relative;
    z-index: 3;
    display: inline-block;
    animation: pkgCtaIcon 2.4s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pkg-cta-elegant:hover {
    animation: none;
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.08) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.32));
}
.pkg-cta-elegant:hover > i {
    animation: none;
    transform: rotate(-14deg) scale(1.22);
}
.pkg-cta-elegant:active {
    animation: none;
    transform: translateY(2px) scale(0.98);
    filter: brightness(0.98);
}
@keyframes pkgCtaFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.015); }
}
@keyframes pkgCtaShine {
    0% { left: -70%; }
    45%, 100% { left: 140%; }
}
@keyframes pkgCtaIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-8deg); }
}
/* حركة متتالية: كل زر في بطاقة يبدأ بإيقاع مختلف لإحساس فخم منسّق */
.package-card:nth-child(2) .pkg-cta-elegant { animation-delay: 0.35s; }
.package-card:nth-child(3) .pkg-cta-elegant { animation-delay: 0.7s; }
.package-card:nth-child(4) .pkg-cta-elegant { animation-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) {
    .pkg-cta-elegant,
    .pkg-cta-elegant::after,
    .pkg-cta-elegant > i {
        animation: none;
    }
}

/* الرئيسية — زر "عروض الباقات": ثلاثي الأبعاد فخم متحرك مع لمعان ونبض وحركة أيقونة */
.hero-offer-3d {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform;
    animation: heroOfferFloat 3.2s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
/* طبقة زجاجية علوية تمنح إحساس البروز 3D */
.hero-offer-3d::before {
    content: "";
    position: absolute;
    inset: 2px 2px 50% 2px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 1;
}
/* لمعان فخم يمرّ على الزر باستمرار */
.hero-offer-3d::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    width: 38%;
    left: -70%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-20deg);
    animation: heroOfferShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.hero-offer-3d > i {
    position: relative;
    z-index: 3;
    display: inline-block;
    animation: heroOfferIcon 2.4s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-offer-3d > span {
    position: relative;
    z-index: 3;
}
.hero-offer-3d:hover {
    animation: none;
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.08) drop-shadow(0 10px 16px rgba(15, 35, 82, 0.45));
}
.hero-offer-3d:hover > i {
    animation: none;
    transform: rotate(-14deg) scale(1.22);
}
.hero-offer-3d:active {
    animation: none;
    transform: translateY(3px) scale(0.98);
    filter: brightness(0.98);
}
@keyframes heroOfferFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.015); }
}
@keyframes heroOfferShine {
    0% { left: -70%; }
    45%, 100% { left: 140%; }
}
@keyframes heroOfferIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-offer-3d,
    .hero-offer-3d::after,
    .hero-offer-3d > i {
        animation: none;
    }
}

/* زر عروض الباقات — أيقونة ذهبية فخمة ثلاثية الأبعاد مع لمعان ونيّرات */
.pkg-btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9999px;
    background: linear-gradient(145deg, #FFE68A 0%, #D4AF37 40%, #B58500 68%, #FFE68A 100%);
    box-shadow: 0 3px 8px rgba(180, 133, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.9);
    isolation: isolate;
    flex-shrink: 0;
}
.pkg-btn-icon::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255, 214, 63, 0.6), transparent 70%);
    z-index: -1;
    animation: pkgIconGlow 2.6s ease-in-out infinite;
}
.pkg-btn-icon-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    color: #FFD23F;
    background: radial-gradient(circle at 50% 28%, #2B4C8C 0%, #16307A 55%, #0A1E4A 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
}
.pkg-btn-icon-inner::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 60%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: pkgIconShine 3.2s ease-in-out infinite;
    pointer-events: none;
}
.pkg-btn-icon-spark {
    position: absolute;
    color: #FFF3CC;
    font-size: 0.42rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255, 214, 63, 0.95));
    animation: pkgIconSpark 2.4s ease-in-out infinite;
}
.pkg-btn-icon-spark-1 { top: -2px; right: 1px; }
.pkg-btn-icon-spark-2 { bottom: -1px; left: -1px; animation-delay: 1.2s; }
@keyframes pkgIconGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes pkgIconShine {
    0% { left: -60%; }
    45%, 100% { left: 140%; }
}
@keyframes pkgIconSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-btn-icon::before,
    .pkg-btn-icon-inner::after,
    .pkg-btn-icon-spark { animation: none; }
    .pkg-btn-icon-spark { opacity: 1; }
}

/* الرئيسية — زر "عروض الباقات": شكل سداسي جوهرة فخم ثلاثي الأبعاد بدل الشكل الأسطواني */
.hero-offer-gem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    will-change: transform;
    filter: drop-shadow(0 7px 0 #0B1833) drop-shadow(0 14px 22px rgba(15, 35, 82, 0.45));
    animation: heroGemFloat 3.4s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
.hero-gem-frame {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FFF0B8 0%, #FFD23F 28%, #D4AF37 58%, #B58500 100%);
    clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%);
    pointer-events: none;
}
.hero-gem-face {
    position: absolute;
    inset: 3px;
    background: linear-gradient(180deg, #2B4C8C 0%, #1E3A8A 52%, #0F2352 100%);
    clip-path: polygon(1.32rem 0, calc(100% - 1.32rem) 0, 100% 50%, calc(100% - 1.32rem) 100%, 1.32rem 100%, 0 50%);
    overflow: hidden;
    pointer-events: none;
}
.hero-gem-facet {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.28) 100%);
}
.hero-gem-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}
.hero-gem-shine {
    position: absolute;
    top: -30%;
    bottom: -30%;
    width: 32%;
    left: -65%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: heroGemShine 3s ease-in-out infinite;
    pointer-events: none;
}
.hero-offer-gem .pkg-btn-icon-inner > i {
    display: inline-block;
    animation: heroGemIcon 2.4s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-offer-gem:hover {
    animation: none;
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 10px 0 #0B1833) drop-shadow(0 18px 26px rgba(15, 35, 82, 0.55)) brightness(1.06);
}
.hero-offer-gem:hover .pkg-btn-icon-inner > i {
    animation: none;
    transform: rotate(-14deg) scale(1.22);
}
.hero-offer-gem:active {
    animation: none;
    transform: translateY(3px) scale(0.99);
    filter: drop-shadow(0 3px 0 #0B1833) brightness(0.98);
}
@keyframes heroGemFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.012); }
}
@keyframes heroGemShine {
    0% { left: -65%; }
    45%, 100% { left: 150%; }
}
@keyframes heroGemIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-offer-gem,
    .hero-gem-shine,
    .hero-offer-gem .pkg-btn-icon-inner > i {
        animation: none;
    }
}

/* عروض الباقات — نافذة صورة البطاقة: لمعان أنيق يمرّ باستمرار على سطح الصورة */
.pkg-img-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    animation: pkgImgShine 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pkgImgShine {
    0% { left: -60%; }
    50%, 100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-img-shine {
        animation: none;
        display: none;
    }
}

/* زر الوضع الليلي — هالة ليلية ونجوم متلألئة داخل القمر */
.dark-toggle-wrap {
    position: relative;
    isolation: isolate;
}
.dark-toggle-wrap::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    background: radial-gradient(circle at 50% 45%, rgba(125, 175, 255, 0.35), rgba(30, 58, 138, 0.12) 55%, transparent 72%);
    z-index: -1;
    animation: darkGlowPulse 3.4s ease-in-out infinite;
    pointer-events: none;
}
.dark-star {
    position: absolute;
    color: #FFE68A;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 214, 63, 0.95));
    animation: darkStarTwinkle 2.8s ease-in-out infinite;
    z-index: 1;
}
.dark-star-1 { top: 15%; right: 15%; font-size: 0.35rem; animation-delay: 0s; }
.dark-star-2 { bottom: 20%; left: 15%; font-size: 0.25rem; animation-delay: 0.7s; }
.dark-star-3 { top: 40%; left: 10%; font-size: 0.2rem; animation-delay: 1.4s; }
.dark-star-4 { bottom: 15%; right: 25%; font-size: 0.3rem; animation-delay: 2.1s; }
@keyframes darkStarTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
}
@keyframes darkGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .dark-star { animation: none; opacity: 0.85; }
    .dark-toggle-wrap::before { animation: none; }
}

/* ===== لوحة الطالب — شريط جانبي بشكل فريد ومميز ===== */
.dash-sidebar {
    position: relative;
    height: fit-content;
    padding: 1.25rem;
    border-radius: 1.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 26px 55px -30px rgba(30, 58, 138, 0.45), 0 3px 10px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    isolation: isolate;
}
.dash-sidebar::before {
    content: "";
    position: absolute;
    top: -70px;
    left: -60px;
    width: 190px;
    height: 190px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 172, 193, 0.22), transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.dash-sidebar::after {
    content: "";
    position: absolute;
    bottom: -80px;
    right: -60px;
    width: 170px;
    height: 170px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.dash-user-card {
    text-align: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}
.dash-avatar-ring {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 0.85rem;
    padding: 3px;
    border-radius: 9999px;
    background: conic-gradient(from 210deg, #00E5FF, #D4AF37, #1E3A8A, #F59E0B, #00E5FF);
    box-shadow: 0 16px 30px -12px rgba(0, 172, 193, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.4);
    isolation: isolate;
}
.dash-avatar-ring::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.42), rgba(212, 175, 55, 0.22) 50%, transparent 72%);
    z-index: -1;
    animation: dashAvatarGlow 3.2s ease-in-out infinite;
    pointer-events: none;
}
.dash-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.9rem;
    overflow: hidden;
    background: radial-gradient(circle at 50% 26%, #2B60B8 0%, #1B3E84 44%, #0B1F3A 100%);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.55), inset 0 -3px 8px rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.dash-avatar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: 9999px 9999px 45% 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.dash-avatar::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 55%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: dashAvatarShine 3.8s ease-in-out infinite;
    pointer-events: none;
}
.dash-avatar > i {
    position: relative;
    z-index: 2;
    font-size: 2.15rem;
    color: #F8FBFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 30%, #C6D8F0 58%, #EAF2FF 80%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9))
        drop-shadow(0 2px 3px rgba(2, 12, 30, 0.8))
        drop-shadow(0 5px 9px rgba(2, 12, 30, 0.65))
        drop-shadow(0 0 10px rgba(0, 229, 255, 0.5));
    transform: translateZ(0);
    animation: dashAvatarIconGlow 3.6s ease-in-out infinite;
}

/* هالة ناعمة بالنبض حول رمز الشخص الفخم */
.dash-avatar::after {
    content: "";
    position: absolute;
    top: 24%;
    left: 50%;
    width: 74%;
    height: 74%;
    margin-left: -37%;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.35), transparent 68%);
    pointer-events: none;
    z-index: 0;
    animation: dashAvatarIconHalo 3.6s ease-in-out infinite;
}

@keyframes dashAvatarIconGlow {
    0%, 100% {
        filter:
            drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9))
            drop-shadow(0 2px 3px rgba(2, 12, 30, 0.8))
            drop-shadow(0 5px 9px rgba(2, 12, 30, 0.65))
            drop-shadow(0 0 9px rgba(0, 229, 255, 0.42));
    }
    50% {
        filter:
            drop-shadow(0 1px 1px rgba(255, 255, 255, 1))
            drop-shadow(0 3px 5px rgba(2, 12, 30, 0.85))
            drop-shadow(0 6px 12px rgba(2, 12, 30, 0.7))
            drop-shadow(0 0 15px rgba(0, 229, 255, 0.7));
    }
}

@keyframes dashAvatarIconHalo {
    0%, 100% { opacity: 0.45; transform: scale(0.94); }
    50% { opacity: 0.9; transform: scale(1.1); }
}

html.dark-mode .dash-avatar > i {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FF 30%, #B4C8E6 58%, #E4EEFF 80%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .dash-avatar > i {
        animation: none;
    }
    .dash-avatar::after {
        animation: none;
        opacity: 0.6;
    }
}
@keyframes dashAvatarGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes dashAvatarShine {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-avatar-ring::before,
    .dash-avatar::after {
        animation: none;
    }
}
.dash-user-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #102450;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.dash-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #047857;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #6ee7b7;
    border-radius: 9999px;
    padding: 0.25rem 0.7rem;
}

/* لوحة الطالب — شارة "حساب نشط": مختصرة وفخمة على زاوية صورة الحساب مع نبض */
.dash-status-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    color: #FFFFFF;
    background: linear-gradient(160deg, #34D399 0%, #10B981 48%, #047857 100%);
    border: 2.5px solid #FFFFFF;
    box-shadow: 0 7px 18px -7px rgba(5, 150, 105, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(4, 120, 87, 0.55);
    font-size: 0.82rem;
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dash-status-badge > i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(4, 120, 87, 0.75));
}
.dash-status-badge:hover {
    transform: scale(1.08);
}
.dash-status-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 2px solid rgba(52, 211, 153, 0.7);
    pointer-events: none;
    z-index: 1;
    animation: dashStatusPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes dashStatusPing {
    0% { transform: scale(1); opacity: 0.75; }
    100% { transform: scale(1.75); opacity: 0; }
}
html.dark-mode .dash-status-badge {
    border-color: #1e293b;
    box-shadow: 0 7px 18px -7px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(4, 120, 87, 0.7);
}
@media (prefers-reduced-motion: reduce) {
    .dash-status-badge { transition: none; }
    .dash-status-pulse { animation: none; opacity: 0; }
}
.dash-profile-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 20px 6px 20px 6px;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: #d97706;
    background: #fffbeb;
    border: 2px dashed #fde68a;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dash-profile-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f59e0b;
    border-radius: 6px 20px 6px 20px;
    transform: scale(0) rotate(-10deg);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
}
.dash-profile-btn > i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dash-profile-btn:hover {
    color: #fff;
    border-color: transparent;
    border-radius: 6px 20px 6px 20px;
}
.dash-profile-btn:hover::before {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
.dash-profile-btn:hover > i {
    transform: rotate(18deg) scale(1.15);
}
.dash-profile-btn:active {
    transform: scale(0.96);
}

.dash-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dash-nav-affiliate-wrap {
    margin-top: 0.5rem;
}
.dash-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 1rem;
    font-weight: 800;
    font-size: 0.9rem;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dash-nav-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    color: #475569;
    background: #eef2f9;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.dash-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}
.dash-nav-arrow {
    flex-shrink: 0;
    font-size: 0.7rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dash-nav-item:hover {
    background: #f1f5fb;
    color: var(--primary-color);
    transform: translateX(-3px);
}
.dash-nav-item:hover .dash-nav-icon {
    background: #e2ebfa;
    color: var(--primary-color);
}
.dash-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
    box-shadow: 0 14px 26px -12px rgba(37, 99, 235, 0.75);
}
.dash-nav-item.active .dash-nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.02);
}
.dash-nav-item.active .dash-nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

.dash-nav-item--affiliate {
    color: #065f46;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
}
.dash-nav-item--affiliate .dash-nav-icon {
    color: #065f46;
    background: #a7f3d0;
}
.dash-nav-item--affiliate:hover {
    color: #047857;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}
.dash-nav-item--affiliate.active {
    color: #fff;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #047857;
    box-shadow: 0 14px 26px -12px rgba(5, 150, 105, 0.75);
}
.dash-nav-item--affiliate.active .dash-nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

.dash-notif-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: #ef4444;
    border-radius: 9999px;
    padding: 2px 8px;
    box-shadow: 0 4px 10px -4px rgba(239, 68, 68, 0.8);
}

.dash-logout-wrap {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
    text-align: center;
}
.dash-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #e11d48;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 0.85rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.dash-logout:hover {
    background: #ffe4e6;
    color: #be123c;
    transform: translateY(-1px);
}

/* الوضع الليلي — الشريط الجانبي */
html.dark-mode .dash-sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
    box-shadow: 0 26px 55px -30px rgba(0, 0, 0, 0.85);
}
html.dark-mode .dash-user-name { color: #e2e8f0; }
html.dark-mode .dash-nav-item { color: #cbd5e1; }
html.dark-mode .dash-nav-item .dash-nav-icon { color: #94a3b8; background: #334155; }
html.dark-mode .dash-nav-item:hover { color: #93c5fd; background: #334155; }
html.dark-mode .dash-nav-item:hover .dash-nav-icon { color: #93c5fd; background: #3f4d63; }
html.dark-mode .dash-profile-btn {
    color: #fbbf24;
    background: #451a03;
    border-color: #78350f;
}
html.dark-mode .dash-profile-btn:hover {
    color: #fff;
    border-color: transparent;
}
html.dark-mode .dash-logout { background: #2a1219; border-color: #7f1d1d; color: #fda4af; }
html.dark-mode .dash-logout:hover { background: #3a1620; color: #fecdd3; }

@media (prefers-reduced-motion: reduce) {
    .dash-nav-item,
    .dash-nav-icon,
    .dash-profile-btn,
    .dash-logout { transition: none; }
}

/* ===== لوحة الطالب — ألوان متنوعة ومُلفتة لكل تبويب في القائمة الجانبية ===== */

/* دوراتي — سماوي */
#dashboardSidebarMenu #tab-courses .dash-nav-icon { color: #0891B2; background: #CFFAFE; }
#dashboardSidebarMenu #tab-courses:hover { color: #0891B2; background: #ECFEFF; }
#dashboardSidebarMenu #tab-courses:hover .dash-nav-icon { color: #FFFFFF; background: #06B6D4; }
#dashboardSidebarMenu #tab-courses.active { color: #FFFFFF; background: linear-gradient(135deg, #22D3EE 0%, #0891B2 100%); box-shadow: 0 14px 26px -12px rgba(8, 145, 178, 0.7); }
#dashboardSidebarMenu #tab-courses.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.26); }

/* الاختبارات والنتائج — بنفسجي */
#dashboardSidebarMenu #tab-results .dash-nav-icon { color: #7C3AED; background: #EDE9FE; }
#dashboardSidebarMenu #tab-results:hover { color: #7C3AED; background: #F5F3FF; }
#dashboardSidebarMenu #tab-results:hover .dash-nav-icon { color: #FFFFFF; background: #8B5CF6; }
#dashboardSidebarMenu #tab-results.active { color: #FFFFFF; background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); box-shadow: 0 14px 26px -12px rgba(124, 58, 237, 0.7); }
#dashboardSidebarMenu #tab-results.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.26); }

/* شهاداتي — ذهبي */
#dashboardSidebarMenu #tab-certs .dash-nav-icon { color: #D97706; background: #FEF3C7; }
#dashboardSidebarMenu #tab-certs:hover { color: #D97706; background: #FFFBEB; }
#dashboardSidebarMenu #tab-certs:hover .dash-nav-icon { color: #FFFFFF; background: #F59E0B; }
#dashboardSidebarMenu #tab-certs.active { color: #FFFFFF; background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%); box-shadow: 0 14px 26px -12px rgba(217, 119, 6, 0.7); }
#dashboardSidebarMenu #tab-certs.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.28); }

/* عضوياتي — وردي */
#dashboardSidebarMenu #tab-memberships .dash-nav-icon { color: #E11D48; background: #FFE4E6; }
#dashboardSidebarMenu #tab-memberships:hover { color: #E11D48; background: #FFF1F2; }
#dashboardSidebarMenu #tab-memberships:hover .dash-nav-icon { color: #FFFFFF; background: #F43F5E; }
#dashboardSidebarMenu #tab-memberships.active { color: #FFFFFF; background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%); box-shadow: 0 14px 26px -12px rgba(225, 29, 72, 0.7); }
#dashboardSidebarMenu #tab-memberships.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.26); }

/* الإشعارات — أزرق سماوي */
#dashboardSidebarMenu #tab-notifications .dash-nav-icon { color: #0284C7; background: #E0F2FE; }
#dashboardSidebarMenu #tab-notifications:hover { color: #0284C7; background: #F0F9FF; }
#dashboardSidebarMenu #tab-notifications:hover .dash-nav-icon { color: #FFFFFF; background: #0EA5E9; }
#dashboardSidebarMenu #tab-notifications.active { color: #FFFFFF; background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%); box-shadow: 0 14px 26px -12px rgba(2, 132, 199, 0.7); }
#dashboardSidebarMenu #tab-notifications.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.26); }

/* الخدمات الإضافية — أخضر زمردي */
#dashboardSidebarMenu #tab-services .dash-nav-icon { color: #059669; background: #D1FAE5; }
#dashboardSidebarMenu #tab-services:hover { color: #059669; background: #ECFDF5; }
#dashboardSidebarMenu #tab-services:hover .dash-nav-icon { color: #FFFFFF; background: #10B981; }
#dashboardSidebarMenu #tab-services.active { color: #FFFFFF; background: linear-gradient(135deg, #34D399 0%, #059669 100%); box-shadow: 0 14px 26px -12px rgba(5, 150, 105, 0.7); }
#dashboardSidebarMenu #tab-services.active .dash-nav-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.26); }

/* الوضع الليلي — ألوان مميزة أهدأ مع الحفاظ على التنوع */
html.dark-mode #dashboardSidebarMenu #tab-courses .dash-nav-icon { color: #67E8F9; background: rgba(6, 182, 212, 0.18); }
html.dark-mode #dashboardSidebarMenu #tab-results .dash-nav-icon { color: #C4B5FD; background: rgba(139, 92, 246, 0.18); }
html.dark-mode #dashboardSidebarMenu #tab-certs .dash-nav-icon { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
html.dark-mode #dashboardSidebarMenu #tab-memberships .dash-nav-icon { color: #FDA4AF; background: rgba(244, 63, 94, 0.18); }
html.dark-mode #dashboardSidebarMenu #tab-notifications .dash-nav-icon { color: #7DD3FC; background: rgba(14, 165, 233, 0.18); }
html.dark-mode #dashboardSidebarMenu #tab-services .dash-nav-icon { color: #6EE7B7; background: rgba(16, 185, 129, 0.18); }

/* نافذة الدخول — تنبيه "أدخل بياناتك بدقة": تصميم فخم فريد ولافت بلمسة ذهبية */
.auth-note-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.1rem;
    border-radius: 1.4rem;
    background: linear-gradient(135deg, #FFFDF6 0%, #FEF7E0 50%, #FBEFC4 100%);
    border: 1.5px solid #E9C85A;
    box-shadow: 0 14px 30px -18px rgba(180, 133, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}
.auth-note-card::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.auth-note-card::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    width: 30%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.92), transparent);
    transform: skewX(-18deg);
    animation: authNoteShine 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.auth-note-icon {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 9999px;
    background: linear-gradient(145deg, #FFE68A 0%, #D4AF37 45%, #B58500 100%);
    box-shadow: 0 8px 18px -8px rgba(180, 133, 0, 0.85), inset 0 2px 3px rgba(255, 255, 255, 0.85), inset 0 -2px 4px rgba(120, 80, 0, 0.35);
}
.auth-note-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    color: #B58500;
    background: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #FFF6DA 100%);
    box-shadow: inset 0 2px 5px rgba(180, 133, 0, 0.22);
}
.auth-note-text {
    position: relative;
    z-index: 3;
    margin: 0;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #7A4E06;
    text-align: start;
}
@media (min-width: 640px) {
    .auth-note-text {
        font-size: 0.9rem;
    }
}
@keyframes authNoteShine {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
html.dark-mode .auth-note-card {
    background: linear-gradient(135deg, #241d0c 0%, #332811 55%, #3a2d12 100%);
    border-color: #8A6600;
}
html.dark-mode .auth-note-card::before {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 70%);
}
html.dark-mode .auth-note-text {
    color: #FCD34D;
}
html.dark-mode .auth-note-icon-inner {
    color: #FCD34D;
    background: radial-gradient(circle at 50% 28%, #2a220e 0%, #1c1608 100%);
}
@media (prefers-reduced-motion: reduce) {
    .auth-note-card::after {
        animation: none;
        display: none;
    }
}

/* نافذة الدخول — حقول إدخال فخمة موحّدة مع بطاقة التنبيه الذهبية */
.auth-field {
    position: relative;
}
.auth-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
    font-weight: 900;
    font-size: 0.9rem;
    color: #102450;
}
.auth-label-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
    color: #B58500;
    background: linear-gradient(145deg, #FFF8E1, #FBE7B0);
    border: 1px solid #E9C85A;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 4px 9px -5px rgba(180, 133, 0, 0.85);
    font-size: 0.72rem;
}
.auth-label-mark i {
    line-height: 1;
}
.auth-req {
    color: #E11D48;
}
.auth-input {
    width: 100%;
    height: 3.25rem;
    padding-inline: 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%);
    border: 1.5px solid #E6D9B8;
    color: #102450;
    font-weight: 700;
    box-shadow: inset 0 2px 4px rgba(180, 133, 0, 0.06), 0 2px 7px -4px rgba(15, 23, 42, 0.08);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.auth-input::placeholder {
    color: #AD9C7B;
    font-weight: 700;
}
.auth-input:focus {
    outline: none;
    border-color: #D4AF37;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16), 0 8px 18px -10px rgba(180, 133, 0, 0.6);
}
select.auth-input {
    appearance: none;
    padding-left: 2.5rem;
    padding-right: 1rem;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23B58500%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left 0.9rem top 50%, center;
    background-size: 0.7rem auto, 100% 100%;
}
.auth-choice {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 3.25rem;
    border-radius: 1rem;
    border: 1.5px solid #E6D9B8;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%);
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.auth-choice:hover {
    border-color: #D4AF37;
    background: #FFFDF6;
}
.auth-choice:has(input:checked) {
    border-color: #D4AF37;
    background: linear-gradient(180deg, #FFFDF4 0%, #FBEFC4 100%);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
.auth-choice > span {
    font-weight: 900;
    color: #6B5525;
}
.auth-phone-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%);
    border: 1.5px solid #E6D9B8;
    box-shadow: inset 0 2px 4px rgba(180, 133, 0, 0.06), 0 2px 7px -4px rgba(15, 23, 42, 0.08);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}
.auth-phone-group:focus-within {
    border-color: #D4AF37;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16), 0 8px 18px -10px rgba(180, 133, 0, 0.6);
}
.auth-phone-group > select {
    height: 100%;
    width: 5.75rem;
    flex-shrink: 0;
    border: none;
    outline: none;
    background-color: transparent;
    padding-inline: 0.55rem;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    color: #6B5525;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23B58500%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem top 50%;
    background-size: 0.65rem auto;
}
.auth-phone-divider {
    width: 1px;
    height: 2rem;
    flex-shrink: 0;
    margin-inline: 0.25rem;
    background: #E6D9B8;
}
.auth-phone-group > input {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding-inline: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #102450;
}
.auth-phone-group > input::placeholder {
    color: #AD9C7B;
    font-weight: 700;
}
html.dark-mode .auth-label {
    color: #E2E8F0;
}
html.dark-mode .auth-label-mark {
    color: #FCD34D;
    background: linear-gradient(145deg, #332811, #241d0c);
    border-color: #8A6600;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08), 0 4px 9px -5px rgba(0, 0, 0, 0.7);
}
html.dark-mode .auth-input,
html.dark-mode .auth-phone-group,
html.dark-mode .auth-choice {
    background: linear-gradient(180deg, #1e293b 0%, #17202f 100%);
    border-color: #475569;
    color: #E2E8F0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
html.dark-mode .auth-input::placeholder,
html.dark-mode .auth-phone-group > input::placeholder {
    color: #94A3B8;
}
html.dark-mode .auth-input:focus,
html.dark-mode .auth-phone-group:focus-within {
    border-color: #D4AF37;
    background: linear-gradient(180deg, #1e293b 0%, #17202f 100%);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}
html.dark-mode select.auth-input {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FCD34D%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #1e293b 0%, #17202f 100%);
}
html.dark-mode .auth-phone-group > select {
    color: #FCD34D;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FCD34D%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem top 50%;
    background-size: 0.65rem auto;
}
html.dark-mode .auth-phone-group > input {
    color: #E2E8F0;
}
html.dark-mode .auth-phone-divider {
    background: #475569;
}
html.dark-mode .auth-choice > span {
    color: #CBD5E1;
}
html.dark-mode .auth-choice:hover {
    background: #223047;
}
html.dark-mode .auth-choice:has(input:checked) {
    border-color: #D4AF37;
    background: linear-gradient(180deg, #332811 0%, #241d0c 100%);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
}
html.dark-mode .auth-choice:has(input:checked) > span {
    color: #FCD34D;
}

/* المستشار الذكي — زر التواصل عبر واتساب عند نفاد رصيد الذكاء الاصطناعي */
.ai-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #FFFFFF;
    background: linear-gradient(180deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 6px 14px rgba(18, 140, 126, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ai-whatsapp-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(18, 140, 126, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.55);
}
.ai-whatsapp-cta:active {
    transform: translateY(1px);
}
.ai-whatsapp-cta i {
    font-size: 1.15rem;
}
html.dark-mode .ai-whatsapp-cta {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .ai-whatsapp-cta { transition: none; }
}

/* المستشار الذكي — رأس النافذة: تصميم فخم فريد بلمسات ذهبية */
.ai-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #0B2246 0%, #103a63 38%, #0A6E86 100%);
    border-bottom: 2px solid rgba(212, 175, 55, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -14px rgba(8, 43, 85, 0.9);
}
.ai-head-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 229, 255, 0.3), transparent 55%),
        radial-gradient(circle at 90% 88%, rgba(212, 175, 55, 0.24), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.ai-head-sheen {
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 28%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: aiHeadSheen 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.ai-head-avatar {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    padding: 2.5px;
    border-radius: 9999px;
    background: conic-gradient(from 210deg, #FFE68A, #D4AF37, #B58500, #FFE68A);
    box-shadow: 0 8px 18px -8px rgba(212, 175, 55, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.25);
    isolation: isolate;
}
.ai-head-avatar-ring {
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.55), transparent 68%);
    z-index: -1;
    animation: aiHeadGlow 3s ease-in-out infinite;
    pointer-events: none;
}
.ai-head-avatar-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 28%, #16407f 0%, #0A2A55 55%, #041833 100%);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.6), inset 0 -2px 6px rgba(255, 255, 255, 0.06);
}
.ai-head-avatar-face::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 55%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: aiHeadShine 3.6s ease-in-out infinite;
    pointer-events: none;
}
.ai-head-avatar-icon {
    color: #FFD23F;
    font-size: 1.15rem;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.75));
    animation: aiHeadFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}
.ai-head-spark {
    position: absolute;
    color: #FFF3CC;
    font-size: 0.4rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255, 214, 63, 0.95));
    animation: aiHeadSpark 2.6s ease-in-out infinite;
    z-index: 2;
}
.ai-head-spark-1 { top: -2px; right: 2px; animation-delay: 0s; }
.ai-head-spark-2 { bottom: -1px; left: -1px; animation-delay: 1.3s; }
.ai-head-title {
    color: #FFFFFF;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ai-head-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding: 0.16rem 0.6rem;
    border-radius: 9999px;
    font-size: 9.5px;
    font-weight: 800;
    color: #D9F6FF;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ai-head-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #34D399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
    animation: aiHeadPulse 1.8s ease-in-out infinite;
}
.ai-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.45);
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.ai-head-btn:hover {
    background: linear-gradient(180deg, #FFE68A, #D4AF37);
    color: #0B2246;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -6px rgba(212, 175, 55, 0.85);
    border-color: #FFE68A;
}
.ai-head-btn:active {
    transform: scale(0.92);
}
@keyframes aiHeadSheen {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
@keyframes aiHeadGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.09); }
}
@keyframes aiHeadShine {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
@keyframes aiHeadFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-6deg); }
}
@keyframes aiHeadSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
@keyframes aiHeadPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22); }
    50% { opacity: 0.75; box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-head-sheen,
    .ai-head-avatar-ring,
    .ai-head-avatar-face::after,
    .ai-head-avatar-icon,
    .ai-head-spark,
    .ai-head-dot { animation: none; }
    .ai-head-spark { opacity: 1; }
}

/* المستشار الذكي — حقل الكتابة: إطار ذهبي فخم يتوهج عند الكتابة */
.ai-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%);
    border: 1.5px solid #E6D9B8;
    box-shadow: inset 0 2px 5px rgba(180, 133, 0, 0.08), 0 6px 16px -10px rgba(15, 23, 42, 0.28);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.ai-input-wrap:focus-within {
    border-color: #D4AF37;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16), inset 0 2px 5px rgba(180, 133, 0, 0.06), 0 12px 26px -14px rgba(180, 133, 0, 0.75);
}
.ai-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.75rem;
    border: none;
    outline: none;
    background: transparent;
    padding-inline: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #102450;
}
.ai-input::placeholder {
    color: #AD9C7B;
    font-weight: 700;
    font-size: 0.72rem;
}
@media (min-width: 640px) {
    .ai-input {
        padding-inline: 0.85rem;
        font-size: 0.875rem;
    }
    .ai-input::placeholder {
        font-size: 0.875rem;
    }
}

/* المستشار الذكي — زر الإرسال: دائرة ذهبية ثلاثية الأبعاد بلمعان متحرك */
.ai-send-btn {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    color: #102450;
    background: linear-gradient(180deg, #FFE68A 0%, #FFD23F 45%, #D4AF37 72%, #B58500 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 5px 0 0 #8A6600, 0 12px 22px rgba(180, 133, 0, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(120, 80, 0, 0.25);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.ai-send-btn::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    width: 45%;
    left: -65%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-20deg);
    animation: aiSendShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.ai-send-btn i {
    position: relative;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 7px 0 0 #8A6600, 0 16px 26px rgba(180, 133, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(120, 80, 0, 0.25);
}
.ai-send-btn:hover i {
    transform: rotate(-12deg) scale(1.15);
}
.ai-send-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #8A6600, 0 6px 14px rgba(180, 133, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -2px 5px rgba(120, 80, 0, 0.3);
}
@keyframes aiSendShine {
    0% { left: -65%; }
    45%, 100% { left: 150%; }
}
html.dark-mode .ai-input-wrap {
    background: linear-gradient(180deg, #1e293b 0%, #17202f 100%);
    border-color: #475569;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}
html.dark-mode .ai-input-wrap:focus-within {
    border-color: #D4AF37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.4);
}
html.dark-mode .ai-input {
    color: #E2E8F0;
}
html.dark-mode .ai-input::placeholder {
    color: #94A3B8;
}
@media (prefers-reduced-motion: reduce) {
    .ai-send-btn::after { animation: none; display: none; }
}

/* المستشار الذكي — فقاعات المحادثة: تصميم فخم فريد بألوان مميّزة */
#aiChatMessages .chat-bubble {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.7;
    padding: 0.72rem 1.05rem;
    max-width: 92%;
}
#aiChatMessages .chat-bubble::before,
#aiChatMessages .chat-bubble::after {
    display: none !important;
}

/* فقاعة ردود المستشار — عاجية دافئة بإطار ذهبي */
.ai-bubble-bot,
#aiChatMessages .chat-start .chat-bubble {
    position: relative;
    color: #102450 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%) !important;
    border: 1.5px solid #E9C85A;
    border-radius: 1.35rem 1.35rem 1.35rem 0.35rem !important;
    box-shadow: 0 12px 24px -16px rgba(180, 133, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    overflow: hidden;
    isolation: isolate;
}
.ai-bubble-bot::before,
#aiChatMessages .chat-start .chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    background: linear-gradient(180deg, #FFE68A, #D4AF37, #B58500);
    pointer-events: none;
}

/* فقاعة رسائل الزائر — تدرّج أخضر زمردي فخم ثلاثي الأبعاد بحدّ ذهبي */
.ai-bubble-user,
#aiChatMessages .chat-end .chat-bubble {
    color: #F2FFF8 !important;
    background: linear-gradient(135deg, #065F46 0%, #059669 52%, #047857 100%) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.65);
    border-radius: 1.35rem 1.35rem 0.35rem 1.35rem !important;
    box-shadow: 0 12px 24px -14px rgba(5, 150, 105, 0.95), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* الوضع الليلي — فقاعات المحادثة */
html.dark-mode .ai-bubble-bot,
html.dark-mode #aiChatMessages .chat-start .chat-bubble {
    color: #E2E8F0 !important;
    background: linear-gradient(180deg, #1e293b 0%, #17202f 100%) !important;
    border-color: #8A6600;
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.06);
}
html.dark-mode .ai-bubble-bot::before,
html.dark-mode #aiChatMessages .chat-start .chat-bubble::before {
    background: linear-gradient(180deg, #FCD34D, #B58500);
}
html.dark-mode .ai-bubble-user,
html.dark-mode #aiChatMessages .chat-end .chat-bubble {
    color: #ECFDF5 !important;
    background: linear-gradient(135deg, #047857 0%, #059669 55%, #064E3B 100%) !important;
    border-color: rgba(212, 175, 55, 0.8);
}

/* المستشار الذكي — زر العائم: تصميم فخم فريد بإطار ذهبي ونبض واستعراض ثلاثي الأبعاد */
.ai-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    isolation: isolate;
    will-change: transform;
    animation: aiFabFloat 3.4s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
.ai-fab.hidden {
    display: none;
}
@media (min-width: 640px) {
    .ai-fab {
        width: 4rem;
        height: 4rem;
    }
}
.ai-fab-halo {
    position: absolute;
    inset: -9px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.55), rgba(212, 175, 55, 0.3) 45%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    animation: aiFabHalo 3s ease-in-out infinite;
}
.ai-fab-ping {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 2px solid rgba(0, 229, 255, 0.65);
    pointer-events: none;
    animation: aiFabPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ai-fab-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(from 210deg, #FFE68A, #D4AF37, #B58500, #FFE68A);
    box-shadow: 0 10px 24px -8px rgba(180, 133, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.85), inset 0 -2px 5px rgba(120, 80, 0, 0.4);
    pointer-events: none;
}
.ai-fab-face {
    position: absolute;
    inset: 3px;
    border-radius: 9999px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 26%, #1E4A8A 0%, #12306E 52%, #081E4A 100%);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.6), inset 0 -2px 6px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.ai-fab-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
.ai-fab-shine {
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 40%;
    left: -65%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: aiFabShine 3.4s ease-in-out infinite;
}
.ai-fab-icon {
    position: relative;
    z-index: 3;
    color: #FFD23F;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.75));
    animation: aiFabIcon 3s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 640px) {
    .ai-fab-icon {
        font-size: 1.8rem;
    }
}
.ai-fab-spark {
    position: absolute;
    color: #FFF3CC;
    font-size: 0.45rem;
    line-height: 1;
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255, 214, 63, 0.95));
    animation: aiFabSpark 2.6s ease-in-out infinite;
}
.ai-fab-spark-1 { top: -3px; right: 7px; animation-delay: 0s; }
.ai-fab-spark-2 { bottom: 0; left: -2px; animation-delay: 0.9s; }
.ai-fab-spark-3 { top: 15px; left: -8px; font-size: 0.3rem; animation-delay: 1.7s; }
.ai-fab-tooltip {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, #0B2246, #103a63);
    color: #FFF7E6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 12px 24px -12px rgba(8, 43, 85, 0.9);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
}
.ai-fab-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 1.1rem;
    border: 6px solid transparent;
    border-top-color: #103a63;
}
.ai-fab:hover .ai-fab-tooltip,
.ai-fab:focus-visible .ai-fab-tooltip {
    opacity: 1;
    transform: translateY(0);
}
.ai-fab:hover {
    animation: none;
    transform: translateY(-4px) scale(1.06);
    filter: brightness(1.08);
}
.ai-fab:hover .ai-fab-icon {
    animation: none;
    transform: rotate(-12deg) scale(1.18);
}
.ai-fab:active {
    transform: translateY(2px) scale(0.97);
}
@keyframes aiFabFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.015); }
}
@keyframes aiFabHalo {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes aiFabPing {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0; }
}
@keyframes aiFabShine {
    0% { left: -65%; }
    45%, 100% { left: 150%; }
}
@keyframes aiFabIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-6deg); }
}
@keyframes aiFabSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-fab,
    .ai-fab-halo,
    .ai-fab-ping,
    .ai-fab-shine,
    .ai-fab-icon,
    .ai-fab-spark {
        animation: none;
    }
    .ai-fab-spark {
        opacity: 1;
    }
}

/* المستشار الذكي — زر الإغلاق (X): مميّز وأنيق بلون وردي فخم مع نبض ولمعان */
.ai-head-btn--close {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 2.4rem;
    height: 2.4rem;
    color: #FFF1F2;
    background: linear-gradient(180deg, #FB7185 0%, #E11D48 55%, #BE123C 100%);
    border: 1.5px solid rgba(255, 228, 230, 0.9);
    box-shadow: 0 6px 16px -6px rgba(225, 29, 72, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(120, 10, 35, 0.45);
    animation: aiClosePulse 2.4s ease-in-out infinite;
}
.ai-head-btn--close::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 45%;
    left: -70%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-20deg);
    animation: aiCloseShine 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.ai-head-btn--close i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(120, 10, 35, 0.55));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-head-btn--close:hover {
    animation: none;
    color: #FFFFFF;
    border-color: #FFFFFF;
    background: linear-gradient(180deg, #FDA4AF 0%, #F43F5E 55%, #E11D48 100%);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 10px 22px -6px rgba(225, 29, 72, 1), 0 0 0 4px rgba(244, 63, 94, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.75), inset 0 -2px 5px rgba(120, 10, 35, 0.45);
}
.ai-head-btn--close:hover i {
    transform: rotate(90deg) scale(1.18);
}
.ai-head-btn--close:active {
    transform: translateY(1px) scale(0.94);
}
@keyframes aiClosePulse {
    0%, 100% {
        box-shadow: 0 6px 16px -6px rgba(225, 29, 72, 0.8), 0 0 0 0 rgba(244, 63, 94, 0), inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(120, 10, 35, 0.45);
    }
    50% {
        box-shadow: 0 8px 22px -4px rgba(225, 29, 72, 1), 0 0 0 4px rgba(244, 63, 94, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.75), inset 0 -2px 5px rgba(120, 10, 35, 0.45);
    }
}
@keyframes aiCloseShine {
    0% { left: -70%; }
    45%, 100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-head-btn--close,
    .ai-head-btn--close::after {
        animation: none;
    }
}

/* بحث الهيدر — انبثاق حقل البحث والنتائج بحركة انسيابية احترافية */
.header-search-trigger {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.header-search-trigger:hover {
    box-shadow: 0 8px 18px -8px rgba(0, 172, 193, 0.6);
}
.header-search-form {
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.12);
}
.header-search-form:focus-within {
    box-shadow: 0 12px 30px -10px rgba(0, 172, 193, 0.5), 0 0 0 4px rgba(0, 172, 193, 0.14);
}
.search-results-panel {
    transform-origin: top right;
    animation: searchResultsIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 24px 50px -18px rgba(15, 23, 42, 0.35), 0 4px 14px -6px rgba(0, 172, 193, 0.25);
}
@keyframes searchResultsIn {
    0% { opacity: 0; transform: translateY(-12px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .search-results-panel {
        animation: none;
    }
}

/* بحث الهيدر — نافذة منبثقة مريحة وواضحة وسلسة */
.search-overlay-backdrop {
    animation: searchBackdropIn 0.32s ease both;
}
@keyframes searchBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.search-overlay-panel {
    animation: searchPanelIn 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes searchPanelIn {
    from { opacity: 0; transform: translateY(-24px) scale(0.955); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#liveSearchResults > div {
    animation: searchItemsIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes searchItemsIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0A6E86;
    background: #ECFEFF;
    border: 1px solid #A5F3FC;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.search-chip:hover {
    color: #FFFFFF;
    background: linear-gradient(180deg, #22D3EE, #0891B2);
    border-color: #0891B2;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(8, 145, 178, 0.85);
}
.search-chip:active {
    transform: translateY(0);
}
html.dark-mode .search-overlay-panel {
    background-color: #1e293b;
    border-color: #334155;
}
html.dark-mode .search-chip {
    color: #67E8F9;
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    .search-overlay-backdrop,
    .search-overlay-panel,
    #liveSearchResults > div {
        animation: none;
    }
}

/* بحث الهيدر — رأس النافذة: تصميم فخم بألوان الأكاديمية مع لمسة ذهبية */
.search-head {
    isolation: isolate;
    background: linear-gradient(135deg, #0B2246 0%, #0E5570 45%, #0A8CA6 100%);
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 26px -14px rgba(8, 43, 85, 0.9);
}
.search-head-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(0, 229, 255, 0.32), transparent 55%),
        radial-gradient(circle at 90% 90%, rgba(212, 175, 55, 0.25), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.search-head-close {
    background: linear-gradient(180deg, #FB7185 0%, #E11D48 55%, #BE123C 100%);
    border: 1.5px solid rgba(255, 228, 230, 0.9);
    box-shadow: 0 6px 16px -6px rgba(225, 29, 72, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.search-head-close:hover {
    transform: rotate(90deg) scale(1.08);
    filter: brightness(1.06);
}
.search-head-close:active {
    transform: scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
    .search-head-close {
        transition: none;
    }
}

/* زر البحث الدائم في الهيدر — تصميم ثابت وهادئ */
.header-search-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(212, 175, 55, 0.6);
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.25s ease;
}
.header-search-btn i {
    color: #D4AF37; /* لون ذهبي هادئ بدل الأزرق */
    animation: headerSearchSway 2.6s ease-in-out infinite;
    transition: transform 0.25s ease;
}
.header-search-btn:hover {
    transform: translateY(-2px);
    border-color: #B58500;
    box-shadow: 0 6px 12px -2px rgba(180, 133, 0, 0.2);
}
.header-search-btn:hover i {
    animation: none;
    transform: scale(1.1);
}
.header-search-btn:active {
    transform: translateY(0);
}
@keyframes headerSearchSway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-6deg); }
    75% { transform: translateX(2px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .header-search-btn i { animation: none; }
}

/* ===== اقتراح عروض الباقات داخل صفحات الدورات والدبلومات ===== */
.pkg-suggest-wrap {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.5rem auto 2rem;
    padding: 0;
}
.pkg-suggest-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.6rem;
    background: linear-gradient(135deg, #0B2246 0%, #0E7490 55%, #0A8CA6 100%);
    border: 2px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 20px 44px -20px rgba(8, 43, 85, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    overflow: hidden;
    isolation: isolate;
}
.pkg-suggest-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 229, 255, 0.25), transparent 55%),
        radial-gradient(circle at 92% 88%, rgba(212, 175, 55, 0.22), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.pkg-suggest-card::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    width: 28%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: pkgSuggestShine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes pkgSuggestShine {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
.pkg-suggest-emblem {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    flex-shrink: 0;
    padding: 0;
    border-radius: 9999px;
    background: linear-gradient(145deg, #FFE68A 0%, #D4AF37 42%, #B58500 100%);
    box-shadow: 0 10px 22px -8px rgba(180, 133, 0, 0.9), inset 0 2px 3px rgba(255, 255, 255, 0.85);
}
.pkg-suggest-emblem i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    font-size: 1.5rem;
    color: #FFD23F;
    background: radial-gradient(circle at 50% 28%, #16407f 0%, #0A2A55 55%, #041833 100%);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6);
}
.pkg-suggest-body {
    position: relative;
    z-index: 2;
    flex: 1 1 320px;
    min-width: 0;
    text-align: start;
}
.pkg-suggest-title {
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 900;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (min-width: 640px) {
    .pkg-suggest-title { font-size: 1.25rem; }
}
.pkg-suggest-title i { color: #FFD23F; }
.pkg-suggest-text {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.8;
    color: #D9F6FF;
}
@media (min-width: 640px) {
    .pkg-suggest-text { font-size: 0.9rem; }
}
.pkg-suggest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.pkg-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #FFF7E6;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}
.pkg-suggest-chip i { color: #FFD23F; }
.pkg-suggest-action {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 640px) {
    .pkg-suggest-action { width: auto; }
}
.pkg-suggest-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1.5rem;
    border-radius: 0.9rem;
    font-weight: 900;
    font-size: 0.9rem;
    color: #102450;
    text-decoration: none;
    background: linear-gradient(180deg, #FFE68A 0%, #FFD23F 45%, #D4AF37 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 0 0 #8A6600, 0 14px 26px rgba(180, 133, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.85);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.pkg-suggest-cta:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow: 0 9px 0 0 #8A6600, 0 20px 32px rgba(180, 133, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.9);
}
.pkg-suggest-cta:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #8A6600, 0 6px 14px rgba(180, 133, 0, 0.4);
}
@media (min-width: 640px) {
    .pkg-suggest-cta { width: auto; }
}
html.dark-mode .pkg-suggest-card {
    background: linear-gradient(135deg, #0b1833 0%, #0d5566 55%, #0a6e86 100%);
}
html.dark-mode .pkg-suggest-text { color: #BFEAF5; }
@media (prefers-reduced-motion: reduce) {
    .pkg-suggest-card::after { animation: none; display: none; }
}

/* عروض الباقات — ميزة "عضوية معتمدة مجاناً": الأبرز والأقوى داخل باقة التوفير الشاملة */
.pkg-free-mem {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 1rem;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(135deg, #064E3B 0%, #059669 42%, #10B981 70%, #34D399 100%);
    border: 2px solid #FFD23F;
    box-shadow: 0 12px 28px -12px rgba(5, 150, 105, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    animation: pkgFreeMemGlow 3s ease-in-out infinite;
}
.pkg-free-mem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 10% 18%, rgba(255, 255, 255, 0.3), transparent 55%),
                radial-gradient(circle at 92% 90%, rgba(255, 210, 63, 0.4), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.pkg-free-mem::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    width: 34%;
    left: -65%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: pkgFreeMemShine 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.pkg-free-mem-icon {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
    color: #065F46;
    background: linear-gradient(145deg, #FFE68A 0%, #FFD23F 45%, #D4AF37 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.9);
    animation: pkgFreeMemIcon 2.4s ease-in-out infinite;
}
.pkg-free-mem-icon i {
    font-size: 1.25rem;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}
.pkg-free-mem-text {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.pkg-free-mem-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 900;
    color: #065F46;
    background: #FFD23F;
    box-shadow: 0 3px 8px -3px rgba(180, 133, 0, 0.8);
}
.pkg-free-mem-title {
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.35;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
@media (min-width: 640px) {
    .pkg-free-mem-title { font-size: 0.78rem; }
}
.pkg-free-mem-spark {
    position: absolute;
    color: #FFF3CC;
    font-size: 0.5rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255, 214, 63, 0.95));
    animation: pkgFreeMemSpark 2.6s ease-in-out infinite;
    z-index: 4;
}
.pkg-free-mem-spark-1 { top: 4px; left: 8px; animation-delay: 0s; }
.pkg-free-mem-spark-2 { bottom: 5px; right: 10px; animation-delay: 0.9s; }
.pkg-free-mem-spark-3 { top: 30%; right: 6px; font-size: 0.35rem; animation-delay: 1.7s; }
@keyframes pkgFreeMemGlow {
    0%, 100% { box-shadow: 0 12px 28px -12px rgba(5, 150, 105, 0.75), 0 0 0 0 rgba(255, 210, 63, 0), inset 0 1px 2px rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 16px 34px -12px rgba(5, 150, 105, 1), 0 0 0 3px rgba(255, 210, 63, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.55); }
}
@keyframes pkgFreeMemShine {
    0% { left: -65%; }
    45%, 100% { left: 150%; }
}
@keyframes pkgFreeMemIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-10deg); }
}
@keyframes pkgFreeMemSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
html.dark-mode .pkg-free-mem {
    background: linear-gradient(135deg, #04382b 0%, #047857 45%, #059669 100%);
}
@media (prefers-reduced-motion: reduce) {
    .pkg-free-mem,
    .pkg-free-mem::after,
    .pkg-free-mem-icon,
    .pkg-free-mem-spark { animation: none; }
    .pkg-free-mem-spark { opacity: 1; }
}

/* عروض الباقات — إبراز قسم العضويات الاختيارية عند تذكير الطالب قبل الدفع */
.pkg-mem-section {
    border-radius: 1rem;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.pkg-mem-highlight {
    background-color: rgba(0, 172, 193, 0.1);
    box-shadow: 0 0 0 4px rgba(0, 172, 193, 0.45), 0 16px 34px -16px rgba(0, 172, 193, 0.9);
    animation: pkgMemHighlight 2.8s ease-in-out;
}
@keyframes pkgMemHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 172, 193, 0), 0 16px 34px -16px rgba(0, 172, 193, 0); background-color: rgba(0, 172, 193, 0.06); }
    45% { box-shadow: 0 0 0 5px rgba(0, 172, 193, 0.5), 0 18px 38px -16px rgba(0, 172, 193, 0.95); background-color: rgba(0, 172, 193, 0.14); }
}
html.dark-mode .pkg-mem-highlight {
    background-color: rgba(6, 182, 212, 0.16);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.5), 0 16px 34px -16px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: reduce) {
    .pkg-mem-highlight { animation: none; }
}

/* زر إغلاق نافذة اختيار الباقة — تصميم فخم ثلاثي الأبعاد بلون وردي ونيّرات ولفة عند التمرير */
.pkg-close-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 9999px;
    padding: 0;
    cursor: pointer;
    isolation: isolate;
    will-change: transform;
    animation: pkgCloseFloat 3.2s ease-in-out infinite;
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.pkg-close-halo {
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.5), rgba(225, 29, 72, 0.22) 48%, transparent 72%);
    z-index: -1;
    pointer-events: none;
    animation: pkgCloseGlow 2.8s ease-in-out infinite;
}
.pkg-close-face {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    overflow: hidden;
    background: linear-gradient(180deg, #FB7185 0%, #E11D48 55%, #BE123C 100%);
    border: 1.5px solid rgba(255, 228, 230, 0.9);
    box-shadow: 0 6px 0 0 #7F1029, 0 14px 26px -10px rgba(225, 29, 72, 0.9), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(120, 10, 35, 0.5);
    pointer-events: none;
}
.pkg-close-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.pkg-close-shine {
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 42%;
    left: -70%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: skewX(-20deg);
    animation: pkgCloseShine 3s ease-in-out infinite;
}
.pkg-close-icon {
    position: relative;
    z-index: 3;
    color: #FFFFFF;
    font-size: 1.05rem;
    filter: drop-shadow(0 1px 2px rgba(120, 10, 35, 0.6));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pkg-close-btn:hover {
    animation: none;
    transform: translateY(-3px) scale(1.1);
    filter: brightness(1.06);
}
.pkg-close-btn:hover .pkg-close-face {
    border-color: #FFFFFF;
    box-shadow: 0 9px 0 0 #7F1029, 0 20px 32px -10px rgba(225, 29, 72, 1), 0 0 0 4px rgba(244, 63, 94, 0.22), inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -3px 6px rgba(120, 10, 35, 0.5);
}
.pkg-close-btn:hover .pkg-close-icon {
    animation: none;
    transform: rotate(90deg) scale(1.18);
}
.pkg-close-btn:active {
    transform: translateY(3px) scale(0.94);
}
.pkg-close-btn:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 3px;
}
@keyframes pkgCloseFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.015); }
}
@keyframes pkgCloseGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes pkgCloseShine {
    0% { left: -70%; }
    45%, 100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-close-btn,
    .pkg-close-halo,
    .pkg-close-shine {
        animation: none;
    }
}

/* عروض الباقات — شارة أيقونة السلة في صف السعر: تصميم فخم 3D بإطار ذهبي وهالة ولعان */
.pkg-cart-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    padding: 0;
    border-radius: 9999px;
    background: conic-gradient(from 210deg, #FFE68A, #D4AF37, #B58500, #FFE68A);
    box-shadow: 0 8px 18px -6px rgba(180, 133, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.3);
    isolation: isolate;
    animation: pkgCartFloat 3.4s ease-in-out infinite;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.32s ease;
}
.pkg-cart-badge::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.5), rgba(212, 175, 55, 0.25) 50%, transparent 72%);
    z-index: -1;
    animation: pkgCartGlow 3s ease-in-out infinite;
    pointer-events: none;
}
.pkg-cart-face {
    position: absolute;
    inset: 2.5px;
    border-radius: 9999px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 28%, #1E4A8A 0%, #12306E 52%, #081E4A 100%);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.6), inset 0 -2px 6px rgba(255, 255, 255, 0.08);
}
.pkg-cart-face::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 60%;
    height: 200%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: pkgCartShine 3.4s ease-in-out infinite;
    pointer-events: none;
}
.pkg-cart-badge i {
    position: relative;
    z-index: 2;
    color: #FFD23F;
    font-size: 1.02rem;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.75));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pkg-cart-badge:hover {
    animation: none;
    transform: translateY(-3px) scale(1.08);
    filter: brightness(1.08);
}
.pkg-cart-badge:hover i {
    transform: rotate(-14deg) scale(1.16);
}
@keyframes pkgCartFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
}
@keyframes pkgCartGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes pkgCartShine {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
    .pkg-cart-badge,
    .pkg-cart-badge::before,
    .pkg-cart-face::after {
        animation: none;
    }
}

/* عروض الباقات — شريحة "عضوية معتمدة مجاناً": أيقونة ID Card متحركة مع نجوم ذهبية لافتة، بنفس مقاس بقية البنود */
.pkg-free-row {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 52%, #FECDD3 100%);
    border: 1.5px solid #FDA4AF;
    box-shadow: 0 6px 16px -8px rgba(225, 29, 72, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.9);
    isolation: isolate;
}
.pkg-free-row::after {
    content: "";
    position: absolute;
    top: -55%;
    bottom: -55%;
    width: 32%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: pkgFreeRowShine 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes pkgFreeRowShine {
    0% { left: -60%; }
    45%, 100% { left: 150%; }
}
.pkg-free-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FB7185 0%, #F43F5E 52%, #E11D48 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 8px -3px rgba(190, 18, 60, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.7);
    isolation: isolate;
    animation: pkgFreeChipFloat 2.4s ease-in-out infinite;
}
.pkg-free-chip::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.7), transparent 70%);
    z-index: -1;
    animation: pkgFreeChipGlow 3s ease-in-out infinite;
    pointer-events: none;
}
.pkg-free-chip > i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}
.pkg-free-chip-spark {
    position: absolute;
    color: #FFF3CC;
    font-size: 0.4rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255, 214, 63, 1));
    animation: pkgFreeChipSpark 2.4s ease-in-out infinite;
    z-index: 3;
}
.pkg-free-chip-spark-1 { top: -4px; right: -4px; animation-delay: 0s; }
.pkg-free-chip-spark-2 { bottom: -4px; left: -4px; animation-delay: 0.8s; }
.pkg-free-chip-spark-3 { top: 50%; right: -6px; font-size: 0.28rem; animation-delay: 1.6s; }
@keyframes pkgFreeChipFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-8deg); }
}
@keyframes pkgFreeChipGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes pkgFreeChipSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.25) rotate(180deg); }
}
html.dark-mode .pkg-free-row {
    background: linear-gradient(135deg, #3F1220 0%, #4C1728 52%, #5A1A2F 100%);
    color: #FDA4AF;
}
@media (prefers-reduced-motion: reduce) {
    .pkg-free-row::after,
    .pkg-free-chip,
    .pkg-free-chip::before,
    .pkg-free-chip-spark { animation: none; }
    .pkg-free-chip-spark { opacity: 1; }
}

/* عروض الباقات — الوضع الليلي: وضوح كامل لبنود المميزات والملاحظات داخل البطاقات */
html.dark-mode .pkg-feat-chip {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}
html.dark-mode .pkg-feat-chip:hover {
    background-color: rgba(51, 65, 85, 0.95) !important;
    border-color: #475569 !important;
}
html.dark-mode .pkg-dm-badge {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}
/* شريط معادلة "دورات = شهادات": خلفية داكنة بدل التدرّج الفاتح في الوضع الليلي */
html.dark-mode .pkg-certs-equation {
    background-image: none !important;
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #8A6600 !important;
}

/* الوضع الليلي — بطاقات المميزات بالرئيسية: إظهار الأيقونات داخل إطار فاتح واضح على الخلفية الداكنة */
html.dark-mode .features-reveal .mix-blend-multiply {
    mix-blend-mode: normal !important;
}
html.dark-mode .features-reveal > .mix-blend-multiply {
    background-color: #f1f5f9;
    border-radius: 1.5rem;
    padding: 0.5rem;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html.dark-mode .features-reveal .bg-gradient-to-br.from-white\/40 {
    opacity: 0.25 !important;
}

/* الوضع الليلي — بانر الرئيسية: تعتيم الصورة الخلفية وطبقة التغطية لضمان قراءة النص الفاتح */
html.dark-mode .hero-deco-img {
    opacity: 0.1;
}
html.dark-mode .hero-deco-overlay {
    background-color: rgba(15, 23, 42, 0.6) !important;
}