/* forms-upgrades.css
   Drop-in style pass for Estimator / Quiz / Portal.
   Safe, additive styles (keeps main.css as the source of truth). */

:root{
  --cowboys-red: #E63946;
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-2: rgba(255,255,255,.085);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-strong: rgba(255,255,255,.22);
  --text-strong: rgba(255,255,255,.92);
  --text-muted: rgba(255,255,255,.72);
  --shadow-soft: 0 16px 44px rgba(0,0,0,.35);
  --radius-xl: 24px;
  --radius-md: 14px;
}

.accentRed{ color: var(--cowboys-red); }

/* Headline polish */
.sectionHead h1{
  letter-spacing: -.02em;
  line-height: 1.08;
}
.sectionHead p{
  max-width: 72ch;
  color: var(--text-muted);
}

/* Panel helpers */
.panel--narrow{
  max-width: 720px;
  margin-inline: auto;
}
.panel--form{
  padding: 22px 22px 18px;
  border-radius: var(--radius-xl);
}
.panel--soft{
  border-radius: var(--radius-xl);
}

/* Labels with icons */
.fieldLabel{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.fieldLabel--sm{
  font-size: .95rem;
  font-weight: 800;
}

.labelIcon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.labelIcon svg,
.labelIconImg{
  width: 16px;
  height: 16px;
  display: block;
}
.labelIconImg{
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* Form field spacing */
.panel--form .field{
  margin-top: 0 !important; /* overrides inline styles */
}
.panel--form .field + .field{
  margin-top: 16px;
}

/* Inputs / selects */
.panel--form select,
.panel--form input[type="email"],
.miniForm input[type="email"]{
  width: 100%;
  height: 48px;
  border-radius: var(--radius-md);
  padding: 0 44px 0 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-strong);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.panel--form select:hover,
.panel--form input[type="email"]:hover,
.miniForm input[type="email"]:hover{
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-2);
}

.panel--form select:focus,
.panel--form input[type="email"]:focus,
.miniForm input[type="email"]:focus{
  border-color: rgba(230,57,70,.6);
  box-shadow: 0 0 0 4px rgba(230,57,70,.16), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Custom select chevron (keeps native behavior) */
.panel--form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Checkbox rows (Quiz) */
.checkRow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.checkRow input{
  width: 18px;
  height: 18px;
  accent-color: var(--cowboys-red);
}
.checkRow span{
  color: rgba(255,255,255,.88);
  font-weight: 600;
}

/* Action rows */
.formActions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ctaRow{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile: make primary actions full-width */
@media (max-width: 560px){
  .formActions .btn,
  .ctaRow .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* Button icons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn__icon{
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  transform: translateY(-1px);
}

/* =========================
   SERVICE PAGES (informational)
   Added: 2026-01-14
   ========================= */

/* Utility 2-col grid used across pages (portal/service layouts) */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}

/* Service page layout */
.serviceLayout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .serviceLayout{ grid-template-columns: 1fr; }
}

/* Sticky sidebar on desktop (disabled on small screens / iOS quirks) */
@media (min-width: 981px){
  .serviceSidebar{ position: sticky; top: 92px; }
}

/* Quiz callout (shows only when coming from quiz) */
.serviceCallout{
  display:none;
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  background: rgba(230,57,70,.10);
  border: 1px solid rgba(230,57,70,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.serviceCallout strong{ color: rgba(255,255,255,.92); }
.serviceCallout .muted{ color: rgba(255,255,255,.78); }

/* "Why / When / How" section helpers */
.serviceList{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
}
.serviceList li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.serviceList li:last-child{ border-bottom:none; }
.serviceDot{
  width:10px; height:10px; border-radius:999px;
  margin-top: 7px;
  background: rgba(45,212,191,.85);
  box-shadow: 0 0 0 6px rgba(45,212,191,.10);
  flex: 0 0 auto;
}

/* Mini FAQ */
.faqItem{
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faqItem:last-child{ border-bottom:none; }
.faqQ{ font-weight: 900; margin:0 0 6px; }
.faqA{ margin:0; color: rgba(255,255,255,.78); line-height: 1.55; }

/* Work placeholders (until photos are added) */
.workPlaceholders{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .workPlaceholders{ grid-template-columns: 1fr; }
}
.workPh{
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(0,0,0,.16);
  padding: 16px;
}
.workPh strong{ display:block; margin-bottom:6px; }