/* ── CONFIRM DIALOG (account actions) ── */
.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;align-items:center;justify-content:center;padding:1.25rem;backdrop-filter:blur(4px)}
.confirm-overlay.show{display:flex}
.confirm-box{background:var(--surface);border-radius:var(--radius-xl);padding:1.75rem;max-width:380px;width:100%;box-shadow:var(--shadow-lg);border:1px solid var(--border);text-align:center;animation:pop-in .2s ease}
.confirm-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:26px;background:var(--danger-bg);color:var(--danger)}
.confirm-icon.info{background:var(--info-bg);color:var(--cta)}
.confirm-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:.5rem}
.confirm-msg{font-size:14px;color:var(--text-sub);line-height:1.6;margin-bottom:1.5rem}
#fav-login-overlay .confirm-msg{margin-bottom:.75rem}
.fav-login-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--cta);background:var(--info-bg);border-radius:20px;padding:6px 13px;margin:0 auto 1.25rem}
.fav-login-hint i{font-size:14px}
.confirm-btns{display:flex;gap:10px;justify-content:center}
.confirm-btns .btn{flex:1;justify-content:center}
.confirm-btns .btn-danger-solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.confirm-btns .btn-danger-solid:hover{background:var(--danger-hover)}
@media(max-width:480px){
  .confirm-overlay{align-items:flex-end;padding:0}
  .confirm-box{max-width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  /* The Sign in modal stays a centered, fully-rounded card on every
     screen size instead of the bottom-sheet treatment other confirm
     dialogs use — a plain "type a phone number" flow reads better as
     a normal centered dialog than a sheet sliding up from the edge. */
  #fav-login-overlay{align-items:center;padding:1.25rem}
  #fav-login-overlay .confirm-box{max-width:380px;border-radius:var(--radius-xl)}
  /* Same reasoning as #fav-login-overlay above — a short "send now or
     edit info?" choice reads better centered than as a bottom sheet. */
  #inq-quick-overlay{align-items:center;padding:1.25rem}
  #inq-quick-overlay .confirm-box{max-width:380px;border-radius:var(--radius-xl)}
}

/* ── INQUIRY MODAL ── */
.inq-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;padding:1.25rem;backdrop-filter:blur(4px)}
.inq-modal{background:var(--surface);border-radius:var(--radius-xl);width:100%;max-width:500px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.inq-modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.inq-modal-title{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.inq-modal-title i{color:var(--cta);font-size:20px}
#report-overlay .inq-modal-title i{font-size:17px}
#report-overlay .inq-send i{font-size:14px}
.inq-modal-sub{font-size:13px;color:var(--text-sub);margin-top:3px;padding-left:28px}
.inq-close{background:var(--page-bg);border:1px solid var(--border);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--text-sub);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.inq-close:hover{background:var(--border)}
.inq-modal-body{padding:1.25rem 1.5rem 1rem;display:flex;flex-direction:column;gap:16px}
.inq-form-group{display:flex;flex-direction:column;gap:7px}
.inq-form-group label{font-size:12px;font-weight:600;color:var(--text-sub);letter-spacing:.2px;margin-bottom:0;display:flex;align-items:center;gap:5px}
.inq-form-group label i{font-size:13px;color:var(--cta)}
.inq-form-group input,.inq-form-group select,.inq-form-group textarea{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--page-bg);font-family:inherit;transition:all .15s;-webkit-appearance:none;appearance:none;width:100%}
.inq-form-group input:focus,.inq-form-group select:focus,.inq-form-group textarea:focus{outline:none;border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),.12)}
.inq-form-group textarea{resize:none;min-height:80px;line-height:1.6}
.inq-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inq-err{font-size:13px;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);padding:9px 12px;border-radius:var(--radius);display:flex;align-items:center;gap:7px}
.inq-fields-wrap{display:flex;flex-direction:column;gap:16px}
.inq-simple-hint{font-size:13px;color:var(--text-sub);line-height:1.6;background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--radius);padding:10px 12px;display:flex;align-items:flex-start;gap:8px}
.inq-simple-hint i{font-size:16px;color:var(--cta);flex-shrink:0;margin-top:1px}
.inq-more-toggle{width:100%;padding:11px 14px;border-radius:var(--radius);border:1px dashed var(--border);background:var(--page-bg);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .15s;-webkit-tap-highlight-color:transparent}
.inq-more-toggle:hover{background:var(--border)}
.inq-more-toggle span{display:flex;align-items:center;gap:6px}
.inq-more-toggle i{font-size:15px;color:var(--cta)}
.inq-more-toggle #inq-more-chevron{transition:transform .2s}
.inq-more-toggle.open #inq-more-chevron{transform:rotate(180deg)}
#inq-more-fields{display:flex;flex-direction:column;gap:16px}
.inq-section-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px;margin-top:2px}
.inq-section-label i{font-size:14px;color:var(--cta)}
.inq-modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:0 0 var(--radius-xl) var(--radius-xl);position:sticky;bottom:0;z-index:1}
.inq-cancel{padding:10px 20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--page-bg);color:var(--text-sub);font-size:14px;font-weight:500;cursor:pointer;flex-shrink:0;transition:all .15s}
.inq-cancel:hover{background:var(--border);color:var(--text)}
.inq-send{flex:1;padding:11px 22px;border-radius:var(--radius);border:none;background:var(--cta);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;-webkit-tap-highlight-color:transparent;transition:background .15s}
.inq-send:hover{background:var(--cta-hover)}
.inq-send i{font-size:16px}

