/* ═══════════════════════════════════════════════════════
   IWTMYL Volunteer Signup — Branded Visual Refresh
   Location: css/volunteer-signup-restyle.css
   Template: templates/volunteer-signup.php
   Form:     inc/form/form-step-{1..5}.php

   Matches the live volunteer splash page design language:
   - 1060px container, #dfe8e1 borders, 10px radius cards
   - DM Sans typography, #2d6a4f / #1c3a2a green palette
   - Chip badges, soft green tints, warm neutrals
   All values reference shared tokens from iwtmyl-tokens.css.
   ═══════════════════════════════════════════════════════ */


/* ═══ PAGE SHELL ═══ */

.page-template-volunteer-signup {
  background: linear-gradient(180deg, #f4f9f5 0%, var(--iw-warm-white) 100%) !important;
}


/* ═══ LAYOUT CONTAINER ═══ */

.auth-section.SITHL-dealer-1 {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.auth-section.SITHL-dealer-1 > .container {
  max-width: 100%;
  padding: 0;
}


/* ═══ CARD WRAPPER (.auth-box) ═══ */

.auth-section .auth-box {
  background: #fff !important;
  border: 1px solid #dfe8e1 !important;
  border-radius: 10px !important;
  padding: 36px 32px !important;
  max-width: 100% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}


/* ═══ STEP 1 — BRANDED WELCOME ═══ */

.iw-step1-header {
  text-align: center;
  margin-bottom: 28px;
}

.iw-step1-title {
  font-family: var(--iw-sans);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: var(--iw-green-900);
  margin: 0 0 8px;
  line-height: 1.2;
}

.iw-step1-subtitle {
  font-family: var(--iw-sans);
  font-size: 17px;
  color: var(--iw-text-secondary);
  margin: 0 0 20px;
  line-height: 1.55;
}

/* Reassurance chips */
.iw-step1-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.iw-chip {
  display: inline-flex;
  align-items: center;
  background: #eef6f0;
  border: 1px solid #d8ede4;
  color: #355842;
  font-family: var(--iw-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}


/* ═══ STEP 1 — VOLUNTEER TYPE CARDS ═══ */

.iw-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.iw-type-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid #dfe8e1;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  position: relative;
}

.iw-type-card:hover {
  border-color: var(--iw-green-400);
  background: #f9fcfa;
}

.iw-type-card.is-selected {
  border-color: var(--iw-green-700);
  background: #f0faf3;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, .12);
}

/* Hide native radio */
.iw-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.iw-type-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6f0;
  border-radius: 10px;
  color: var(--iw-green-700);
}

.iw-type-card.is-selected .iw-type-icon {
  background: var(--iw-green-700);
  color: #fff;
}

.iw-type-text {
  flex: 1;
  min-width: 0;
}

.iw-type-text strong {
  display: block;
  font-family: var(--iw-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--iw-text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
}

.iw-type-text span {
  display: block;
  font-family: var(--iw-sans);
  font-size: 13px;
  color: var(--iw-text-muted);
  line-height: 1.4;
}

.iw-type-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #dfe8e1;
  color: transparent;
  transition: all .15s ease;
}

.iw-type-card.is-selected .iw-type-check {
  background: var(--iw-green-700);
  border-color: var(--iw-green-700);
  color: #fff;
}


/* ═══ STEP HEADINGS (h3 from ACF) ═══ */

.auth-section .auth-box h3 {
  font-family: var(--iw-sans);
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: var(--iw-green-900);
  margin: 0 0 6px;
  line-height: 1.25;
}

/* Subtitle div after h3 */
.auth-section .auth-box h3 + div {
  font-family: var(--iw-sans);
  font-size: 15px;
  color: var(--iw-text-muted);
  margin-bottom: 28px;
  line-height: 1.55;
}


/* ═══ FORM LABELS ═══ */

.auth-section .auth-box .form-group > label,
.auth-section .auth-box .form-group > p > label,
.auth-section .auth-box .form-group > p.mb-1 > label {
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--iw-text-primary);
  margin-bottom: 8px;
  display: block;
  line-height: 1.4;
}

.auth-section .auth-box .form-group .subtext {
  font-family: var(--iw-sans);
  font-size: 14px;
  color: var(--iw-text-muted);
  margin-bottom: 12px;
  line-height: 1.55;
}

.auth-section .auth-box .form-group small.form-text {
  font-family: var(--iw-sans);
  font-size: 13px;
  color: var(--iw-text-muted);
  line-height: 1.5;
}


