.site-header{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      padding: 12px 0;
      z-index: 9999;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
    }

    .site-header.hide{
      transform: translateY(-100%);
    }

    body{
      padding-top: 70px; /* prevent content jump */
    }

    body{
      font-family:'Raleway',sans-serif;
      background:#f7f9fc;
      color:#444;
    }
    :root{
      --primary:#1977cc;
      --gold:#ffbf3b;
    }

    .logo {
      max-height: 70px;
    }

    .hero{
      max-width: 800px;
      padding: 40px 10px 20px;
    }
    .hero h1{
      font-weight:700;
      text-align:center;
      color: #fff;
    }

    .form-card{
      max-width: 800px;
      margin: auto;
      background: rgba(255, 255, 255, 0.5); /* transparency /
      backdrop-filter: blur(8px); / glass effect */
      -webkit-backdrop-filter: blur(8px);
      padding: 40px;
      border-radius: 14px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    }

    .btn-main{
      background:var(--primary);
      color:#fff;
      border:none;
      padding:12px;
      font-weight:600;
    }
    .btn-main:hover{
      background:#155fa3;
      color:#fff;
    }

    .option-btn{
      width:100%;
      border:1px solid #e5e5e5;
      padding:14px;
      border-radius:10px;
      margin-bottom:12px;
      background:#fff;
    }
    .option-btn:hover{
      border-color:var(--primary);
      background:#f1f7ff;
    }

    .option-radio input{
    display:none;
    }

    .option-radio input:checked + .option-btn{
    border-color:#1977cc;
    background:#e9f2ff;
    }


    .progress{
      height:8px;
      border-radius:10px;
      margin-bottom:30px;
    }
    .progress-bar{
      background:var(--gold);
    }

    .step{display:none;}
    .step.active{display:block;}

    .loader{
      display:none;
      color:var(--primary);
      font-size:14px;
      text-align:center;
    }

    .tcpa{
      font-size:14px;
      color:#fff;
    }

    .error{
      font-size:13px;
      color:#dc3545;
      display:none;
    }
    .error-box{
      display:none;
      padding:12px 14px;
      border-radius:8px;
      font-size:14px;
      font-weight:500;
      margin-top:10px;

      color:#842029;
      background:#f8d7da;
      border:1px solid #f5c2c7;

      box-shadow:0 4px 12px rgba(0,0,0,0.08);
    }

    .error-box.show{
      display:block;
    }

    .error-box::before{
      content:"⚠ ";
      font-weight:600;
    }

    .vehicle-options{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }

    .vehicle-card{
      border:1px solid #e5e5e5;
      border-radius:12px;
      padding:14px;
      text-align:center;
      cursor:pointer;
      background:#fff;
      transition:all .2s;
      font-weight:500;
    }

    .vehicle-card:hover{
      border-color:#1977cc;
      background:#f4f9ff;
    }

    .vehicle-card.active{
      border-color:#1977cc;
      background:#e9f2ff;
    }

    @media(max-width:576px){
      .vehicle-options{
        grid-template-columns:1fr;
      }
    }
    /* ================================
    BACKGROUND IMAGE + OVERLAY
    ================================ */

    body{
    background-image: url('https://autoinsuranceplans.com/wp-content/themes/autoinsuranceplans/assets/img/hero-bg5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    }

    /* Dark overlay for readability */
    body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 30, 40, 0.65); /* adjust opacity here */
    z-index: -1;
    }

    /* Make content appear above overlay */
    .container{
    position: relative;
    z-index: 2;
    }

    .back{
      font-weight: 500;
      text-decoration: none;
      color: #fff;
    }
    .back:hover{
      text-decoration: underline;
    }
    .company-list{
      max-height:320px;
      overflow-y:auto;
      padding-right:6px;
    }

    .option-radio input{
      display:none;
    }

    .option-radio input:checked + .option-btn{
      border-color:#1977cc;
      background:#e9f2ff;
    }

    /* =========================
    INSURANCE GRID IMPROVEMENT
    ========================= */

    .insurance-scroll{
      max-height: 500px;
      overflow-y: auto;
      padding-right: 5px;
    }

    /* Scrollbar styling */
    .insurance-scroll::-webkit-scrollbar{
      width: 6px;
    }
    .insurance-scroll::-webkit-scrollbar-thumb{
      background: rgba(0,0,0,0.15);
      border-radius: 10px;
    }

    /* Insurance cards same as vehicle */
    .insurance-card{
      border:1px solid #e5e5e5;
      border-radius:12px;
      padding:12px;
      text-align:center;
      cursor:pointer;
      background:#fff;
      transition:all .2s;
      font-size:14px;
      font-weight:500;
    }

    .insurance-card:hover{
      border-color:var(--primary);
      background:#f4f9ff;
    }

    .insurance-card.active{
      border-color:var(--primary);
      background:#e9f2ff;
    }

    /* Better spacing on mobile */
    @media(max-width:768px){
      .insurance-scroll{
        max-height:250px;
      }
    }

    .option-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
      margin-top:10px;
    }

    .option-card{
      position:relative;
      border:1px solid #e5e5e5;
      border-radius:12px;
      padding:18px;
      text-align:center;
      font-weight:600;
      cursor:pointer;
      background:#fff;
      transition:all .2s;
    }

    .option-card:hover{
      border-color:#1977cc;
      background:#f4f9ff;
    }

    /* Hide default radio */
    .option-card input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    /* Selected state */
    .option-card input:checked + span{
      color:#1977cc;
    }

    .option-card input:checked ~ span,
    .option-card input:checked + span{
      font-weight:700;
    }

    .option-card input:checked{
    }

    .option-card:has(input:checked){
      border-color:#1977cc;
      background:#e9f2ff;
    }
    @media(max-width:576px){
      .option-grid{
        grid-template-columns:1fr;
      }
    }
    .option-radio input{
      display:none;
    }

    .option-card{
      display:block;
      padding:16px;
      border-radius:12px;
      background:#fff;
      border:1px solid #e5e5e5;
      text-align:center;
      cursor:pointer;
      transition:.2s;
      font-weight:500;
    }

    .option-card:hover{
      border-color:#1977cc;
      background:#f4f9ff;
    }

    .option-radio input:checked + .option-card{
      border-color:#1977cc;
      background:#e9f2ff;
      box-shadow:0 4px 14px rgba(25,119,204,.15);
    }

    .step h5 {
      font-size: 24px;
      color: #ffbf3b;
      text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    }

    .highlight-focus{
      animation: highlightFlash 1s ease;
    }

    @keyframes highlightFlash{
      0%{ background:#fff7e6; }
      100%{ background:transparent; }
    }

    .policy-highlight{
      animation: pulseHighlight 0.8s ease;
    }

    @keyframes pulseHighlight{
      0%{
        box-shadow: 0 0 0 rgba(25,119,204,0);
      }
      50%{
        box-shadow: 0 0 15px rgba(25,119,204,0.4);
      }
      100%{
        box-shadow: 0 0 0 rgba(25,119,204,0);
      }
    }