/* ============================================================
   iCoder Academy — Neon Effects & Buttons
   ============================================================ */

/* ─── NEON TEXT ──────────────────────────────────────────────── */
.neon-text-cyan {
    color: var(--color-cyan) !important;
    text-shadow:
        0 0  7px var(--color-cyan),
        0 0 14px rgba(0,229,255,.7),
        0 0 28px rgba(0,229,255,.4),
        0 0 56px rgba(0,229,255,.2);
}

.neon-text-lime {
    color: var(--color-lime) !important;
    text-shadow:
        0 0  7px var(--color-lime),
        0 0 14px rgba(162,255,0,.7),
        0 0 28px rgba(162,255,0,.4),
        0 0 56px rgba(162,255,0,.2);
}

/* ─── ORANGE HERO CTA BUTTON ─────────────────────────────────── */
.btn-orange {
    background:   linear-gradient(135deg, #FF8C00 0%, #FFB020 100%);
    color:        #000 !important;
    border:       none;
    border-radius: 10px;
    font-weight:  800;
    font-size:    1.05rem;
    padding:      14px 38px;
    transition:   all 0.3s ease;
    text-decoration: none !important;
    box-shadow:   0 4px 20px rgba(255,140,0,.4),
                  0 2px 8px rgba(0,0,0,.3);
    letter-spacing: .3px;
    font-family:  var(--font-arabic);
    display:      inline-block;
}

.btn-orange:hover, .btn-orange:focus {
    background:  linear-gradient(135deg, #FFA000 0%, #FFC040 100%);
    color:       #000 !important;
    transform:   translateY(-3px);
    box-shadow:  0 8px 30px rgba(255,140,0,.6),
                 0 0 20px rgba(255,160,0,.4);
}

.btn-orange:active { transform: translateY(-1px); }

/* ─── GREEN ENROLL BUTTON ────────────────────────────────────── */
.btn-enroll {
    background:    linear-gradient(135deg, #00B84A 0%, #00D65A 100%);
    color:         #fff !important;
    border:        none;
    border-radius: 22px;
    font-size:     .88rem;
    font-weight:   700;
    padding:       8px 20px;
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    transition:    all 0.3s ease;
    text-decoration: none !important;
    box-shadow:    0 3px 14px rgba(0,184,74,.35);
    font-family:   var(--font-arabic);
    white-space:   nowrap;
}

.btn-enroll:hover, .btn-enroll:focus {
    background:  linear-gradient(135deg, #00D65A 0%, #69F0AE 100%);
    color:       #000 !important;
    transform:   translateY(-2px);
    box-shadow:  0 6px 20px rgba(0,200,80,.5);
}

.btn-enroll i { font-size: .82rem; }

/* ─── CYAN OUTLINE BUTTON ────────────────────────────────────── */
.btn-neon-cyan {
    background:  transparent;
    color:       var(--color-cyan) !important;
    border:      2px solid var(--color-cyan);
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--font-arabic);
    transition:  var(--transition);
    text-decoration: none !important;
    box-shadow:  0 0 10px rgba(0,229,255,.2), inset 0 0 10px rgba(0,229,255,.04);
    display:     inline-block;
}

.btn-neon-cyan:hover, .btn-neon-cyan:focus {
    background: rgba(0,229,255,.12);
    color:      var(--color-cyan) !important;
    box-shadow: 0 0 16px var(--color-cyan), 0 0 32px rgba(0,229,255,.45);
    transform:  translateY(-2px);
}

/* ─── LIME BUTTON ────────────────────────────────────────────── */
.btn-neon-lime {
    background:  transparent;
    color:       var(--color-lime) !important;
    border:      2px solid var(--color-lime);
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--font-arabic);
    transition:  var(--transition);
    text-decoration: none !important;
    box-shadow:  0 0 10px rgba(162,255,0,.2);
    display:     inline-block;
}

.btn-neon-lime:hover, .btn-neon-lime:focus {
    background: rgba(162,255,0,.1);
    color:      var(--color-lime) !important;
    box-shadow: 0 0 16px var(--color-lime), 0 0 32px rgba(162,255,0,.4);
    transform:  translateY(-2px);
}

/* ─── OUTLINE BUTTON ─────────────────────────────────────────── */
.btn-neon-outline {
    background:  transparent;
    color:       var(--color-cyan) !important;
    border:      1px solid rgba(0,229,255,.35);
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--font-arabic);
    transition:  var(--transition);
    text-decoration: none !important;
    display:     inline-block;
}

.btn-neon-outline:hover, .btn-neon-outline:focus {
    border-color: var(--color-cyan);
    background:   rgba(0,229,255,.08);
    box-shadow:   0 0 12px rgba(0,229,255,.3);
    color:        var(--color-cyan) !important;
}

/* ─── LANG TOGGLE ────────────────────────────────────────────── */
.btn-outline-lang {
    background:  transparent;
    color:       rgba(255,255,255,.75) !important;
    border:      1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    font-size:   .85rem;
    font-weight: 500;
    padding:     6px 14px;
    transition:  var(--transition);
    font-family: var(--font-arabic);
}

.btn-outline-lang:hover {
    border-color: rgba(0,229,255,.5);
    color:        var(--color-cyan) !important;
    background:   rgba(0,229,255,.06);
}

/* ─── NEON CARDS ─────────────────────────────────────────────── */
.neon-card-cyan {
    border: 1px solid rgba(0,229,255,.18) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.5), inset 0 0 24px rgba(0,229,255,.03);
    transition: var(--transition);
}

.neon-card-cyan:hover {
    border-color: rgba(0,229,255,.55) !important;
    box-shadow: 0 8px 40px rgba(0,229,255,.18), inset 0 0 32px rgba(0,229,255,.05);
    transform: translateY(-6px);
}

.neon-card-lime {
    border: 1px solid rgba(162,255,0,.18) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.5), inset 0 0 24px rgba(162,255,0,.03);
    transition: var(--transition);
}

.neon-card-lime:hover {
    border-color: rgba(162,255,0,.55) !important;
    box-shadow: 0 8px 40px rgba(162,255,0,.18), inset 0 0 32px rgba(162,255,0,.05);
    transform: translateY(-6px);
}

/* ─── NEON DIVIDER ───────────────────────────────────────────── */
.neon-divider {
    height: 1px; border: none;
    background: linear-gradient(90deg, transparent 0%, var(--color-cyan) 30%, var(--color-lime) 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(0,229,255,.6);
    margin: 0; opacity: .6;
}

/* ─── PULSE ANIMATIONS ───────────────────────────────────────── */
@keyframes neon-pulse-cyan {
    0%,100% { box-shadow: 0 0 8px rgba(0,229,255,.4), 0 0 16px rgba(0,229,255,.2); }
    50%      { box-shadow: 0 0 12px rgba(0,229,255,.9), 0 0 24px rgba(0,229,255,.6), 0 0 48px rgba(0,229,255,.35); }
}

.neon-pulse-cyan { animation: neon-pulse-cyan 2.5s ease-in-out infinite; }

/* ─── SCAN LINE ──────────────────────────────────────────────── */
.scan-line-effect { position: relative; overflow: hidden; }

.scan-line-effect::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
    animation: scan-line 5s linear infinite; opacity: .2; pointer-events: none;
}

@keyframes scan-line {
    0%   { top: 0; }
    100% { top: 100%; }
}