/* @font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
} */

body {
      background: #f2f6fc;
      font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      padding: 12px 8px;
      margin: 0;
    }
    .checkout-wrapper {
      max-width: 1280px;
      margin: 0 auto;
      background: transparent;
    }

    /* header */
    .assured-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0 12px 0;
      border-bottom: 1px solid rgba(39, 58, 157, 0.10);
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 8px 12px;
    }
    .assured-brand {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 24px;
      color: #273A9D;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .assured-brand small {
      font-size: 16px;
      font-weight: 400;
      color: #5a6fa0;
      margin-left: 4px;
    }
    .assured-links {
      display: flex;
      gap: 14px;
      font-weight: 500;
      font-size: 14px;
      color: #1d314a;
      flex-wrap: wrap;
    }
    .assured-links a {
      color: #1d314a;
      text-decoration: none;
      border-bottom: 2px solid transparent;
      padding-bottom: 2px;
    }
    .assured-links a:hover {
      color: #273A9D;
      border-bottom-color: #273A9D;
    }
    h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #656565;
}

    /* main layout — mobile first */
    .checkout-main {
      background: #ffffff;
      padding: 20px 14px;
      /*border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);*/
    }
    .checkout-main h1 {
      /*font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      font-size: 26px;*/
      color: #273A9D;
     /* margin-bottom: 6px;*/
      font-family: JetBrains Mono;
      font-weight: 700;
      font-style: Bold;
      font-size: 40px;
      leading-trim: NONE;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: middle;
    }
    .subhead {
      /* font-weight: 500;
      font-size: 15px; */
      color: #656565;
      margin-bottom: 20px;
      font-family: Montserrat;
      font-weight: 500;
      font-style: Medium;
      font-size: 16px;
      leading-trim: NONE;
      line-height: 120%;
      letter-spacing: 0%;
      vertical-align: middle;
    }
    .details-box {
      background: #FFFFFF;
      border: 1px solid #EFEFEF;
      border-radius: 16px;
      box-shadow: 0px 4px 10px 0px #0A144B1A;
      padding: 18px 14px;
      margin-bottom: 18px;
    }
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      cursor: pointer;
      user-select: none;
    }
    .section-title {
      /* font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      font-size: 20px; */
      color: #273A9D;

      font-family: JetBrains Mono;
      font-weight: 700;
      font-style: Bold;
      font-size: 24px;
      leading-trim: NONE;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: middle;

    }
    .arrow-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #DADADA;
      border-radius: 50%;
      color: #273A9D;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .collapse-content { transition: all 0.3s ease; }

    /* cards */
    .radio-card {
      border: 1px solid #D0D4E4;
      border-radius: 10px;
      padding: 14px;
      background: #FFFFFF;
      min-height: 70px;
      cursor: pointer;
    }
    .radio-card.active-radio {
      border-color: #0A58CA;
      background: #F0F7FF;
      box-shadow: 0 0 0 2px #0A58CA;
    }
    .radio-card .form-check-input {
      width: 18px;
      height: 18px;
      border: 2px solid #B7C6DA;
      flex-shrink: 0;
    }
    .radio-card .form-check-input:checked {
      border-color: #0A58CA;
      background-color: #0A58CA;
      box-shadow: inset 0 0 0 4px #FFFFFF, 0 0 0 1px #0A58CA;
    }
    .label-main {
      font-weight: 700;
      font-size: 15px;
      color: #273A9D;
    }
    .label-sub {
      /* font-size: 12px; */
      color: #6C757D;
      margin-top: 2px;

      font-family: Montserrat;
      font-weight: 500;
      font-style: Medium;
      font-size: 16px;
      leading-trim: NONE;
      line-height: 120%;
      letter-spacing: 0%;
      vertical-align: middle;

    }

    /* counters */
    .counter-item {
      border: 1px solid #D0D4E4;
      border-radius: 10px;
      padding: 14px;
      background: #FFFFFF;
    }
    .counter-label {
      display: block;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 15px;
      color: #273A9D;
    }
    .counter-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
    }
    .counter-btn {
      width: 38px;
      height: 38px;
      border: 1px solid #D0D4E4;
      background: #F5F7FF;
      color: #273A9D;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .counter-btn.minus { border-radius: 8px 0 0 8px; border-right: none; }
    .counter-btn.plus { border-radius: 0 8px 8px 0; border-left: none; }
    .counter-input {
      width: 48px;
      height: 38px;
      border: 1px solid #D0D4E4;
      border-left: none;
      border-right: none;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      color: #273A9D;
      background: #FFFFFF;
      outline: none;
    }

    /* cost estimate */
    .cost-estimate {
      background: linear-gradient(180deg, #EAF8FF 0%, #FFFFFF 100%);
      border: 1px solid #23D0FC;
      border-radius: 16px;
      padding: 16px;
      margin-top: 12px;
    }
    .cost-estimate-title {
      font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      font-size: 20px;
      color: #273A9D;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cost-estimate-title .totalcost { font-size: 26px; }
    .payment-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 6px;
      font-size: 14px;
    }
    .cost-total {
      border-top: 2px solid #23D0FC;
      padding-top: 14px;
      margin-top: 14px;
    }
    .radio-option {
      border: 1px solid #D0D4E4;
      border-radius: 10px;
      padding: 12px;
      background: #FFFFFF;
      flex: 1 1 100%;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .radio-option input[type="radio"] {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid #B7C6DA;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .radio-option input[type="radio"]:checked {
      border-color: #0A58CA;
      background-color: #0A58CA;
      box-shadow: inset 0 0 0 4px #FFFFFF, 0 0 0 1px #0A58CA;
    }
    .radio-option label {
      display: flex;
      flex-direction: column;
      font-weight: 600;
      font-size: 15px;
      color: #273A9D;
      margin: 0;
    }
    .radio-option label span {
      font-size: 12px;
      font-weight: 400;
      color: #6C757D;
    }

    /* upload */
    .upload-row {
      border: 1px solid #D0D4E4;
      border-radius: 10px;
      padding: 14px;
      background: #FFFFFF;
      margin-bottom: 12px;
    }
    .upload-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .upload-title { font-weight: 700; font-size: 15px; color: #273A9D; }
    .upload-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid #273A9D;
      background: #273A9D;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
    }
    .image-preview {
      margin-top: 12px;
      min-height: 60px;
      border: 1px dashed #D0D4E4;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px;
    }
    .image-box {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #D9E4F2;
      position: relative;
    }
    .image-box img { width: 100%; height: auto; object-fit: cover; }
    .image-box .remove-img {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      /*border-radius: 50%;*/
      background: #dc3545;
      color: white;
      border: none;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* right sidebar */
    .checkout-side {
      background: #ffffff;
      padding: 20px 16px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      margin-top: 12px;
    }
    .side-title { font-size: 20px; font-weight: 700; color: #0b1a2e; }
    .membership-wrapper select {
      border-radius: 12px;
      padding: 12px 14px;
      border: 1px solid #DFE6EF;
      font-weight: 500;
      width: 100%;
      font-size: 15px;
    }
    .membership-display {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 10px 14px;
      margin-top: 10px;
      font-size: 14px;
      color: #273A9D;
      border-left: 3px solid #273A9D;
    }
    .line-item {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      font-size: 14px;
      color: #1d314a;
    }
    .line-item .amount { font-weight: 500; }
    .line-item.discount { color: #1d6bf0; }
    .line-item.total {
      font-weight: 700;
      font-size: 18px;
      border-top: 2px solid #dce5f0;
      margin-top: 10px;
      padding-top: 14px;
    }
    .auth-note {
      background: #eef4fc;
      border-radius: 20px;
      padding: 14px 16px;
      margin: 16px 0;
      font-size: 14px;
      color: #1e3d62;
      line-height: 1.5;
    }
    .btn-authorise {
      background: #273A9D;
      color: white;
      border: none;
      padding: 16px;
      border-radius: 60px;
      font-weight: 700;
      font-size: 17px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .terms-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 12px;
    }
    .terms-check input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      accent-color: #1d6bf0;
      margin-top: 2px;
    }
    .terms-check label {
      font-size: 13px;
      line-height: 1.5;
      color: #1d314a;
    }
    .divider-light { border: 0; height: 1px; background: #e3eaf3; margin: 16px 0; }
    .hidden-section { display: none !important; }
    .dynamic-upload-box {
      border: 1px solid #e9ecef;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 10px;
      background: #fafcff;
    }

    .plan-selector .plan-option {
    font-weight: 600;
    font-size: 15px;
    color: #3d5779;
    /* cursor: pointer; */
    transition: 0.2s;
    margin: 0;
}

.plan-selector .plan-option.active {
    background: #ffffff;
    color: #0b1a2e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

    /* mobile overrides */
    @media (max-width: 575.98px) {
      .checkout-main { padding: 16px 10px; }
      .checkout-main h1 { font-size: 22px; }
      .subhead { font-size: 14px; }
      .details-box { padding: 14px 10px; }
      .section-title { font-size: 18px; }
      .counter-btn { width: 34px; height: 34px; font-size: 16px; }
      .counter-input { width: 40px; height: 34px; font-size: 14px; }
      .cost-estimate-title { font-size: 18px; }
      .cost-estimate-title .totalcost { font-size: 22px; }
      .radio-option { flex: 1 1 100%; }
      .assured-brand { font-size: 20px; }
      .assured-brand small { font-size: 14px; }
      .assured-links { gap: 10px; font-size: 13px; }
    }