/* ELIA Assistant – settings screen.
 * Native WordPress admin look; the ELIA red appears only in the mark. */

.elia-admin {
    --elia-red: #b61722;
    --elia-ink: #1d2327;
    --elia-muted: #50575e;
    --elia-line: #dcdcde;
    --elia-soft: #f6f7f7;
    --elia-blue: var(--wp-admin-theme-color, #2271b1);
    --elia-ok: #00703c;
    --elia-ok-bg: #edfaef;
    --elia-warn: #7a5300;
    --elia-warn-bg: #fcf9e8;
    --elia-err: #b32d2e;
    --elia-err-bg: #fcf0f1;
    max-width: 820px;
    color: var(--elia-ink);
}

/* ── Header ─────────────────────────────────────────────────────────── */

.elia-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 24px;
}

.elia-admin .elia-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

.elia-mark { flex: none; }

.elia-admin .wp-header-end + .notice,
.elia-admin .wp-header-end + .updated { margin: 0 0 20px; }

.elia-lede {
    margin: 6px 0 0 38px;
    max-width: 52ch;
    font-size: 14px;
    color: var(--elia-muted);
}

.elia-admin .dashicons-external {
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-left: 4px;
    vertical-align: text-bottom;
    text-decoration: none;
}

.elia-admin .button:has(.dashicons) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.elia-admin .button .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    margin: 0;
}

/* ── Steps: a real sequence, so it gets numbers and a spine ─────────── */

.elia-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elia-step {
    position: relative;
    margin: 0;
    padding: 0 0 20px 48px;
}

.elia-step::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: var(--elia-line);
}

.elia-step:last-child::before { display: none; }

.elia-step-marker {
    position: absolute;
    top: 14px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--elia-line);
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    font-weight: 600;
    color: var(--elia-muted);
}

