/* =====================================================
       CLEANED, REORDERED, UNIFIED CSS
       - Consolidates radio + checkbox styling
       - Ensures .selected always overrides :hover
       - Improved lift animation smoothness
       - Keeps all original markup intact (no HTML changes)
       ===================================================== */

    /* ------------------------------------------
       GLOBAL
    ------------------------------------------- */
    :root{
      --accent: #1d3557;
      --accent-2: #fff629;
      --card-border: #e6e9f2;
      --card-bg: #ffffff;
      --card-shadow: rgba(0,0,0,0.08);
      --selected-bg: rgba(255,246,41,0.08);
      --transition-fast: 160ms;
      --transition-medium: 240ms;
      --transition-ease: cubic-bezier(.2,.9,.3,1);
    }

    .step img {
       width:70px;
       margin:0 auto;
       padding:10px;
       display:block;
    }

    #stepsForm h4 {
      font-weight: 700;
      font-size: 26px;
      text-align: center;
      margin-bottom: 25px;
      color: #111;
    }

    /* ------------------------------------------
       CARD CONTAINER
    ------------------------------------------- */
    .widget-card {
      font-family: 'Inter', 'Roboto', sans-serif;
      background: var(--card-bg);
      padding: 20px 30px;
      border-radius: 20px;
      box-shadow: 0px 8px 20px rgba(0,0,0,0.08);
      max-width: 1000px;
      margin: 0 auto;
    }

    /* ------------------------------------------
       PROGRESS BAR
    ------------------------------------------- */
    .progress {
      background: #e8edf7 !important;
      border-radius: 30px;
      overflow: hidden;
    }

    .progress-bar {
      background: var(--accent) !important;
      transition: width .3s ease;
    }

    /* ------------------------------------------
       OPTION GRID
       - a single .option-card style used for both radios & checkboxes
    ------------------------------------------- */
    .option-grid, .option-grid-multiple {
      display: flex;
      flex-wrap: wrap;
      margin-top: 25px;
      align-items: stretch;
    }

    .option-card {
      flex: 1 1 calc(33.333% - 12px);
      min-width: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      background: var(--card-bg);
      border: 2px solid var(--card-border);
      border-radius: 14px;
      padding: 28px 16px;
      text-align: center;
      cursor: pointer;
      transition: transform var(--transition-medium) var(--transition-ease),
                  box-shadow var(--transition-medium) var(--transition-ease),
                  background-color var(--transition-medium) var(--transition-ease),
                  border-color var(--transition-fast) var(--transition-ease);
      box-shadow: 0px 2px 6px var(--card-shadow);
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      position: relative;
      will-change: transform, box-shadow;
      -webkit-font-smoothing:antialiased;
    }

    /* icons / text */
    .option-card i {
      font-size: 50px;
      color: #172624;
      margin-bottom: 12px;
      display: block;
    }

    .option-card img {
      width: 60px;
      height: auto;
      margin-bottom: 6px;
    }

    .option-card span {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      display:block;
    }

    /* hover for unselected cards *
       keep hover visual but do NOT override selected */
    .option-card:not(.selected):hover {
      transform: translateY(-6px);
      border-color: var(--accent-2);
      box-shadow: 0px 8px 20px rgba(0,0,0,0.09);
    }

    /* selected state (applies to both radio and checkbox cards)
       placed after hover rules so it overrides them naturally */
    .option-card.selected {
      border-color: var(--accent-2);
      background: var(--selected-bg);
      box-shadow: 0px 10px 26px rgba(0,0,0,0.10);
      transform: translateY(-8px);
    }

    /* subtle deeper lift when hovering a selected card */
    .option-card.selected:hover {
      transform: translateY(-10px);
      box-shadow: 0px 12px 30px rgba(0,0,0,0.11);
    }

    /* keyboard focus accessibility */
    .option-card:focus-within {
      outline: 3px solid rgba(255,246,41,0.18);
      outline-offset: 4px;
    }

    /* ensure radio + checkbox inputs remain present for accessibility but visually hidden */
    .option-card input[type="radio"],
    .option-card input[type="checkbox"]{
      position: absolute;
      left: 8px;
      top: 8px;
      width: 1px;
      height: 1px;
      clip: rect(1px,1px,1px,1px);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    /* list-modern kept for other steps (unchanged besides ordering) */
    .list-modern label {
      display: block;
      background: #fff;
      border: 2px solid var(--card-border);
      padding: 18px 16px;
      border-radius: 14px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: .25s;
      font-weight: 500;
    }

    .list-modern label:hover {
      border-color: var(--accent);
    }

    .list-modern input {
      margin-right: 12px;
    }

    /* small helpers & error states */
    .error-message {
      margin-top:20px;
      color:#dc3545;
      display: none;
    }

    form input.form-control {
      border-radius: 12px;
      padding: 14px 16px;
      border: 2px solid #d7dcef;
    }

    form input.form-control:focus {
      border-color: var(--accent);
      box-shadow: none;
    }

    .form-footer {
      justify-content: center !important;
      gap: 12px;
      border-top: none !important;
    }

    #nextBtn, #prevBtn {
      font-size: 16px;
      padding: 12px 30px;
      border-radius: 12px;
    }

    #nextBtn {
      background: var(--accent);
      color: var(--accent-2);
      border: none;
    }

    #prevBtn {
      background: #c8d1e5;
      border: none;
      color: #333;
    }

    /* Accessibility / small screen tweaks */
    @media (max-width: 991px) {
      .option-card { flex: 1 1 calc(50% - 12px); min-width: 140px; }
    }
    @media (max-width: 575px) {
      .option-card { flex: 1 1 100%; }
    }

    /* small utility to mark card errors (validation) */
    .option-card.card-error {
      animation: cardShake 340ms ease;
      box-shadow: 0px 2px 6px rgba(220,53,69,0.12);
      border-color: #dc3545;
    }

    @keyframes cardShake {
      0% { transform: translateX(0) }
      25% { transform: translateX(-6px) }
      50% { transform: translateX(6px) }
      75% { transform: translateX(-4px) }
      100% { transform: translateX(0) }
    }

    /* keep small alerts styling */
    #homeownerAlert, #repair-warning, #windowAlert {
      border-radius: 12px;
      padding: 18px;
      display:none;
    }