/* ============================================================
   HSE U-SEE U-ACT — form page redesign
   Scoped to form.php only. Does not touch styles_ucua.css or
   styles_index.css.
   ============================================================ */

:root{
  --ink:#10161d;
  --plate:#1a222c;
  --plate-2:#212b37;
  --amber:#ffb020;
  --orange:#ff5a2b;
  --green:#28b673;
  --amber-ink:#ffb020;
  --orange-ink:#ff5a2b;
  --green-ink:#28b673;
  --fog:#8b98a8;
  --white:#f7f8fa;
  --line: rgba(255,255,255,0.08);
  --nav-bg: rgba(16,22,29,0.92);
  --input-bg: rgba(0,0,0,0.25);
  --input-bg-focus: rgba(0,0,0,0.35);
  --input-bg-dropzone: rgba(0,0,0,0.15);
  --input-bg-dropzone-hover: rgba(0,0,0,0.25);
  --radius: 4px;
}

/* Follow the phone/browser's system theme automatically */
@media (prefers-color-scheme: light){
  :root{
    --ink:#f4f6f8;
    --plate:#ffffff;
    --plate-2:#ffffff;
    --amber-ink:#a06a00;
    --orange-ink:#c1400e;
    --green-ink:#1f8a55;
    --fog:#5b6675;
    --white:#12181f;
    --line: rgba(16,22,29,0.10);
    --nav-bg: rgba(244,246,248,0.92);
    --input-bg: rgba(16,22,29,0.035);
    --input-bg-focus: rgba(16,22,29,0.06);
    --input-bg-dropzone: rgba(16,22,29,0.025);
    --input-bg-dropzone-hover: rgba(16,22,29,0.05);
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--ink);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{ font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:0.02em; margin:0; }
a{ text-decoration:none; color:inherit; }

.hazard-bar{ height:6px; background: repeating-linear-gradient(135deg, var(--amber) 0 18px, #10161d 18px 36px); }

/* NAV */
header.topnav{ position:sticky; top:0; z-index:50; background: var(--nav-bg); border-bottom:1px solid var(--line); }
.topnav-inner{ max-width:820px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 24px; }
.topnav-inner img{ height:30px; width:auto; background:#ffffff; padding:3px 7px; border-radius:3px; border:1px solid var(--line); }
.topnav-inner .t1{ font-weight:700; font-size:15px; letter-spacing:0.03em; }

/* bilingual helpers */
.bm-inline{ font-size:0.78em; color:var(--fog); font-weight:400; text-transform:none; letter-spacing:0.01em; margin-left:6px; }
.bm-block{ display:block; margin-left:0; margin-top:4px; }
.bm-sub{ display:block; font-size:18px; color:var(--fog); text-transform:none; font-family: Arial, Helvetica, sans-serif; font-weight:400; margin-top:5px; letter-spacing:0; }

/* FORM WRAP */
.form-wrap{ max-width:720px; margin:0 auto; padding:36px 20px 90px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fog); margin-bottom:24px; }
.back-link:hover{ color:var(--amber-ink); }

.form-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px; }
.form-head .icon{ width:58px; height:58px; flex:none; }
.form-head .icon svg{ width:100%; height:100%; display:block; }
.form-head h1{ font-size:24px; color:var(--white); }
.form-head .tag{ font-size:18px; color:var(--fog); margin-top:6px; font-weight:700; letter-spacing:0.03em; }
.form-note{ color:var(--fog); font-size:18px; margin:14px 0 30px; }
.form-note .bm-inline{ font-size:1em; }

.ticket{ background: linear-gradient(180deg, var(--plate-2), var(--plate)); border:1px solid var(--line); border-radius: var(--radius); position:relative; }
.ticket::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--accent, var(--amber)); }
.ticket-inner{ padding:28px 24px; }

.fieldset-label{ font-size:12.5px; letter-spacing:0.06em; color:var(--accent-ink, var(--amber-ink)); margin:28px 0 16px; display:flex; align-items:center; gap:10px; font-weight:700; }
.fieldset-label:first-child{ margin-top:0; }
.fieldset-label::after{ content:''; flex:1; height:1px; background:var(--line); }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .grid2{ grid-template-columns:1fr; } }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; color:var(--fog); margin-bottom:7px; font-weight:500; }
.field label .req{ color:var(--orange-ink); margin-left:3px; }
.field input[type=text], .field input[type=tel], .field input[type=datetime-local], .field select, .field textarea{
  width:100%; background: var(--input-bg); border:1px solid var(--line); border-radius:3px;
  padding:12px 12px; color:var(--white); font-family: Arial, Helvetica, sans-serif; font-size:15px;
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent-ink, var(--amber-ink)); background: var(--input-bg-focus); }
.field textarea{ resize:vertical; min-height:90px; }
.field select{ appearance:none; -webkit-appearance:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b98a8" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat; background-position: right 12px center; background-size:16px; padding-right:36px;
}
.hint{ font-size:11.5px; color:var(--fog); margin-top:6px; opacity:0.85; }

.dropzone{ border:1.5px dashed var(--line); border-radius:3px; padding:22px 16px; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease; background: var(--input-bg-dropzone); }
.dropzone:hover{ border-color: var(--accent-ink, var(--amber-ink)); background: var(--input-bg-dropzone-hover); }
.dropzone svg{ width:22px; height:22px; stroke:var(--fog); fill:none; stroke-width:1.6; margin-bottom:6px; }
.dropzone .t{ font-size:13.5px; color:var(--fog); }
.dropzone .t strong{ color: var(--accent-ink, var(--amber-ink)); font-weight:700; }
.dropzone .fname{ margin-top:8px; font-size:12.5px; color:var(--white); }

.submit-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.submit-row .note{ font-size:12px; color:var(--fog); max-width:280px; }
.btn-submit{ background: var(--accent, var(--amber)); color:#10161d; border:none; border-radius:3px; padding:13px 24px;
  font-family: Arial, Helvetica, sans-serif; font-weight:700; letter-spacing:0.02em; font-size:14.5px; text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; gap:10px; transition: filter .15s ease, transform .15s ease; }
.btn-submit:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-submit svg{ width:16px; height:16px; }

@media (max-width:600px){
  .topnav-inner{ padding:10px 16px; }
  .topnav-inner img{ height:26px; }
  .topnav-inner .t1{ font-size:14px; }
  .form-wrap{ padding:22px 14px 70px; }
  .form-head .icon{ width:48px; height:48px; }
  .form-head h1{ font-size:20px; }
  .ticket-inner{ padding:20px 16px; }
  .bm-inline{ font-size:0.85em; }
  .field label{ font-size:14px; }
  .hint{ font-size:12.5px; }
  .fieldset-label{ font-size:13px; }
  .submit-row .note{ font-size:13px; max-width:none; }
  .btn-submit{ width:100%; justify-content:center; }
}