/* =========================================================
   APR Agent Portal Styles
   - Hard-overrides theme CSS to keep layout consistent
   - Versioned via APR_AP_VERSION
   ========================================================= */

:root{
  --apr-blue:#5b9df9;
  --apr-blue-selected:#65A9FF;
  --apr-dark:#111117;
  --apr-white:#ffffff;
  --apr-ink:#0b1220;
}

/* Scope everything to the portal wrapper */
.apr-agent-hero,
.apr-agent-hero *{ box-sizing:border-box !important; }

.apr-agent-hero{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--apr-white) !important;
}

/* ---------- Signup (multi-step) ---------- */
.apr-agent-hero .apr-form{
  max-width:920px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.apr-agent-hero .apr-step{ display:none !important; }
.apr-agent-hero .apr-step.is-active{ display:block !important; }
.apr-agent-hero .apr-step[hidden]{ display:none !important; }

.apr-agent-hero .apr-label{
  display:block !important;
  margin:0 0 10px !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--apr-white) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}

.apr-agent-hero .apr-input{
  width:100% !important;
  display:block !important;
  padding:14px 18px !important;
  font-size:16px !important;
  border-radius:2px !important;
  border:0 !important;
  outline:none !important;
  background:var(--apr-white) !important;
  color:var(--apr-ink) !important;
  text-align:center !important;
  box-shadow:0 8px 30px rgba(0,0,0,.12) !important;
}

/* Selects render differently across browsers and can appear vertically clipped.
   Force a consistent, centered single-line appearance specifically for dropdowns. */
.apr-agent-hero select.apr-input{
  height:52px !important;
  min-height:52px !important;
  padding:0 44px 0 18px !important; /* room for dropdown arrow */
  line-height:52px !important;
  text-align:center !important;
  text-align-last:center !important; /* Firefox/Chromium */
  -webkit-appearance:menulist !important;
  appearance:menulist !important;
}

.apr-agent-hero select.apr-input option{
  color:#000 !important;
  background:#fff !important;
}

.apr-agent-hero .apr-input::placeholder{ color:#6b7280 !important; }

/* Buttons */
.apr-agent-hero .apr-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 18px !important;
  font-size:16px !important;
  font-weight: 400 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  border-radius: 5px !important;
  border:2px solid transparent !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .05s ease !important;
  outline:none !important;
  margin:0 !important;
  width:100% !important; /* critical: defeat theme button widths */
}

.apr-agent-hero .apr-btn:active{ transform:translateY(1px) !important; }

.apr-agent-hero .apr-btn--primary{
  background:var(--apr-blue) !important;
  color:var(--apr-white) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.20) !important;
}

.apr-agent-hero .apr-btn--ghost{
  background:transparent !important;
  color:var(--apr-white) !important;
  border-color:rgba(255,255,255,.85) !important;
}

.apr-agent-hero .apr-btn--dark{
  background:var(--apr-dark) !important;
  color:var(--apr-white) !important;
  border-color:var(--apr-dark) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.20) !important;
}

.apr-agent-hero .apr-btn--primary:hover,
.apr-agent-hero .apr-btn--ghost:hover,
.apr-agent-hero .apr-btn--dark:hover{
  background:var(--apr-dark) !important;
  border-color:var(--apr-white) !important;
  color:var(--apr-white) !important;
}

/* Keep dark buttons solid (no white outline) */
.apr-agent-hero .apr-btn--dark:hover{ border-color:var(--apr-dark) !important; }

/* Button rows */
.apr-agent-hero .apr-btnrow{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin-top:16px !important;
  align-items:stretch !important;
}

/* Step 1: tighten spacing between the field and the primary CTA */
.apr-agent-hero .apr-step[data-step="1"] .apr-btnrow{
  /* Some themes inject extra spacing around inputs; keep Step 1 super tight */
  margin-top:16px !important;
}
.apr-agent-hero .apr-step[data-step="1"] .apr-input{
  /* Strong override: many themes add margin-bottom to inputs */
  margin:0 !important;
}
.apr-agent-hero .apr-step[data-step="1"] .apr-btnrow--below{
  margin-top:16px !important;
}

/* Single-button rows */
.apr-agent-hero .apr-btnrow--single{
  grid-template-columns:1fr !important;
}

