/*
|--------------------------------------------------------------------------
| MOON COMPANION CHECKOUT
|--------------------------------------------------------------------------
|
| VISUAL LAYER ONLY
|
| Payment, one-trial, eligibility, Razorpay, PayPal and backend verification
| logic remains in the existing checkout.js / PHP backend.
|
*/


:root {
  --mc-midnight: #0b0f1d;
  --mc-deep-navy: #0b1424;
  --mc-card-navy: #111b2e;
  --mc-card-deep: #0c1626;

  --mc-gold: #d4af37;
  --mc-soft-gold: #f5d47a;
  --mc-gold-hover: #ffe293;

  --mc-cream: #fff6e0;
  --mc-text: #f7f4ef;
  --mc-muted: #b7becc;

  --mc-border: rgba(255, 255, 255, 0.1);
  --mc-border-strong: rgba(245, 212, 122, 0.48);

  --mc-field: rgba(13, 23, 40, 0.86);

  --mc-error: #ff9f9f;
  --mc-error-border: rgba(255, 119, 119, 0.82);
  --mc-error-bg: rgba(139, 36, 47, 0.13);

  --mc-success: #83d7a8;

  --mc-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34);
}



/*
|--------------------------------------------------------------------------
| BASIC
|--------------------------------------------------------------------------
*/

[hidden] {
  display: none !important;
}


.checkout-page *,
.checkout-page *::before,
.checkout-page *::after {
  box-sizing: border-box;
}


.checkout-page {
  position: relative;

  overflow: hidden;

  min-height: 720px;

  background:
    var(--mc-midnight);

  color:
    var(--mc-text);
}



/*
|--------------------------------------------------------------------------
| CHECKOUT BACKGROUND
|--------------------------------------------------------------------------
|
| checkout-bg.webp is optional.
|
| If the image is unavailable, the gradients underneath still provide
| the correct Moon Companion background.
|
*/

.checkout-background {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(11, 15, 29, 0.99) 0%,
      rgba(11, 15, 29, 0.96) 40%,
      rgba(11, 20, 36, 0.78) 68%,
      rgba(11, 15, 29, 0.8) 100%
    ),
    radial-gradient(
      circle at 82% 19%,
      rgba(245, 212, 122, 0.14),
      transparent 21%
    ),
    radial-gradient(
      circle at 74% 70%,
      rgba(53, 83, 124, 0.16),
      transparent 34%
    ),
    url("assets/checkout-bg.webp")
      center center / cover no-repeat;

  opacity: 0.94;
}


.checkout-background::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4, 9, 18, 0.04),
      rgba(4, 9, 18, 0.67)
    );
}



/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.checkout-section {
  position: relative;

  z-index: 1;

  padding:
    clamp(58px, 6vw, 96px)
    0
    clamp(72px, 8vw, 120px);
}


.checkout-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  gap:
    clamp(52px, 6vw, 94px);

  align-items: start;
}


.checkout-left,
.checkout-benefits {
  min-width: 0;
}



/*
|--------------------------------------------------------------------------
| CHECKOUT INTRO
|--------------------------------------------------------------------------
*/

.checkout-intro {
  max-width: 700px;

  margin-bottom: 28px;
}


.checkout-eyebrow {
  margin:
    0
    0
    11px;

  color:
    var(--mc-soft-gold);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.15em;

  line-height: 1.5;

  text-transform: uppercase;
}


.checkout-intro h1 {
  margin: 0;

  max-width: 680px;

  color:
    var(--mc-text);

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      38px,
      4.2vw,
      56px
    );

  font-weight: 500;

  letter-spacing: -0.045em;

  line-height: 1.08;
}


.checkout-lead {
  margin:
    17px
    0
    0;

  max-width: 620px;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 16px;

  line-height: 1.7;
}



/*
|--------------------------------------------------------------------------
| MAIN CHECKOUT CARD
|--------------------------------------------------------------------------
*/

.checkout-shell {
  overflow: hidden;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.1);

  border-radius: 26px;

  background:
    linear-gradient(
      155deg,
      rgba(17, 27, 46, 0.985),
      rgba(8, 17, 31, 0.98)
    );

  box-shadow:
    var(--mc-shadow);

  backdrop-filter:
    blur(16px);
}