/* ═══ TEXT INPUTS / SELECTS / TEXTAREAS ═══ */

.auth-section .auth-box .form-control {
  font-family: var(--iw-sans);
  font-size: 16px;
  color: var(--iw-text-primary);
  background: var(--iw-warm-50);
  border: 1.5px solid #dfe8e1;
  border-radius: 8px;
  padding: 12px 16px;
  height: auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-section .auth-box .form-control:focus {
  background: #fff;
  border-color: var(--iw-green-500);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, .15);
  outline: none;
}

.auth-section .auth-box .form-control::placeholder {
  color: var(--iw-text-muted);
  font-size: 15px;
}

.auth-section .auth-box textarea.form-control {
  min-height: 90px;
  resize: vertical;
}

.auth-section .auth-box select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234a4a42' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Form group spacing */
.auth-section .auth-box .form-group {
  margin-bottom: 20px;
}


/* ═══ CUSTOM RADIO BUTTONS ═══ */

.auth-section .auth-box .radio-group label,
.auth-section .auth-box .form-group > label:has(input[type="radio"]) {
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--iw-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  margin-bottom: 10px;
  line-height: 1;
}

.auth-section .auth-box .custom-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #c8d0ca;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s ease;
}

.auth-section .auth-box input[type="radio"]:checked + .custom-radio {
  border-color: var(--iw-green-700);
}

.auth-section .auth-box input[type="radio"]:checked + .custom-radio::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--iw-green-700);
}


/* ═══ CUSTOM CHECKBOXES ═══ */

.auth-section .auth-box .checkbox-group label {
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--iw-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.auth-section .auth-box .custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #c8d0ca;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease;
}

.auth-section .auth-box input[type="checkbox"]:checked + .custom-checkbox {
  border-color: var(--iw-green-700);
  background: var(--iw-green-700);
}

.auth-section .auth-box input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ═══ HIDE NATIVE INPUTS (global fix for duplicate controls) ═══
   When a .custom-radio or .custom-checkbox span follows an input,
   the native input must be invisible. This prevents the "double
   radio/checkbox" rendering bug across all steps. */

.auth-section input[type="radio"] + .custom-radio,
.auth-section input[type="checkbox"] + .custom-checkbox {
  /* The spans are already styled above — this selector is just
     documentation. The actual hide is on the inputs: */
}

.auth-section label input[type="radio"],
.auth-section label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Re-show the native checkbox where there's no custom span
   (e.g. SMS consent uses accent-color, not .custom-checkbox) */
.sms-consent-wrapper label input[type="checkbox"] {
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  pointer-events: auto;
}


/* ═══ SMS CONSENT (TCPA/CTIA) ═══ */

.sms-consent-wrapper .form-group {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

.sms-consent-wrapper label {
  font-weight: 400 !important;
  line-height: 1.5;
  cursor: pointer;
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
}

.sms-consent-wrapper input[type="checkbox"] {
  margin-top: 3px;
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--iw-green-700);
}

.sms-consent-wrapper span > span {
  font-family: var(--iw-sans);
  font-size: 14px;
  color: var(--iw-text-primary);
}

.sms-consent-wrapper small {
  font-family: var(--iw-sans);
  font-size: 11px !important;
  color: var(--iw-text-muted) !important;
  line-height: 1.4;
  display: block;
  margin-top: 3px;
}

.sms-consent-wrapper small a {
  color: var(--iw-text-muted) !important;
  text-decoration: underline;
}

.sms-consent-wrapper small a:hover {
  color: var(--iw-green-700) !important;
}


/* ═══ EXPANDABLE SECTIONS (+Social, +Tips, +T-Shirt) ═══ */

.auth-section .auth-box .label-click {
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--iw-green-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  background: #f7faf8;
  border: 1px solid #dfe8e1;
  border-radius: 8px;
  transition: background .15s ease;
  width: 100%;
}

.auth-section .auth-box .label-click span {
  font-size: 16px;
  font-weight: 700;
  color: var(--iw-green-500);
  transition: transform .15s ease;
}

.auth-section .auth-box .label-click:hover {
  background: #eef6f0;
  color: var(--iw-green-800);
}

/* When expanded, rotate the + */
.auth-section .auth-box .label-click.active span,
.auth-section .auth-box .form-group:has(.additional-item[style*="block"]) .label-click span {
  transform: rotate(45deg);
}

