/*
 * SGF UGC Submissions — public form + designed submission page (v1.1.0)
 * Visual identity copied from the live site (SpankGifs Optimized CSS,
 * --sgf-* variables in spankgifs-optimized.css on spankgifs.com):
 *   bg #f9fafb · surface #f5f5f5 · text #334155 · heading #1e293b
 *   muted #667085 · line #e2e8f0 · accent #ee8e07 · black #060606/#000
 *   system font stack, 16px/1.65, max width 1200px, square corners
 *   (radius 0), cards with shadow 0 0 10px rgba(0,0,0,.08),
 *   primary buttons black -> accent on hover.
 */
:root{
  --sgf-ugc-bg:#f9fafb; --sgf-ugc-surface:#f5f5f5; --sgf-ugc-text:#334155;
  --sgf-ugc-heading:#1e293b; --sgf-ugc-muted:#667085; --sgf-ugc-line:#e2e8f0;
  --sgf-ugc-accent:#ee8e07; --sgf-ugc-black:#060606; --sgf-ugc-max:1200px;
}

/* ---------- Standalone lightweight page shell (mirrors SGO templates) ---------- */
.sgf-ugc-lite-body{margin:0;background:var(--sgf-ugc-bg);color:var(--sgf-ugc-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.65}
.sgf-ugc-page-shell{min-height:100vh;background:var(--sgf-ugc-bg)}
.sgf-ugc-main{width:min(var(--sgf-ugc-max),calc(100% - 40px));margin:0 auto;padding:34px 0 48px}
/* Fallback header (only when [sgf_optimized_header] is unavailable):
   same structure as SGO render_header(): black bar, 1fr/1fr grid,
   190px logo, orange italic title, slate tagline. */
.sgf-ugc-site-header{background:#000}
.sgf-ugc-site-header-inner{width:min(var(--sgf-ugc-max),calc(100% - 40px));margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;min-height:180px}
.sgf-ugc-header-logo img{display:block;width:190px;max-width:100%;height:auto;margin:0 auto}
.sgf-ugc-header-logo span{color:#fff;font-size:26px;font-weight:600}
.sgf-ugc-header-logo a,.sgf-ugc-header-copy a{text-decoration:none}
.sgf-ugc-header-copy{display:grid;align-content:center;gap:7px;text-align:left}
.sgf-ugc-header-title{color:var(--sgf-ugc-accent);font-size:52px;font-style:italic;font-weight:500;line-height:1.1}
.sgf-ugc-header-tagline{color:#cbd5e1;font-size:20px;font-style:italic;font-weight:400;line-height:1.3}
.sgf-ugc-header-title:hover{color:var(--sgf-ugc-accent)}
.sgf-ugc-site-footer{background:#fff;border-top:1px solid var(--sgf-ugc-line)}
.sgf-ugc-site-footer-inner{width:min(var(--sgf-ugc-max),calc(100% - 40px));margin:0 auto;
  padding:30px 0;color:var(--sgf-ugc-muted);font-size:14px;text-align:center}
/* When the designed page still renders inside the theme (fallback if the
   custom template is not used), widen Astra's container to the site width. */
body.sgf-ugc-designed-page .ast-container{max-width:var(--sgf-ugc-max)}
body.sgf-ugc-designed-page .entry-title{display:none}

/* ---------- Designed intro: hero + steps ---------- */
.sgf-ugc-design{color:var(--sgf-ugc-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
.sgf-ugc-hero{background:#000;color:#e2e8f0;padding:38px 40px;margin:0 0 26px;border-top:4px solid var(--sgf-ugc-accent)}
.sgf-ugc-eyebrow{margin:0 0 8px;color:var(--sgf-ugc-accent);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.sgf-ugc-hero-title{margin:0 0 12px;color:#fff;font-size:34px;font-weight:600;line-height:1.25;max-width:760px}
.sgf-ugc-hero-sub{margin:0 0 18px;color:#cbd5e1;font-size:17px;line-height:1.55;max-width:760px}
.sgf-ugc-benefits{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sgf-ugc-benefits li{padding-left:26px;position:relative;color:#e2e8f0;font-size:15px}
.sgf-ugc-benefits li::before{content:"✓";position:absolute;left:0;color:var(--sgf-ugc-accent);font-weight:700}
.sgf-ugc-benefits strong{color:#fff}
.sgf-ugc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 0 26px}
.sgf-ugc-step{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.08);padding:22px 24px}
.sgf-ugc-step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:#000;color:#fff;font-weight:700;margin-bottom:10px}
.sgf-ugc-step:hover .sgf-ugc-step-num{background:var(--sgf-ugc-accent)}
.sgf-ugc-step h3{margin:0 0 6px;color:var(--sgf-ugc-heading);font-size:18px;font-weight:600;line-height:1.3}
.sgf-ugc-step p{margin:0;color:var(--sgf-ugc-muted);font-size:14px;line-height:1.5}

/* ---------- Form card ---------- */
.sgf-ugc-card{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.08);padding:30px 34px}
.sgf-ugc-form{max-width:100%}
.sgf-ugc-form p{margin:0 0 16px}
.sgf-ugc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.sgf-ugc-field{margin:0 0 16px}
.sgf-ugc-form label,.sgf-ugc-field-label{display:block;font-weight:600;color:var(--sgf-ugc-heading);margin:0 0 6px;font-size:15px}
.sgf-ugc-form input[type=text],.sgf-ugc-form input[type=email],.sgf-ugc-form textarea,.sgf-ugc-form select{
  width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--sgf-ugc-line);
  background:#f9fafb;color:var(--sgf-ugc-heading);font:inherit;font-size:15px;border-radius:0;appearance:none}
.sgf-ugc-form textarea{resize:vertical;min-height:96px}
.sgf-ugc-form input:focus,.sgf-ugc-form textarea:focus,.sgf-ugc-form select:focus{
  outline:none;border-color:var(--sgf-ugc-accent);background:#fff;box-shadow:0 0 0 3px rgba(238,142,7,.18)}
.sgf-ugc-form ::placeholder{color:#94a3b8}
.sgf-ugc-help{display:block;font-weight:400;font-size:13px;color:var(--sgf-ugc-muted);margin-top:6px;line-height:1.45}
.sgf-ugc-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden}

/* Dropzone-style file input (native input kept for full compatibility) */
.sgf-ugc-dropzone{display:flex!important;flex-direction:column;align-items:center;gap:4px;text-align:center;
  border:2px dashed #cbd5e1;background:var(--sgf-ugc-surface);padding:26px 18px;cursor:pointer;margin:0!important}
.sgf-ugc-dropzone:hover,.sgf-ugc-dropzone:focus-within,.sgf-ugc-dropzone.sgf-ugc-dragging{
  border-color:var(--sgf-ugc-accent);background:#fff7e8}
.sgf-ugc-dropzone-icon{font-size:28px;line-height:1;color:var(--sgf-ugc-accent)}
.sgf-ugc-dropzone-title{font-weight:600;color:var(--sgf-ugc-heading);font-size:15px}
.sgf-ugc-dropzone-sub{font-weight:400;color:var(--sgf-ugc-muted);font-size:13px}
.sgf-ugc-file-input{margin-top:10px;max-width:100%;font-size:13px;color:var(--sgf-ugc-muted)}
.sgf-ugc-file-info{font-weight:600;color:var(--sgf-ugc-heading);font-size:14px;background:#fff;
  border:1px solid var(--sgf-ugc-line);padding:6px 10px;margin-top:8px}
.sgf-ugc-file-error{display:block;margin-top:8px;color:#b42318;font-weight:600;font-size:14px}

/* Consent checks */
.sgf-ugc-checks{border:1px solid var(--sgf-ugc-line);background:var(--sgf-ugc-bg);padding:16px 18px;margin:0 0 18px}
.sgf-ugc-checks legend{font-weight:600;color:var(--sgf-ugc-heading);padding:0 6px;font-size:15px}
.sgf-ugc-checks label{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;
  color:var(--sgf-ugc-text);font-size:14px;line-height:1.5;margin:0 0 10px!important;cursor:pointer}
.sgf-ugc-checks label:last-child{margin-bottom:0!important}
.sgf-ugc-checks input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--sgf-ugc-accent)}
.sgf-ugc-checks a{color:var(--sgf-ugc-accent)}

/* Turnstile + submit (site button style: black, bold, accent on hover) */
.sgf-ugc-turnstile{display:flex;justify-content:center;margin:4px 0 18px}
.sgf-ugc-submit-row{text-align:center}
.sgf-ugc-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 34px;border:1px solid #000;background:#000;color:#fff;font:inherit;font-size:16px;
  font-weight:700;line-height:1.2;cursor:pointer;border-radius:0}
.sgf-ugc-submit:hover,.sgf-ugc-submit:focus{background:var(--sgf-ugc-accent);border-color:var(--sgf-ugc-accent);color:#fff}
.sgf-ugc-submit[disabled]{opacity:.6;cursor:wait}
.sgf-ugc-privacy{text-align:center;color:var(--sgf-ugc-muted);font-size:13px;margin:0!important}

/* Notices */
.sgf-ugc-notice{padding:14px 18px;margin:0 0 20px;border-left:4px solid #2271b1;background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,.06);color:var(--sgf-ugc-text);font-size:15px}
.sgf-ugc-success{border-color:#00a32a}
.sgf-ugc-error{border-color:#d63638}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .sgf-ugc-main{width:calc(100% - 28px);padding:24px 0 36px}
  .sgf-ugc-site-header-inner{grid-template-columns:1fr;min-height:0;padding:22px 0;gap:12px;text-align:center}
  .sgf-ugc-header-copy{text-align:center;justify-items:center}
  .sgf-ugc-header-title{font-size:36px}
  .sgf-ugc-header-tagline{font-size:16px}
  .sgf-ugc-hero{padding:26px 22px}
  .sgf-ugc-hero-title{font-size:26px}
  .sgf-ugc-steps,.sgf-ugc-grid{grid-template-columns:1fr}
  .sgf-ugc-card{padding:22px 18px}
  .sgf-ugc-submit{width:100%}
}