/* ==========================================================================
   Simon's Simple Contact Form – Shared Styles (Frontend + Admin previews)
   File: assets/scf-styles.css
   Notes:
   - Variables live on .scf-theme-<name> classes (applied on the form + admin preview tiles).
   - Add a theme in scf-themes.php, then add its .scf-theme-<name> block at the bottom here.
   ========================================================================== */

/* ---------------------------------------------------
   Base defaults (fallback)
--------------------------------------------------- */
:root{
  --scf-bg:#f7f7f7;
  --scf-text:#111827;
  --scf-border:#d1d5db;
  --scf-input-bg:#ffffff;
  --scf-input-text:#111827;
  --scf-btn-bg:linear-gradient(135deg,#2563eb,#22c55e);
  --scf-btn-text:#ffffff;
  --scf-focus:#3b82f6;
  --scf-muted:#6b7280;
  --scf-accent:#2563eb;

  /* extra polish */
  --scf-radius:14px;
  --scf-radius-sm:12px;
  --scf-shadow:0 18px 50px rgba(0,0,0,.14);
  --scf-shadow-soft:0 10px 26px rgba(0,0,0,.10);
  --scf-inset:inset 0 0 0 1px rgba(255,255,255,.06);
  --scf-input-shadow:0 10px 22px rgba(0,0,0,.08);
  --scf-btn-shadow:0 16px 38px rgba(0,0,0,.18);
  --scf-ring:0 0 0 4px rgba(59,130,246,.22);
}

.scf-wrap input,
.scf-wrap textarea {
  caret-color: var(--scf-input-text);
}

.scf-wrap ::selection {
  background: rgba(59,130,246,.35);
  color: #fff;
}

.scf-wrap button{
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.scf-wrap button:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    var(--scf-btn-shadow),
    0 6px 16px rgba(0,0,0,.18);
}

.scf-wrap button:active{
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 6px 12px rgba(0,0,0,.25) inset,
    0 4px 10px rgba(0,0,0,.20);
}


/* Fix Chrome autofill / copy-paste dropdown on dark themes */
.scf-theme-dark input,
.scf-theme-midnight input,
.scf-theme-slate input,
.scf-theme-carbon input,
.scf-theme-steel input,
.scf-theme-forest input,
.scf-theme-ocean input,
.scf-theme-violet input,
.scf-theme-emerald input,
.scf-theme-coffee input,
.scf-theme-terminal input,
.scf-theme-neon input {
  color-scheme: dark;
}

/* Force autofill background + text */
.scf-wrap input:-webkit-autofill,
.scf-wrap textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--scf-input-text) !important;
  box-shadow: 0 0 0 1000px var(--scf-input-bg) inset !important;
  transition: background-color 9999s ease-out 0s;
}


@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* ---------------------------------------------------
   Frontend form
--------------------------------------------------- */
.scf-wrap{
  max-width:520px;
  padding:20px;
  border-radius:var(--scf-radius);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--scf-bg);
  color:var(--scf-text);
  box-shadow:0 0 0 1px var(--scf-border), var(--scf-shadow);
  position:relative;
  overflow:hidden;
}

/* subtle glossy overlay for “flashy” look (works with gradients) */
.scf-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:radial-gradient(800px 240px at 20% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
             radial-gradient(700px 220px at 80% 15%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
  opacity:.9;
}

.scf-wrap > *{ position:relative; }

.scf-wrap label{
  font-weight:900;
  margin-top:12px;
  display:block;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--scf-text);
}

