/* Mechanic 5-step apply wizard styles. Ported from
   /home/marco-maher/Downloads/HonCar Templetes/Mechanic/mechanic-apply.html
   All selectors scoped under .hcs-app .mech-app so generic class names
   (.container, .btn, .field, etc.) can't bleed into the rest of the site. */

/* FULL-BLEED — neutralise Kadence's container constraints so the apply
   wizard fills the viewport instead of being boxed by the theme. Mirrors
   the sign-in page approach (body:has() scopes to this page only). Kills:
     .site-container{max-width:var(--global-content-width); margin:0 auto;
                     padding:0 var(--global-content-edge-padding)}
     .content-area  {margin:var(--global-xxl-spacing) 0}  (5rem bottom) */
body:has(.mech-app) .content-area,
body:has(.mech-app) .site-container,
body:has(.mech-app) .content-container.site-container,
body:has(.mech-app) .entry-content-wrap,
body:has(.mech-app) .entry-content,
body:has(.mech-app) .entry.single-entry,
body:has(.mech-app) .entry{
  margin:0 !important;padding:0 !important;
  max-width:none !important;box-shadow:none !important;background:transparent !important;
}

.hcs-app .mech-app{
  --mech-bg:var(--bg-2,#F7F9FC);
  --green:#0F8B4F;
  --green-50:#E6F4EE;
  --amber:#B45309;
  --amber-50:#FEF3E0;
  --red:#C53030;
  --red-50:#FEE;
  color:var(--ink,#0A2540);
  background:var(--mech-bg);
}

.hcs-app .mech-container{width:100%;max-width:760px;margin-inline:auto;padding-inline:20px;}
.hcs-app .mech-container-wide{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px;}

/* PROGRESS */
.hcs-app .mech-progress-wrap{background:#fff;border-bottom:1px solid var(--line);padding:18px 0;}
.hcs-app .mech-progress{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.hcs-app .mech-pstep{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3,#748094);}
.hcs-app .mech-pstep .num{width:28px;height:28px;border-radius:50%;background:var(--bg-2,#F7F9FC);color:var(--ink-3,#748094);display:grid;place-items:center;font-weight:700;font-size:12.5px;flex-shrink:0;transition:all .25s;}
.hcs-app .mech-pstep.done .num{background:var(--green);color:#fff;}
.hcs-app .mech-pstep.done{color:var(--green);}
.hcs-app .mech-pstep.active .num{background:var(--blue-700,#1E5AA8);color:#fff;box-shadow:0 0 0 4px rgba(30,90,168,.18);}
.hcs-app .mech-pstep.active{color:var(--blue-900,#0A2540);}
.hcs-app .mech-progress .bar{width:28px;height:2px;background:var(--line,#E3E8EF);border-radius:999px;flex-shrink:0;}
.hcs-app .mech-pstep.done + .bar{background:var(--green);}
@media (max-width:680px){.hcs-app .mech-pstep:not(.active) .label{display:none;}}

/* MAIN + WIZARD CARD */
.hcs-app .mech-main{padding:36px 0 80px;}
.hcs-app .mech-wiz-card{background:#fff;border:1px solid var(--line,#E3E8EF);border-radius:14px;box-shadow:var(--shadow-sm,0 1px 2px rgba(10,37,64,.06));overflow:hidden;}
.hcs-app .mech-wiz-head{padding:28px 32px 22px;border-bottom:1px solid var(--line,#E3E8EF);}
/* Reset the global .hcs-app .step-num rule (hcs-design-system.css:330)
   which paints .step-num as a 48px blue circle — it would otherwise
   eat the wizard's "Step 1 of 5" caption. */
.hcs-app .mech-wiz-head .step-num{
  width:auto;height:auto;border-radius:0;background:transparent;
  display:block;margin:0 0 10px 0;
  font-size:12.5px;font-weight:700;color:var(--blue-700,#1E5AA8);
  text-transform:uppercase;letter-spacing:.1em;line-height:1.4;
}
.hcs-app .mech-wiz-head h1{font-weight:700;font-size:clamp(22px,2.6vw,28px);color:var(--blue-900,#0A2540);letter-spacing:-.02em;margin:0 0 6px 0;line-height:1.2;}
.hcs-app .mech-wiz-head p{color:var(--ink-2,#475569);font-size:14.5px;margin:0;}
.hcs-app .mech-wiz-body{padding:28px 32px;}
@media (max-width:560px){
  .hcs-app .mech-wiz-head,
  .hcs-app .mech-wiz-body{padding-left:20px;padding-right:20px;}
}

/* PANE */
.hcs-app .mech-pane{display:none;animation:mechFadeIn .25s ease;}
.hcs-app .mech-pane.show{display:block;}
@keyframes mechFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* FIELDS */
.hcs-app .mech-field{margin-bottom:16px;}
.hcs-app .mech-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.hcs-app .mech-field-row{grid-template-columns:1fr;}}
.hcs-app .mech-field-label{display:block;font-size:13px;font-weight:600;color:var(--ink,#0A2540);margin-bottom:7px;}
.hcs-app .mech-field-label .req{color:var(--red);margin-left:2px;}
.hcs-app .mech-field-help{font-size:12.5px;color:var(--ink-3,#748094);margin-top:5px;}
.hcs-app .mech-help-line{font-size:13px;color:var(--ink-3,#748094);margin:0 0 14px;}

.hcs-app .mech-text,
.hcs-app .mech-textarea,
.hcs-app .mech-app select.mech-text{width:100%;padding:12px 14px;border:1.5px solid var(--line,#E3E8EF);border-radius:8px;font-size:15px;font-weight:500;background:#fff;color:var(--ink,#0A2540);transition:all .15s;font-family:inherit;}
.hcs-app .mech-text:focus,
.hcs-app .mech-textarea:focus{outline:0;border-color:var(--blue-700,#1E5AA8);box-shadow:0 0 0 3px rgba(30,90,168,.15);}
.hcs-app .mech-text::placeholder,
.hcs-app .mech-textarea::placeholder{color:var(--ink-3,#748094);}
.hcs-app .mech-textarea{min-height:90px;resize:vertical;}
.hcs-app .mech-field.has-error .mech-text,
.hcs-app .mech-field.has-error .mech-textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(197,48,48,.1);}
.hcs-app .mech-field-error{display:none;font-size:12.5px;color:var(--red);margin-top:5px;}
.hcs-app .mech-field.has-error .mech-field-error{display:block;}
/* Step-3 services grid + step-4 upload zones don't contain a .mech-text, so
   they need their own visible invalid state (otherwise the "Please fix…" toast
   shows with nothing highlighted). */
.hcs-app .mech-check-grid.has-error{
  border:1.5px solid var(--red);border-radius:10px;
  box-shadow:0 0 0 3px rgba(197,48,48,.1);
  padding:10px;background:var(--red-50);
}

/* RADIO CARDS */
.hcs-app .mech-radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:560px){.hcs-app .mech-radio-grid{grid-template-columns:1fr;}}
.hcs-app .mech-radio-card{padding:14px 16px;border:1.5px solid var(--line,#E3E8EF);border-radius:10px;background:#fff;cursor:pointer;transition:all .15s;position:relative;text-align:left;display:flex;align-items:flex-start;gap:12px;font:inherit;color:inherit;}
.hcs-app .mech-radio-card:hover{border-color:var(--blue-500,#3B7BE0);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-radio-card.selected{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);box-shadow:0 0 0 3px rgba(30,90,168,.1);}
.hcs-app .mech-radio-card .cb{width:20px;height:20px;border-radius:50%;border:2px solid var(--line,#E3E8EF);display:grid;place-items:center;flex-shrink:0;margin-top:2px;transition:all .15s;}
.hcs-app .mech-radio-card.selected .cb{border-color:var(--blue-700,#1E5AA8);}
.hcs-app .mech-radio-card.selected .cb::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue-700,#1E5AA8);}
.hcs-app .mech-radio-card .text{flex:1;}
.hcs-app .mech-radio-card strong{display:block;font-size:14.5px;font-weight:700;color:var(--ink,#0A2540);margin-bottom:2px;}
.hcs-app .mech-radio-card small{font-size:12.5px;color:var(--ink-3,#748094);line-height:1.4;}

/* CHECKBOX CARDS */
.hcs-app .mech-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (max-width:680px){.hcs-app .mech-check-grid{grid-template-columns:1fr;}}
.hcs-app .mech-check-card{padding:11px 14px;border:1.5px solid var(--line,#E3E8EF);border-radius:9px;background:#fff;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:10px;font:inherit;color:inherit;}
.hcs-app .mech-check-card:hover{border-color:var(--blue-500,#3B7BE0);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-check-card.selected{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-check-card .cb{width:18px;height:18px;border-radius:5px;border:2px solid var(--line,#E3E8EF);display:grid;place-items:center;flex-shrink:0;transition:all .15s;}
.hcs-app .mech-check-card.selected .cb{background:var(--blue-700,#1E5AA8);border-color:var(--blue-700,#1E5AA8);}
.hcs-app .mech-check-card .cb svg{opacity:0;color:#fff;}
.hcs-app .mech-check-card.selected .cb svg{opacity:1;}
.hcs-app .mech-check-card .ic{width:30px;height:30px;border-radius:7px;flex-shrink:0;background:var(--blue-50,#EEF4FB);color:var(--blue-700,#1E5AA8);display:grid;place-items:center;}
.hcs-app .mech-check-card.selected .ic{background:var(--blue-700,#1E5AA8);color:#fff;}
.hcs-app .mech-check-card .lbl{flex:1;font-size:13.5px;font-weight:600;color:var(--ink,#0A2540);text-align:left;}

/* RADIUS PICKER */
.hcs-app .mech-radius-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.hcs-app .mech-radius-card{padding:18px 12px;border:1.5px solid var(--line,#E3E8EF);border-radius:10px;background:#fff;cursor:pointer;transition:all .15s;text-align:center;font:inherit;color:inherit;}
.hcs-app .mech-radius-card:hover{border-color:var(--blue-500,#3B7BE0);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-radius-card.selected{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);box-shadow:0 0 0 3px rgba(30,90,168,.1);}
.hcs-app .mech-radius-card strong{display:block;font-size:24px;font-weight:800;color:var(--blue-900,#0A2540);letter-spacing:-.02em;line-height:1;}
.hcs-app .mech-radius-card small{display:block;font-size:11.5px;color:var(--ink-3,#748094);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.hcs-app .mech-radius-card .est{font-size:12px;color:var(--blue-700,#1E5AA8);margin-top:4px;font-weight:600;}

/* UPLOAD ZONE */
.hcs-app .mech-upload-zone{position:relative;border:2px dashed var(--line,#E3E8EF);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .15s;background:#fff;display:block;}
.hcs-app .mech-upload-zone:hover{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-upload-zone.is-dragover{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);transform:scale(1.01);}
.hcs-app .mech-upload-zone.uploading{border-style:solid;border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);}
.hcs-app .mech-upload-zone.has-file{border-style:solid;border-color:var(--green);background:var(--green-50);}
.hcs-app .mech-upload-zone.has-error{border-color:var(--red);background:var(--red-50);}
.hcs-app .mech-upload-zone .ic{width:42px;height:42px;border-radius:50%;background:var(--blue-50,#EEF4FB);color:var(--blue-700,#1E5AA8);display:grid;place-items:center;margin:0 auto 10px;}
.hcs-app .mech-upload-zone.has-file .ic{background:var(--green);color:#fff;}
.hcs-app .mech-upload-zone strong.mech-upload-cta{display:block;font-size:14px;font-weight:600;color:var(--ink,#0A2540);margin-bottom:2px;}
.hcs-app .mech-upload-zone small{font-size:12.5px;color:var(--ink-3,#748094);}
.hcs-app .mech-upload-progress{display:none;width:80%;max-width:240px;height:6px;margin:10px auto 0;background:#fff;border-radius:999px;overflow:hidden;border:1px solid var(--line,#E3E8EF);}
.hcs-app .mech-upload-progress .bar{height:100%;width:30%;background:var(--blue-700,#1E5AA8);transition:width .25s ease;border-radius:999px;}
.hcs-app .mech-upload-zone.uploading .mech-upload-progress{display:block;}
.hcs-app .mech-upload-filename{display:none;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:var(--green);font-weight:600;margin-top:6px;}
.hcs-app .mech-upload-zone.has-file .mech-upload-filename{display:flex;}
.hcs-app .mech-upload-zone.has-file .mech-upload-cta,
.hcs-app .mech-upload-zone.has-file small{display:none;}
.hcs-app .mech-upload-rm{padding:2px 8px;border-radius:4px;background:var(--bg-2,#F7F9FC);color:var(--ink-2,#475569);font-size:11px;font-weight:600;cursor:pointer;border:0;font-family:inherit;}

/* INFO / WARN BANNERS */
.hcs-app .mech-info-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--blue-50,#EEF4FB);border:1px solid var(--blue-100,#DCE8F5);border-radius:10px;margin-bottom:20px;font-size:13.5px;color:var(--blue-900,#0A2540);line-height:1.5;}
.hcs-app .mech-info-banner svg{flex-shrink:0;color:var(--blue-700,#1E5AA8);margin-top:2px;}
.hcs-app .mech-info-banner strong{display:block;font-weight:700;margin-bottom:2px;}
.hcs-app .mech-warn-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--amber-50);border:1px solid #FCD9A8;border-radius:10px;margin-bottom:20px;font-size:13.5px;color:var(--amber);line-height:1.5;}
.hcs-app .mech-warn-banner svg{flex-shrink:0;margin-top:2px;}
.hcs-app .mech-warn-banner strong{display:block;font-weight:700;margin-bottom:2px;}

/* SECTION TITLE */
.hcs-app .mech-section-title{font-size:13px;font-weight:700;color:var(--ink-3,#748094);text-transform:uppercase;letter-spacing:.1em;margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line,#E3E8EF);}
.hcs-app .mech-section-title:first-child{margin-top:0;}

/* REVIEW BLOCKS */
.hcs-app .mech-review-block{padding:18px;background:var(--bg-2,#F7F9FC);border-radius:10px;margin-bottom:14px;}
.hcs-app .mech-review-block .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.hcs-app .mech-review-block .head h4{font-weight:700;font-size:14.5px;color:var(--blue-900,#0A2540);margin:0;}
.hcs-app .mech-review-block .head a.jump{font-size:12.5px;color:var(--blue-700,#1E5AA8);font-weight:600;cursor:pointer;}
.hcs-app .mech-review-block .head a.jump:hover{color:var(--blue-900,#0A2540);}
.hcs-app .mech-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.hcs-app .mech-review-grid .row{display:flex;flex-direction:column;gap:1px;}
.hcs-app .mech-review-grid .row.wide{grid-column:1 / -1;}
.hcs-app .mech-review-grid .lbl{font-size:11.5px;font-weight:600;color:var(--ink-3,#748094);text-transform:uppercase;letter-spacing:.06em;}
.hcs-app .mech-review-grid strong{font-size:13.5px;color:var(--ink,#0A2540);font-weight:600;}
@media (max-width:560px){.hcs-app .mech-review-grid{grid-template-columns:1fr;}}

.hcs-app .mech-review-payout{margin-top:14px;padding:14px;background:linear-gradient(135deg,#fff 0%,var(--blue-50,#EEF4FB) 100%);border:1px solid var(--blue-100,#DCE8F5);border-radius:10px;display:flex;align-items:center;gap:12px;}
.hcs-app .mech-review-payout .ic-square{width:36px;height:36px;border-radius:9px;flex-shrink:0;background:#635BFF;color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.02em;}
.hcs-app .mech-review-payout .text{flex:1;font-size:13px;color:var(--ink-2,#475569);line-height:1.5;}
.hcs-app .mech-review-payout .text strong{display:block;color:var(--blue-900,#0A2540);font-weight:700;margin-bottom:2px;font-size:13.5px;}

/* TERMS BOXES */
.hcs-app .mech-terms-box{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:12px 0;font-size:13.5px;color:var(--ink-2,#475569);line-height:1.5;}
.hcs-app .mech-terms-box .cb{width:18px;height:18px;border-radius:5px;border:2px solid var(--line,#E3E8EF);display:grid;place-items:center;flex-shrink:0;margin-top:1px;transition:all .15s;}
.hcs-app .mech-terms-box.checked .cb{background:var(--blue-700,#1E5AA8);border-color:var(--blue-700,#1E5AA8);}
.hcs-app .mech-terms-box .cb svg{opacity:0;color:#fff;}
.hcs-app .mech-terms-box.checked .cb svg{opacity:1;}
.hcs-app .mech-terms-box a{color:var(--blue-700,#1E5AA8);font-weight:500;text-decoration:underline;}

/* WIZ FOOT */
.hcs-app .mech-wiz-foot{padding:18px 32px;border-top:1px solid var(--line,#E3E8EF);background:var(--bg-2,#F7F9FC);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
@media (max-width:560px){.hcs-app .mech-wiz-foot{padding:16px 20px;}}
.hcs-app .mech-step-of{font-size:12.5px;color:var(--ink-3,#748094);font-weight:600;}

.hcs-app .mech-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:8px;font-weight:600;font-size:14.5px;transition:all .15s;cursor:pointer;white-space:nowrap;border:0;background:none;font-family:inherit;color:inherit;text-decoration:none;}
.hcs-app .mech-btn-primary{background:var(--blue-700,#1E5AA8);color:#fff;}
.hcs-app .mech-btn-primary:hover{background:var(--blue-800,#0F3A6B);transform:translateY(-1px);}
.hcs-app .mech-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.hcs-app .mech-btn-ghost{color:var(--ink-2,#475569);background:#fff;border:1.5px solid var(--line,#E3E8EF);}
.hcs-app .mech-btn-ghost:hover{border-color:var(--ink-2,#475569);color:var(--ink,#0A2540);}

.hcs-app .mech-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mechSpin .8s linear infinite;}
.hcs-app .mech-btn.loading .mech-spinner{display:inline-block;}
.hcs-app .mech-btn.loading .label{display:none;}
@keyframes mechSpin{to{transform:rotate(360deg);}}

/* SUCCESS */
.hcs-app .mech-success-card{background:#fff;border:1px solid var(--line,#E3E8EF);border-radius:14px;padding:48px 32px;box-shadow:var(--shadow-sm,0 1px 2px rgba(10,37,64,.06));text-align:center;}
.hcs-app .mech-success-circle{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--green) 0%,#15A35E 100%);display:grid;place-items:center;color:#fff;margin:0 auto 24px;box-shadow:0 16px 32px rgba(15,139,79,.3);animation:mechPop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes mechPop{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}
.hcs-app .mech-success-card h2{font-weight:800;font-size:28px;color:var(--blue-900,#0A2540);letter-spacing:-.02em;margin-bottom:10px;}
.hcs-app .mech-success-card p{font-size:15.5px;color:var(--ink-2,#475569);max-width:480px;margin:0 auto 24px;}

.hcs-app .mech-success-timeline{max-width:480px;margin:32px auto 0;text-align:left;}
.hcs-app .mech-success-timeline .row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line,#E3E8EF);}
.hcs-app .mech-success-timeline .row:last-child{border-bottom:0;}
.hcs-app .mech-success-timeline .ic{width:32px;height:32px;border-radius:50%;background:var(--blue-50,#EEF4FB);color:var(--blue-700,#1E5AA8);display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:12px;}
.hcs-app .mech-success-timeline strong{display:block;font-size:14px;color:var(--blue-900,#0A2540);margin-bottom:2px;}
.hcs-app .mech-success-timeline small{font-size:12.5px;color:var(--ink-3,#748094);}

/* STRIPE CONNECT CARD */
.hcs-app .mech-stripe-card{max-width:520px;margin:32px auto 0;background:linear-gradient(135deg,#fff 0%,var(--blue-50,#EEF4FB) 100%);border:1.5px solid var(--blue-100,#DCE8F5);border-radius:14px;padding:24px;text-align:left;position:relative;overflow:hidden;}
.hcs-app .mech-stripe-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#635BFF 0%,var(--blue-700,#1E5AA8) 100%);}
.hcs-app .mech-stripe-card .head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.hcs-app .mech-stripe-card .head .logo{width:42px;height:42px;border-radius:10px;flex-shrink:0;background:#635BFF;color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:-.02em;box-shadow:0 4px 12px rgba(99,91,255,.3);}
.hcs-app .mech-stripe-card .head .text strong{display:block;font-size:16px;font-weight:700;color:var(--blue-900,#0A2540);letter-spacing:-.01em;line-height:1.2;}
.hcs-app .mech-stripe-card .head .text small{font-size:12.5px;color:var(--ink-3,#748094);display:block;margin-top:2px;font-weight:500;}
.hcs-app .mech-stripe-card .head .opt-pill{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--blue-700,#1E5AA8);background:#fff;padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--blue-100,#DCE8F5);}
.hcs-app .mech-stripe-card > p{font-size:14px;color:var(--ink-2,#475569);line-height:1.6;margin-bottom:14px;}
.hcs-app .mech-stripe-bullets{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;padding:14px;background:#fff;border-radius:10px;border:1px solid var(--line,#E3E8EF);}
.hcs-app .mech-stripe-bullets .bullet{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink,#0A2540);line-height:1.5;}
.hcs-app .mech-stripe-bullets .bullet svg{flex-shrink:0;color:var(--green);margin-top:3px;}
.hcs-app .mech-stripe-bullets .bullet strong{font-weight:700;color:var(--blue-900,#0A2540);}

.hcs-app .mech-stripe-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hcs-app .mech-stripe-btn{flex:1;min-width:200px;background:#635BFF;color:#fff;padding:13px 18px;border-radius:9px;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;cursor:pointer;box-shadow:0 4px 14px rgba(99,91,255,.25);border:0;font-family:inherit;}
.hcs-app .mech-stripe-btn:hover{background:#5046E5;transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,91,255,.35);}
.hcs-app .mech-stripe-btn.loading .label{display:none;}
.hcs-app .mech-stripe-btn.loading .mech-spinner{display:inline-block;}

.hcs-app .mech-stripe-later{font-size:13px;color:var(--ink-3,#748094);font-weight:600;padding:13px 14px;text-decoration:underline;background:none;cursor:pointer;border:0;font-family:inherit;}
.hcs-app .mech-stripe-later:hover{color:var(--ink,#0A2540);}
.hcs-app .mech-stripe-trust{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line,#E3E8EF);display:flex;align-items:center;gap:8px;justify-content:center;font-size:11.5px;color:var(--ink-3,#748094);text-align:center;line-height:1.5;}
.hcs-app .mech-stripe-trust svg{color:var(--green);flex-shrink:0;}

/* TOAST */
.hcs-app .mech-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--blue-900,#0A2540);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg,0 18px 40px rgba(10,37,64,.14));z-index:200;display:flex;align-items:center;gap:10px;opacity:0;transition:all .25s ease;pointer-events:none;}
.hcs-app .mech-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.hcs-app .mech-toast.error{background:var(--red);}
.hcs-app .mech-toast svg{color:#67E8B8;}
.hcs-app .mech-toast.error svg{color:#fff;}

@media (prefers-reduced-motion:reduce){
  .hcs-app .mech-pane,
  .hcs-app .mech-success-circle{animation:none !important;}
  .hcs-app .mech-btn-primary:hover,
  .hcs-app .mech-stripe-btn:hover{transform:none;}
}

/* ===== Social pre-fill (step 1) — ported from Mechanic/mechanic-apply.html ===== */
.hcs-app .mech-social-intro{
  padding:16px;background:linear-gradient(135deg,var(--blue-50,#EEF4FB) 0%,#fff 80%);
  border:1px solid var(--blue-100,#D6E4F5);border-radius:11px;margin-bottom:22px;
}
.hcs-app .mech-social-intro-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.hcs-app .mech-social-intro-head svg{flex-shrink:0;color:var(--blue-700,#1E5AA8);margin-top:1px}
.hcs-app .mech-social-intro-head strong{display:block;font-size:13.5px;font-weight:700;color:var(--blue-900,#0A2540);line-height:1.2;margin-bottom:2px}
.hcs-app .mech-social-intro-head small{font-size:12px;color:var(--ink-2,#475569);line-height:1.45;display:block}
.hcs-app .mech-social-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media (max-width:480px){.hcs-app .mech-social-row{grid-template-columns:1fr;gap:8px}}
.hcs-app .mech-social-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 8px;border:1.5px solid var(--line,#E3E8EF);border-radius:9px;
  background:#fff;font-size:13px;font-weight:600;color:var(--ink,#0A2540);
  transition:all .15s;cursor:pointer;min-width:0;font-family:inherit;
}
.hcs-app .mech-social-btn:hover{border-color:var(--ink-2,#475569);background:var(--bg-2,#F7F9FC);transform:translateY(-1px);box-shadow:0 4px 10px rgba(10,37,64,.06)}
.hcs-app .mech-social-btn svg{flex-shrink:0}
.hcs-app .mech-social-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:481px) and (max-width:760px){.hcs-app .mech-social-btn .lbl-long{display:none}}
@media (max-width:480px),(min-width:761px){.hcs-app .mech-social-btn .lbl-short{display:none}}
.hcs-app .mech-social-divider{
  display:flex;align-items:center;gap:12px;
  font-size:11.5px;color:var(--ink-3,#748094);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 22px;
}
.hcs-app .mech-social-divider::before,.hcs-app .mech-social-divider::after{content:"";flex:1;height:1px;background:var(--line,#E3E8EF)}

/* ===== Email verification MODAL (hard gate before leaving step 1) ===== */
.hcs-app .mech-verify-overlay{display:none}
.hcs-app .mech-verify-overlay.show{
  position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,37,64,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:auto;
}
.hcs-app .mech-verify-modal{
  background:#fff;border-radius:16px;width:100%;max-width:440px;position:relative;text-align:center;
  padding:30px 28px 24px;box-shadow:0 24px 50px rgba(10,37,64,.22);animation:mechVModal .25s ease;
}
@keyframes mechVModal{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.hcs-app .mech-verify-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--ink-3,#748094);display:grid;place-items:center}
.hcs-app .mech-verify-close:hover{background:var(--bg-2,#F7F9FC);color:var(--ink,#0A2540)}
.hcs-app .mech-verify-ic{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;background:var(--blue-50,#EEF4FB);color:var(--blue-700,#1E5AA8);display:grid;place-items:center}
.hcs-app .mech-verify-modal h3{font-size:20px;font-weight:800;color:var(--blue-900,#0A2540);margin-bottom:8px}
.hcs-app .mech-verify-sub{font-size:13.5px;color:var(--ink-2,#475569);line-height:1.55}
.hcs-app .mech-verify-pill{display:inline-block;padding:3px 9px;background:var(--bg-2,#F7F9FC);border:1px solid var(--line,#E3E8EF);border-radius:5px;font-weight:700;color:var(--blue-900,#0A2540);font-size:12.5px;margin-top:6px}
.hcs-app .mech-verify-change{display:inline-block;margin:10px 0 4px;font-size:12.5px;color:var(--blue-700,#1E5AA8);font-weight:600;text-decoration:underline;background:none;border:0;cursor:pointer}
.hcs-app .mech-otp-row{display:flex;gap:8px;justify-content:center;margin:18px 0 14px}
@media (max-width:480px){.hcs-app .mech-otp-row{gap:5px}}
.hcs-app .mech-otp-input{width:50px;height:60px;border:1.5px solid var(--line,#E3E8EF);border-radius:10px;background:#fff;font-size:24px;font-weight:700;text-align:center;color:var(--blue-900,#0A2540);transition:all .15s}
@media (max-width:480px){.hcs-app .mech-otp-input{width:42px;height:54px;font-size:20px}}
.hcs-app .mech-otp-input:focus{outline:none;border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB);box-shadow:0 0 0 3px rgba(30,90,168,.12)}
.hcs-app .mech-otp-input.has-value{border-color:var(--blue-700,#1E5AA8);background:var(--blue-50,#EEF4FB)}
.hcs-app .mech-otp-row.error .mech-otp-input{border-color:#C0392B;background:#FEE;color:#C0392B;animation:mechOtpShake .35s ease}
@keyframes mechOtpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.hcs-app .mech-verify-status{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;min-height:18px;margin-bottom:14px}
.hcs-app .mech-verify-error{color:#C0392B;font-weight:600}
.hcs-app .mech-verify-resend{color:var(--ink-3,#748094);margin-left:auto}
.hcs-app .mech-verify-resend button{color:var(--blue-700,#1E5AA8);font-weight:700;background:none;border:0;cursor:pointer;text-decoration:underline;font-size:12.5px}
.hcs-app .mech-verify-confirm{width:100%;padding:13px;border-radius:10px;background:var(--blue-700,#1E5AA8);color:#fff;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:0;transition:all .15s}
.hcs-app .mech-verify-confirm:hover:not(:disabled){background:var(--blue-800,#0F3A6B)}
.hcs-app .mech-verify-confirm:disabled{background:#CBD5E0;cursor:not-allowed}
.hcs-app .mech-verify-confirm .spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mechVSpin .8s linear infinite}
.hcs-app .mech-verify-confirm.loading .spinner{display:inline-block}
.hcs-app .mech-verify-confirm.loading .label{display:none}
@keyframes mechVSpin{to{transform:rotate(360deg)}}
.hcs-app .mech-verify-note{margin-top:10px;font-size:11.5px;color:var(--ink-3,#748094)}

/* Social apply buttons (re-added 2026-06-04) */
.mech-app .mech-social{margin-bottom:20px}
.mech-app .mech-social-row{display:flex;gap:8px}
.mech-app .mech-soc{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;border:1.5px solid #e3e8ef;border-radius:10px;background:#fff;font-weight:600;font-size:14px;color:#0a2540;cursor:pointer;transition:border-color .15s,background .15s}
.mech-app .mech-soc:hover{border-color:#475569;background:#f7f9fc}
.mech-app .mech-soc svg{flex-shrink:0}
.mech-app .mech-social-or{display:flex;align-items:center;gap:14px;margin:18px 0 2px;font-size:12px;color:#748094;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.mech-app .mech-social-or::before,.mech-app .mech-social-or::after{content:"";flex:1;height:1px;background:#e3e8ef}
@media(max-width:420px){.mech-app .mech-soc span{display:none}}
