/* ============================================================
   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  (v2)
   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 1.1rem;
    border:         1.5px solid var(--ssf-border);
    border-radius:  10px;
    background:     var(--ssf-bg);
    position:       relative;
    overflow:       hidden;
    transition:     opacity var(--ssf-transition), border-color var(--ssf-transition);

    /* 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;
}
.ssf-field-hint {
    display:    block;
    font-size:  0.78rem;
    color:      var(--ssf-muted);
    margin-top: 0.3rem;
}
/* Busy state — a new challenge is being fetched */
.ssf-captcha--busy {
    opacity:        0.55;
    pointer-events: none;
}
.ssf-captcha--busy .ssf-captcha__refresh svg {
    animation: ssf-spin 0.7s linear infinite;
}

/* ── Header row: shield + label + refresh button ───────────── */
.ssf-captcha__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    margin-bottom:   0.85rem;
}

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

.ssf-captcha__icon {
    flex-shrink: 0;
    color:       var(--ssf-primary);
}

.ssf-captcha__refresh {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    padding:         0;
    flex-shrink:     0;
    color:           var(--ssf-muted);
    background:      transparent;
    border:          1.5px solid var(--ssf-border);
    border-radius:   50%;
    cursor:          pointer;
    transition:      color var(--ssf-transition), border-color var(--ssf-transition), transform var(--ssf-transition);
}
.ssf-captcha__refresh:hover {
    color:        var(--ssf-primary);
    border-color: var(--ssf-primary);
    transform:    rotate(90deg);
}
.ssf-captcha__refresh:focus-visible {
    outline:        2px solid var(--ssf-primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ssf-captcha__refresh,
    .ssf-captcha__refresh:hover { transform: none; transition: none; }
}

/* ── 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 — letter tiles ─────────────────────────── */
.ssf-captcha__word {
    display:     inline-flex;
    gap:         4px;
    user-select: none;
    -webkit-user-select: none;
}

.ssf-captcha__tile {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       26px;
    height:          30px;
    padding:         0 4px;
    font-family:     'Courier New', Courier, monospace;
    font-size:       1.05rem;
    font-style:      normal;
    font-weight:     900;
    color:           var(--ssf-primary);
    background:      #fff;
    border:          1.5px solid var(--ssf-border);
    border-radius:   6px;
    box-shadow:      0 1px 2px rgba(0,0,0,0.06);
}

/* ── 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) ────────────────────────────── */
/* Doubled scope beats `.ssf-field input[type="text"]` (width:100%),
   which otherwise out-specifies a lone class and stretches the input. */
.ssf-captcha .ssf-field .ssf-captcha__input,
.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);
}

/* Answer wrapper inside the widget shouldn't add trailing space */
.ssf-captcha .ssf-field {
    margin-bottom: 0;
}

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

.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;
    border-radius: 8px;
}

.ssf-captcha--compact .ssf-captcha__head {
    margin-bottom: 0.5rem;
}

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

.ssf-captcha--compact .ssf-captcha__refresh {
    width:  24px;
    height: 24px;
}

.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__tile {
    min-width: 20px;
    height:    24px;
    font-size: 0.85rem;
}

.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;
}
.ssf-field input[type="file"] { display: block; width: 100%; padding: 0.5rem 0.875rem; font-size: 0.9rem; color: var(--ssf-muted); background: #fff; border: 1.5px solid var(--ssf-border); border-radius: var(--ssf-radius); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ssf-field input[type="file"]:focus { border-color: var(--ssf-primary); box-shadow: 0 0 0 3px rgba(26,26,46,0.12); outline: none; } .ssf-field input[type="file"]::file-selector-button { padding: 0.4rem 0.9rem; margin-right: 0.75rem; font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--ssf-primary); border: none; border-radius: 5px; cursor: pointer; transition: background 0.2s ease; } .ssf-field input[type="file"]::file-selector-button:hover { background: var(--ssf-accent); }

@media (max-width: 768px) {
  .tys-tab-panel .ssf-field input[type="file"] {
    padding: 12px;
  }
}