/* Expanded content area */
.auth-section .auth-box .additional-item {
  padding: 16px 0 0;
}


/* ═══ PROGRESS BAR / STEP INDICATOR ═══ */

.auth-section .slick-progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 10px;
  font-family: var(--iw-sans);
  font-size: 15px;
  color: var(--iw-text-muted);
}

.auth-section .slick-progressbar #current-step {
  font-weight: 700;
  color: var(--iw-green-700);
  font-size: 16px;
}


/* ═══ SLICK NEXT / BACK ARROWS ═══ */

.auth-section .slick-progressbar .slick-next,
.auth-section .slick-progressbar .slick-prev {
  min-width: 110px;
  padding: 13px 24px !important;
  font-size: 15px !important;
}


/* ═══ STEP 2 — PERSONAL INFO ═══ */

/* Section dividers for company/org/school conditional blocks */
.auth-section .auth-box .YesCompany,
.auth-section .auth-box .YesOrganization,
.auth-section .auth-box .YesSchool {
  border-bottom: 1px solid #dfe8e1;
  padding-bottom: 24px;
  margin-bottom: 24px;
}

/* Profile photo upload area */
#profile-photo-preview {
  background: #f7faf8;
  border: 2px dashed #cfe2d3;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

#profile-photo-preview label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--iw-text-primary) !important;
}

#photo-preview-wrapper {
  border-color: #cfe2d3 !important;
  border-radius: 8px;
}

#photo-preview-wrapper svg {
  color: var(--iw-green-400);
}


/* ═══ STEP 4 — SKILLS / EQUIPMENT ═══ */

/* Skills column headers */
.auth-section .step-services .form-group > label {
  font-size: 16px;
  font-weight: 700;
  color: var(--iw-green-800);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eef6f0;
}

/* Service checkboxes */
.auth-section .step-services .checkbox-group label {
  font-size: 14px;
  padding: 5px 0;
}

/* Equipment & transportation outer wrapper */
.auth-section .landscaping-other {
  width: 100%;
  margin-top: 8px;
}

/* Section card — used for equipment/transport optional block */
.iw-section-card {
  background: #f7faf8;
  border: 1px solid #dfe8e1;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.iw-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.iw-section-header strong {
  font-family: var(--iw-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--iw-green-900);
}

.iw-chip--subtle {
  background: #eef6f0;
  border-color: #d8ede4;
  color: #48734e;
  font-size: 11px;
  padding: 3px 10px;
}

.iw-section-helper {
  font-family: var(--iw-sans);
  font-size: 14px;
  color: var(--iw-text-muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

/* Field-level helper text */
.iw-field-helper {
  font-family: var(--iw-sans);
  font-size: 13px;
  color: var(--iw-text-muted);
  margin: 2px 0 8px;
  line-height: 1.45;
}

/* Optional tag */
.iw-optional-tag {
  font-weight: 400;
  color: var(--iw-text-muted);
  font-size: 13px;
}

/* Group more link */
.auth-section .group-more {
  font-family: var(--iw-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--iw-green-700);
  text-decoration: underline;
  text-decoration-color: var(--iw-green-300);
  margin-top: 4px;
  display: inline-block;
}

.auth-section .group-more:hover {
  color: var(--iw-green-800);
  text-decoration-color: var(--iw-green-700);
}

/* Add-equipments inner section */
.auth-section .add-equipmets {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dfe8e1;
}


/* ═══ STEP 5 — AVAILABILITY TABLE (softened) ═══ */

.auth-section .auth-box table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
  font-family: var(--iw-sans);
  font-size: 15px;
  background: #f7faf8;
  border-radius: 10px;
  padding: 4px;
  border: 1px solid #eef6f0;
}

.auth-section .auth-box table tr:first-child td {
  font-weight: 600;
  color: var(--iw-text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 10px 10px 6px;
  background: transparent;
}

.auth-section .auth-box table td {
  padding: 10px 12px;
}

.auth-section .auth-box table tr:not(:first-child) {
  background: #fff;
}

.auth-section .auth-box table tr:not(:first-child) td:first-child {
  border-radius: 8px 0 0 8px;
}

.auth-section .auth-box table tr:not(:first-child) td:last-child {
  border-radius: 0 8px 8px 0;
}

.auth-section .auth-box table td:first-child {
  font-weight: 600;
  color: var(--iw-green-800);
  padding-right: 20px;
  white-space: nowrap;
  min-width: 100px;
}

/* Step 5 section spacing */
.auth-section .auth-box > .row > [class*="col-md-12"] + [class*="col-md-12"] {
  margin-top: 8px;
}


/* ═══ NOTIFICATION PREFERENCES (segmented pills) ═══ */

.auth-section .form-group.notifications {
  background: #f7faf8;
  border: 1px solid #eef6f0;
  border-radius: 10px;
  padding: 20px 22px;
}

.auth-section .form-group.notifications > label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--iw-green-900);
}

