/* ============================================================
   Algo HasOffers registration — modern multi-step form UI
   Scoped under .ha-reg so it never bleeds into the theme.
   ============================================================ */

.ha-reg{
    --ha-primary:#2563eb;
    --ha-primary-dark:#1d4ed8;
    --ha-bg:#ffffff;
    --ha-muted:#6b7280;
    --ha-border:#d8dee9;
    --ha-error:#dc2626;
    --ha-radius:12px;
    max-width:920px;
    margin:40px auto;
    padding:0 16px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#111827;
    box-sizing:border-box;
}
.ha-reg *,.ha-reg *::before,.ha-reg *::after{box-sizing:border-box;}

.ha-form{
    background:var(--ha-bg);
    border:1px solid var(--ha-border);
    border-radius:var(--ha-radius);
    box-shadow:0 10px 40px -12px rgba(16,24,40,.18);
    padding:32px;
    position:relative;
    overflow:hidden;
}

/* ---------- Stepper ---------- */
.ha-steps{
    display:flex;align-items:center;gap:8px;
    position:relative;margin-bottom:28px;flex-wrap:wrap;
}
.ha-step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;z-index:2;}
.ha-step-dot span{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#eef2f7;color:var(--ha-muted);
    font-weight:700;border:2px solid var(--ha-border);transition:.25s;
}
.ha-step-dot label{font-size:12px;color:var(--ha-muted);font-weight:600;}
.ha-step-dot.is-active span,.ha-step-dot.is-done span{
    background:var(--ha-primary);color:#fff;border-color:var(--ha-primary);
}
.ha-step-dot.is-active label,.ha-step-dot.is-done label{color:var(--ha-primary);}
.ha-progress{flex:1 1 auto;height:4px;background:var(--ha-border);border-radius:4px;margin:0 4px;order:5;width:100%;margin-top:14px;}
.ha-progress-bar{height:100%;width:33%;background:var(--ha-primary);border-radius:4px;transition:width .35s ease;}

/* ---------- Slides ---------- */
.ha-slide{display:none;border:0;margin:0;padding:0;min-width:0;}
.ha-slide.is-active{display:block;animation:ha-fade .35s ease;}
@keyframes ha-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ha-slide-title{font-size:20px;font-weight:700;margin:0 0 20px;}

