/* ============================================================
   Secure SMTP Forms — Frontend Styles
   ============================================================ */

:root {
    --ssf-primary:      #1a1a2e;
    --ssf-accent:       #e94560;
    --ssf-success:      #16a34a;
    --ssf-error:        #dc2626;
    --ssf-border:       #d1d5db;
    --ssf-bg:           #f9fafb;
    --ssf-text:         #111827;
    --ssf-muted:        #6b7280;
    --ssf-radius:       6px;
    --ssf-transition:   0.2s ease;
}

/* ============================================================
   Wrapper
   ============================================================ */
.ssf-wrapper {
    max-width: 640px;
    width: 100%;
}

/* ============================================================
   Enhanced Honeypot
   Absolutely positioned — zero layout space consumed.
   Never display:none (fingerprinting flag for smart bots).
   ============================================================ */
.ssf-hp-wrap {
    position:       absolute;
    left:           -99999px;
    top:            -99999px;
    width:          1px;
    height:         1px;
    overflow:       hidden;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    clip:           rect(0 0 0 0);
    white-space:    nowrap;
}

/* ============================================================
   Field wrapper
   ============================================================ */
.ssf-field {
    margin-bottom: 1.25rem;
    position: relative;
}

.ssf-field label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--ssf-text);
    margin-bottom: 0.375rem;
}

.ssf-req {
    color:       var(--ssf-accent);
    margin-left: 2px;
}

/* Inputs, textarea, select */
.ssf-field input[type="text"],
.ssf-field input[type="email"],
.ssf-field input[type="tel"],
.ssf-field input[type="url"],
.ssf-field input[type="number"],
.ssf-field textarea,
.ssf-field select {
    display:        block;
    width:          100%;
    padding:        0.625rem 0.875rem;
    font-size:      1rem;
    color:          var(--ssf-text);
    background:     #fff;
    border:         1.5px solid var(--ssf-border);
    border-radius:  var(--ssf-radius);
    transition:     border-color var(--ssf-transition), box-shadow var(--ssf-transition);
    box-sizing:     border-box;
    outline:        none;
    appearance:     none;
    -webkit-appearance: none;
}

.ssf-field input:focus,
.ssf-field textarea:focus,
.ssf-field select:focus {
    border-color: var(--ssf-primary);
    box-shadow:   0 0 0 3px rgba(26,26,46,0.12);
}

.ssf-field textarea {
    resize:     vertical;
    min-height: 120px;
}

/* Error state */
.ssf-field--error input,
.ssf-field--error textarea,
.ssf-field--error select {
    border-color: var(--ssf-error);
    box-shadow:   0 0 0 3px rgba(220,38,38,0.1);
}

.ssf-field-error {
    display:    block;
    font-size:  0.8rem;
    color:      var(--ssf-error);
    margin-top: 0.3rem;
    min-height: 1.2em;
}

/* Checkboxes / radios */
.ssf-choice {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    margin-bottom: 0.4rem;
    cursor:        pointer;
    font-size:     0.95rem;
}
.ssf-choice input {
    width:  1rem;
    height: 1rem;
    accent-color: var(--ssf-primary);
    flex-shrink: 0;
}

/* ============================================================
   Submit button
   ============================================================ */
.ssf-submit-wrap {
    margin-top: 1.5rem;
}

.ssf-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.7rem 1.75rem;
    font-size:       1rem;
    font-weight:     700;
    color:           #fff;
    background:      var(--ssf-primary);
    border:          none;
    border-radius:   var(--ssf-radius);
    cursor:          pointer;
    transition:      background var(--ssf-transition), transform var(--ssf-transition);
    letter-spacing:  0.02em;
}

.ssf-btn:hover:not(:disabled) {
    background: var(--ssf-accent);
    transform:  translateY(-1px);
}

.ssf-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* Spinner */
.ssf-spinner {
    display:        none;
    width:          16px;
    height:         16px;
    border:         2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      ssf-spin 0.7s linear infinite;
    flex-shrink:    0;
}
.ssf-btn--loading .ssf-spinner { display: block; }

