/* ─── HG SpellCheck – Grammarly-style UI ────────────────────────────────────── */

.wpsc-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Shared: wavy error underline on <mark> elements
   ══════════════════════════════════════════════════════════════════════════════ */

.wpsc-err {
    color: transparent;
    background: transparent;
    text-decoration: underline wavy var(--wpsc-clr, #e53e3e);
    text-decoration-skip-ink: none;
    cursor: pointer;
    pointer-events: all;
    border-radius: 2px;
    transition: background .12s;
}
.wpsc-err:hover {
    background: rgba(229, 62, 62, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TEXTAREA wrapper + mirror
   Note: only structural/overlay properties are set here — font, colour, border,
   padding etc. are intentionally NOT overridden so the theme's styles survive.
   ══════════════════════════════════════════════════════════════════════════════ */

.wpsc-ta-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.wpsc-ta-wrap textarea {
    position: relative;
    z-index: 2;
    background: transparent !important; /* required: mirror shows through */
    caret-color: currentColor;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.wpsc-mirror {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}
.wpsc-mirror .wpsc-err {
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INPUT wrapper + highlight layer
   ══════════════════════════════════════════════════════════════════════════════ */

.wpsc-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.wpsc-input-wrap input {
    position: relative;
    z-index: 2;
    background: transparent !important; /* required: highlight shows through */
    caret-color: currentColor;
    width: 100%;
    box-sizing: border-box;
    padding-right: 90px !important; /* make room for the check button */
}

/* Button inside the input field, right side */
.wpsc-input-wrap .wpsc-check-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.wpsc-input-highlight {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    pointer-events: none;
    background: transparent;
    overflow: hidden;
}
.wpsc-input-highlight .wpsc-err {
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Check button  (Grammarly-style pill)
   ══════════════════════════════════════════════════════════════════════════════ */

.wpsc-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px 6px 9px;
    border-radius: 20px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .1s ease, color .15s ease,
                opacity .15s ease;
    outline: none;
}

.wpsc-check-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, .45) !important;
}

/* Textarea: float inside at bottom-right above the resize corner */
.wpsc-ta-wrap .wpsc-check-btn {
    position: absolute;
    bottom: 10px;
    right: 22px; /* offset from resize handle */
    z-index: 10;
}

/* ── State: idle ── */
.wpsc-btn-idle {
    background: #ffffff;
    color: #4a5568;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
}
.wpsc-btn-idle:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    box-shadow: 0 3px 10px rgba(0,0,0,.11), 0 1px 3px rgba(0,0,0,.07);
}
.wpsc-ta-wrap .wpsc-btn-idle:hover {
    transform: translateY(-1px);
}
.wpsc-btn-idle:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── State: loading ── */
.wpsc-btn-loading {
    background: #ebf8ff;
    color: #3182ce;
    border: 1.5px solid #90cdf4;
    box-shadow: 0 1px 4px rgba(49,130,206,.12);
    cursor: wait;
    pointer-events: none;
}

/* ── State: clean (all clear) ── */
.wpsc-btn-clean {
    background: #f0fff4;
    color: #276749;
    border: 1.5px solid #9ae6b4;
    box-shadow: 0 1px 4px rgba(72,187,120,.12);
}
.wpsc-btn-clean:hover {
    background: #c6f6d5;
    border-color: #68d391;
    box-shadow: 0 3px 10px rgba(72,187,120,.22);
}
.wpsc-ta-wrap .wpsc-btn-clean:hover {
    transform: translateY(-1px);
}
.wpsc-btn-clean:active {
    transform: translateY(0) !important;
}

/* ── State: errors ── */
.wpsc-btn-errors {
    background: #fff5f5;
    color: #c53030;
    border: 1.5px solid #fc8181;
    box-shadow: 0 1px 4px rgba(229,62,62,.12);
}
.wpsc-btn-errors:hover {
    background: #fed7d7;
    border-color: #fc8181;
    box-shadow: 0 3px 10px rgba(229,62,62,.22);
}
.wpsc-ta-wrap .wpsc-btn-errors:hover {
    transform: translateY(-1px);
}
.wpsc-btn-errors:active {
    transform: translateY(0) !important;
}

/* ── Spinner ── */
@keyframes wpsc-spin {
    to { transform: rotate(360deg); }
}
.wpsc-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wpsc-spin .75s linear infinite;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Floating suggestion card  (Grammarly-style)
   ══════════════════════════════════════════════════════════════════════════════ */

#wpsc-card {
    position: absolute;
    z-index: 999999;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.14), 0 1px 6px rgba(0,0,0,.08);
    padding: 14px 16px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid rgba(0,0,0,.08);
    transition: opacity .12s, transform .12s;
}

.wpsc-card-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
}

.wpsc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wpsc-type-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}
.wpsc-type-spell   { background: #fff5f5; color: #c53030; }
.wpsc-type-grammar { background: #fffbeb; color: #b7791f; }
.wpsc-type-style   { background: #faf5ff; color: #6b46c1; }

.wpsc-card-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #a0aec0;
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .1s, background .1s;
}
.wpsc-card-close:hover { color: #4a5568; background: #edf2f7; }

.wpsc-card-message {
    margin: 0 0 10px;
    color: #2d3748;
    font-size: 13px;
}

.wpsc-suggestions-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #718096;
    margin-bottom: 6px;
}

.wpsc-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wpsc-sug-btn {
    background: #ebf8ff;
    color: #2b6cb0;
    border: 1px solid #bee3f8;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
    white-space: nowrap;
}
.wpsc-sug-btn:hover {
    background: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
    transform: translateY(-1px);
}
.wpsc-sug-btn:active { transform: translateY(0); }

/* ── Dark-mode support ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .wpsc-ta-wrap textarea,
    .wpsc-input-wrap input {
        caret-color: #e2e8f0 !important;
    }

    .wpsc-btn-idle {
        background: #2d3748;
        color: #e2e8f0;
        border-color: #4a5568;
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
    }
    .wpsc-btn-idle:hover {
        background: #3a4a5c;
        border-color: #718096;
    }

    .wpsc-btn-loading {
        background: #1a365d;
        color: #90cdf4;
        border-color: #2c5282;
    }

    .wpsc-btn-clean {
        background: #1c4532;
        color: #9ae6b4;
        border-color: #276749;
    }
    .wpsc-btn-clean:hover {
        background: #22543d;
        border-color: #38a169;
    }

    .wpsc-btn-errors {
        background: #742a2a;
        color: #fc8181;
        border-color: #c53030;
    }
    .wpsc-btn-errors:hover {
        background: #822727;
        border-color: #e53e3e;
    }

    #wpsc-card {
        background: #1a202c;
        border-color: rgba(255,255,255,.1);
        box-shadow: 0 4px 24px rgba(0,0,0,.5);
    }
    .wpsc-card-message  { color: #e2e8f0; }
    .wpsc-card-close    { color: #718096; }
    .wpsc-card-close:hover { color: #e2e8f0; background: #2d3748; }

    .wpsc-type-spell   { background: #742a2a; color: #fc8181; }
    .wpsc-type-grammar { background: #744210; color: #f6ad55; }
    .wpsc-type-style   { background: #44337a; color: #d6bcfa; }

    .wpsc-suggestions-label { color: #a0aec0; }
    .wpsc-sug-btn {
        background: #2a4a6b;
        color: #90cdf4;
        border-color: #2c5282;
    }
    .wpsc-sug-btn:hover {
        background: #3182ce;
        color: #fff;
        border-color: #3182ce;
    }
}