/* static/css/forms.css
   CTFLY Public Site — quote/contact form UI + dark page background for form pages
*/

/* ===============================
   Form pages background
=============================== */
.site-main{
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(0, 140, 255, 0.18), transparent 60%),
    radial-gradient(800px 500px at 10% 40%, rgba(0, 220, 180, 0.12), transparent 60%),
    linear-gradient(180deg, var(--dark-bg-0) 0%, var(--dark-bg-1) 40%, var(--dark-bg-2) 100%);
  color:var(--dark-text);
}

/* ===============================
   Quote / Contact Pages
=============================== */
.page-hero, .page-body{ padding:48px 0; }

.page-hero h1,
.page-body h1,
.page-body h2{
  color:#ffffff;
  letter-spacing:-0.02em;
}

.page-intro{
  color:rgba(232,238,252,.78);
  margin-top:10px;
  line-height:1.6;
}

/* main form card */
.form-card,
.quote-card,
.contact-card{
  max-width:920px;
  margin:0 auto;
  padding:28px;
  border-radius:18px;
  background:rgba(12, 18, 34, 0.72);
  border:1px solid var(--dark-border);
  box-shadow:0 20px 60px rgba(0, 0, 0, 0.45);
}

/* form layout */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
}

@media (max-width: 820px){
  .form-grid{ grid-template-columns:1fr; }
}

/* field wrappers */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field.span-2{ grid-column:1 / -1; }

.field label{
  font-size:13px;
  font-weight:700;
  color:rgba(232,238,252,.92);
}

.req{
  color:#7dd3fc;
  font-weight:800;
}

/* Inputs */
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form input[type="number"],
.quote-form input[type="url"],
.quote-form select,
.quote-form textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="url"],
form select,
form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--dark-input-border);
  background:var(--dark-input-bg);
  color:var(--dark-text);
  caret-color:var(--dark-text);
  outline:none;
  transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

form textarea{
  min-height:140px;
  resize:vertical;
}

form input::placeholder,
form textarea::placeholder{
  color:rgba(232,238,252,.50);
}

/* Better select rendering on dark UIs */
form select{ color-scheme:dark; }

form input:focus,
form select:focus,
form textarea:focus{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 4px rgba(56,189,248,.15);
}

/* helper / errors */
.help{
  font-size:12px;
  color:rgba(232,238,252,.65);
}

.error, .form-errors{
  font-size:12px;
  color:#fecaca;
}

/* ===============================
   Radio/Checkbox options inside .field
=============================== */
.site-main .field ul,
.site-main .field ol{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.site-main .field ul li,
.site-main .field ol li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(10, 14, 26, 0.55);
  border:1px solid rgba(255,255,255,0.10);
  transition:border-color 160ms ease, background 160ms ease, transform 160ms ease;
  color:rgba(232, 238, 252, 0.92);
}

.site-main .field ul li:hover,
.site-main .field ol li:hover{
  border-color:rgba(56,189,248,0.35);
  background:rgba(10, 14, 26, 0.70);
  transform:translateY(-1px);
}

/* label clickable */
.site-main .field ul li label,
.site-main .field ol li label{
  margin:0;
  color:rgba(232, 238, 252, 0.92);
  font-weight:600;
  cursor:pointer;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}

/* radio/checkbox size */
.site-main .field ul li input[type="radio"],
.site-main .field ul li input[type="checkbox"],
.site-main .field ol li input[type="radio"],
.site-main .field ol li input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#38bdf8;
  cursor:pointer;
  flex:0 0 auto;
}

/* selected state */
.site-main .field ul li:has(input:checked),
.site-main .field ol li:has(input:checked){
  border-color:rgba(56,189,248,0.55);
  box-shadow:0 0 0 4px rgba(56,189,248,0.12);
  background:rgba(10, 14, 26, 0.85);
}

/* ===============================
   Actions row
=============================== */
.form-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:flex-start;
  align-items:center;
}

/* ===============================
   NEW — Accessibility Focus Ring
=============================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(56,189,248,0.55);
  outline-offset:2px;
}

/* ===============================
   NEW — Motion reduction support
=============================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

/* ===============================
   Autofill fix (Chrome/Edge)
=============================== */
.site-main input:-webkit-autofill,
.site-main textarea:-webkit-autofill,
.site-main select:-webkit-autofill{
  -webkit-text-fill-color:var(--dark-text) !important;
  transition:background-color 9999s ease-in-out 0s;
  box-shadow:0 0 0px 1000px rgba(10, 14, 26, 0.88) inset !important;
  border:1px solid var(--dark-input-border) !important;
}

/* ======================================================
   ENTERPRISE ENHANCEMENTS — Forms
====================================================== */

/* ===============================
   Trust Bar
=============================== */
.trust-bar{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:rgba(232,238,252,.75);
  margin-bottom:20px;
  padding:12px;
  border-radius:12px;
  background:rgba(10, 14, 26, 0.5);
  border:1px solid rgba(255,255,255,.08);
}

/* ===============================
   Form Title
=============================== */
.form-title{
  color:#fff;
  margin-bottom:18px;
  font-size:1.3rem;
  letter-spacing:-0.02em;
}

/* ===============================
   Button Polish
=============================== */
.form-actions button{
  min-width:200px;
  justify-content:center;
}

/* ===============================
   Privacy Note
=============================== */
.privacy-note{
  margin-top:14px;
  font-size:12px;
  color:rgba(232,238,252,.65);
}

/* ===============================
   Contact Info Strip
=============================== */
.contact-info-strip{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:20px 0;
  padding:12px;
  border-radius:12px;
  background:rgba(10,14,26,.5);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color:rgba(232,238,252,.75);
}

/* ===============================
   Enterprise Support Block
=============================== */
.enterprise-support{
  margin-top:30px;
  padding:20px;
  border-radius:14px;
  background:rgba(10,14,26,.6);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}

.enterprise-support h3{
  color:#fff;
  margin-bottom:8px;
}

.enterprise-support p{
  color:rgba(232,238,252,.75);
}

/* ===============================
   Responsive
=============================== */
@media (max-width: 700px){
  .trust-bar,
  .contact-info-strip{
    flex-direction:column;
    align-items:flex-start;
  }
}