.elia-step-marker .dashicons { display: none; color: #fff; }

.elia-step.is-done .elia-step-marker {
    border-color: var(--elia-ok);
    background: var(--elia-ok);
}

.elia-step.is-done .elia-step-number { display: none; }
.elia-step.is-done .elia-step-marker .dashicons { display: block; }

/* ── Cards ──────────────────────────────────────────────────────────── */

.elia-card {
    background: #fff;
    border: 1px solid var(--elia-line);
    border-radius: 8px;
    padding: 20px 24px 22px;
}

.elia-card--extra { margin: 28px 0 0 48px; }

/* Target of the redirect after a WooCommerce key action: clear of the admin bar, no focus ring on a heading. */
#elia-wc-title { scroll-margin-top: 60px; }
#elia-wc-title:focus { outline: none; }

/* ── On / off switch ────────────────────────────────────────────────── */

.elia-power {
    display: flex;
    /* The status sits top right, as in the other cards' headers. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px 48px;
    padding: 16px 24px;
}

/* The same switch card says "Test mode": there it is being on that needs attention. */
.elia-power--test { margin-bottom: 28px; }

.elia-power:not(.elia-power--test):has(input:not(:checked)),
.elia-power--test:has(input:checked) { border-color: #dba617; background: var(--elia-warn-bg); }

.elia-switch {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.elia-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.elia-switch-track {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    background: #8c8f94;
    transition: background-color .15s;
}

.elia-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.elia-switch input:checked + .elia-switch-track { background: var(--elia-ok); }
.elia-switch input:checked + .elia-switch-track::after { transform: translateX(18px); }
.elia-switch input:focus-visible + .elia-switch-track { outline: 2px solid var(--elia-blue); outline-offset: 2px; }

.elia-power-body { display: flex; flex-direction: column; gap: 2px; }
.elia-power-title { font-size: 15px; font-weight: 600; }
.elia-power-text { font-size: 13px; color: var(--elia-muted); max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
    .elia-switch-track,
    .elia-switch-track::after { transition: none; }
}

.elia-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.elia-admin .elia-card-head h2 {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.elia-card p { font-size: 14px; line-height: 1.55; max-width: 68ch; }
.elia-card p.description { font-size: 13px; }

.elia-intro { margin: 0 0 8px; }

.elia-note { color: var(--elia-muted); }

/* ── Status pill: the dot plus a word, never colour alone ───────────── */

.elia-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    background: var(--elia-soft);
    color: var(--elia-muted);
}

.elia-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.elia-status--ok { background: var(--elia-ok-bg); color: var(--elia-ok); }
.elia-status--warning { background: var(--elia-warn-bg); color: var(--elia-warn); }
.elia-status--error { background: var(--elia-err-bg); color: var(--elia-err); }

/* ── Callouts ───────────────────────────────────────────────────────── */

.elia-callout {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 4px solid var(--elia-line);
    border-radius: 0 6px 6px 0;
    background: var(--elia-soft);
}

.elia-callout p { margin: 0; }
.elia-callout p + p { margin-top: 8px; }
.elia-callout--ok { border-color: var(--elia-ok); background: var(--elia-ok-bg); }
.elia-callout--warning { border-color: #dba617; background: var(--elia-warn-bg); }
.elia-callout--error { border-color: var(--elia-err); background: var(--elia-err-bg); }

/* ── How-to list (the steps inside a step) ──────────────────────────── */

.elia-howto {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: elia-howto;
}

.elia-howto li {
    position: relative;
    margin: 0;
    padding: 6px 0 6px 34px;
    font-size: 14px;
    line-height: 1.5;
    counter-increment: elia-howto;
}

.elia-howto li::before {
    content: counter(elia-howto);
    position: absolute;
    top: 6px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--elia-soft);
    border: 1px solid var(--elia-line);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: var(--elia-muted);
}

/* ── API key ────────────────────────────────────────────────────────── */

.elia-key-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.elia-key-row,
.elia-code-row,
.elia-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.elia-key-row input { flex: 1 1 260px; max-width: 420px; }

.elia-keyswap { margin-top: 18px; }

.elia-keyswap > summary {
    cursor: pointer;
    color: var(--elia-blue);
    font-size: 13px;
}

.elia-keyswap[open] > summary { margin-bottom: 12px; }

.elia-actions form { margin: 0; }

.elia-admin .elia-link-danger { color: var(--elia-err); margin-left: 6px; }
.elia-admin .elia-link-danger:hover,
.elia-admin .elia-link-danger:focus { color: #8a2424; }

/* ── Connected widget summary with a small preview ──────────────────── */

.elia-widget {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 4px;
}

.elia-preview {
    position: relative;
    flex: none;
    width: 200px;
    height: 132px;
    border: 1px solid var(--elia-line);
    border-radius: 10px;
    background:
        linear-gradient(var(--elia-soft), var(--elia-soft)) 14px 16px / 96px 8px no-repeat,
        linear-gradient(var(--elia-soft), var(--elia-soft)) 14px 32px / 132px 6px no-repeat,
        linear-gradient(var(--elia-soft), var(--elia-soft)) 14px 44px / 112px 6px no-repeat,
        #fff;
    overflow: hidden;
}

.elia-preview-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--elia-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.elia-preview-button svg { fill: var(--elia-base); }

.elia-preview-bubble {
    position: absolute;
    right: 12px;
    bottom: 58px;
    max-width: 150px;
    padding: 7px 10px;
    border-radius: 10px 10px 2px 10px;
    background: var(--elia-base);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    font-size: 11px;
    line-height: 1.35;
    color: var(--elia-base-ink, #1d2327);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.elia-preview.is-left .elia-preview-button { right: auto; left: 12px; }
.elia-preview.is-left .elia-preview-bubble { right: auto; left: 12px; border-radius: 10px 10px 10px 2px; }

.elia-facts {
    display: grid;
    align-content: center;
    gap: 10px;
    margin: 0;
}

.elia-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.elia-facts dt { color: var(--elia-muted); }
.elia-facts dd { margin: 0; font-weight: 600; }

/* ── Radio cards ────────────────────────────────────────────────────── */

.elia-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.elia-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--elia-line);
    border-radius: 8px;
    cursor: pointer;
}

.elia-choice:hover { border-color: #8c8f94; }

.elia-choice:has(input:checked) {
    border-color: var(--elia-blue);
    box-shadow: inset 0 0 0 1px var(--elia-blue);
    background: #f6f9fc;
}

.elia-choice:has(input:focus-visible) {
    outline: 2px solid var(--elia-blue);
    outline-offset: 2px;
}

.elia-admin .elia-choice input[type="radio"] { margin: 2px 0 0; flex: none; }

.elia-choice-body { display: grid; gap: 4px; }

.elia-choice-title { font-size: 14px; font-weight: 600; }

.elia-choice-text { font-size: 13px; line-height: 1.5; color: var(--elia-muted); }

.elia-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--elia-ok-bg);
    color: var(--elia-ok);
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
}

/* ── Revealed details under a choice ────────────────────────────────── */

.elia-reveal { margin-top: 16px; }
.elia-admin [data-elia-when][hidden] { display: none; }

.elia-reveal > .elia-note { margin: 0; }

.elia-shortcode,
.elia-lang {
    padding: 16px;
    border-radius: 8px;
    background: var(--elia-soft);
}

.elia-shortcode > p:first-child { margin-top: 0; }

.elia-code,
.elia-code-input {
    padding: 7px 12px;
    border: 1px solid var(--elia-line);
    border-radius: 4px;
    background: #fff;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
}

.elia-code { flex: 0 1 auto; user-select: all; }
.elia-code-input { flex: 1 1 280px; max-width: 520px; }

.elia-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 14px 0 6px;
}

.elia-builder label { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }

.elia-lang label { display: block; margin-bottom: 6px; font-weight: 600; }

/* ── Save ──────────────────────────────────────────────────────────── */

.elia-save { margin: 20px 0 0 48px; }

/* Save / Discard at the foot of a block with unsaved changes. */
.elia-block-save {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--elia-line);
}

.elia-block-save[hidden] { display: none; }

/* Autosave status: a small toast in the corner, so it is seen wherever the change was made. */
.elia-autosave {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    margin: 0;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--elia-ink);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.elia-autosave.is-visible { opacity: 1; }
.elia-autosave.is-error { background: var(--elia-err); }

@media (prefers-reduced-motion: reduce) {
    .elia-autosave { transition: none; }
}

/* ── WooCommerce ────────────────────────────────────────────────────── */

.elia-card.is-disabled { background: var(--elia-soft); }
.elia-card.is-disabled h2,
.elia-card.is-disabled .elia-intro { color: var(--elia-muted); }

.elia-copy-field { margin-bottom: 12px; }
.elia-copy-field label { display: block; margin-bottom: 4px; font-weight: 600; }

/* ── Copy feedback ──────────────────────────────────────────────────── */

.elia-admin .button.is-copied { border-color: var(--elia-ok); color: var(--elia-ok); }
.elia-admin .button-primary.is-copied,
.elia-admin .button-primary.is-copied:hover,
.elia-admin .button-primary.is-copied:focus,
.elia-admin .button-primary.is-copied:active {
    border-color: var(--elia-ok);
    background: var(--elia-ok);
    color: #fff;
}

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .elia-head { flex-direction: column; }
    .elia-lede { margin-left: 0; }
    .elia-step { padding-left: 0; }
    .elia-step::before { display: none; }
    .elia-step-marker { position: static; margin-bottom: 8px; }
    .elia-card { padding: 16px; }
    .elia-card--extra,
    .elia-save { margin-left: 0; }
    .elia-choices { grid-template-columns: 1fr; }
    .elia-widget { flex-direction: column; }
    .elia-facts div { grid-template-columns: 1fr; gap: 2px; }
}