.scf-wrap input,
.scf-wrap textarea{
  width:100%;
  padding:11px 12px;
  margin-top:6px;
  border-radius:var(--scf-radius-sm);
  font-size:15px;
  border:1px solid var(--scf-border);
  background:var(--scf-input-bg);
  color:var(--scf-input-text); /* <- fixes “white-on-white / dark-on-dark” issues */
  box-sizing:border-box;
  box-shadow:var(--scf-inset), var(--scf-input-shadow);
  outline:none;
  transition:transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

.scf-wrap textarea{ resize:vertical; min-height:130px; }

.scf-wrap input::placeholder,
.scf-wrap textarea::placeholder{
  color:var(--scf-muted);
  opacity:1;
}

.scf-wrap input:focus,
.scf-wrap textarea:focus{
  border-color:var(--scf-focus);
  box-shadow:var(--scf-inset), var(--scf-input-shadow), var(--scf-ring);
  transform:translateY(-1px);
}

.scf-wrap button{
  margin-top:15px;
  padding:12px 14px;
  width:100%;
  border-radius:calc(var(--scf-radius-sm) + 2px);
  font-size:16px;
  cursor:pointer;
  border:none;
  background:var(--scf-btn-bg);
  color:var(--scf-btn-text);
  font-weight:950;
  letter-spacing:.2px;
  box-shadow:var(--scf-btn-shadow);
  transition:transform .12s ease, filter .16s ease, box-shadow .16s ease;
}

.scf-wrap button:hover{
  filter:brightness(1.05) saturate(1.06);
  transform:translateY(-1px);
}

.scf-wrap button:active{
  transform:translateY(1px) scale(.995);
  filter:brightness(.98) saturate(1.02);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.scf-msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:calc(var(--scf-radius-sm) + 2px);
  font-weight:900;
  box-shadow:inset 0 0 0 1px var(--scf-border);
  backdrop-filter:saturate(1.05);
}

.scf-success{ background:rgba(34,197,94,.16); }
.scf-error{ background:rgba(239,68,68,.16); }

/* Special effect themes */
.scf-theme-glass.scf-wrap{
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.scf-theme-terminal.scf-wrap{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* ---------------------------------------------------
   Admin settings page (theme thumbnails)
--------------------------------------------------- */
.scf-admin-h2{ margin-top:18px; }
.scf-admin-note{ max-width:900px; }
.scf-admin-hr{ margin:24px 0; }
.scf-theme-status{ margin-top:10px; font-weight:700; }

.scf-theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
  max-width:980px;
}

.scf-theme-thumb{
  border:1px solid #d0d7de;
  background:#fff;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  text-align:left;
  transition:transform .12s ease, box-shadow .16s ease;
}

.scf-theme-thumb:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.scf-theme-thumb.active{
  outline:3px solid #2271b1;
  border-color:#2271b1;
}

.scf-thumb-preview{
  height:90px;
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  /* admin previews use the SAME vars */
  background:var(--scf-bg);
  color:var(--scf-text);
  box-shadow:inset 0 0 0 1px var(--scf-border);
  position:relative;
  overflow:hidden;
}

.scf-thumb-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(420px 180px at 25% 5%, rgba(255,255,255,.14), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

.scf-thumb-title{ font-weight:950; font-size:14px; }
.scf-thumb-row{ display:flex; gap:8px; align-items:center; }

.scf-thumb-pill{
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  opacity:.98;
  background:var(--scf-input-bg);
  color:var(--scf-input-text);
  border:1px solid var(--scf-border);
}

.scf-thumb-line{
  height:8px;
  width:100%;
  border-radius:999px;
  background:var(--scf-input-bg);
  box-shadow:inset 0 0 0 1px var(--scf-border);
  opacity:.92;
}

.scf-thumb-btn{
  padding:6px 10px;
  border-radius:10px;
  font-weight:950;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  background:var(--scf-btn-bg);
  color:var(--scf-btn-text);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

.scf-thumb-label{
  display:block;
  margin-top:8px;
  font-weight:850;
}

/* ---------------------------------------------------
   ALL 20 THEMES (variables live on the .scf-theme-* class)
   Rules:
   - Dark themes: dark inputs + light text
   - Light themes: light inputs + dark text
--------------------------------------------------- */

/* 1) LIGHT */
.scf-theme-light{
  --scf-bg:linear-gradient(135deg,#ffffff,#f1f5f9);
  --scf-text:#0f172a;
  --scf-border:#d1d5db;
  --scf-input-bg:rgba(255,255,255,.92);
  --scf-input-text:#0f172a;
  --scf-btn-bg:linear-gradient(135deg,#2563eb,#22c55e);
  --scf-btn-text:#ffffff;
  --scf-focus:#3b82f6;
  --scf-muted:#64748b;
  --scf-accent:#2563eb;
}

/* 2) DARK */
.scf-theme-dark{
  --scf-bg:linear-gradient(135deg,#0b1220,#050a14);
  --scf-text:#e5e7eb;
  --scf-border:#1e293b;
  --scf-input-bg:rgba(15,23,42,.78);
  --scf-input-text:#f8fafc;
  --scf-btn-bg:linear-gradient(135deg,#22d3ee,#3b82f6);
  --scf-btn-text:#020617;
  --scf-focus:#60a5fa;
  --scf-muted:#9aa6bd;
  --scf-accent:#22d3ee;
  --scf-ring:0 0 0 4px rgba(34,211,238,.22);
}

/* 3) MIDNIGHT */
.scf-theme-midnight{
  --scf-bg:linear-gradient(135deg,#020617,#0b1220);
  --scf-text:#f1f5f9;
  --scf-border:#1e293b;
  --scf-input-bg:rgba(11,18,32,.78);
  --scf-input-text:#f8fafc;
  --scf-btn-bg:linear-gradient(135deg,#111827,#60a5fa);
  --scf-btn-text:#f8fafc;
  --scf-focus:#60a5fa;
  --scf-muted:#a3b1c6;
  --scf-accent:#60a5fa;
}

/* 4) SUNSET */
.scf-theme-sunset{
  --scf-bg:linear-gradient(135deg,#ff7a18,#ffb347);
  --scf-text:#111827;
  --scf-border:rgba(17,24,39,.25);
  --scf-input-bg:rgba(255,255,255,.90);
  --scf-input-text:#111827;
  --scf-btn-bg:linear-gradient(135deg,#111827,#7c2d12);
  --scf-btn-text:#ffffff;
  --scf-focus:#111827;
  --scf-muted:#374151;
  --scf-accent:#7c2d12;
}

/* 5) FOREST */
.scf-theme-forest{
  --scf-bg:linear-gradient(135deg,#052e1d,#0f2a1d);
  --scf-text:#dcfce7;
  --scf-border:#14532d;
  --scf-input-bg:rgba(8,59,37,.78);
  --scf-input-text:#ecfdf5;
  --scf-btn-bg:linear-gradient(135deg,#10b981,#34d399);
  --scf-btn-text:#052e1d;
  --scf-focus:#34d399;
  --scf-muted:#9dd9c7;
  --scf-accent:#10b981;
  --scf-ring:0 0 0 4px rgba(52,211,153,.22);
}

/* 6) OCEAN */
.scf-theme-ocean{
  --scf-bg:linear-gradient(135deg,#082f49,#0c4a6e);
  --scf-text:#e0f2fe;
  --scf-border:#075985;
  --scf-input-bg:rgba(11,59,91,.80);
  --scf-input-text:#ecfeff;
  --scf-btn-bg:linear-gradient(135deg,#22d3ee,#38bdf8);
  --scf-btn-text:#082f49;
  --scf-focus:#38bdf8;
  --scf-muted:#bae6fd;
  --scf-accent:#22d3ee;
  --scf-ring:0 0 0 4px rgba(56,189,248,.22);
}

/* 7) ROSE */
.scf-theme-rose{
  --scf-bg:linear-gradient(135deg,#fff1f2,#ffe4e6);
  --scf-text:#111827;
  --scf-border:#fecdd3;
  --scf-input-bg:rgba(255,255,255,.92);
  --scf-input-text:#111827;
  --scf-btn-bg:linear-gradient(135deg,#e11d48,#fb7185);
  --scf-btn-text:#ffffff;
  --scf-focus:#fb7185;
  --scf-muted:#6b7280;
  --scf-accent:#e11d48;
}

/* 8) AMBER */
.scf-theme-amber{
  --scf-bg:linear-gradient(135deg,#fffbeb,#fef3c7);
  --scf-text:#111827;
  --scf-border:#fde68a;
  --scf-input-bg:rgba(255,255,255,.92);
  --scf-input-text:#111827;
  --scf-btn-bg:linear-gradient(135deg,#f59e0b,#fb7185);
  --scf-btn-text:#111827;
  --scf-focus:#f59e0b;
  --scf-muted:#6b7280;
  --scf-accent:#f59e0b;
}

/* 9) SLATE */
.scf-theme-slate{
  --scf-bg:linear-gradient(135deg,#0f172a,#020617);
  --scf-text:#e5e7eb;
  --scf-border:#334155;
  --scf-input-bg:rgba(11,18,32,.78);
  --scf-input-text:#f8fafc;
  --scf-btn-bg:linear-gradient(135deg,#94a3b8,#64748b);
  --scf-btn-text:#0b1220;
  --scf-focus:#93c5fd;
  --scf-muted:#cbd5e1;
  --scf-accent:#93c5fd;
}

/* 10) CARBON */
.scf-theme-carbon{
  --scf-bg:linear-gradient(135deg,#0a0a0a,#171717);
  --scf-text:#fafafa;
  --scf-border:#262626;
  --scf-input-bg:rgba(15,15,15,.86);
  --scf-input-text:#ffffff;
  --scf-btn-bg:linear-gradient(135deg,#ffffff,#a3a3a3);
  --scf-btn-text:#0a0a0a;
  --scf-focus:#e5e5e5;
  --scf-muted:#b3b3b3;
  --scf-accent:#ffffff;
}

/* 12) GLASS */
.scf-theme-glass{
  --scf-bg:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  --scf-text:#0b1220;
  --scf-border:rgba(255,255,255,.35);
  --scf-input-bg:rgba(255,255,255,.74);
  --scf-input-text:#0b1220;
  --scf-btn-bg:linear-gradient(135deg,rgba(11,18,32,.95),rgba(59,130,246,.95));
  --scf-btn-text:#ffffff;
  --scf-focus:#0b1220;
  --scf-muted:#334155;
  --scf-accent:#3b82f6;
}

/* 13) PAPER */
.scf-theme-paper{
  --scf-bg:linear-gradient(135deg,#fbfbf6,#f5f5ee);
  --scf-text:#1f2937;
  --scf-border:#e5e7eb;
  --scf-input-bg:#ffffff;
  --scf-input-text:#1f2937;
  --scf-btn-bg:linear-gradient(135deg,#111827,#374151);
  --scf-btn-text:#ffffff;
  --scf-focus:#111827;
  --scf-muted:#6b7280;
  --scf-accent:#111827;
}

/* 14) RETRO */
.scf-theme-retro{
  --scf-bg:linear-gradient(135deg,#fef3c7,#fde68a);
  --scf-text:#111827;
  --scf-border:#f59e0b;
  --scf-input-bg:rgba(255,251,235,.95);
  --scf-input-text:#111827;
  --scf-btn-bg:linear-gradient(135deg,#7c2d12,#f59e0b);
  --scf-btn-text:#fffbeb;
  --scf-focus:#7c2d12;
  --scf-muted:#78350f;
  --scf-accent:#7c2d12;
}

/* 15) VIOLET */
.scf-theme-violet{
  --scf-bg:linear-gradient(135deg,#2e1065,#3b0764);
  --scf-text:#f5f3ff;
  --scf-border:#6d28d9;
  --scf-input-bg:rgba(42,10,85,.80);
  --scf-input-text:#f5f3ff;
  --scf-btn-bg:linear-gradient(135deg,#a78bfa,#22d3ee);
  --scf-btn-text:#1f093a;
  --scf-focus:#c4b5fd;
  --scf-muted:#e9d5ff;
  --scf-accent:#a78bfa;
  --scf-ring:0 0 0 4px rgba(167,139,250,.20);
}

/* 16) EMERALD */
.scf-theme-emerald{
  --scf-bg:linear-gradient(135deg,#022c22,#064e3b);
  --scf-text:#ecfdf5;
  --scf-border:#047857;
  --scf-input-bg:rgba(5,59,45,.82);
  --scf-input-text:#ecfdf5;
  --scf-btn-bg:linear-gradient(135deg,#34d399,#f59e0b);
  --scf-btn-text:#022c22;
  --scf-focus:#6ee7b7;
  --scf-muted:#a7f3d0;
  --scf-accent:#34d399;
  --scf-ring:0 0 0 4px rgba(110,231,183,.18);
}

/* 18) COFFEE */
.scf-theme-coffee{
  --scf-bg:linear-gradient(135deg,#2a1f1a,#3b2a23);
  --scf-text:#fff7ed;
  --scf-border:#4a372f;
  --scf-input-bg:rgba(51,36,31,.88);
  --scf-input-text:#fff7ed;
  --scf-btn-bg:linear-gradient(135deg,#d97706,#fb7185);
  --scf-btn-text:#2a1f1a;
  --scf-focus:#fb923c;
  --scf-muted:#f1d7b3;
  --scf-accent:#fb923c;
  --scf-ring:0 0 0 4px rgba(251,146,60,.20);
}

/* 19) SNOW */
.scf-theme-snow{
  --scf-bg:linear-gradient(135deg,#ffffff,#f1f5f9);
  --scf-text:#0f172a;
  --scf-border:#e2e8f0;
  --scf-input-bg:#ffffff;
  --scf-input-text:#0f172a;
  --scf-btn-bg:linear-gradient(135deg,#0ea5e9,#6366f1);
  --scf-btn-text:#ffffff;
  --scf-focus:#0ea5e9;
  --scf-muted:#475569;
  --scf-accent:#0ea5e9;
}

/* 20) TERMINAL */
.scf-theme-terminal{
  --scf-bg:#000000;
  --scf-text:#00ff66;
  --scf-border:#003300;
  --scf-input-bg:rgba(0,0,0,.96);
  --scf-input-text:#00ff66;
  --scf-btn-bg:linear-gradient(135deg,#00ff66,#22c55e);
  --scf-btn-text:#000000;
  --scf-focus:#00ff66;
  --scf-muted:#22c55e;
  --scf-accent:#00ff66;
  --scf-ring:0 0 0 4px rgba(0,255,102,.16);
}
/* ---------------------------------------------------
   HARD OVERRIDE: fix white-on-white textarea/input
   (dark themes + hostile theme CSS)
--------------------------------------------------- */

.scf-wrap input,
.scf-wrap textarea{
  background-color: var(--scf-input-bg) !important;
  color: var(--scf-input-text) !important;
  -webkit-text-fill-color: var(--scf-input-text) !important; /* Safari fix */
}

/* Placeholder text */
.scf-wrap input::placeholder,
.scf-wrap textarea::placeholder{
  color: var(--scf-muted) !important;
  opacity: 1;
}

/* Focus state */
.scf-wrap input:focus,
.scf-wrap textarea:focus{
  background-color: var(--scf-input-bg) !important;
  color: var(--scf-input-text) !important;
}
/* ---------------------------------------------------
   Remove number spinner arrows (captcha)
--------------------------------------------------- */

/* Chrome, Edge, Safari */
.scf-wrap input[type="number"]::-webkit-outer-spin-button,
.scf-wrap input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.scf-wrap input[type="number"]{
  -moz-appearance: textfield;
}