/* A slightly tighter row used right under the primary CTA on Step 1 */
.apr-agent-hero .apr-btnrow--below{
  margin-top:12px !important;
}

/* (Legacy) kept for compatibility if referenced elsewhere */
.apr-agent-hero .apr-btnrow--two{ grid-template-columns:1fr 1fr !important; }

/* Choice (Transmission) */
.apr-agent-hero .apr-choice{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin-top:6px !important;
}

.apr-agent-hero .apr-choice__item{ position:relative !important; cursor:pointer !important; width:100% !important; }
.apr-agent-hero .apr-choice__item input{ position:absolute !important; inset:0 !important; opacity:0 !important; cursor:pointer !important; }
.apr-agent-hero .apr-choice__item span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:46px !important;
  background:var(--apr-white) !important;
  color:var(--apr-ink) !important;
  border-radius:2px !important;
  font-weight:500 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.12) !important;
  user-select:none !important;
  border:2px solid transparent !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease !important;
}

.apr-agent-hero .apr-choice__item:hover span{
  background:var(--apr-dark) !important;
  border-color:var(--apr-white) !important;
  color:var(--apr-white) !important;
}

.apr-agent-hero .apr-choice__item input:checked + span{
  background:var(--apr-blue-selected) !important;
  border-color:var(--apr-blue-selected) !important;
  color:var(--apr-white) !important;
}

/* Status + progress */
.apr-agent-hero .apr-status{
  margin-top:16px !important;
  font-size:16px !important;
  font-weight:700 !important;
  min-height:22px !important;
  color:var(--apr-white) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}

.apr-agent-hero .apr-step-indicator{
  margin-top:16px !important;
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--apr-white) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}

.apr-agent-hero .apr-progress{
  margin-top:10px !important;
  width:100% !important;
  height:8px !important;
  background:rgba(255,255,255,.25) !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.apr-agent-hero .apr-progress__bar{
  height:100% !important;
  width:0%;
  background:var(--apr-blue) !important;
  border-radius:999px !important;
  transition:width .25s ease !important;
}

/* Success state */
.apr-agent-hero .apr-success{ margin-top:18px !important; }
.apr-agent-hero .apr-success-box{
  background:rgba(17,17,23,.85) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:8px !important;
  padding:22px 18px !important;
  box-shadow:0 12px 35px rgba(0,0,0,.25) !important;
}

.apr-agent-hero .apr-success-title{ font-size:30px !important; font-weight:900 !important; margin:0 0 10px !important; }
.apr-agent-hero .apr-success-sub{ font-size:24px !important; font-weight:800 !important; margin:0 0 12px !important; }
.apr-agent-hero .apr-success-body{ font-size:16px !important; font-weight:700 !important; opacity:.95 !important; }

/* Completion: hide form UI, show success */
.apr-agent-hero .apr-agent-form.is-complete .apr-step,
.apr-agent-hero .apr-agent-form.is-complete .apr-step-indicator,
.apr-agent-hero .apr-agent-form.is-complete .apr-progress,
.apr-agent-hero .apr-agent-form.is-complete .apr-status{
  display:none !important;
}

/* Mobile */
@media (max-width:680px){
  .apr-agent-hero .apr-btnrow,
  .apr-agent-hero .apr-choice{ grid-template-columns:1fr !important; }
}

/* ---------- Dashboard (keep matching the form aesthetic) ---------- */
.apr-agent-hero .apr-ap-dashboard{ color:var(--apr-ink); }
.apr-agent-hero .apr-ap-dashboard h2,
.apr-agent-hero .apr-ap-dashboard h3{ color:var(--apr-ink); }

.apr-agent-hero .apr-dashboard-card{
  background:var(--apr-white);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 5px !important;
  padding:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  margin-top:14px;
}

.apr-agent-hero .apr-dashboard-title{ font-size:18px; font-weight:700; margin:0 0 10px; }

.apr-agent-hero .apr-dashboard-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }

.apr-agent-hero .apr-dashboard-grid--account{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .apr-agent-hero .apr-dashboard-grid--account{ grid-template-columns:1fr; } }

.apr-agent-hero .apr-dashboard-field label{
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
  color:rgba(15,23,42,.7);
}