/*
|--------------------------------------------------------------------------
| CHECKOUT PROGRESS
|--------------------------------------------------------------------------
*/

.checkout-progress {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto
    1fr
    auto;

  align-items: center;

  gap: 14px;

  padding:
    23px
    30px;

  border-bottom:
    1px
    solid
    var(--mc-border);

  background:
    rgba(255, 255, 255, 0.02);
}


.checkout-step-indicator {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  color:
    rgba(183, 190, 204, 0.72);

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  font-weight: 600;
}


.step-number {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  flex:
    0
    0
    28px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.03);

  color:
    var(--mc-muted);

  font-size: 12px;
}


.checkout-step-indicator.active {
  color:
    var(--mc-text);
}


.checkout-step-indicator.active
.step-number {
  border-color:
    var(--mc-soft-gold);

  background:
    var(--mc-soft-gold);

  color:
    var(--mc-midnight);
}


.checkout-step-indicator.completed
.step-number {
  border-color:
    rgba(212, 175, 55, 0.7);

  background:
    rgba(212, 175, 55, 0.14);

  color:
    var(--mc-soft-gold);
}


.progress-line {
  height: 1px;

  background:
    rgba(255, 255, 255, 0.11);
}



/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.checkout-form {
  margin: 0;
}


.checkout-panel {
  padding:
    clamp(28px, 4vw, 43px);
}



/*
|--------------------------------------------------------------------------
| PANEL HEADINGS
|--------------------------------------------------------------------------
*/

.panel-heading {
  display: flex;

  gap: 15px;

  align-items: flex-start;

  margin-bottom: 23px;
}


.panel-heading.compact {
  margin-bottom: 20px;
}


.panel-number {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  flex:
    0
    0
    34px;

  border:
    1px
    solid
    rgba(212, 175, 55, 0.32);

  border-radius: 50%;

  color:
    var(--mc-soft-gold);

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.06em;
}


.panel-heading h2 {
  margin:
    2px
    0
    5px;

  color:
    var(--mc-text);

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      20px,
      2vw,
      24px
    );

  font-weight: 500;

  letter-spacing: -0.025em;

  line-height: 1.25;
}


.panel-heading p {
  margin: 0;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.55;
}



/*
|--------------------------------------------------------------------------
| PLAN OPTIONS
|--------------------------------------------------------------------------
*/

.plan-options {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-bottom: 34px;
}


.plan-tab {
  appearance: none;

  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 13px;

  align-items: center;

  width: 100%;

  min-height: 112px;

  padding: 19px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    var(--mc-text);

  text-align: left;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}


.plan-tab:hover {
  border-color:
    rgba(245, 212, 122, 0.35);

  background:
    rgba(255, 255, 255, 0.045);

  transform:
    translateY(-1px);
}


.plan-tab.active {
  border-color:
    rgba(245, 212, 122, 0.78);

  background:
    linear-gradient(
      145deg,
      rgba(245, 212, 122, 0.08),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(245, 212, 122, 0.06);
}


.plan-radio {
  display: block;

  width: 18px;

  height: 18px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.28);

  border-radius: 50%;
}


.plan-tab.active
.plan-radio {
  position: relative;

  border-color:
    var(--mc-soft-gold);

  background:
    var(--mc-soft-gold);
}


.plan-tab.active
.plan-radio::after {
  content: "✓";

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    var(--mc-midnight);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  font-weight: 800;
}


.plan-copy {
  display: flex;

  flex-direction: column;

  gap: 5px;

  min-width: 0;
}


.plan-copy strong {
  font-family:
    "Poppins",
    sans-serif;

  font-size: 17px;

  font-weight: 500;
}


.plan-copy small {
  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.45;
}


.plan-price {
  display: flex;

  flex-direction: column;

  gap: 3px;

  align-items: flex-end;

  text-align: right;
}


