@charset "utf-8";
/* CSS Document */
/* SCOPE EVERYTHING to Offer Lane only */
.offer-lane{
  /* move :root vars here */
  --bg1:rgba(255, 255, 255, 0.64)
  --bg2:#e8eaee;
  --card: rgba(0,0,0,.04);
  --text:#1a1f2e;
  --muted:#4a5568;
  --border: rgba(0,0,0,.10);
  --steel:#6b7a8d;
  --red:#ef4444;
  --red2:#e53e3e;
  --blue:#0170aa;
  --blue2:#0072b8;
  --radius:18px;
  --shadow:0 8px 28px rgba(0,0,0,.09);
  --baseFont:18px;
  --labelFont:14.5px;
  --inputFont:16.5px;
  --h1:26px;
 
  /* move body styling here */
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--baseFont);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 14% -10%, rgba(239,68,68,.06), transparent 62%),
    radial-gradient(860px 520px at 88% 0%, rgba(154,164,178,.08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  padding-bottom: 92px;
}
 
    /* was *{box-sizing:border-box;} */
.offer-lane *, .offer-lane *::before, .offer-lane *::after{
  box-sizing: border-box;
}
   .offer-lane .ol-wrap{ max-width:1100px; margin: 0px auto; padding: 40px 18px 48px; }
 
    /* HERO */
    .offer-lane .hero{
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(0,0,0,.05));
      box-shadow: var(--shadow);
      padding: 22px;
      position:relative;
      overflow:hidden;
    }
    .offer-lane .hero-inner{
      position:relative;
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .offer-lane .brand{ display:flex; align-items:center; gap:14px; }
    .offer-lane .badge{
      width:50px; height:50px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(239,68,68,.85), rgba(154,164,178,.65));
      box-shadow: 0 8px 24px rgba(239,68,68,.15);
      border:1px solid rgba(0,0,0,.10);
    }
    .offer-lane h1{ margin:0 0 4px; font-size: var(--h1); font-weight: 950; letter-spacing:.3px; color: #1a1f2e; }
    .offer-lane .sub{ margin:0; color:var(--muted); font-size: 15.5px; }
 
    .offer-lane .lane-pill{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 14px;
      border:1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.70);
      font-size: 14.5px;
    }
    .offer-lane .lane-pill .dot{
      width:10px; height:10px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 4px rgba(0,114,184,.10);
    }
 
    /* FORM */
    .offer-lane form{ margin-top: 16px; }
 
    .offer-lane fieldset{
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.85);
      box-shadow: var(--shadow);
      padding: 18px;
      margin: 16px 0;
      position:relative;
      overflow:hidden;
    }
    .offer-lane legend{
      padding: 8px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      background: rgba(240,242,245,.92);
      font-weight: 950;
      font-size: 14px;
      letter-spacing:.8px;
      text-transform: uppercase;
      color: rgba(26,31,46,.90);
    }
 
    .offer-lane .ol-grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      margin-top: 14px;
    }
   .offer-lane .ol-col-12{ grid-column: span 12; }
   .offer-lane .ol-col-6 { grid-column: span 6; }
   .offer-lane .ol-col-4 { grid-column: span 4; }
   .offer-lane .ol-col-3 { grid-column: span 3; }
 
   .offer-lane label{
      display:block;
      font-size: var(--labelFont);
      color: rgba(26,31,46,.88);
      margin: 0 0 7px;
      font-weight: 900;
      letter-spacing:.28px;
    }
   .offer-lane .req::after{ content:" *"; color: var(--red2); font-weight: 950; }
 
   .offer-lane input[type="text"],
.offer-lane input[type="email"],
.offer-lane input[type="tel"],
.offer-lane input[type="number"],
.offer-lane select,
.offer-lane textarea{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.95);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: var(--inputFont);
}
 
.offer-lane input::placeholder,
.offer-lane textarea::placeholder{
  color: rgba(74,85,104,.55);
}
 
