/* ==========================================================
   WP Link Lock — article step (v2.1)
   Style ported from SecureTrail
   ========================================================== */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    --wll-accent:       #2a9d8f;   /* calm teal — main brand colour   */
    --wll-accent-hover: #217f73;   /* teal darker on hover            */
    --wll-accent-soft:  #e8f6f5;   /* very light teal tint            */
    --wll-dark:         #0d1f1e;   /* near-black with teal tint       */
    --wll-dark-hover:   #162e2c;
    --wll-text:         #1a1a1a;
    --wll-muted:        #888;
    --wll-border:       #e4eceb;
    --wll-radius:       14px;
    --wll-node:         30px;
    --wll-shadow-l:     0 2px 16px rgba(0,0,0,0.07);
    --wll-shadow-d:     0 6px 28px rgba(13,31,30,0.35);
}

/* ── Injection wrapper ──────────────────────────────────────
   .wll-inject is inserted as a SIBLING before the article,
   so it lives in the page's outer column — not inside the
   theme's article content box. We only need to constrain its
   max-width and center it within the page column.
   ───────────────────────────────────────────────────────── */
.wll-inject {
    display:    block !important;
    width:      100% !important;
    max-width:  680px !important;    /* typical content column width */
    margin:     0 auto 24px !important;
    box-sizing: border-box !important;
    padding:    0 !important;
    float:      none !important;
    clear:      both !important;
}

/* Tighten bottom spacing for next-btn */
.wll-bottom-inject { margin-bottom: 0 !important; }

/* ── Card shell ─────────────────────────────────────────── */
.wll-card {
    border-radius: var(--wll-radius) !important;
    padding:       26px 28px !important;
    box-sizing:    border-box !important;
    width:         100% !important;
    font-family:   inherit !important;
}
.wll-card--light {
    background:  #fff !important;
    border:      1.5px solid var(--wll-border) !important;
    box-shadow:  var(--wll-shadow-l) !important;
}
.wll-card--dark {
    background:  var(--wll-dark) !important;
    border:      none !important;
    box-shadow:  var(--wll-shadow-d) !important;
}
.wll-card--center {
    text-align: center !important;
}

/* ── Sub-step tracker ───────────────────────────────────── */
.wll-track {
    display:         flex !important;
    align-items:     flex-start !important;
    width:           100% !important;
    margin-bottom:   22px !important;
    box-sizing:      border-box !important;
}

/* Node */
.wll-snode {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            7px !important;
    flex-shrink:    0 !important;
    width:          64px !important;
    position:       relative !important;
    z-index:        1 !important;
}
.wll-snode-circle {
    width:           var(--wll-node) !important;
    height:          var(--wll-node) !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       12px !important;
    font-weight:     700 !important;
    transition:      all 0.25s !important;
    flex-shrink:     0 !important;
}
.wll-snode-label {
    font-size:   10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-align:  center !important;
    line-height: 1.3 !important;
    transition:  color 0.25s !important;
}

/* Active */
.wll-snode--active .wll-snode-circle {
    background: var(--wll-accent) !important;
    color:      #fff !important;
    border:     none !important;
    box-shadow: 0 0 0 4px var(--wll-accent-soft) !important;
}
.wll-snode--active .wll-snode-label { color: var(--wll-accent) !important; font-weight:700 !important; }

/* Done */
.wll-snode--done .wll-snode-circle {
    background: var(--wll-accent) !important;
    color:      #fff !important;
    border:     none !important;
    box-shadow: none !important;
}
.wll-snode--done .wll-snode-label { color: var(--wll-muted) !important; }