/* ── EMAIL LOOKUP BANNER ── */
.email-lookup-bar{background:var(--page-bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
#fav-sync-box{max-width:480px;width:50%;margin-left:auto;margin-right:auto;padding:1.25rem}
.email-lookup-row{display:flex;gap:8px;align-items:center}
.email-lookup-row input{flex:1;padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--surface);transition:all .15s}
.email-lookup-row input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(var(--cta-rgb),.12)}
.email-lookup-btn{padding:8px 14px;border-radius:var(--radius);border:none;background:var(--cta);color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:background .15s;flex-shrink:0}
.email-lookup-btn:hover{background:var(--cta-hover)}
.email-lookup-btn i{font-size:14px}
.email-lookup-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:capitalize;letter-spacing:.5px;display:flex;align-items:center;gap:5px;margin-bottom:2px}
.email-lookup-label i{font-size:13px;color:var(--cta)}

/* ── USER BADGE (auto-filled) ── */
.inq-user-badge{margin-top:2px;padding:7px 10px;background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--radius);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inq-user-badge .badge-name{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--link-light);font-weight:600}
.inq-user-badge .badge-tag{font-size:11px;color:var(--link-light);background:var(--info-tag-bg);padding:2px 8px;border-radius:20px;font-weight:500}
.inq-user-badge .badge-clear{margin-left:auto;font-size:11px;color:var(--danger);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:3px;padding:0;font-weight:500}

/* ── LOOKUP SPINNER ──
   Uses currentColor (not a hardcoded white) so it stays visible no matter
   what the host button's text color is — white-on-blue buttons, the
   soft-blue pill buttons (blue text on a light background), danger
   buttons, etc. all render a visible spinner automatically. */
.lookup-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;opacity:.9;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.ti-loader-2{display:inline-block;animation:spin .8s linear infinite}
/* ── OTP VERIFY BUTTON STATES ── */
.otp-verify-success{background:var(--success) !important;border-color:var(--success) !important;color:#fff !important;cursor:default}
.otp-verify-fail{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important}
/* ── REGISTER FIELDS DISABLED STATE ── */
.reg-fields-disabled input:not(#reg-contact):not(.otp-real-input),
.reg-fields-disabled select,
.reg-fields-disabled textarea{opacity:0.45;pointer-events:none;background:transparent!important}
.reg-fields-disabled label[for]:not([for="reg-contact"]):not([for="reg-phone-otp-code"]){opacity:0.45;pointer-events:none}
.reg-fields-disabled #reg-submit-btn{background:var(--border)!important;border-color:var(--border)!important;color:var(--text-sub)!important;pointer-events:none;cursor:not-allowed}
/* ── FIELDS LOADING OVERLAY ── */
.inq-fields-wrap{position:relative}
.inq-fields-loading{display:none;position:absolute;inset:0;min-height:110px;background:var(--overlay-bg);border-radius:var(--radius);z-index:10;flex-direction:column;align-items:center;justify-content:center;gap:10px;backdrop-filter:blur(2px)}
.inq-fields-loading.show{display:flex}
.inq-fields-loading .fl-spinner{width:32px;height:32px;border:3px solid var(--spinner-track);border-top-color:var(--cta);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.inq-fields-loading .fl-text{font-size:13px;color:var(--text-sub);font-weight:500}
/* While step 1 (phone) is active, the "loading your info" lookup is shown
   as an inline spinner on the Continue button instead (see regWizTick) —
   the #reg-fields-loading overlay lives inside #reg-fields-wrap, which has
   no visible step content yet at that point, so it would render squashed
   to near-zero height rather than as a proper centered spinner. */
#wiz-step-phone.active ~ #reg-fields-wrap #reg-fields-loading{display:none!important}

@media(max-width:640px){
  .inq-overlay{align-items:flex-end;padding:0}
  .inq-modal{max-width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:93vh}
  .inq-form-row{grid-template-columns:1fr}
  .inq-modal-footer{flex-direction:column;gap:8px}
  .inq-send{order:1}
  .inq-cancel{order:2}
  .inq-cancel,.inq-send{width:100%;justify-content:center}
  .email-lookup-row{flex-direction:column}
  .email-lookup-btn{width:100%;justify-content:center}
}



/* ── SUCCESS POPUP ── */
.success-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;align-items:center;justify-content:center;padding:1.25rem;backdrop-filter:blur(4px)}
.success-overlay.show{display:flex}
.success-modal{background:var(--surface);border-radius:var(--radius-xl);width:100%;max-width:380px;padding:2rem 1.75rem 1.75rem;text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--border);animation:pop-in .25s ease;position:relative}
@keyframes pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.success-icon{width:64px;height:64px;background:var(--success-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:30px;color:var(--success)}
.success-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:.5rem;letter-spacing:-.2px}
.success-msg{font-size:14px;color:var(--text-sub);line-height:1.6;margin-bottom:1.5rem}
.success-id{display:inline-block;font-size:12px;font-weight:700;background:var(--info-bg);color:var(--cta);border:1px solid var(--info-border);padding:3px 12px;border-radius:20px;margin-bottom:1rem}
.success-bar-wrap{height:4px;background:var(--spinner-track);border-radius:2px;overflow:hidden;margin-bottom:1.25rem}
.success-bar{height:100%;background:var(--cta);border-radius:2px;width:100%;animation:drain 7s linear forwards}
@keyframes drain{from{width:100%}to{width:0%}}
.success-close-btn{width:100%;padding:11px;border-radius:var(--radius);border:none;background:var(--cta);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s}
.success-close-btn:hover{background:var(--cta-hover)}