.apr-agent-hero .apr-dashboard-field input,
.apr-agent-hero .apr-dashboard-field select,
.apr-agent-hero .apr-dashboard-field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  padding:10px 12px;
  outline:none;
}

.apr-agent-hero .apr-dashboard-grid--account .apr-dashboard-field input[disabled]{
  background:rgba(15,23,42,.03);
}

.apr-agent-hero .apr-ap-actions-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:16px;
}

@media (max-width:680px){ .apr-agent-hero .apr-ap-actions-row{ grid-template-columns:1fr; } }

.apr-agent-hero .apr-leads-table{ width:100%; border-collapse:collapse; font-size:14px; }
.apr-agent-hero .apr-leads-table th,
.apr-agent-hero .apr-leads-table td{ border-top:1px solid rgba(15,23,42,.08); padding:10px 8px; text-align:left; vertical-align:top; }
.apr-agent-hero .apr-leads-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:rgba(15,23,42,.65); }


/* ================================
   IMPORTANT
   Do NOT apply generic submit spacing to the signup form.
   It caused the Step 5 Submit button to drop lower than Back.
   Any Save-button spacing must be scoped to the dashboard only.
   ================================ */

/* Dashboard-only: if a theme injects tight spacing, keep a little air above the actions block */
.apr-agent-hero .apr-ap-dashboard .apr-ap-actions{ margin-top:10px !important; }

/* Form select robustness (Package dropdown)
   Some themes apply custom select styles / pointer-events that can break native dropdowns.
   Force native appearance + ensure it sits above any overlays.
*/
.apr-agent-hero select.apr-input{
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}


/* ================================
   Corey custom overrides (consolidated)
   - 5px corner radius across UI elements with corners
   - Add spacing between account fields and Save button
   - Keep Save directly above the two action buttons
   ================================ */

.apr-agent-hero .apr-btn,
.apr-agent-hero a.apr-btn,
.apr-agent-hero button.apr-btn,
.apr-agent-hero input,
.apr-agent-hero select,
.apr-agent-hero textarea,
.apr-agent-hero .apr-input,
.apr-agent-hero .apr-select,
.apr-agent-hero .apr-textarea,
.apr-agent-hero .apr-card,
.apr-agent-hero .apr-panel,
.apr-agent-hero .apr-box,
.apr-agent-hero .apr-dashboard,
.apr-agent-hero .apr-dashboard-field input{
  border-radius:5px !important;
}

/* Space ABOVE the Save + action block (fix Save touching fields) */
.apr-agent-hero .apr-ap-actions{
  margin-top:10px !important;
}

/* Layout: Save then the two action buttons underneath */
.apr-agent-hero .apr-ap-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

.apr-agent-hero .apr-ap-save{
  order:1 !important;
  width:100% !important;
  margin:0 !important;
}

.apr-agent-hero .apr-ap-actions-row{
  order:2 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  margin:0 !important;
}

/* Ensure the dark action buttons also keep 5px radius */
.apr-agent-hero .apr-ap-actions-row .apr-btn{
  border-radius: 5px !important;
}




/* Ensure inputs & buttons also consistent */
.apr-agent-hero input,
.apr-agent-hero select,
.apr-agent-hero textarea,
.apr-agent-hero button {
    border-radius: 5px !important;
}


/* =========================================================
   APR Agent Portal – Consolidated Overrides (v2.6.9)
   - Keep visuals consistent regardless of theme CSS
   ========================================================= */
.apr-agent-hero .apr-dashboard-card{
  border-radius:5px !important;
  overflow:hidden; /* make rounded corners visible */
}

.apr-agent-hero .apr-dashboard-field input,
.apr-agent-hero .apr-dashboard-field select,
.apr-agent-hero .apr-dashboard-field textarea{
  border-radius:5px !important;
}

.apr-agent-hero .apr-ap-actions{
  margin-top:10px; /* space between fields and Save */
}

.apr-agent-hero .apr-ap-actions .apr-ap-save{
  margin:0 0 6px 0 !important; /* Save sits right above the 2 buttons */
  font-weight:400 !important;
}

.apr-agent-hero .apr-ap-actions-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
}

.apr-agent-hero .apr-btn{
  border-radius:5px !important;
  font-weight:400 !important;
}