.iw-notif-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.iw-notif-row {
  display: flex;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #e5eae6;
}

.iw-notif-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.iw-notif-row:first-child {
  padding-top: 0;
}

.iw-notif-label {
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--iw-text-primary);
  min-width: 70px;
}

.iw-toggle-group {
  display: inline-flex !important;
  gap: 0;
  margin-left: auto;
  background: #fff;
  border: 1.5px solid #dfe8e1;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.iw-toggle-group label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  border-right: 1px solid #dfe8e1;
  color: var(--iw-text-muted) !important;
  transition: background .12s ease, color .12s ease;
  cursor: pointer;
  line-height: 1.3 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.iw-toggle-group label:last-child {
  border-right: none;
}

.iw-toggle-group label:hover {
  background: #f7faf8;
}

/* Active state — green fill for the selected option */
.iw-toggle-group input[type="radio"]:checked + .custom-radio {
  border-color: var(--iw-green-700);
  background: var(--iw-green-700);
}

.iw-toggle-group input[type="radio"]:checked + .custom-radio::after {
  background: #fff;
  width: 6px;
  height: 6px;
  top: 5px;
  left: 5px;
}

/* Highlight the parent label of checked radio */
.iw-toggle-group label:has(input[type="radio"]:checked) {
  background: #eef6f0;
  color: var(--iw-green-800) !important;
}


/* ═══ STEP 2 — PHOTO UPLOAD REFINEMENT ═══ */

#profile-photo-upload-wrapper {
  margin-top: 8px;
}

#profile-photo-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#profile-photo-preview > label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--iw-text-primary) !important;
  margin-bottom: 0 !important;
}

#photo-preview-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50% !important;
  border: 2px solid #cfe2d3 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

#photo-preview-wrapper svg {
  width: 48px;
  height: 48px;
  color: var(--iw-green-300);
}

#photo-preview-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-section .file-group {
  text-align: center;
  margin-top: 12px;
}


/* ═══ STEP 3 — ADDRESS ROW CLEANUP ═══ */

.auth-section .step-country .col-md-4 {
  margin-bottom: 0;
}

/* Make city/state/zip row tighter */
.auth-section .step-country .col-md-4 .form-group {
  margin-bottom: 12px;
}


/* ═══ DRIVER'S LICENSE UPLOAD ═══ */

#upload-driver-license {
  background: #f7faf8;
  border: 1px solid #cfe2d3;
  border-radius: 10px;
  padding: 22px;
  margin-top: 20px;
}

#upload-driver-license label {
  font-family: var(--iw-sans);
  font-size: 15px;
}

#upload-driver-license .subtext {
  font-size: 13px;
  color: var(--iw-text-muted);
}

#upload-driver-license a {
  color: var(--iw-green-700);
  font-weight: 600;
}


/* ═══ SAVE FOR LATER ═══ */

.auth-section .save_for_later p {
  font-family: var(--iw-sans) !important;
  font-size: 14px !important;
  color: var(--iw-text-secondary) !important;
}


/* ═══ BOTTOM LINK (homeowner redirect) ═══ */

.auth-section + h6,
.auth-section h6 {
  font-family: var(--iw-sans);
  font-size: 16px;
  color: var(--iw-text-secondary);
  text-align: center;
}

.auth-section h6 a,
.auth-section + h6 a {
  color: var(--iw-green-700) !important;
  text-decoration-color: var(--iw-green-300) !important;
  font-weight: 600;
}

.auth-section h6 a:hover,
.auth-section + h6 a:hover {
  color: var(--iw-green-800) !important;
  text-decoration-color: var(--iw-green-700) !important;
}


/* ═══ VALIDATION STATES ═══ */

/* Error */
.auth-section .form-group.has-error .form-control {
  border-color: var(--iw-error) !important;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, .08);
}

.auth-section .form-group.has-error .custom-radio {
  border-color: var(--iw-error) !important;
}

.auth-section .form-group.has-error .custom-checkbox {
  border-color: var(--iw-error) !important;
}

