/* =========================================================
   TECHNICAL-SUPPORT.CSS — Technical Support page only. Per the brief
   ("exact same premium design system"), this reuses contact.css as-is
   (hero-contact mesh, hero-tags, glass-form-panel, fl-field floating
   labels, field-row2, form-check, form-success) and home.css's
   card-gradient for the service/info tiles and .acc-item for FAQ —
   imported alongside them, not duplicated. The pieces nothing else on
   the site has yet: priority/contact-method pill radios (a fresh copy
   of the pattern already duplicated per-page in book-consultation.css
   and apply-now.css), a drag-and-drop attachment zone (same technique
   as apply-now.css's upload-zone, restyled to this form's scale), and
   a standalone sticky support button.
   ========================================================= */

/* ---------- Support service cards (left column) ---------- */
.support-services{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.support-service-card{
  display:flex; align-items:flex-start; gap:16px; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); padding:20px 22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.support-service-card:hover{ transform: translateX(6px); box-shadow: var(--shadow-card); border-color: var(--teal); }
.support-service-card .icon{
  flex-shrink:0; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.1rem; transition: transform .4s var(--ease), background .3s, color .3s;
}
.support-service-card:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.support-service-card h3{ font-size:.98rem; margin:0 0 4px; }
.support-service-card p{ font-size:.86rem; color: var(--slate-soft); margin:0; }

/* ---------- Priority / contact-method pill radios ---------- */
.pill-radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.pill-radio{ position:relative; }
.pill-radio input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill-radio label{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--rule); cursor:pointer; font-size:.83rem; font-weight:500; color: var(--ink);
  margin:0; transition: all .25s;
}
.pill-radio input:checked + label{ background: var(--teal-deep); border-color: var(--teal-deep); color:#fff; }
.pill-radio input:focus-visible + label{ box-shadow: 0 0 0 3px rgba(10,154,144,.25); }
.pill-radio-group-wrap.has-error .pill-radio label{ border-color:#C0392B; }
.pill-radio-group-wrap .fl-field-error{ display:none; margin-top:8px; }
.pill-radio-group-wrap.has-error .fl-field-error{ display:block; }

/* Priority pills get a colored left dot so severity reads at a glance */
.pill-radio.priority-low label::before,
.pill-radio.priority-medium label::before,
.pill-radio.priority-high label::before,
.pill-radio.priority-critical label::before{
  content:""; width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.pill-radio.priority-low label::before{ background:#1E7A56; }
.pill-radio.priority-medium label::before{ background:#C9A227; }
.pill-radio.priority-high label::before{ background:#D9752E; }
.pill-radio.priority-critical label::before{ background:#C0392B; }
.pill-radio input:checked + label::before{ background:#fff; }

.field-label{ display:block; font-size:.83rem; font-weight:600; color: var(--ink); margin-bottom:10px; }
.field-label .req{ color: var(--teal-deep); margin-left:2px; }
.field-label .optional{ font-weight:400; color: var(--slate-soft); font-size:.78rem; }
.field-block{ margin-bottom:22px; }

/* ---------- Drag-and-drop attachment zone ---------- */
.upload-zone{
  border:2px dashed var(--rule); border-radius: var(--radius-lg); padding:26px 20px; text-align:center;
  cursor:pointer; transition: border-color .25s, background .25s; background: var(--paper-dim);
}
.upload-zone:hover, .upload-zone.dragover{ border-color: var(--teal); background: rgba(10,154,144,.06); }
.upload-zone i{ font-size:1.5rem; color: var(--teal-deep); margin-bottom:8px; display:block; }
.upload-zone .upload-title{ font-size:.88rem; font-weight:600; color: var(--ink); }
.upload-zone .upload-hint{ font-size:.75rem; color: var(--slate-soft); margin-top:5px; }
.upload-zone input[type="file"]{ display:none; }

.upload-file-chip{
  display:flex; align-items:center; gap:12px; background: var(--white); border:1px solid var(--rule);
  border-radius:12px; padding:10px 14px; margin-top:12px;
}
.upload-file-chip .file-type-icon{ color: var(--teal-deep); flex-shrink:0; }
.upload-file-chip .file-name{ flex:1; font-size:.85rem; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-file-chip .file-size{ font-size:.74rem; color: var(--slate-soft); flex-shrink:0; }
.upload-file-chip .file-remove{ background:none; border:0; color: var(--slate-soft); cursor:pointer; padding:4px; flex-shrink:0; }
.upload-file-chip .file-remove:hover{ color:#C0392B; }

/* ---------- Support info cards (Section 2) ---------- */
.support-info-card{ text-align:center; }
.support-info-card .icon{ margin:0 auto 20px; }

/* ---------- Sticky support button ---------- */
.sticky-support{
  position: fixed; right:26px; bottom:172px; z-index:1130; display:flex; align-items:center; gap:12px;
  background: var(--ink); color: var(--paper); border-radius:999px; padding: 12px 20px 12px 12px;
  box-shadow: var(--shadow-lift); border:1px solid var(--ink-line); cursor:pointer;
  transform: translateX(140%); transition: transform .5s var(--ease);
}
.sticky-support.show{ transform: translateX(0); }
.sticky-support .ss-icon{ width:34px; height:34px; border-radius:50%; background: var(--teal); color: var(--ink); display:grid; place-items:center; font-size:.9rem; flex-shrink:0; }
.sticky-support span{ font-size:.83rem; white-space:nowrap; }
@media (max-width: 860px){ .sticky-support{ display:none; } }