.plan-price strong {
  color:
    var(--mc-soft-gold);

  font-family:
    "Poppins",
    sans-serif;

  font-size: 17px;

  font-weight: 600;

  white-space: nowrap;
}


.plan-price small {
  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
}


.best-value {
  display: inline-flex;

  margin-bottom: 2px;

  padding:
    3px
    7px;

  border:
    1px
    solid
    rgba(245, 212, 122, 0.25);

  border-radius: 999px;

  color:
    var(--mc-soft-gold);

  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.06em;
}



/*
|--------------------------------------------------------------------------
| CUSTOMER DETAILS
|--------------------------------------------------------------------------
*/

.form-section {
  padding-top: 30px;

  border-top:
    1px
    solid
    var(--mc-border);
}


.form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    19px;
}


.field-full {
  grid-column:
    1
    /
    -1;
}


.field-group {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.field-group label {
  color:
    rgba(247, 244, 239, 0.92);

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  font-weight: 500;
}


.required-mark {
  color:
    var(--mc-soft-gold);
}


.field-group input,
.field-group select {
  width: 100%;

  min-height: 52px;

  padding:
    0
    16px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.13);

  border-radius: 13px;

  outline: 0;

  background:
    var(--mc-field);

  color:
    var(--mc-text);

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


/*
 * Prevent native invalid styling fighting with our own inline validation.
 */

.checkout-form input:invalid,
.checkout-form select:invalid {
  box-shadow: none;
}


.field-group input::placeholder {
  color:
    rgba(183, 190, 204, 0.58);
}


.field-group input:focus,
.field-group select:focus {
  border-color:
    rgba(245, 212, 122, 0.7);

  box-shadow:
    0
    0
    0
    3px
    rgba(245, 212, 122, 0.08);

  background:
    rgba(13, 23, 40, 0.98);
}



/*
|--------------------------------------------------------------------------
| INLINE FIELD VALIDATION
|--------------------------------------------------------------------------
*/

.field-error {
  display: none;

  margin:
    1px
    0
    0;

  color:
    var(--mc-error);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 500;

  line-height: 1.45;
}


.field-error:not(:empty) {
  display: block;
}


.field-group input.field-invalid,
.field-group select.field-invalid {
  border-color:
    var(--mc-error-border) !important;

  background:
    var(--mc-error-bg);

  box-shadow:
    0
    0
    0
    3px
    rgba(255, 119, 119, 0.065);
}


.field-group input.field-invalid:focus,
.field-group select.field-invalid:focus {
  border-color:
    #ff9292 !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(255, 119, 119, 0.13);
}


.field-group input.field-valid {
  border-color:
    rgba(131, 215, 168, 0.38);
}



/*
|--------------------------------------------------------------------------
| SELECT
|--------------------------------------------------------------------------
*/

.select-wrap {
  position: relative;
}


.select-wrap select {
  appearance: none;

  padding-right: 44px;
}


.select-wrap::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 17px;

  width: 7px;

  height: 7px;

  border-right:
    1.5px
    solid
    var(--mc-soft-gold);

  border-bottom:
    1.5px
    solid
    var(--mc-soft-gold);

  transform:
    translateY(-70%)
    rotate(45deg);

  pointer-events: none;
}



/*
|--------------------------------------------------------------------------
| MEMBERSHIP SUMMARY
|--------------------------------------------------------------------------
*/

.membership-summary {
  display: flex;

  gap: 15px;

  align-items: flex-start;

  margin:
    28px
    0
    20px;

  padding:
    19px
    20px;

  border:
    1px
    solid
    rgba(245, 212, 122, 0.22);

  border-radius: 16px;

  background:
    rgba(245, 212, 122, 0.07);
}


.summary-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  flex:
    0
    0
    42px;

  border-radius: 13px;

  background:
    rgba(245, 212, 122, 0.1);
}


