/* ============================================================
 * Arduino Library — Countdown / Download Gate Page
 * New design, independent of the catalog's stylesheet but sharing the same
 * brand palette. Logical properties throughout so one file self-adapts to
 * RTL via the plugin's text_direction setting.
 * ============================================================ */

.alp-countdown-page {
    --alp-primary: #4F46E5;
    --alp-ink: #0F172A;
    --alp-body: #475569;
    --alp-muted: #94A3B8;
    --alp-bg: #F6F7FB;
    --alp-white: #FFFFFF;
    --alp-border: #E4E9F2;
    --alp-red: #EF4444;
    --alp-radius-lg: 28px;
    --alp-radius: 20px;
    --alp-radius-sm: 14px;
    --alp-radius-pill: 999px;
    --alp-shadow-md: 0 10px 26px -6px rgba(15,23,42,.12);
    --alp-shadow-lg: 0 26px 52px -16px rgba(79,70,229,.30);
    --alp-gradient-brand: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #06B6D4 100%);
    --alp-ease: cubic-bezier(.16,1,.3,1);

    margin: 0;
    min-height: 100vh;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--alp-bg);
    color: var(--alp-ink);
    position: relative;
    overflow-x: hidden;
}
.alp-countdown-page *, .alp-countdown-page *::before, .alp-countdown-page *::after { box-sizing: border-box; }

.alp-countdown-page.alp-style-dark {
    --alp-ink: #F1F5F9;
    --alp-body: #CBD5E1;
    --alp-muted: #64748B;
    --alp-bg: #0B1020;
    --alp-white: #151B33;
    --alp-border: #232B4A;
}
@media (prefers-color-scheme: dark) {
    .alp-countdown-page.alp-style-auto {
        --alp-ink: #F1F5F9;
        --alp-body: #CBD5E1;
        --alp-muted: #64748B;
        --alp-bg: #0B1020;
        --alp-white: #151B33;
        --alp-border: #232B4A;
    }
}

.alp-countdown-page::before,
.alp-countdown-page::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.alp-countdown-page::before { inset-inline-start: -160px; top: -160px; background: radial-gradient(circle, rgba(79,70,229,.20), transparent 70%); }
.alp-countdown-page::after { inset-inline-end: -160px; bottom: -160px; background: radial-gradient(circle, rgba(6,182,212,.18), transparent 70%); }

.alp-page-wrap { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 56px 20px; }

.alp-card {
    background: var(--alp-white);
    border: 1px solid var(--alp-border);
    border-radius: var(--alp-radius-lg);
    box-shadow: var(--alp-shadow-lg);
    padding: 40px 32px;
    text-align: center;
}

.alp-title {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--alp-ink);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .alp-title {
        background: var(--alp-gradient-brand);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.alp-thumbnail { margin: 0 0 20px; border-radius: var(--alp-radius); overflow: hidden; }
.alp-thumbnail img { width: 100%; height: auto; display: block; }

/* Stepper */
.alp-stepper { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; font-size: 12px; font-weight: 700; color: var(--alp-muted); }
.alp-stepper__step { padding: 6px 14px; border-radius: var(--alp-radius-pill); background: var(--alp-bg); transition: background .3s var(--alp-ease), color .3s var(--alp-ease); }
.alp-stepper__step.is-active { background: var(--alp-gradient-brand); color: #fff; }

/* Progress ring */
.alp-progress-ring { position: relative; width: 140px; height: 140px; margin: 0 auto 20px; }
.alp-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.alp-progress-ring__bg { fill: none; stroke: var(--alp-border); stroke-width: 7; }
.alp-progress-ring__fg { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.alp-progress-ring__number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--alp-ink); }

.alp-countdown-text { font-size: 14.5px; color: var(--alp-body); font-weight: 500; margin: 0 0 20px; }
.alp-recaptcha-wrap { margin: 0 0 20px; display: flex; justify-content: center; }

/* Target cards */
.alp-targets { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.alp-target-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--alp-radius-sm);
    border: 1.5px solid var(--alp-border);
    background: var(--alp-bg);
    text-decoration: none;
    color: var(--alp-ink);
    transition: background .25s var(--alp-ease), border-color .25s var(--alp-ease), box-shadow .25s var(--alp-ease), opacity .25s var(--alp-ease), transform .2s var(--alp-ease);
}
.alp-target-card--disabled { opacity: .55; pointer-events: none; }
.alp-target-card:not(.alp-target-card--disabled):hover {
    background: var(--alp-gradient-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--alp-shadow-md);
    transform: translateY(-2px);
}
.alp-target-card:not(.alp-target-card--disabled):hover .alp-target-card__hint { color: rgba(255,255,255,.85); }
.alp-target-card__icon { font-size: 20px; flex: 0 0 auto; }
.alp-target-card__body { flex: 1; text-align: start; display: flex; flex-direction: column; gap: 2px; }
.alp-target-card__label { font-weight: 700; font-size: 15px; }
.alp-target-card__hint { font-size: 12px; color: var(--alp-muted); transition: color .25s var(--alp-ease); }
.alp-target-card__cta { font-size: 18px; flex: 0 0 auto; }
[dir="rtl"] .alp-target-card__cta { transform: scaleX(-1); }

.alp-countdown-error { color: var(--alp-red); font-weight: 600; font-size: 13.5px; margin-top: 16px; }
.alp-honeypot-field { position: absolute !important; inset-inline-start: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Gates (password/email) */
.alp-gate-text { font-size: 15px; color: var(--alp-body); font-weight: 500; margin: 0 0 18px; }
.alp-gate-error { color: var(--alp-red); font-weight: 600; font-size: 13.5px; margin: 0 0 14px; }
.alp-gate-form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.alp-gate-input {
    font-family: inherit; font-size: 15px; padding: 13px 16px; border-radius: var(--alp-radius-sm);
    border: 1.5px solid var(--alp-border); background: var(--alp-bg); color: var(--alp-ink); outline: none;
    transition: border-color .2s var(--alp-ease), box-shadow .2s var(--alp-ease);
}
.alp-gate-input:focus { border-color: var(--alp-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
.alp-gate-submit {
    font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 20px; border-radius: var(--alp-radius-sm);
    border: none; background: var(--alp-gradient-brand); color: #fff; cursor: pointer;
    transition: box-shadow .2s var(--alp-ease), transform .2s var(--alp-ease);
}
.alp-gate-submit:hover { box-shadow: var(--alp-shadow-md); transform: translateY(-2px); }
.alp-gate-submit:disabled { opacity: .7; cursor: default; transform: none; }

/* Terminal message (expired/limit reached/not found) */
.alp-terminal-message { padding: 20px 0; }
.alp-terminal-icon { font-size: 40px; display: block; margin-bottom: 14px; }
.alp-terminal-message p { font-size: 15px; color: var(--alp-body); font-weight: 600; margin: 0; }

/* Gate ad zones */
.alp-gate-ad-zone { margin: 0 0 20px; text-align: center; }
.alp-gate-ad-zone--top, .alp-gate-ad-zone--bottom { max-width: 728px; margin-inline: auto; }

@media (max-width: 480px) {
    .alp-card { padding: 32px 22px; }
    .alp-progress-ring { width: 116px; height: 116px; }
    .alp-progress-ring__number { font-size: 28px; }
}