.offer-lane input:focus,
.offer-lane select:focus,
.offer-lane textarea:focus{
  border-color: rgba(107,122,141,.70);
  box-shadow: 0 0 0 4px rgba(107,122,141,.10);
  background: #ffffff;
}
 
 
    .offer-lane textarea{ min-height: 110px; resize: vertical; }
 
   .offer-lane .hint{
      margin-top: 7px;
      color: rgba(74,85,104,.85);
      font-size: 13.5px;
      line-height: 1.3;
    }
 
   .offer-lane .divider{ height: 1px; background: rgba(0,0,0,.08); margin: 10px 0 14px; }
 
   .offer-lane .ol-row{ display:flex; gap: 12px; flex-wrap: wrap; }
   .offer-lane .chip{
      display:flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border:1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.80);
      color: rgba(26,31,46,.90);
      user-select:none;
      font-size: 15px;
      font-weight: 700;
    }
   .offer-lane .chip input{ margin:0; width: 17px; height: 17px; accent-color: var(--blue); }
 
   .offer-lane button{
      border:0;
      padding: 14px 18px;
      border-radius: 14px;
      cursor:pointer;
      font-weight: 950;
      letter-spacing:.2px;
      font-size: 16.5px;
      transition: transform .06s ease, filter .15s ease;
      white-space: nowrap;
    }
   .offer-lane button:active{ transform: translateY(1px); }
 
   .offer-lane .primary{
      background: linear-gradient(135deg, rgba(1,112,170,.92), rgba(107,122,141,.80));
      color:#ffffff;
      box-shadow: 0 8px 24px rgba(0,114,184,.18);
    }
   .offer-lane .primary:hover{ filter: brightness(1.06); }
 
   .offer-lane .secondary{
      background: rgba(255,255,255,.80);
      color: var(--text);
      border:1px solid rgba(0,0,0,.14);
    }
 
    /* VIN decode status */
   .offer-lane .vin-status{
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border:1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.75);
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-size: 14.5px;
      color: rgba(26,31,46,.88);
    }
   .offer-lane .vin-status .pill{
      flex:0 0 auto;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(0,0,0,.12);
      background: rgba(240,242,245,.90);
      font-weight: 950;
      font-size: 12.5px;
      letter-spacing:.3px;
    }
   .offer-lane .vin-status.ok .pill{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10); }
   .offer-lane .vin-status.err .pill{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
   .offer-lane .vin-status.loading .pill{ border-color: rgba(154,164,178,.45); background: rgba(154,164,178,.10); }
 
  .offer-lane .vin-summary{ margin:0; line-height:1.25; }
   .offer-lane .vin-summary strong{ font-weight: 950; }
 
    .offer-lane .actions{
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.85);
      box-shadow: var(--shadow);
      padding: 18px;
      display:flex;
      gap:14px;
      align-items:flex-start;
      justify-content: space-between;
      margin-top: 16px;
      flex-wrap:wrap;
    }
    .offer-lane .small{
      font-size: 13.5px;
      color: rgba(74,85,104,.90);
      line-height: 1.35;
      max-width: 820px;
    }
 
    /* Sticky bar */
   .offer-lane .sticky-bar{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 9999;
      padding: 12px 14px;
      background: rgba(240,242,245,.92);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(0,0,0,.10);
      display:none;
    }
    .offer-lane .sticky-inner{
      max-width: 1100px;
      margin: 0 auto;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: space-between;
    }
   .offer-lane .sticky-note{
      font-size: 12.5px;
      color: rgba(74,85,104,.90);
      line-height: 1.25;
    }
   .offer-lane .sticky-actions{ display:flex; gap:10px; align-items:center; }
    
    /* --- Offer Lane: keep sticky bar from overflowing on small screens --- */
.offer-lane .sticky-bar{
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}
 
.offer-lane .sticky-inner{
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}
 
/* extra-tight for 600px and below */
@media (max-width: 600px){
  .offer-lane .sticky-bar{ padding: 10px 10px; }
  .offer-lane .sticky-inner{ gap: 8px; }
  .offer-lane .sticky-actions{ gap: 8px; }
}
 
    @media (max-width: 900px){
  .offer-lane .ol-col-6,
  .offer-lane .ol-col-4,
  .offer-lane .ol-col-3{ grid-column: span 12; }
 
  .offer-lane .sticky-bar{ display:block; }
}
 
    /* --- VIN + YMM SAME LINE --- */
   .offer-lane .vin-line{
      display:grid;
      grid-template-columns: 6fr 2fr 2fr 2fr;
      gap: 14px;
      align-items:end;
      margin-top: 14px;
    }
   .offer-lane .vin-line label{ margin-bottom:7px; }
   .offer-lane .vin-actions{
      display:flex;
      gap:10px;
      align-items:center;
      margin-top:10px;
      flex-wrap:wrap;
    }
   .offer-lane .vin-actions span{ font-size:13.5px; color: rgba(74,85,104,.85); }
 
    @media (max-width: 900px){
     .offer-lane .vin-line{
        grid-template-columns: 1fr;
      }
    }
    /* =========================================================
   Offer Lane: stop template plugins from hiding SELECT fields
   (without breaking layout)
   ========================================================= */
 
/* dropdowns and shadows shouldn't be clipped */
.offer-lane fieldset,
.offer-lane .hero{
  overflow: visible;
}
 
/* if template/nice-select replaces <select>, keep the real select visible */
.offer-lane select{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
 
/* kill common "custom select" replacements only inside Offer Lane */
.offer-lane .nice-select,
.offer-lane .select2,
.offer-lane .select2-container,
.offer-lane .bootstrap-select{
  display: none !important;
}
 
/* keep checkbox inside chips from becoming huge */
.offer-lane .chip input[type="checkbox"]{
  display: inline-block !important;
  width: 17px;
  height: 17px;
  margin: 0;
}
.offer-lane button{
  display: inline-block;
}
/* =========================================================
   Offer Lane: force fieldsets/legends back into normal flow
   (prevents section overlap/stacking caused by template CSS)
   ========================================================= */
 
.offer-lane fieldset{
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
 
  /* force spacing between sections */
  margin: 22px 0 !important;
  padding: 18px !important;
 
  /* keep it in the normal document flow */
  position: relative !important;
}
 
.offer-lane fieldset + fieldset{
  margin-top: 22px !important;
}
 
/* templates sometimes absolutely position legend/labels */
.offer-lane legend{
  position: static !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
 
  margin: 0 0 14px 0 !important;
}
 
/* keep labels from being positioned/overlaid by template rules */
.offer-lane label{
  position: static !important;
  float: none !important;
  display: block !important;
  margin: 0 0 7px 0 !important;
}
 
/* if any plugin is floating elements inside, contain it */
.offer-lane .ol-grid,
.offer-lane .vin-line,
.offer-lane .actions{
  clear: both !important;
}
/* ================================
   Offer Lane fixes: select dropdown + checkboxes
   ================================ */
 
/* 1) Make the SELECT control readable */
.offer-lane select{
  color: var(--text) !important;
  background-color: rgba(255,255,255,.95) !important;
}
 
/* 2) Make the dropdown list (options) readable when opened
   NOTE: options are OS/browser rendered; this is the best cross-browser fix */
.offer-lane select option,
.offer-lane select optgroup{
  color: #111 !important;
  background: #fff !important;
}
 
/* Optional: if you prefer a dark dropdown list (works in some browsers) */
.offer-lane select.ol-dark option,
.offer-lane select.ol-dark optgroup{
  color: #f4f7ff !important;
  background: #1b2430 !important;
}