/* ---------- Grid + fields ---------- */
.ha-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.ha-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ha-field.ha-col-2{grid-column:1 / -1;}
.ha-field label{font-size:13px;font-weight:600;color:#374151;}
.ha-field label span{color:var(--ha-error);}
.ha-field input,.ha-field select,.ha-field textarea{
    width:100%;padding:11px 13px;border:1px solid var(--ha-border);
    border-radius:9px;font-size:15px;background:#fff;transition:border-color .15s,box-shadow .15s;
}
.ha-field textarea{min-height:84px;resize:vertical;}
.ha-field input:focus,.ha-field select:focus,.ha-field textarea:focus{
    outline:none;border-color:var(--ha-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.ha-field.ha-invalid input,.ha-field.ha-invalid select,.ha-field.ha-invalid textarea{
    border-color:var(--ha-error);box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.ha-field .ha-err-msg{color:var(--ha-error);font-size:12px;font-weight:600;animation:ha-fade .2s ease;}
.ha-field .ha-hint{color:var(--ha-muted);font-size:12px;}

/* ---- valid state (green border + check tick) ---- */
.ha-field.ha-valid input:not([type=checkbox]):not([type=password]),
.ha-field.ha-valid textarea{
    border-color:#16a34a;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:38px;
}
.ha-field.ha-valid textarea{background-position:right 12px top 12px;}
.ha-field.ha-valid input[type=password],
.ha-field.ha-valid select{border-color:#16a34a;}

/* select2 invalid / valid borders */
.ha-reg .ha-field.ha-invalid .select2-selection{border-color:var(--ha-error)!important;box-shadow:0 0 0 3px rgba(220,38,38,.12);}
.ha-reg .ha-field.ha-valid   .select2-selection{border-color:#16a34a!important;}

/* shake on invalid */
@keyframes ha-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.ha-field.ha-invalid input,.ha-field.ha-invalid select,.ha-field.ha-invalid textarea{animation:ha-shake .35s ease;}
.ha-hidden{display:none !important;}

/* ---------- Consent ---------- */
.ha-consent{margin-top:24px;display:flex;flex-direction:column;gap:14px;}
.ha-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#4b5563;line-height:1.5;cursor:pointer;}
.ha-check input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--ha-primary);}
.ha-check.ha-invalid{color:var(--ha-error);}
.ha-check a{color:var(--ha-primary);}

/* ---------- Actions / buttons ---------- */
.ha-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;}
.ha-actions:has(.ha-next):not(:has(.ha-prev)){justify-content:flex-end;}
.ha-btn{
    appearance:none;border:0;cursor:pointer;font-size:15px;font-weight:700;
    padding:12px 26px;border-radius:10px;background:var(--ha-primary);color:#fff;transition:.18s;
}
.ha-btn:hover{background:var(--ha-primary-dark);transform:translateY(-1px);}
.ha-btn.ha-ghost{background:transparent;color:var(--ha-primary);border:1px solid var(--ha-border);}
.ha-btn.ha-ghost:hover{background:#f3f6fb;}
.ha-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;}

/* ---------- Loader / messages ---------- */
.ha-loader{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;}
/* The [hidden] HTML attribute must win over the display:flex above, otherwise
   the loading overlay stays permanently visible and dims the whole form. */
.ha-reg .ha-loader[hidden]{display:none !important;}
.ha-reg .ha-form-error[hidden]{display:none !important;}
.ha-spinner{width:42px;height:42px;border:4px solid var(--ha-border);border-top-color:var(--ha-primary);border-radius:50%;animation:ha-spin .8s linear infinite;}
@keyframes ha-spin{to{transform:rotate(360deg)}}
.ha-form-error{margin-top:18px;padding:12px 16px;border-radius:9px;background:#fef2f2;color:var(--ha-error);font-size:14px;font-weight:600;border:1px solid #fecaca;}

/* ---------- select2 polish ---------- */
.ha-reg .select2-container--default .select2-selection--multiple,
.ha-reg .select2-container--default .select2-selection--single{
    border:1px solid var(--ha-border)!important;border-radius:9px!important;min-height:44px;padding:3px 4px;
}
.ha-reg .select2-container{width:100%!important;}
.ha-reg .select2-container--default.select2-container--focus .select2-selection--multiple{
    border-color:var(--ha-primary)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.ha-reg .select2-selection__choice{background:var(--ha-primary)!important;color:#fff!important;border:0!important;border-radius:6px!important;}

/* honeypot off-screen */
.ha-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;}

/* ---------- Responsive ---------- */
@media (max-width:680px){
    .ha-reg{margin:22px auto;padding:0 10px;}
    .ha-form{padding:20px 15px;border-radius:14px;box-shadow:0 6px 24px -10px rgba(16,24,40,.18);}
    .ha-grid{grid-template-columns:1fr;gap:15px;}
    .ha-field.ha-col-2{grid-column:auto;}
    .ha-slide-title{font-size:18px;margin-bottom:16px;}
    /* 16px input text prevents iOS Safari from auto-zooming on focus */
    .ha-field input,.ha-field select,.ha-field textarea{font-size:16px;padding:12px 13px;}
    .ha-field label{font-size:14px;}
    .ha-steps{gap:6px;margin-bottom:20px;}
    .ha-step-dot span{width:32px;height:32px;font-size:14px;}
    .ha-step-dot label{font-size:11px;}
    .ha-progress{margin-top:12px;}
    /* stacked, full-width, thumb-friendly buttons */
    .ha-actions{flex-direction:column;gap:10px;margin-top:22px;}
    .ha-actions .ha-btn{width:100%;text-align:center;padding:14px 20px;font-size:16px;}
    .ha-consent{margin-top:20px;}
    .ha-check{font-size:12.5px;}
    /* larger select2 tap target */
    .ha-reg .select2-container--default .select2-selection--multiple,
    .ha-reg .select2-container--default .select2-selection--single{min-height:46px;}
    .ha-reg .select2-container .select2-selection--single .select2-selection__rendered{line-height:40px;}
}
@media (max-width:380px){
    .ha-form{padding:16px 11px;}
    .ha-step-dot label{display:none;}
    .ha-slide-title{font-size:17px;}
}

/* ---------- Success state ---------- */
.ha-success-box{text-align:center;padding:40px 20px;}
.ha-success-box .ha-check-circle{width:72px;height:72px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 18px;}
.ha-success-box h3{font-size:22px;margin:0 0 8px;}
.ha-success-box p{color:var(--ha-muted);}
