body {
      font-family: 'Bitter', serif;
      background: #EEF6FF;
    }

    .checkout-wrapper {
      /*max-width: 1200px;*/
      margin: auto;
      /*background: white;*/
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .logo {
      background: #EEF6FF;
    }

    .logo img {
      height: 45px;
    }

    .left-side {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .radio-col {
      width: 30px;
      /* Fixed width for radio area */
      flex-shrink: 0;
      /* Prevent shrinking */
    }

    .star-rating {
      font-size: 0.75rem;
      font-weight: bold;
      background: linear-gradient(90deg, #ff9f00, #d7ac2d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .text-block.smaller {
      font-size: 0.75rem;
    }

    .fs-7 {
      font-size: 0.75rem;
    }

    .plan-box {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      cursor: pointer;
      padding: 15px;
      transition: .2s;
    }

    .plan-box.active {
      border-color: #05B6CF;
      background: #f3fcff;
    }

    .bg-outline-primary {
      border: 1px solid #0d6efd;
      background-color: #EEF6FD;
    }

    .col-lg-5.position-sticky {
      align-self: flex-start !important;
    }

    .order-summary {
      background: #fafafa;
      padding: 20px;
      border-radius: 8px;
    }


    .payment-hint {
      font-size: 12px;
      color: #666;
      cursor: pointer;
    }



    footer {
      background: #25a5b6;
      color: white;
      padding: 25px 0;
      margin-top: 40px;
    }

    .step-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: nowrap;
    }

    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      white-space: nowrap;
    }

    .step-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    /* Horizontal line between steps */
    .step-line {
      flex: 1;
      height: 2px;
      background-color: #000;
      margin-top: -20px;
      /* moves line upward */
      max-width: 120px;
    }

    /* Mobile fix — keep everything in ONE horizontal row */
    @media (max-width: 767.98px) {
      .step-wrapper {
        flex-direction: row;
        /* stay horizontal */
        gap: 10px;
        overflow-x: auto;
        /* prevent breaking */
        padding-bottom: 10px;
      }

      .step-line {
        max-width: 40px;
        /* shorter line for mobile */
      }

      .step-item div {
        font-size: 12px;
        /* smaller label */
      }
    }

    .icon-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      height: 100%;
    }

    .icon-box img {
      height: 50px;
      /* uniform image height for alignment */
      width: auto;
      object-fit: contain;
      margin-bottom: 8px;
    }

    #pageLoader .modal-backdrop {
      display: none !important;
    }

    #pageLoader .modal-content {
      background: #fff !important;
      box-shadow: none !important;
      padding: 10px;
    }

    .modal-backdrop.show {
      backdrop-filter: blur(6px);
      background-color: rgba(0, 0, 0, 0.3);
      /* light dark overlay */
    }