/* ===========================
   MERGED: freequote.css + life.css
   =========================== */

/* Base container & form */
.auth-container {
   display:flex;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   background:#fff;
   padding:25px 30px;
   border-radius:0;
   box-shadow:0 0 15px 5px #545454;
   width:90%;
   margin:80px auto;
   font-family:'Bellota Text', sans-serif;
}
.auth-container h2 {
   color:#545454;
   margin-bottom:20px;
}
#free-quote-form h2 {
   text-align: center;
}
#free-quote-form {
   width:100%;
   max-width:720px;
   margin:2em auto;
   padding:2em;
   background:#fefefe;
   font-family:inherit;
}
#free-quote-form form {
   display:flex;
   flex-direction:column; 
   gap:1em;
}
form, 
label, 
input, 
select, 
textarea, 
fieldset, 
button {
   box-sizing:border-box;
   margin:0;
   padding:0;
   font:inherit; 
}
                                                        

/* Labels + inputs */
#free-quote-form label, 
#free-quote-form fieldset {
   display:flex;
   flex-direction:column;
   font-size:1em;
}
#free-quote-form input[type="text"],
#free-quote-form input[type="email"],
#free-quote-form input[type="tel"],
#free-quote-form input[type="number"],
#free-quote-form input[type="date"],
#free-quote-form select{
   padding:.6em;
   border:1px solid #ccc;
   border-radius:0;
   margin-top:.4em;
   font-size:1em;
}

/* Step cards */
.step-card {
   background:#fff;
   padding:18px;
   display:none;
}
.step-card.active {
   display:block;
}

.step-num {
   color:#0066cc;
}
.req-hint {
   color:#c87800;
   font-weight:600;
   margin-bottom:.6rem;
}

/* Rows */
.row {
   display:flex;
   gap:12px;
}
.row .grow {
   flex:1;
}
.row-zip-age .age-box {
   width:180px;
   min-width:160px; 
}

/* Buttons */
.cta {
   width:100%;
   padding:14px;
   background:#06c;
   color:#fff;
   border:none; 
   border-radius:0;
   font-size:1.1rem; 
   cursor:pointer;
   transition:background .15s ease-in-out;
}
.cta:hover {
   background:#004fa3;
}

.link.like-back {
   background:none;
   border:none;
   color:#0066cc;
   cursor:pointer;
   padding:0;
   font-size:.95rem;
}

.step-nav {
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:12px;
   margin-top:10px;
}
/* ensure nav buttons sit side-by-side (no full-width creep) */
.step-nav .cta {
   width:auto;
   min-width:160px;
}

/* TCPA */
.tcpa {
   font-size:.9rem;
   color:#444;
   line-height:1.35;
   margin-top:.5rem;
}

/* Select look */
select {
  appearance:none;
   -webkit-appearance:none;
   -moz-appearance:none;
   background:#fff;
   color:#333;
   border:1px solid #ccc;
   border-radius:0;
   padding:10px 80px 10px 12px;
   font-size:1em;
   cursor:pointer;
   background-image:url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='80' height='20'>\
      <rect width='65' height='20' fill='transparent'/>\
      <polygon points='68,6 78,6 73,14' fill='%23333'/>\
      </svg>");
   background-repeat:no-repeat;
   background-position:right center;
   background-size:80px 20px;
}
select:focus {
   outline:none;
   border-color:#3399ff;
   box-shadow:0 0 0 2px rgba(51,153,255,.2);
}

