/* ============================================================
   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;
}
/* ============================================================
   Secure SMTP Forms — CAPTCHA & Enhanced Honeypot Styles
   Append these rules to assets/css/form.css
   ============================================================ */

/* ── Enhanced Honeypot ─────────────────────────────────────────────────────
   Three fields, stacked off-screen. Absolutely positioned so they consume
   zero layout space. pointer-events:none prevents accidental interaction.
   visibility:hidden hides from screen readers.
   We never use display:none — that's a 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;
}

/* ── CAPTCHA widget ─────────────────────────────────────────────────────── */
.ssf-captcha {
    margin-top:     1.5rem;
    padding:        1.25rem 1.5rem;
    border:         1.5px solid var(--ssf-border);
    border-radius:  var(--ssf-radius);
    background:     var(--ssf-bg);
    position:       relative;
    overflow:       hidden;
}

/* Subtle left accent stripe */
.ssf-captcha::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              0;
    bottom:           0;
    width:            4px;
    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.5rem;
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--ssf-muted);
    margin:         0 0 1rem;
}
.ssf-captcha__icon {
    font-size: 1rem;
}

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

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

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

/* ── Word challenge ─── */
.ssf-captcha__word {
    display:          inline-block;
    font-family:      'Courier New', Courier, monospace;
    font-size:        1.5rem;
    font-weight:      900;
    letter-spacing:   0.35em;
    color:            var(--ssf-primary);
    padding:          0.3rem 0.75rem;
    border:           2px dashed var(--ssf-border);
    border-radius:    4px;
    background:       #fff;
    user-select:      none;        /* don't let bots copy-paste easily */
    -webkit-user-select: none;
}

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

/* Colour radio options */
.ssf-captcha__choices {
    display:          flex;
    gap:              0.75rem;
    flex-wrap:        wrap;
    margin-bottom:    0.5rem;
}

.ssf-captcha__choice {
    display:          flex;
    align-items:      center;
    gap:              0.4rem;
    padding:          0.45rem 0.9rem;
    border:           1.5px solid var(--ssf-border);
    border-radius:    var(--ssf-radius);
    cursor:           pointer;
    font-size:        0.9rem;
    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:        1rem;
    height:       1rem;
    accent-color: var(--ssf-primary);
    flex-shrink:  0;
}

.ssf-captcha__choice input[type="radio"]:checked + .ssf-captcha__choice-label {
    color: var(--ssf-primary);
}

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

/* Text input (math + word) */
.ssf-captcha__input {
    display:        block;
    width:          180px;
    padding:        0.5rem 0.75rem;
    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;
    -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 for captcha */
.ssf-captcha .ssf-field-error {
    display:    block;
    font-size:  0.8rem;
    color:      var(--ssf-error);
    margin-top: 0.4rem;
    min-height: 1.2em;
}

.ssf-captcha.ssf-field--error,
.ssf-captcha:has(.ssf-field-error:not(:empty)) {
    border-color: var(--ssf-error);
}
/* Wrapper */
.ssf-wrapper {
    max-width: 640px;
    width: 100%;
}

/* Honeypot — hidden from humans, visible to bots */
.ssf-hp-wrap {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    visibility: hidden;
    opacity:    0;
    pointer-events: none;
}

/* 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;
}