@keyframes ssf-spin {
    to { transform: rotate(360deg); }
}

/* Response message */
.ssf-response {
    margin-top:    1rem;
    padding:       0.75rem 1rem;
    border-radius: var(--ssf-radius);
    font-size:     0.95rem;
    font-weight:   500;
}
.ssf-response:empty { display: none; }

.ssf-response--success {
    background: #dcfce7;
    color:      var(--ssf-success);
    border:     1px solid #bbf7d0;
}
.ssf-response--error {
    background: #fee2e2;
    color:      var(--ssf-error);
    border:     1px solid #fecaca;
}

/* Admin error notice on frontend (admins only) */
.ssf-error {
    color:      var(--ssf-error);
    background: #fee2e2;
    padding:    0.75rem 1rem;
    border-radius: var(--ssf-radius);
    font-size:  0.9rem;
}

/* ============================================================
   CAPTCHA widget — base
   Only rendered when captcha UI is enabled. When the UI toggle
   is OFF the shortcode emits zero HTML so there is no spacing
   bleed, no hidden wrapper, nothing in the DOM at all.
   ============================================================ */
.ssf-captcha {
    margin-top:     1.25rem;
    padding:        1rem 1.25rem;
    border:         1.5px solid var(--ssf-border);
    border-radius:  var(--ssf-radius);
    background:     var(--ssf-bg);
    position:       relative;
    overflow:       hidden;

    /* CSS custom props — overridden per-form by the scoped <style> block
       that SSF_Shortcode::build_captcha_css() injects.                   */
    --ssf-captcha-bg:      var(--ssf-bg);
    --ssf-captcha-border:  var(--ssf-border);
    --ssf-captcha-color:   var(--ssf-text);
    --ssf-captcha-size:    15px;
    --ssf-captcha-padding: 1rem;
}

/* Subtle left accent stripe */
.ssf-captcha::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              0;
    bottom:           0;
    width:            3px;
    background:       var(--ssf-primary);
    border-radius:    var(--ssf-radius) 0 0 var(--ssf-radius);
}

/* ── Label row ─────────────────────────────────────────────── */
.ssf-captcha__label {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--ssf-muted);
    margin:         0 0 0.75rem;
}

/* ── Challenge area ────────────────────────────────────────── */
.ssf-captcha__challenge {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    margin-bottom:   0.75rem;
    flex-wrap:       wrap;
}

.ssf-captcha__prompt {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--ssf-text);
    line-height: 1.4;
}

/* ── Math challenge ────────────────────────────────────────── */
.ssf-captcha__challenge--math .ssf-captcha__prompt {
    font-size:      0.95rem;
    font-family:    'Courier New', Courier, monospace;
    background:     var(--ssf-primary);
    color:          #fff;
    padding:        0.3rem 0.75rem;
    border-radius:  4px;
    letter-spacing: 0.04em;
}

/* ── Word challenge ────────────────────────────────────────── */
.ssf-captcha__word {
    display:         inline-block;
    font-family:     'Courier New', Courier, monospace;
    font-size:       1.15rem;
    font-weight:     900;
    letter-spacing:  0.3em;
    color:           var(--ssf-primary);
    padding:         0.25rem 0.6rem;
    border:          2px dashed var(--ssf-border);
    border-radius:   4px;
    background:      #fff;
    user-select:     none;
    -webkit-user-select: none;
}

/* ── Colour challenge ──────────────────────────────────────── */
.ssf-captcha__swatch {
    display:      inline-block;
    width:        40px;
    height:       40px;
    border-radius: 50%;
    border:        3px solid #fff;
    box-shadow:   0 2px 6px rgba(0,0,0,0.15);
    flex-shrink:  0;
}

