#stripe-accordion,
#stripe-express-checkout-element,
#stripe-payment-element {
  width: 100%;
}

.checkout-method-option { display: flex; align-items: center; gap: 12px; cursor: pointer; width: 100%; min-height: 44px; }
.checkout-method-option input { width: 18px; height: 18px; accent-color: #0570de; }
.checkout-method-option:focus-within { outline: 2px solid #2563eb; outline-offset: 3px; }
#checkout-wallet-options { display: grid; gap: 10px; }
#checkout-wallet-options .checkout-method-option { padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; }
#checkout-wallet-options .checkout-method-option:has(:checked) { border-color: #0570de; }
.checkout-wallet-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.checkout-wallet-panel { overflow: hidden; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; }
.checkout-wallet-panel:has(:checked) { border-color: #0570de; }
#checkout-wallet-options .checkout-wallet-panel .checkout-method-option { border: 0; border-radius: 0; }
.checkout-wallet-panel:has(:checked) .checkout-method-option { font-weight: 600; }
.checkout-wallet-details { padding: 16px; border-top: 1px solid #e5e7eb; background: #f9fafb; font-size: 14px; line-height: 1.6; color: #374151; }
.checkout-wallet-details[hidden] { display: none; }
.checkout-wallet-details strong { display: block; margin-bottom: 5px; color: #1f2937; }
.checkout-wallet-details p { margin: 0; }
.checkout-card-fields[hidden] { display: none; }
#pay-action { position: relative; }
/* Render inactive wallets behind the page: opacity/visibility hiding defers Stripe button painting. Inert prevents focus. */
#checkout-wallet-action.wallet-action-inactive { position: absolute; width: 100%; top: 0; z-index: -1; pointer-events: none; }
#stripe-express-checkout-element { position: relative; }
.checkout-wallet-slot { width: 100%; min-height: 48px; }
/* All wallets load at their final width; switching only reveals an already-mounted iframe. */
.checkout-wallet-slot.wallet-slot-inactive { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; }

#stripe-express-checkout-divider {
  margin: 18px 0;
  color: #6b7280;
}

#stripe-express-checkout-divider span:first-child,
#stripe-express-checkout-divider span:last-child {
  background: #d1d5db;
}

.checkout-card-panel {
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  font-size: 13.125px;
  font-weight: 600;
}

.checkout-card-panel:has(.checkout-card-choice > input:checked) .checkout-card-header { color: #0570de; }

.checkout-card-header-radio {
  width: 15.75px;
  height: 15.75px;
  flex: 0 0 15.75px;
  margin-right: 11.25px;
  color: currentColor;
}

.checkout-card-choice { position: relative; display: flex; align-items: center; width: 100%; cursor: pointer; }
.checkout-card-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.checkout-card-choice:focus-within { outline: 2px solid #2563eb; outline-offset: 4px; }
.checkout-card-choice > input:not(:checked) ~ .checkout-card-header-radio .checkout-card-radio-inner { fill: none; }

.checkout-card-radio-outer {
  fill: none;
  stroke: currentColor;
  stroke-width: 12px;
}

.checkout-card-radio-inner {
  fill: currentColor;
}

.checkout-card-header-icon-wrap {
  width: 29.53px;
  height: 15.75px;
  flex: 0 0 29.53px;
  margin-right: 9.84px;
}

.checkout-card-header-icon {
  display: block;
  width: 15.75px;
  height: 15.75px;
  fill: currentColor;
}

.checkout-payment-placeholder-radio {
  width: 15.75px;
  height: 15.75px;
  flex: 0 0 15.75px;
  border: 2px solid #0570de;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
  background: #0570de;
}

.checkout-payment-placeholder-icon {
  width: 16px;
  height: 12px;
  flex: 0 0 16px;
  border-radius: 2px;
  background: #0570de;
}

.checkout-card-fields {
  display: grid;
  gap: 11px;
  padding: 14px 16px 16px;
}

.checkout-card-field label {
  display: block;
  margin-bottom: 5px;
  color: #374151;
  font-size: 13px;
  font-weight: 400;
}

.checkout-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.checkout-card-frame {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.checkout-card-frame.is-focused {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.checkout-card-frame[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626;
}

.checkout-payment-placeholder {
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
}

.checkout-payment-placeholder-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #2563eb;
  font-size: 14px;
}

.checkout-payment-placeholder-fields {
  display: grid;
  gap: 11px;
  padding: 14px 16px 16px;
}

.checkout-payment-placeholder-fields label {
  display: block;
  margin-bottom: 5px;
  color: #374151;
  font-size: 13px;
}

.checkout-payment-placeholder-input {
  min-height: 44px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 15px;
}

.checkout-payment-placeholder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  #stripe-express-checkout-divider {
    margin: 16px 0;
  }

  .checkout-card-fields,
  .checkout-payment-placeholder-fields {
    padding-right: 14px;
    padding-left: 14px;
  }

  .checkout-card-row,
  .checkout-payment-placeholder-row {
    gap: 8px;
  }
}

@media (max-width: 1023px) {
  #summary-mobile-block {
    border-color: #d1d5db !important;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  }

  #summary-toggle { background: #fff !important; color: #1f2937 !important; }
  #summary-toggle:disabled { cursor: default; opacity: 1; }
  #summary-toggle > span:first-child,
  #summary-chevron { display: none !important; }
  #summary-total,
  #summary-total-detail { color: #111827 !important; }
  #summary-content,
  #summary-content > div { background: #fff !important; }
}