.summary-icon svg {
  width: 21px;

  height: 21px;

  fill: none;

  stroke:
    var(--mc-soft-gold);

  stroke-width: 1.65;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.membership-summary-copy strong {
  display: block;

  margin-bottom: 5px;

  color:
    var(--mc-cream);

  font-family:
    "Poppins",
    sans-serif;

  font-size: 14px;

  font-weight: 500;
}


.membership-summary-copy p {
  margin: 0;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  line-height: 1.6;
}



/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.checkout-primary-button {
  appearance: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  min-height: 56px;

  padding:
    14px
    24px;

  border: 0;

  border-radius: 14px;

  background:
    var(--mc-soft-gold);

  color:
    #14141b;

  font-family:
    "Inter",
    sans-serif;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.2;

  cursor: pointer;

  box-shadow:
    0
    16px
    34px
    rgba(245, 212, 122, 0.12);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.checkout-primary-button:hover {
  transform:
    translateY(-1px);

  background:
    var(--mc-gold-hover);

  box-shadow:
    0
    20px
    38px
    rgba(245, 212, 122, 0.17);
}


.checkout-primary-button:focus-visible {
  outline:
    3px
    solid
    rgba(245, 212, 122, 0.28);

  outline-offset: 3px;
}


.checkout-primary-button:disabled {
  cursor:
    wait;

  opacity: 0.68;

  transform: none;
}



/*
|--------------------------------------------------------------------------
| SECURITY
|--------------------------------------------------------------------------
*/

.checkout-security-line {
  display: flex;

  gap: 8px;

  align-items: center;

  justify-content: center;

  margin:
    15px
    0
    0;

  color:
    rgba(183, 190, 204, 0.74);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  line-height: 1.45;

  text-align: center;
}


.checkout-security-line svg {
  width: 14px;

  height: 14px;

  flex:
    0
    0
    14px;

  fill: none;

  stroke:
    var(--mc-soft-gold);

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;
}



/*
|--------------------------------------------------------------------------
| PAYMENT METHODS
|--------------------------------------------------------------------------
*/

.gateway-options {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-bottom: 24px;
}


.gateway-card {
  appearance: none;

  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 14px;

  align-items: center;

  width: 100%;

  min-height: 94px;

  padding:
    18px
    19px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    var(--mc-text);

  text-align: left;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}


.gateway-card:hover {
  border-color:
    rgba(245, 212, 122, 0.34);

  background:
    rgba(255, 255, 255, 0.045);
}


.gateway-card.active {
  border-color:
    rgba(245, 212, 122, 0.76);

  background:
    rgba(245, 212, 122, 0.06);
}


.gateway-radio {
  display: block;

  width: 18px;

  height: 18px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.27);

  border-radius: 50%;
}


.gateway-card.active
.gateway-radio {
  border-color:
    var(--mc-soft-gold);

  box-shadow:
    inset
    0
    0
    0
    4px
    var(--mc-soft-gold);
}


.gateway-brand {
  display: flex;

  gap: 11px;

  align-items: center;

  min-width: 0;
}


.provider-symbol {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  flex:
    0
    0
    34px;

  border-radius: 10px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 18px;

  font-weight: 800;

  color: white;
}


.razorpay-symbol {
  background:
    linear-gradient(
      145deg,
      #335eea,
      #1d3fbb
    );
}


.paypal-symbol {
  background:
    linear-gradient(
      145deg,
      #253b80,
      #169bd7
    );
}


.provider-copy {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.provider-copy strong {
  font-family:
    "Inter",
    sans-serif;

  font-size: 16px;

  font-weight: 700;
}


.provider-copy small {
  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
}


.gateway-check {
  display: none;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background:
    var(--mc-soft-gold);

  color:
    var(--mc-midnight);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 800;
}


.gateway-card.active
.gateway-check {
  display: flex;
}



/*
|--------------------------------------------------------------------------
| PAYMENT REASSURANCE
|--------------------------------------------------------------------------
*/

.payment-reassurance {
  display: flex;

  gap: 13px;

  align-items: center;

  margin:
    20px
    0
    28px;

  padding:
    17px
    18px;

  border:
    1px
    solid
    var(--mc-border);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.025);
}


.payment-reassurance svg {
  width: 27px;

  height: 27px;

  flex:
    0
    0
    27px;

  fill: none;

  stroke:
    var(--mc-soft-gold);

  stroke-width: 1.45;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.payment-reassurance strong {
  display: block;

  margin-bottom: 3px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  font-weight: 600;
}


.payment-reassurance p {
  margin: 0;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.5;
}



/*
|--------------------------------------------------------------------------
| BUTTON ROW
|--------------------------------------------------------------------------
*/

.checkout-button-row {
  display: grid;

  grid-template-columns:
    145px
    1fr;

  gap: 12px;
}


.checkout-secondary-button {
  appearance: none;

  min-height: 54px;

  padding:
    13px
    20px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.13);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.03);

  color:
    var(--mc-text);

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease;
}