/* Multi-select chips */
.cover-field {
   position:relative;
}
.multi-select {
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:.5rem;
   border:1px solid #ccc;
   border-radius:0;
   padding:.6rem .8rem;
   background:#fff;
   cursor:pointer;
   user-select:none;
}
.ms-value {
   flex:1;
   color:#333;
   text-align:left;
}
.ms-caret {
   pointer-events:none;
}
#cover-menu.ms-menu {
   position:absolute;
   top:calc(100% + .35rem);
   left:0; right:0;
   background:#fff;
   border:1px solid #ccc;
   border-radius:0;
   box-shadow:0 .6rem 1.2rem rgba(0,0,0,.08);
   display:none;
   z-index:1000;
   max-height:260px;
   overflow:auto;
   text-align:left;
   padding:.4rem;
}
#cover-menu .ms-option > input[type="checkbox"],
.ms-option > input[type="checkbox"],
#cover-menu input[type="checkbox"] {
   position:absolute !important;
   left:-9999px !important;
   width:0 !important;
   height:0 !important;
   margin:0 !important;
   padding:0 !important;
   opacity:0 !important;
   pointer-events:none !important;
   appearance:none !important; 
   -webkit-appearance:none !important; 
   -moz-appearance:none !important;
   display:none !important;
}
.ms-option{
   position:relative;
   display:flex;
   align-items:center;
   justify-content:flex-start; 
   gap:.6rem;
   padding:.55rem .75rem;
   margin:.35rem .25rem;
   border:1.5px solid #ccc;
   border-radius:0;
   background:#fff;
   cursor:pointer;
   user-select:none;
   transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ms-option:hover { 
   border-color:#8fb8ff; 
   background:#f5f9ff; 
}
.ms-option::before {
   content:""; 
   width:18px; 
   height:18px; 
   border:2px solid #999; 
   border-radius:0; 
   background:#fff; 
   flex:0 0 18px; 
   box-sizing:border-box;
   display: none !important;
}
.ms-option.selected { 
   border-color:#3399ff; 
   background:#eaf4ff; 
   box-shadow:0 0 0 2px rgba(51,153,255,.12); 
}
.ms-option.selected::before { 
   border-color:#3399ff; 
   background:#3399ff; 
   box-shadow:inset 0 0 0 3px #fff; 
}
.multi-select.has-error { 
   box-shadow:0 0 0 2px rgba(176,0,32,.12); 
   border-color:#b00020; 
}
/* === Floating label fields === */
.fl-field { 
   position: relative; 
   margin-bottom:14px;
}

.fl-field input,
.fl-field select,
.fl-field .multi-select {
   padding: 12px 12px;           /* top padding leaves room for label */
   border-radius: 0;
   border: 1px solid #ccc;
   width: 100%;
   background: #fff;
   box-sizing:border-box;
   line-height:1.2;
}

/* label sits on top of the control */
.fl-field > label {
   position: absolute;
   left: 12px;
   top: 50%;
   font-size: 1rem;
   color: #888;
   background: #fff;
   padding: 0 .25rem;
   line-height: 1;
   pointer-events: none;
   transform-origin: left top;
   transition: transform .16s ease, color .16s ease, top .15s ease;
   transform:translateY(-54%);
   z-index: 1;
}

/* float when focused or has value */
.fl-field.is-focused > label,
.fl-field.has-value > label,
.fl-field.is-open > label {
  top: 0;
  transform:translateY(-58%) scale(.88);
  color: #111;
}

/* keep border highlight consistent with your theme */
.fl-field.is-focused input,
.fl-field.is-focused select,
.fl-field.is-focused .multi-select {
  outline: none;
  border-color: #3399ff;
  box-shadow: 0 0 0 2px rgba(51,153,255,.12);
}

.fl-field input[type="number"] {
   -moz-appearance:textfield;
}
.fl-field input[type="number"]::-webkit-outer-spin-button,
.fl-field input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance:none;margin:0;
}
/* Inline error styles for floating fields (match JS .is-invalid) */
.fl-field.is-invalid input,
.fl-field.is-invalid select,
.fl-field.is-invalid .multi-select {
  border-color: #b00020 !important;
  box-shadow: 0 0 0 2px rgba(176,0,32,.12) !important;
}

.fl-field.is-invalid > label,
.fl-field.is-invalid .ms-value {
  color: #b00020 !important;
}

/* also catch direct .is-invalid on controls (extra safety) */
input.is-invalid,
select.is-invalid {
  border-color: #b00020 !important;
  box-shadow: 0 0 0 2px rgba(176,0,32,.12) !important;
}
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
}
.modal-card {
  background: #fff;
  padding: 20px;
  border-radius: 0;
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
  text-align: center;
  max-width: 350px;
  width: 90%;
}
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* (keeps your existing chip error look) */
/* Responsive */
@media (max-width:640px) {
   .row { 
      flex-direction:column; 
   }
   .row-zip-age .age-box { 
      width:100%; 
      min-width:0; 
   }
   .step-nav { 
      gap:10px; 
   }
}