/* ─────────────────────────────────────────────
   Payment Checkout (right column + grid layout)
   CSS variables; scale via modifier class.
   ───────────────────────────────────────────── */

.ll-checkout {
  /* Typography knobs (BASE) */
  --item-font: 1.125rem;     /* line items */
  --price-font: var(--item-font);
  --total-font: 1.375rem;    /* “Total” row */
  --label-font: 1rem;        /* field labels */
  --btn-font: 1.75rem;       /* big button text */

  /* Spacing & layout knobs */
  --col-gap: 24px;
  --right-pad: 16px;
  --row-gap: 12px;
  --line-gap: 0.5rem;
  --section-gap: 12px;
}

/* Strong, scoped override for the Pay button */
.ll-checkout #payment-submit.ll-checkout-pay,
.ll-checkout button.ll-checkout-pay[type="submit"] {
  font-size: var(--btn-font) !important;  /* beat theme font-size */
  line-height: 1.15;                      /* avoid short-looking text */
  font-weight: 800 !important;            /* beat theme’s 600 */
  text-transform: none !important;        /* remove uppercase (looks smaller) */
  letter-spacing: 0 !important;           /* remove extra tracking */
}

/* Size modifier: larger top items/prices/total */
.ll-checkout.ll-checkout--lg {
  --item-font: 1.5rem;          /* bump line items */
  --price-font: 1.5rem;         /* bump prices to match */
  --total-font: 1.6rem;          /* bump grand total */
  /* --btn-font auto-updates from total via calc */
}

/* Two-column overall grid */
.ll-checkout-grid {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 420px);
  gap: var(--col-gap);
  align-items: start;
}

/* Right column card */
.ll-checkout-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: var(--right-pad);
  background: #fff;
}

/* Top section (items + total) */
.ll-checkout-top { text-align: left; }

/* Row separator */
.ll-checkout-hr {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin: var(--section-gap) 0;
}

/* Line item (checkbox + text + price) */
.ll-checkout-line {
  display: flex;
  align-items: flex-start;
  gap: var(--line-gap);
  font-size: var(--item-font);
  cursor: pointer;
}

.ll-checkout-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
}

/* Label/price layout within a line item */
.ll-checkout-line .ll-checkout-line-body { flex: 1; }

.ll-checkout-line .ll-checkout-line-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.ll-checkout-price {
  font-size: var(--price-font);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Total row */
.ll-checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: var(--total-font);
}

.ll-checkout-total strong { font-variant-numeric: tabular-nums; }

/* Space between stacked line items in the top section */
.ll-checkout-top .ll-checkout-line + .ll-checkout-line {
  margin-top: var(--row-gap);
}

/* Customer fields */
.ll-checkout-fields { margin-top: var(--row-gap); }

.ll-checkout-field {
  display: block;
  text-align: left;
  margin: 6px 0;
}

.ll-checkout-label {
  display: block;
  font-size: var(--label-font);
  margin-bottom: 4px;
}

.ll-checkout-input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
}

/* Pay button */
.ll-checkout-pay {
  width: 100%;
  padding: 14px 18px;
  font-weight: 800;
  font-size: var(--btn-font);
  border-radius: 8px;
}

/* Optional: move these out of inline styles */
#card-element { margin: 8px 0; }
#payment-errors { color: red; margin: 8px 0; }

/* Responsive: collapse to one column if needed */
@media (max-width: 720px) {
  .ll-checkout-grid { grid-template-columns: 1fr; }
}