.checkout-secondary-button:hover {
  border-color:
    rgba(245, 212, 122, 0.3);

  background:
    rgba(255, 255, 255, 0.05);
}



/*
|--------------------------------------------------------------------------
| REVIEW
|--------------------------------------------------------------------------
*/

.review-card {
  overflow: hidden;

  margin-bottom: 22px;

  border:
    1px
    solid
    var(--mc-border);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.025);
}


.review-row {
  display: flex;

  gap: 20px;

  align-items: center;

  justify-content: space-between;

  padding:
    15px
    18px;

  border-bottom:
    1px
    solid
    rgba(255, 255, 255, 0.07);
}


.review-row:last-child {
  border-bottom: 0;
}


.review-row > div {
  min-width: 0;
}


.review-label {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(183, 190, 204, 0.78);

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.review-row strong {
  display: block;

  overflow-wrap: anywhere;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  font-weight: 600;
}


.review-description {
  display: block;

  margin-top: 3px;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  line-height: 1.45;
}


.review-edit {
  appearance: none;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    var(--mc-soft-gold);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;
}



/*
|--------------------------------------------------------------------------
| FINAL PRICE / TRIAL SUMMARY
|--------------------------------------------------------------------------
*/

.final-membership-summary {
  display: grid;

  grid-template-columns:
    minmax(140px, 0.42fr)
    1fr;

  margin-bottom: 22px;

  overflow: hidden;

  border:
    1px
    solid
    rgba(245, 212, 122, 0.2);

  border-radius: 17px;

  background:
    linear-gradient(
      120deg,
      rgba(255, 246, 224, 0.99),
      rgba(249, 230, 190, 0.97)
    );

  color:
    #151821;
}


.today-column,
.renewal-column {
  padding: 20px;
}


.today-column {
  display: flex;

  flex-direction: column;

  justify-content: center;

  border-right:
    1px
    solid
    rgba(11, 15, 29, 0.14);
}


.today-column span,
.renewal-column > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(11, 15, 29, 0.65);

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}


.today-column strong {
  color:
    #9c6b10;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      25px,
      3vw,
      34px
    );

  font-weight: 600;

  letter-spacing: -0.04em;
}


.renewal-column strong {
  font-family:
    "Poppins",
    sans-serif;

  font-size: 16px;

  font-weight: 600;
}


.renewal-column p {
  margin:
    7px
    0
    0;

  color:
    rgba(11, 15, 29, 0.72);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.55;
}



/*
|--------------------------------------------------------------------------
| FINAL PROVIDER SECTION
|--------------------------------------------------------------------------
*/

.checkout-pay-button {
  min-height: 59px;

  font-size: 16px;
}


.paypal-final-section {
  padding:
    2px
    0;
}


.paypal-button-container {
  min-height: 50px;
}



/*
|--------------------------------------------------------------------------
| CHECKOUT MESSAGES
|--------------------------------------------------------------------------
*/

.checkout-message {
  display: none;

  margin-top: 16px;

  padding:
    13px
    15px;

  border-radius: 13px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.55;
}


.checkout-message:not(:empty) {
  display: block;
}


.checkout-message.error {
  border:
    1px
    solid
    rgba(241, 112, 112, 0.28);

  background:
    rgba(168, 46, 46, 0.13);

  color:
    #ffd4d4;
}


.checkout-message.success {
  border:
    1px
    solid
    rgba(114, 213, 160, 0.28);

  background:
    rgba(44, 139, 86, 0.13);

  color:
    #d8ffe6;
}


