.checkout-hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 18% 18%, rgba(228,171,36,.22), transparent 25%),
        radial-gradient(circle at 82% 20%, rgba(64,108,156,.26), transparent 24%),
        linear-gradient(135deg, #111216 0%, #172130 45%, #20324e 100%);
      padding: 72px 0 54px;
    }

    .checkout-hero .container {
      position: relative;
      z-index: 2;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem .9rem;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.1);
      color: #fff;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .hero-badge .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ep-gold);
    }

    .checkout-hero h1 {
      font-size: clamp(2.1rem, 4vw, 3.5rem);
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -.03em;
      margin-bottom: 1rem;
    }

    .checkout-hero p {
      color: rgba(255,255,255,.82);
      font-size: 1.02rem;
      max-width: 780px;
      margin-bottom: 0;
    }

    .section-gap {
      padding: 72px 0;
    }

    .section-soft {
      background: var(--ep-soft);
    }

    .checkout-card,
    .summary-card,
    .payment-note,
    .secure-card {
      background: #fff;
      border: 1px solid var(--ep-border);
      border-radius: 24px;
      box-shadow: 0 12px 35px rgba(0,0,0,.05);
    }

    .checkout-card,
    .summary-card,
    .payment-note,
    .secure-card {
      padding: 1.5rem;
    }

    .card-title-lg {
      font-size: 1.2rem;
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .form-control,
    .form-select {
      min-height: 50px;
      border-radius: 14px;
      box-shadow: none !important;
      border: 1px solid var(--ep-border);
    }

    textarea.form-control {
      min-height: 120px;
      resize: none;
    }

    .btn-gold {
      background: linear-gradient(135deg, var(--ep-gold), var(--ep-gold-2));
      border: 0;
      color: #fff;
      font-weight: 700;
      padding: .95rem 1.25rem;
      border-radius: 14px;
      box-shadow: 0 12px 28px rgba(228,171,36,.24);
    }

    .btn-gold:hover {
      color: #fff;
      filter: brightness(.98);
    }

    .btn-soft {
      background: #f6f7fb;
      border: 1px solid var(--ep-border);
      color: #2d3440;
      font-weight: 600;
      border-radius: 14px;
      padding: .95rem 1.1rem;
    }

    .payment-methods {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .payment-option {
      position: relative;
    }

    .payment-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .payment-label {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1rem;
      border-radius: 18px;
      border: 1px solid var(--ep-border);
      background: #fff;
      cursor: pointer;
      transition: .25s ease;
      min-height: 100%;
    }

    .payment-label:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(0,0,0,.06);
    }

    .payment-option input:checked + .payment-label {
      border-color: rgba(228,171,36,.65);
      box-shadow: 0 14px 28px rgba(228,171,36,.12);
      background: linear-gradient(135deg, rgba(228,171,36,.08), rgba(64,108,156,.06));
    }

    .payment-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      font-weight: 800;
      flex: 0 0 auto;
      color: var(--ep-blue);
      background: linear-gradient(135deg, rgba(228,171,36,.14), rgba(64,108,156,.12));
      border: 1px solid rgba(0,0,0,.05);
    }

    .payment-label strong {
      display: block;
      font-size: 1rem;
      color: #243041;
    }

    .payment-label small {
      display: block;
      color: var(--ep-muted);
      line-height: 1.6;
      margin-top: .15rem;
    }

    .gateway-box {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 18px;
      background: #f8fafc;
      border: 1px dashed rgba(0,0,0,.08);
    }

    .gateway-box.active {
      display: block;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .8rem 0;
      border-top: 1px dashed rgba(0,0,0,.08);
      font-size: .95rem;
    }

    .summary-row:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .summary-row span:first-child {
      color: var(--ep-muted);
      font-weight: 600;
    }

    .summary-row span:last-child {
      font-weight: 800;
      color: #263241;
      text-align: right;
    }

    .summary-row.total {
      margin-top: .25rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(0,0,0,.12);
    }

    .summary-row.total span {
      font-size: 1.08rem;
      color: #1d2938;
    }

    .mini-product {
      display: flex;
      gap: .85rem;
      padding: .95rem 0;
      border-top: 1px solid rgba(0,0,0,.06);
    }

    .mini-product:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .mini-thumb {
      width: 68px;
      height: 68px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 28% 25%, rgba(255,255,255,.68), transparent 26%),
        linear-gradient(135deg, rgba(228,171,36,.95), rgba(64,108,156,.72));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.6rem;
      flex: 0 0 auto;
      position: relative;
      overflow: hidden;
    }

    .mini-thumb::after {
      content: "";
      position: absolute;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(0,0,0,.18);
      right: 6px;
      bottom: -12px;
    }

    .mini-product h6 {
      margin: 0 0 .3rem;
      font-weight: 800;
      line-height: 1.4;
    }

    .mini-product p {
      margin: 0;
      color: var(--ep-muted);
      font-size: .88rem;
      line-height: 1.6;
    }

    .secure-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .secure-list li {
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      margin-bottom: 1rem;
      color: var(--ep-muted);
      line-height: 1.7;
      font-weight: 600;
    }

    .secure-list i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(228,171,36,.16);
      color: var(--ep-gold);
      flex: 0 0 auto;
      margin-top: 2px;
    }

    .success-note {
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      padding: 1rem;
      border-radius: 18px;
      background: rgba(31,157,99,.08);
      border: 1px solid rgba(31,157,99,.14);
      color: #1e7b52;
      font-weight: 600;
      line-height: 1.7;
    }

    .success-note i {
      font-size: 1.15rem;
      margin-top: .1rem;
    }

    @media (max-width: 767.98px) {
      .payment-methods {
        grid-template-columns: 1fr;
      }
    }
    
    
    .payment-content {
  display: block;
  flex: 1 1 auto;
}

.payment-brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}

.payment-brand-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 32px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}

.payment-logo {
  max-height: 18px;
  max-width: 75px;
  width: auto;
  object-fit: contain;
  display: block;
}

.payment-icon-logo {
  max-width: 34px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.gateway-brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.gateway-brand-strip .payment-logo {
  max-height: 22px;
}

@media (max-width: 991.98px) {
  .payment-methods {
    grid-template-columns: 1fr;
  }
}