/* Todo */
.wll-snode--todo .wll-snode-circle {
    background: #fff !important;
    color:      #ccc !important;
    border:     1.5px solid #ddd !important;
    box-shadow: none !important;
}
.wll-snode--todo .wll-snode-label { color: #ccc !important; }

/* Connector line */
.wll-sline {
    flex:        1 !important;
    height:      1.5px !important;
    background:  #e8e8f0 !important;
    margin-top:  calc(var(--wll-node) / 2) !important;
    transition:  background 0.3s !important;
    flex-shrink: 1 !important;
}
.wll-sline--done { background: var(--wll-accent) !important; }

/* ── Countdown ──────────────────────────────────────────── */
.wll-counting,
.wll-ready {
    width:      100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.wll-clock {
    font-size:            42px !important;
    font-weight:          700 !important;
    color:                var(--wll-accent) !important;
    letter-spacing:       4px !important;
    font-family:          'Courier New', monospace !important;
    font-variant-numeric: tabular-nums !important;
    line-height:          1 !important;
    margin-bottom:        14px !important;
}

.wll-bar-wrap {
    background:    var(--wll-accent-soft) !important;
    border-radius: 3px !important;
    height:        3px !important;
    max-width:     260px !important;
    margin:        0 auto 12px !important;
    overflow:      hidden !important;
}
.wll-bar-fill {
    height:       100% !important;
    border-radius: 3px !important;
    background:   var(--wll-accent) !important;
    width:        0% !important;
}
.wll-timer-lbl {
    font-size:      10px !important;
    letter-spacing: 1.3px !important;
    color:          #ccc !important;
    text-transform: uppercase !important;
}

/* ── Scroll prompt ──────────────────────────────────────── */
.wll-scroll-bar {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    gap:              12px !important;
    border:           1.5px solid var(--wll-accent-soft) !important;
    border-radius:    10px !important;
    padding:          14px 16px !important;
    background-image: linear-gradient(90deg,#e8f6f5 0%,#d0eeec 30%,#e2f4f3 60%,#e8f6f5 100%);
    background-size:  200% 100%;
    animation:        wll-wave 4s linear infinite !important;
}
.wll-arrows {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            2px !important;
    flex-shrink:    0 !important;
}
.wll-arrow-chevron {
    width:         8px !important;
    height:        8px !important;
    border-right:  2px solid var(--wll-accent) !important;
    border-bottom: 2px solid var(--wll-accent) !important;
    opacity:       0;
    transform:     rotate(45deg);
    animation:     wll-arrow 1.2s ease-in-out infinite !important;
}
.wll-arrows-left  .wll-arrow-chevron:nth-child(1) { animation-delay: 0s    !important; }
.wll-arrows-left  .wll-arrow-chevron:nth-child(2) { animation-delay: 0.15s !important; }
.wll-arrows-left  .wll-arrow-chevron:nth-child(3) { animation-delay: 0.3s  !important; }
.wll-arrows-right .wll-arrow-chevron:nth-child(1) { animation-delay: 0.3s  !important; }
.wll-arrows-right .wll-arrow-chevron:nth-child(2) { animation-delay: 0.15s !important; }
.wll-arrows-right .wll-arrow-chevron:nth-child(3) { animation-delay: 0s    !important; }
.wll-scroll-text {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            3px !important;
    text-align:     center !important;
}
.wll-scroll-title { font-size:15px !important; font-weight:700 !important; color:var(--wll-text) !important; }
.wll-scroll-sub   { font-size:12px !important; color:var(--wll-muted) !important; line-height:1.5 !important; }
.wll-scroll-sub strong { color:var(--wll-accent) !important; font-weight:700 !important; }

.wll-get-btn {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            8px !important;
    padding:        14px 44px !important;
    background:     #fff !important;
    color:          var(--wll-text) !important;
    border:         none !important;
    border-radius:  50px !important;
    font-size:      13px !important;
    font-weight:    700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    cursor:         pointer !important;
    box-shadow:     0 4px 16px rgba(0,0,0,0.18) !important;
    transition:     background 0.2s, transform 0.15s !important;
    white-space:    nowrap !important;
}
.wll-get-btn:hover {
    background:  #f2f2f2 !important;
    transform:   translateY(-1px) !important;
}

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes wll-wave {
    0%   { background-position: 0%   50%; }
    100% { background-position: 200% 50%; }
}
@keyframes wll-arrow {
    0%       { opacity:0; transform:rotate(45deg) translate(-4px,-4px); }
    40%,60%  { opacity:1; transform:rotate(45deg) translate(0,0); }
    100%     { opacity:0; transform:rotate(45deg) translate(4px,4px); }
}
@keyframes wll-spin { to { transform:rotate(360deg); } }


/* ── Done state (top card) ──────────────────────────────── */
.wll-done-msg { font-size:15px !important; font-weight:700 !important; color:var(--wll-accent) !important; text-align:center !important; padding:6px 0 2px !important; }

/* ── Result box (inside the dark bottom card) ───────────── */
.wll-result       { width:100% !important; text-align:center !important; }
.wll-result-title { font-size:12px !important; letter-spacing:1.3px !important; text-transform:uppercase !important; color:#9fb8b5 !important; margin:0 0 12px !important; }
.wll-result-row   { display:flex !important; gap:8px !important; align-items:center !important; }
.wll-result-input {
    flex:1 !important; min-width:0 !important; margin:0 !important;
    background:#fff !important; color:var(--wll-text) !important;
    border:none !important; border-radius:50px !important;
    padding:12px 18px !important; font-size:13px !important;
    font-family:'Courier New',monospace !important; box-shadow:none !important; height:auto !important;
}
.wll-copy-btn, .wll-open-btn {
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    flex-shrink:0 !important; padding:12px 22px !important; border-radius:50px !important;
    font-size:12px !important; font-weight:700 !important; letter-spacing:1px !important;
    text-transform:uppercase !important; cursor:pointer !important; text-decoration:none !important;
    border:none !important; transition:background .2s !important; line-height:1 !important;
}
.wll-copy-btn { background:var(--wll-accent) !important; color:#fff !important; }
.wll-copy-btn:hover { background:var(--wll-accent-hover) !important; }
.wll-open-btn { background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.35) !important; margin-top:12px !important; }
.wll-open-btn:hover { background:rgba(255,255,255,.08) !important; }
.wll-error { color:#ff8a80 !important; font-size:13px !important; margin-top:12px !important; }
.wll-get-btn:disabled { opacity:.6 !important; cursor:default !important; transform:none !important; }
.wll-spinner {
    display:inline-block !important; width:12px !important; height:12px !important;
    border:2px solid #ddd !important; border-top-color:var(--wll-accent) !important;
    border-radius:50% !important; animation:wll-spin .7s linear infinite !important;
    vertical-align:middle !important; margin-right:6px !important;
}
@media (max-width:480px) {
    .wll-card { padding:20px 16px !important; }
    .wll-snode { width:52px !important; }
    .wll-snode-label { font-size:9px !important; }
    .wll-clock { font-size:34px !important; }
    .wll-get-btn { padding:12px 28px !important; font-size:12px !important; }
    .wll-result-row { flex-direction:column !important; }
    .wll-result-input, .wll-copy-btn { width:100% !important; }
}

/* ── Quiz widget — compact, low-key row (rendered by the shortcode) ── */
.wll-quiz { margin:0 auto 16px !important; max-width:680px !important; overflow:hidden !important;
    transition:opacity .6s ease, max-height .6s ease, margin .6s ease !important; }
.wll-quiz.wll-leaving { opacity:0 !important; max-height:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
.wll-quiz-card {
    display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important;
    padding:12px 16px 12px 16px !important; text-align:left !important;
    background:#f6fbfa !important; border:1px solid #cfe7e4 !important;
    border-left:4px solid var(--wll-accent) !important;
    border-radius:12px !important; box-shadow:0 2px 8px rgba(42,157,143,.10) !important;
}
.wll-quiz-body { display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; flex:1 !important; }
.wll-quiz-badge {
    flex-shrink:0 !important; padding:3px 10px !important; margin:0 !important;
    background:var(--wll-accent-soft) !important; color:var(--wll-accent) !important;
    border-radius:50px !important; font-size:11px !important; font-weight:700 !important;
    letter-spacing:1.2px !important; text-transform:uppercase !important; line-height:1.3 !important;
}
.wll-quiz-text { font-size:15px !important; font-weight:500 !important; color:#444 !important; line-height:1.35 !important; margin:0 !important; }
.wll-quiz-btn {
    flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; gap:8px !important;
    padding:10px 24px !important; background:var(--wll-accent) !important; color:#fff !important;
    border:none !important; border-radius:50px !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:1.2px !important; text-transform:uppercase !important; line-height:1 !important;
    cursor:pointer !important; box-shadow:none !important; transition:background .2s !important;
}
.wll-quiz-btn { position:relative !important; overflow:hidden !important; isolation:isolate !important; }
.wll-quiz-btn::after {
    content:'' !important; position:absolute !important; top:0 !important; left:-80% !important;
    width:45% !important; height:100% !important; pointer-events:none !important;
    background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%) !important;
    transform:skewX(-20deg) !important;
    animation:wll-shine 3.4s ease-in-out 1s infinite !important;
}
.wll-quiz-btn:disabled::after { animation:none !important; opacity:0 !important; }
@keyframes wll-shine { 0% { left:-80%; } 38%, 100% { left:140%; } }
@media (prefers-reduced-motion: reduce) { .wll-quiz-btn::after { animation:none !important; opacity:0 !important; } }
.wll-quiz-btn:hover { background:var(--wll-accent-hover) !important; color:#fff !important; }
.wll-quiz-btn:disabled { opacity:.7 !important; cursor:default !important; }
.wll-quiz-arrow { font-size:14px !important; letter-spacing:0 !important; }
/* ── Message state (no token): same card, same style, with an icon ── */
.wll-quiz-card { transition:opacity .25s ease !important; }
.wll-quiz-card.wll-swap > * { opacity:0 !important; }
.wll-quiz-body, .wll-quiz-btn { transition:opacity .25s ease !important; }
.wll-quiz-icon {
    flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:24px !important; height:24px !important; border-radius:50% !important;
    background:var(--wll-accent-soft) !important; color:var(--wll-accent) !important;
}
.wll-quiz-icon svg { width:14px !important; height:14px !important; display:block !important; }
@media (max-width:480px) {
    .wll-quiz-card { flex-direction:column !important; align-items:stretch !important; gap:10px !important; padding:12px !important; }
    .wll-quiz-body { justify-content:center !important; flex-wrap:wrap !important; text-align:center !important; }
    .wll-quiz-btn { justify-content:center !important; }
}