.checkout-message a {
  color:
    var(--mc-soft-gold);

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 3px;
}



/*
|--------------------------------------------------------------------------
| BACK
|--------------------------------------------------------------------------
*/

.checkout-back-link {
  appearance: none;

  display: block;

  margin:
    15px
    auto
    0;

  padding: 5px;

  border: 0;

  background: none;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  cursor: pointer;
}



/*
|--------------------------------------------------------------------------
| RIGHT-SIDE BENEFITS
|--------------------------------------------------------------------------
*/

.benefits-inner {
  position: sticky;

  top: 110px;

  max-width: 560px;

  padding:
    9px
    0
    0;
}


.benefits-inner h2 {
  margin:
    0
    0
    14px;

  max-width: 520px;

  color:
    var(--mc-text);

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      32px,
      3.4vw,
      45px
    );

  font-weight: 500;

  letter-spacing: -0.04em;

  line-height: 1.15;
}


.benefits-intro {
  margin:
    0
    0
    28px;

  max-width: 500px;

  color:
    var(--mc-muted);

  font-family:
    "Inter",
    sans-serif;

  font-size: 15px;

  line-height: 1.7;
}



/*
|--------------------------------------------------------------------------
| BENEFIT LIST
|--------------------------------------------------------------------------
*/

.benefit-list {
  display: flex;

  flex-direction: column;
}


.benefit-item {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 15px;

  padding:
    17px
    0;

  border-bottom:
    1px
    solid
    rgba(255, 255, 255, 0.08);
}


.benefit-item:first-child {
  padding-top: 0;
}


.benefit-check {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 29px;

  height: 29px;

  margin-top: 2px;

  border:
    1px
    solid
    rgba(212, 175, 55, 0.42);

  border-radius: 50%;

  background:
    rgba(212, 175, 55, 0.08);

  color:
    var(--mc-soft-gold);

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 700;
}


.benefit-item h3 {
  margin:
    0
    0
    5px;

  color:
    var(--mc-text);

  font-family:
    "Poppins",
    sans-serif;

  font-size: 16px;

  font-weight: 500;

  line-height: 1.4;
}


.benefit-item p {
  margin: 0;

  color:
    rgba(183, 190, 204, 0.88);

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  line-height: 1.6;
}



/*
|--------------------------------------------------------------------------
| SMALL BENEFIT PILLS
|--------------------------------------------------------------------------
*/

.additional-benefits {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 24px;
}


.additional-benefits span {
  display: inline-flex;

  align-items: center;

  min-height: 32px;

  padding:
    7px
    11px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.09);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    rgba(247, 244, 239, 0.82);

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;

  font-weight: 600;
}



/*
|--------------------------------------------------------------------------
| RIGHT COLUMN NOTE
|--------------------------------------------------------------------------
*/

.benefits-note {
  display: flex;

  gap: 13px;

  align-items: flex-start;

  margin-top: 25px;

  padding-top: 21px;

  border-top:
    1px
    solid
    rgba(255, 255, 255, 0.08);
}


.moon-dot {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  flex:
    0
    0
    34px;

  border:
    1px
    solid
    rgba(212, 175, 55, 0.3);

  border-radius: 50%;

  color:
    var(--mc-soft-gold);

  font-size: 19px;
}


.benefits-note p {
  margin:
    2px
    0
    0;

  max-width: 440px;

  color:
    rgba(255, 246, 224, 0.76);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 17px;

  font-style: italic;

  line-height: 1.55;
}



/*
|--------------------------------------------------------------------------
| FOCUS ACCESSIBILITY
|--------------------------------------------------------------------------
*/

.plan-tab:focus-visible,
.gateway-card:focus-visible,
.checkout-secondary-button:focus-visible,
.review-edit:focus-visible,
.checkout-back-link:focus-visible {
  outline:
    3px
    solid
    rgba(245, 212, 122, 0.24);

  outline-offset: 3px;
}



/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media
(max-width: 1100px) {

  .checkout-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.76fr);

    gap: 44px;
  }


  .plan-options,
  .gateway-options {
    grid-template-columns:
      1fr;
  }


  .plan-tab {
    min-height: 98px;
  }


  .benefits-inner {
    top: 90px;
  }

}



