/* WP Trail Gate — v1.4.0 */

/* ── Key Input Widget (Door) — dark style ─────────────────── */
.wptg-key-widget {
    background: #0f1117 !important;
    border-radius: 16px !important;
    padding: 28px 28px 24px !important;
    margin: 32px auto !important;
    max-width: 580px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
    text-align: center !important;
}

.wptg-key-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}

.wptg-key-input-wrap {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.wptg-key-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 1.5px solid #3a3a4a !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    color: #ffffff !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    background: #1a1a2e !important;
    box-shadow: none !important;
}
.wptg-key-input::placeholder { color: #666 !important; }
.wptg-key-input:focus {
    border-color: #7c3aed !important;
    background: #1e1e30 !important;
}

.wptg-key-btn {
    padding: 12px 24px !important;
    background: #7c3aed !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.wptg-key-btn:hover { background: #6d28d9 !important; }

.wptg-key-error {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #f87171 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
    font-family: monospace !important;
}

/* Door countdown shares clock/bar CSS from top timer */
/* Clock inside dark widget needs white text */
.wptg-door-clock {
    color: #ffffff !important;
}

/* Bar inside dark widget — lighter background track */
.wptg-key-countdown .wptg-timer-bar-wrap {
    background: rgba(255,255,255,0.15) !important;
}
.wptg-door-bar {
    background: linear-gradient(90deg, #7c3aed, #a78bfa) !important;
}

/* Countdown + ready states inside door widget */
.wptg-key-countdown {
    padding: 16px 0 8px !important;
    text-align: center !important;
}
.wptg-key-ready {
    padding: 16px 0 4px !important;
    text-align: center !important;
}

/* "Continue to Next Step" button — white pill on dark bg like Image 1 */
.wptg-btn-next-step {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px 36px !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
.wptg-btn-next-step:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
}
.wptg-btn-next-step .wptg-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.wptg-btn-next-step:hover .wptg-arrow { transform: translateX(5px); }

/* ── Injected Top Timer ───────────────────────────────────── */
.wptg-top-timer {
    background: #fff !important;
    border: 1px solid #e8e8f0 !important;
    border-radius: 10px !important;
    margin: 0 0 20px !important;
    padding: 24px 28px !important;
    text-align: center !important;
    font-family: inherit !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

/* ── Robot check state ───────────────────────────────────── */
.wptg-robot-check {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wptg-robot-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 32px !important;
    background: #0f1117 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}
.wptg-robot-btn:hover {
    background: #1e1e2e !important;
    transform: translateY(-1px) !important;
}
.wptg-robot-btn:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
    transform: none !important;
}

/* ── Counting state ──────────────────────────────────────── */
.wptg-top-counting { display: block; }

/* Digital clock — large MM:SS format, purple */
.wptg-timer-clock {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #6d28d9 !important;
    letter-spacing: 4px !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
    font-family: 'Courier New', monospace !important;
}

/* Progress bar */
.wptg-timer-bar-wrap {
    background: #ede9fe !important;
    border-radius: 4px !important;
    height: 4px !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    overflow: hidden !important;
    max-width: 340px !important;
}
.wptg-timer-bar-fill {
    height: 100% !important;
    background: #7c3aed !important;
    border-radius: 4px !important;
}

/* Label under bar */
.wptg-timer-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.4px !important;
    color: #aaa !important;
    text-transform: uppercase !important;
}

/* ── Ready state ─────────────────────────────────────────── */
.wptg-top-ready {
    animation: wptg-fadein 0.3s ease;
    padding: 6px 0 !important;
}

/* Down arrow in circle */
.wptg-ready-arrow-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #6d28d9 !important;
    color: #6d28d9 !important;
    font-size: 18px !important;
    margin: 0 auto 12px !important;
}

/* Bold title */
.wptg-ready-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* Subtitle */
.wptg-ready-subtitle {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    color: #999 !important;
    text-transform: uppercase !important;
}

@keyframes wptg-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wptg-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* ── Bottom Step Card ─────────────────────────────────────── */
.wptg-card {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.08) !important;
    border: 1px solid #ebebeb !important;
    padding: 36px 32px 32px !important;
    margin: 40px auto !important;
    max-width: 560px !important;
    text-align: center !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.wptg-card.wptg-step { display: none; }
.wptg-middle-state   { display: none; }
.wptg-final-state    { display: none; }
.wptg-final-code-wrap { display: none; }

.wptg-card .wptg-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}
.wptg-card .wptg-card-subtitle {
    font-size: 13px !important;
    color: #888 !important;
    margin: 0 0 18px !important;
    line-height: 1.5 !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.wptg-btn-wrap { display: flex; justify-content: center; }

.wptg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 28px !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    transition: background 0.2s, transform 0.15s !important;
    line-height: 1 !important;
}

/* ── Unified Next Step Card wrapper ──────────────────────── */
/* Wraps wptg-btn-ready and wptg-btn-next-step */
.wptg-next-card {
    background: #0f1117 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* White pill button — used for all "next" actions */
.wptg-btn-ready,
.wptg-btn-next-step {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px 48px !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    line-height: 1 !important;
}
.wptg-btn-ready:hover,
.wptg-btn-next-step:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
    color: #1a1a1a !important;
}
.wptg-btn-ready:active,
.wptg-btn-next-step:active { transform: translateY(0) !important; }

.wptg-btn-ready .wptg-arrow,
.wptg-btn-next-step .wptg-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.wptg-btn-ready:hover .wptg-arrow,
.wptg-btn-next-step:hover .wptg-arrow { transform: translateX(5px); }

/* Reveal button — purple */
.wptg-btn-reveal {
    background: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3) !important;
}
.wptg-btn-reveal:hover {
    background: #6d28d9 !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.wptg-btn:active { transform: translateY(0) !important; }

.wptg-btn .wptg-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.wptg-btn:hover .wptg-arrow { transform: translateX(5px); }

.wptg-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Code reveal ──────────────────────────────────────────── */
.wptg-final-code-wrap { animation: wptg-fadein 0.4s ease; }

.wptg-card .wptg-code-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f4f6fb !important;
    border: 1.5px solid #d0d8ea !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    margin-bottom: 10px !important;
}
.wptg-code-text {
    font-family: 'Courier New', monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: 3px !important;
}
.wptg-copy-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #7c3aed !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    white-space: nowrap !important;
}
.wptg-copy-btn:hover { background: #1a1a1a !important; }
.wptg-code-note {
    font-size: 12px !important;
    color: #aaa !important;
    margin: 0 !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .wptg-key-widget     { padding: 22px 16px !important; max-height: 220px !important; }
    .wptg-key-input-wrap { flex-direction: column !important; }
    .wptg-key-btn        { width: 100% !important; justify-content: center !important; }
    .wptg-top-timer      { padding: 12px 16px !important; }
    .wptg-card           { padding: 22px 16px 18px !important; }
    .wptg-btn            { font-size: 13px !important; padding: 12px 20px !important; }
    .wptg-code-text      { font-size: 17px !important; }
}