/* Success */
.auth-section .form-group.has-success .form-control {
  border-color: var(--iw-green-500) !important;
  box-shadow: 0 0 0 2px rgba(82, 183, 136, .08);
}

.auth-section .form-group.has-success .custom-radio {
  border-color: var(--iw-green-500);
}

.auth-section .form-group.has-success .custom-checkbox {
  border-color: var(--iw-green-500);
}

/* Error text */
.auth-section .help-block {
  font-family: var(--iw-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--iw-error);
  margin-top: 6px;
}

.auth-section label.error {
  font-family: var(--iw-sans);
  font-size: 13px;
  color: var(--iw-error);
  font-weight: 600;
}

.auth-section .form-group.has-success .help-block,
.auth-section .form-group.has-success label.error {
  display: none;
}


/* ═══ TRUST FOOTER ═══ */

.iw-trust-footer {
  font-family: var(--iw-sans);
  font-size: 13px;
  color: var(--iw-text-muted);
  margin: 12px 0 8px;
  line-height: 1.5;
}


/* ═══ PROGRESS INDICATOR ═══ */

.auth-section .slick-progressbar {
  position: relative;
}

/* Step counter pill */
.auth-section .slick-progressbar #current-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef6f0;
  color: var(--iw-green-700);
  font-weight: 700;
  font-size: 14px;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  padding: 0 2px;
}


/* ═══ HELPER TEXT LEGIBILITY ═══ */

.sms-consent-wrapper small {
  font-size: 12px !important;
  line-height: 1.5;
  color: #6b756e !important;
}

.iw-field-helper {
  font-size: 13px;
  color: #6b756e;
}

.auth-section .auth-box .form-group .subtext {
  font-size: 14px;
  color: #6b756e;
}


/* ═══ INLINE STYLE OVERRIDES ═══
   Kill legacy inline styles still in form-step PHP files */

.auth-section .auth-box .form-group.has-error {
  display: block !important;
}

.auth-section .yes_selected {
  user-select: none;
  cursor: default;
  pointer-events: none;
}


/* ═══ RESPONSIVE ═══ */

/* Tablet — Step 4 skills go 2-col, general spacing tightens */
@media (max-width: 991px) {
  .auth-section .step-services > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .auth-section.SITHL-dealer-1 {
    padding: 20px 16px 40px;
  }

  .auth-section .auth-box {
    padding: 24px 18px !important;
    border-radius: 10px !important;
  }

  .auth-section .auth-box h3 {
    font-size: 20px;
  }

  /* Step 1 cards stack */
  .iw-type-grid {
    grid-template-columns: 1fr;
  }

  .iw-step1-title {
    font-size: 24px;
  }

  .iw-step1-chips {
    gap: 6px;
  }

  .iw-chip {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* Progress bar */
  .auth-section .slick-progressbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .auth-section .slick-progressbar .slick-next,
  .auth-section .slick-progressbar .slick-prev {
    min-width: 90px;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }

  /* Step 4 — skills go single column on mobile */
  .auth-section .step-services > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  /* Step 4 section card */
  .iw-section-card {
    padding: 16px;
  }

  /* Step 4 expandable rows */
  .auth-section .auth-box .label-click {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Step 5 table */
  .auth-section .auth-box table {
    font-size: 14px;
    padding: 2px;
  }

  .auth-section .auth-box table td {
    padding: 8px 6px;
  }

  .auth-section .auth-box table td:first-child {
    min-width: 80px;
    font-size: 13px;
  }

  /* Step 5 notification card */
  .auth-section .form-group.notifications {
    padding: 16px;
  }

  .iw-notif-row {
    padding: 9px 0;
  }

  .iw-notif-label {
    font-size: 14px;
    min-width: 55px;
  }

  .iw-toggle-group label {
    padding: 5px 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .iw-type-card {
    padding: 14px 16px;
    gap: 10px;
  }

  .iw-type-icon {
    width: 40px;
    height: 40px;
  }

  .iw-type-icon svg {
    width: 24px;
    height: 24px;
  }

  .iw-type-text strong {
    font-size: 15px;
  }

  .iw-type-text span {
    font-size: 12px;
  }

  /* Step 5 — table very small screens */
  .auth-section .auth-box table td:first-child {
    font-size: 12px;
    min-width: 65px;
    padding-right: 8px;
  }

  .auth-section .auth-box table tr:first-child td {
    font-size: 10px;
  }
}