.ssf-captcha__choices {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.ssf-captcha__choice {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    padding:     0.35rem 0.75rem;
    border:      1.5px solid var(--ssf-border);
    border-radius: var(--ssf-radius);
    cursor:      pointer;
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--ssf-text);
    background:  #fff;
    transition:  border-color var(--ssf-transition), background var(--ssf-transition);
}

.ssf-captcha__choice:hover {
    border-color: var(--ssf-primary);
    background:   rgba(26,26,46,0.04);
}

.ssf-captcha__choice input[type="radio"] {
    width:        0.9rem;
    height:       0.9rem;
    accent-color: var(--ssf-primary);
    flex-shrink:  0;
}

/* Checked state */
.ssf-captcha__choice:has(input:checked) {
    border-color: var(--ssf-primary);
    background:   rgba(26,26,46,0.06);
}

/* ── Answer input (math + word) ────────────────────────────── */
.ssf-captcha__input {
    display:     block;
    width:       160px;
    padding:     0.4rem 0.65rem;
    font-size:   0.9rem;
    color:       var(--ssf-text);
    background:  #fff;
    border:      1.5px solid var(--ssf-border);
    border-radius: var(--ssf-radius);
    transition:  border-color var(--ssf-transition), box-shadow var(--ssf-transition);
    box-sizing:  border-box;
    outline:     none;
    -webkit-appearance: none;
}

.ssf-captcha__input:focus {
    border-color: var(--ssf-primary);
    box-shadow:   0 0 0 3px rgba(26,26,46,0.12);
}

/* ── Error state ───────────────────────────────────────────── */
.ssf-captcha .ssf-field-error {
    display:    block;
    font-size:  0.78rem;
    color:      var(--ssf-error);
    margin-top: 0.35rem;
    min-height: 1.1em;
}

.ssf-captcha.ssf-field--error,
.ssf-captcha:has(.ssf-field-error:not(:empty)) {
    border-color: var(--ssf-error);
}

/* ============================================================
   CAPTCHA — compact modifier  (.ssf-captcha--compact)
   Applied when admin enables "Compact mode" in settings.
   Tightens every dimension so the widget sits inline with
   the form without dominating the layout.
   ============================================================ */
.ssf-captcha--compact {
    margin-top:  0.75rem;
    padding:     0.6rem 0.9rem 0.6rem 1rem; /* extra left for accent stripe */
    border-radius: 5px;
}

/* No accent stripe in compact mode — saves vertical space */
.ssf-captcha--compact::before {
    display: none;
}

.ssf-captcha--compact .ssf-captcha__label {
    font-size:     0.65rem;
    margin-bottom: 0.4rem;
}

.ssf-captcha--compact .ssf-captcha__challenge {
    gap:           0.5rem;
    margin-bottom: 0.45rem;
}

.ssf-captcha--compact .ssf-captcha__prompt {
    font-size: 0.82rem;
}

.ssf-captcha--compact .ssf-captcha__challenge--math .ssf-captcha__prompt {
    font-size: 0.82rem;
    padding:   0.2rem 0.55rem;
}

.ssf-captcha--compact .ssf-captcha__word {
    font-size:      0.9rem;
    letter-spacing: 0.22em;
    padding:        0.15rem 0.45rem;
}

.ssf-captcha--compact .ssf-captcha__swatch {
    width:  28px;
    height: 28px;
}

.ssf-captcha--compact .ssf-captcha__choices {
    gap:           0.35rem;
    margin-bottom: 0.25rem;
}

.ssf-captcha--compact .ssf-captcha__choice {
    padding:   0.25rem 0.55rem;
    font-size: 0.78rem;
}

.ssf-captcha--compact .ssf-captcha__choice input[type="radio"] {
    width:  0.75rem;
    height: 0.75rem;
}

.ssf-captcha--compact .ssf-captcha__input {
    width:     130px;
    padding:   0.3rem 0.5rem;
    font-size: 0.82rem;
}

.ssf-captcha--compact .ssf-captcha .ssf-field-error {
    font-size: 0.72rem;
}