/*
|--------------------------------------------------------------------------
| MOBILE / SMALL TABLET
|--------------------------------------------------------------------------
*/

@media
(max-width: 850px) {

  .checkout-section {
    padding:
      48px
      0
      72px;
  }


  .checkout-layout {
    display: flex;

    flex-direction: column;

    gap: 58px;
  }


  /*
   * Checkout comes FIRST on mobile.
   */

  .checkout-left {
    order: 1;

    width: 100%;
  }


  .checkout-benefits {
    order: 2;

    width: 100%;
  }


  .benefits-inner {
    position: static;

    max-width: none;
  }


  .benefit-list {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      0
      28px;
  }


  .checkout-background {
    background:
      linear-gradient(
        180deg,
        rgba(11, 15, 29, 0.97),
        rgba(11, 20, 36, 0.9)
      ),
      radial-gradient(
        circle at 70% 20%,
        rgba(245, 212, 122, 0.12),
        transparent 30%
      ),
      url("assets/checkout-bg.webp")
        center center / cover no-repeat;
  }

}



/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media
(max-width: 620px) {

  .checkout-section {
    padding:
      36px
      0
      60px;
  }


  .checkout-intro {
    margin-bottom: 22px;
  }


  .checkout-intro h1 {
    font-size:
      clamp(
        34px,
        10vw,
        43px
      );
  }


  .checkout-lead {
    font-size: 14px;
  }


  .checkout-shell {
    border-radius: 21px;
  }


  .checkout-progress {
    gap: 8px;

    padding:
      17px
      16px;
  }


  .checkout-step-indicator {
    gap: 5px;
  }


  .step-label {
    display: none;
  }


  .step-number {
    width: 26px;

    height: 26px;

    flex-basis: 26px;
  }


  .checkout-panel {
    padding:
      25px
      18px;
  }


  .panel-heading {
    gap: 11px;
  }


  .plan-options,
  .gateway-options,
  .form-grid {
    grid-template-columns:
      1fr;
  }


  .field-full {
    grid-column: auto;
  }


  .plan-tab {
    grid-template-columns:
      auto
      1fr
      auto;

    min-height: 94px;

    padding: 16px;
  }


  .plan-copy strong {
    font-size: 15px;
  }


  .plan-copy small {
    font-size: 11px;
  }


  .plan-price strong {
    font-size: 14px;
  }


  .best-value {
    font-size: 8px;
  }


  .gateway-card {
    min-height: 84px;

    padding: 15px;
  }


  .checkout-button-row {
    grid-template-columns:
      1fr;
  }


  .checkout-secondary-button {
    order: 2;
  }


  .checkout-button-row
  .checkout-primary-button {
    order: 1;
  }


  .membership-summary {
    padding: 16px;
  }


  .final-membership-summary {
    grid-template-columns:
      1fr;
  }


  .today-column {
    border-right: 0;

    border-bottom:
      1px
      solid
      rgba(11, 15, 29, 0.14);
  }


  .benefit-list {
    grid-template-columns:
      1fr;
  }


  .benefits-inner h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }


  .benefits-intro {
    font-size: 14px;
  }


  .additional-benefits {
    gap: 7px;
  }

}



/*
|--------------------------------------------------------------------------
| VERY SMALL PHONES
|--------------------------------------------------------------------------
*/

@media
(max-width: 390px) {

  .checkout-panel {
    padding:
      22px
      15px;
  }


  .plan-tab {
    grid-template-columns:
      auto
      1fr;

    gap: 11px;
  }


  .plan-price {
    grid-column: 2;

    align-items: flex-start;

    text-align: left;
  }


  .gateway-card {
    grid-template-columns:
      auto
      1fr;
  }


  .gateway-check {
    display: none !important;
  }

}



/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media
(prefers-reduced-motion: reduce) {

  .plan-tab,
  .gateway-card,
  .checkout-primary-button,
  .checkout-secondary-button {
    transition: none;
  }

}