/* Diwali festive promotional strip — sits above the navbar, uses site brand colors */
.diwali-promo {
    --dp-bg: #14181d;
    --dp-teal: #4daba1;
    --dp-cyan: #55cee3;
    --dp-indigo: #4d51ab;
    --dp-orange: #ff6a00;
    --dp-gold: #ffc107;
    --dp-text: #ffffff;

    position: relative;
    z-index: 1031;
    overflow: hidden;
    color: var(--dp-text);
    font-family: 'Poppins', sans-serif;
    background:
        radial-gradient(ellipse 30% 160% at 15% 50%, rgba(77, 81, 171, 0.35), transparent 70%),
        radial-gradient(ellipse 30% 160% at 85% 50%, rgba(85, 206, 227, 0.18), transparent 70%),
        var(--dp-bg);
}

/* Brand gradient hairline under the strip */
.diwali-promo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--dp-teal), var(--dp-cyan) 50%, var(--dp-indigo));
}

.dp-crackers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dp-inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 9px 52px 9px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

/* ---------- One-line offer ---------- */
.dp-line {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 14px;
    line-height: 1.3;
}

/* ---------- Side portals: lantern + diyas (rockets drawn on canvas) ---------- */
.dp-side {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(110px, 13vw, 200px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 14px 4px;
    pointer-events: none;
}

.dp-side--left {
    left: 0;
    background: radial-gradient(ellipse 90% 120% at 30% 100%, rgba(255, 106, 0, 0.22), transparent 70%);
}

.dp-side--right {
    right: 0;
    flex-direction: row-reverse;
    background: radial-gradient(ellipse 90% 120% at 70% 100%, rgba(255, 106, 0, 0.22), transparent 70%);
}

.dp-lantern {
    align-self: flex-start;
    width: 16px;
    height: 36px;
    overflow: visible;
    transform-origin: 50% 0;
    animation: dp-sway 3.2s ease-in-out infinite;
}

.dp-side--right .dp-lantern { animation-delay: -1.6s; }

.dp-lantern__string { stroke: rgba(255, 193, 7, 0.6); stroke-width: 1.5; }
.dp-lantern__body {
    fill: var(--dp-orange);
    stroke: var(--dp-gold);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.8));
}
.dp-lantern__band { stroke: var(--dp-gold); stroke-width: 1.5; fill: none; }
.dp-lantern__tassel { stroke: var(--dp-gold); stroke-width: 1.5; fill: var(--dp-gold); }

@keyframes dp-sway {
    0%, 100% { transform: rotate(6deg); }
    50%      { transform: rotate(-6deg); }
}

.dp-diyas {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.dp-diya {
    width: 20px;
    height: 20px;
    overflow: visible;
}

.dp-diyas .dp-diya:nth-child(2) { width: 24px; height: 24px; }

.dp-diya__bowl { fill: var(--dp-orange); }
.dp-diya__flame {
    fill: var(--dp-gold);
    transform-origin: 32px 30px;
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.9));
    animation: dp-flicker 1.6s ease-in-out infinite;
}

.dp-diya:nth-child(2) .dp-diya__flame { animation-delay: -0.5s; }
.dp-diya:nth-child(3) .dp-diya__flame { animation-delay: -1.1s; }

@keyframes dp-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    35%      { transform: scale(0.92, 1.08) rotate(-4deg); }
    65%      { transform: scale(1.05, 0.95) rotate(3deg); }
}

.dp-label {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--dp-gold), var(--dp-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dp-label::after {
    content: "\2022";
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.4);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.dp-offer {
    font-weight: 700;
    white-space: nowrap;
}

.dp-on {
    color: rgba(255, 255, 255, 0.75);
}

.dp-courses {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* Highlighted course tags: gold border with a glow that travels across them */
.dp-chip {
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--dp-gold);
    background: rgba(255, 193, 7, 0.08);
    border: 1.5px solid var(--dp-gold);
    border-radius: 6px;
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
    animation: dp-chip-glow 4s ease-in-out infinite;
}

.dp-chip:nth-child(2) { animation-delay: 0.5s; }
.dp-chip:nth-child(3) { animation-delay: 1s; }
.dp-chip:nth-child(4) { animation-delay: 1.5s; }

@keyframes dp-chip-glow {
    0%, 30%, 100% { box-shadow: 0 0 0 rgba(255, 193, 7, 0); }
    12%           { box-shadow: 0 0 10px rgba(255, 193, 7, 0.65), inset 0 0 6px rgba(255, 193, 7, 0.25); }
}

/* Limited period badge */
.dp-limited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(90deg, var(--dp-orange), #e04a00);
    border-radius: 999px;
}

.dp-limited__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: dp-blink 1.2s ease-in-out infinite;
}

@keyframes dp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* ---------- Countdown ---------- */
.dp-timer {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
}

.dp-unit {
    min-width: 40px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
}

.dp-unit strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-text);
    font-variant-numeric: tabular-nums;
}

.dp-unit small {
    font-size: 10px;
    color: var(--dp-cyan);
}

/* ---------- CTA (mirrors .btn-default brand gradient) ---------- */
.dp-cta {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(to right, var(--dp-teal) 0%, var(--dp-cyan) 50%, var(--dp-indigo) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(85, 206, 227, 0.3);
    transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dp-cta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.dp-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: dp-shimmer 3.6s ease-in-out infinite;
}

@keyframes dp-shimmer {
    0%, 60% { left: -60%; }
    100%    { left: 130%; }
}

.dp-cta:hover,
.dp-cta:focus-visible {
    color: #fff;
    background-position: right center;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(77, 81, 171, 0.45);
}

.dp-cta:hover svg { transform: translateX(3px); }

.dp-cta:focus-visible {
    outline: 2px solid var(--dp-cyan);
    outline-offset: 3px;
}

/* ---------- Dismiss ---------- */
.dp-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 19px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.dp-close:hover,
.dp-close:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}

.diwali-promo.is-hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .dp-inner { gap: 16px; }
    .dp-line { font-size: 13px; }
    .dp-diyas { display: none; }
}

@media (max-width: 991.98px) {
    .dp-side { width: 64px; padding: 0 10px; }
}

@media (max-width: 575.98px) {
    .dp-side { display: none; }
}

@media (max-width: 991.98px) {
    .dp-inner {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 40px 10px 16px;
    }
    .dp-line {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .dp-inner { padding: 10px 34px 10px 12px; }
    .dp-line { font-size: 12.5px; gap: 5px 8px; }
    .dp-label::after { display: none; }
    .dp-chip { font-size: 10.5px; padding: 1px 7px; }
    .dp-limited { font-size: 9.5px; padding: 2px 8px; }
    .dp-unit { min-width: 34px; padding: 2px 4px; }
    .dp-unit strong { font-size: 13px; }
    .dp-cta { padding: 6px 14px; font-size: 13px; }
    .dp-close { top: 10px; right: 6px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-diya__flame,
    .dp-lantern,
    .dp-chip,
    .dp-limited__dot,
    .dp-cta::after { animation: none; }
    .dp-cta,
    .dp-cta svg { transition: none; }
}