/**
 * Moonshift native-first digital checkout.
 * One narrow, centered card at every screen size — no wide two-column desktop
 * split. Mobile-first: base rules target small screens, the single min-width
 * breakpoint only adds breathing room, it never changes the structure.
 * WooPayments/WooCommerce own their own wallet and secure-field internals;
 * this stylesheet only controls surrounding layout and native form controls.
 * Nothing here repositions, clones, or forces child layout inside the native
 * wallet mount point, and no copy is added explaining which wallet buttons
 * render — they either appear or they don't, based on the browser/gateway.
 *
 * @version 1.3.0
 */

body.woocommerce-checkout {
  --ms-ink: #101a2d;
  --ms-copy: #637087;
  --ms-line: #d9dee6;
  --ms-soft: #f7f3eb;
  --ms-gold: #a8781e;
  overflow-x: hidden;
  background: #fbf7ef;
  color: var(--ms-ink);
}

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

body.woocommerce-checkout .announcement,
body.woocommerce-checkout .moonshift-inner-header,
body.woocommerce-checkout .moonshift-inner-footer { display: none !important; }

body.woocommerce-checkout .moonshift-page,
body.woocommerce-checkout .moonshift-checkout-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ---------- Base (mobile) ---------- */

body.woocommerce-checkout .moonshift-checkout-page { padding: 14px 14px 28px; }

/* One narrow column for checkout branding, navigation, and card. */
body.woocommerce-checkout .moonshift-checkout-brand,
body.woocommerce-checkout .checkout-back-link,
body.woocommerce-checkout .moonshift-checkout-box {
  width: min(100%, 560px);
  margin-right: auto;
  margin-left: auto;
}

body.woocommerce-checkout .moonshift-checkout-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.woocommerce-checkout .moonshift-checkout-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ms-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-decoration: none;
}

body.woocommerce-checkout .moonshift-checkout-logo b { color: var(--ms-gold); font-weight: 900; }

body.woocommerce-checkout .moonshift-checkout-mark {
  color: var(--ms-gold);
  font-size: 23px;
  line-height: 1;
  transform: rotate(-16deg);
}


body.woocommerce-checkout .moonshift-checkout-box {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.woocommerce-checkout .moonshift-checkout-box > .woocommerce,
body.woocommerce-checkout .moonshift-checkout-box > .woocommerce > form.checkout {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.woocommerce-checkout .checkout-back-link {
  display: block;
  margin-bottom: 10px;
  color: var(--ms-copy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields { display: none !important; }

/* The whole checkout is one visual card, like a single-item purchase panel. */
body.woocommerce-checkout .moonshift-checkout-card {
  padding: 18px;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 26, 45, .06);
}

body.woocommerce-checkout .moonshift-checkout-express,
body.woocommerce-checkout .moonshift-checkout-details,
body.woocommerce-checkout .moonshift-checkout-payment-section { margin-top: 16px; }

body.woocommerce-checkout .moonshift-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

body.woocommerce-checkout .moonshift-section-title h1 {
  margin: 0;
  color: var(--ms-ink);
  font-size: 17px;
  font-weight: 800;
}

body.woocommerce-checkout .moonshift-section-title span {
  flex: 0 0 auto;
  color: var(--ms-copy);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Small caps section labels (Express checkout / Your details / Pay securely)
 * instead of full headings — keeps every section compact. */
body.woocommerce-checkout .moonshift-checkout-kicker {
  margin: 0 0 8px;
  color: var(--ms-copy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

body.woocommerce-checkout .moonshift-checkout-details .moonshift-checkout-kicker,
body.woocommerce-checkout .moonshift-checkout-payment-section .moonshift-checkout-kicker {
  text-align: left;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ms-line);
}

body.woocommerce-checkout .moonshift-order-card {
  padding: 10px 12px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-soft);
}

body.woocommerce-checkout .moonshift-order-product,
body.woocommerce-checkout .moonshift-order-row,
body.woocommerce-checkout .moonshift-order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ms-ink);
}

body.woocommerce-checkout .moonshift-order-product-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

body.woocommerce-checkout .moonshift-order-product-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background: #fff;
}

body.woocommerce-checkout .moonshift-order-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.woocommerce-checkout .moonshift-order-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body.woocommerce-checkout .moonshift-order-product-copy > span { color: var(--ms-copy); font-size: 11px; line-height: 1.35; }
body.woocommerce-checkout .moonshift-order-product-price {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
body.woocommerce-checkout .moonshift-order-product-price .woocommerce-Price-amount,
body.woocommerce-checkout .moonshift-order-product-price .woocommerce-Price-currencySymbol {
  white-space: nowrap;
}
body.woocommerce-checkout .moonshift-order-product { padding: 9px 0; }
body.woocommerce-checkout .moonshift-order-row,
body.woocommerce-checkout .moonshift-order-total { padding-top: 8px; margin-top: 0; border-top: 1px solid var(--ms-line); }

/* Native WooPayments/WooCommerce mount: do not reposition, clone, or force
 * child layout. Only the outer width/spacing is controlled here. */
body.woocommerce-checkout .moonshift-native-wallets {
  width: 100%;
  min-height: 0;
  margin: 0 auto;
}

body.woocommerce-checkout .moonshift-native-wallets:empty,
body.woocommerce-checkout .moonshift-checkout-express:not(:has(.moonshift-native-wallets > *)) { display: none; }

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper { width: 100%; margin: 0; }

body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout .woocommerce-billing-fields > h3 { display: none !important; }

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.woocommerce-checkout .form-row,
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last { float: none; width: 100%; margin: 0; padding: 0; }

body.woocommerce-checkout .form-row label {
  display: block;
  margin: 0 0 5px;
  color: #445066;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #cbd3df;
  border-radius: 8px;
  background: #fff;
  color: var(--ms-ink);
  font: 500 14px/44px system-ui, sans-serif;
  box-shadow: none;
}

body.woocommerce-checkout .select2-container { width: 100% !important; }
body.woocommerce-checkout .select2-selection__rendered { padding: 0 !important; line-height: 42px !important; color: var(--ms-ink) !important; }
body.woocommerce-checkout .select2-selection__arrow { top: 8px !important; right: 8px !important; }

body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.payment_methods > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-checkout #payment ul.payment_methods { list-style: none; }
body.woocommerce-checkout #payment ul.payment_methods > li > label { color: var(--ms-ink); font-weight: 800; }

body.woocommerce-checkout #payment .payment_box {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ms-ink);
}

body.woocommerce-checkout #payment .payment_box::before { display: none; }

/* The secure iframe remains provider-owned; only its safe outer mount is sized. */
body.woocommerce-checkout #payment .wc-payment-form,
body.woocommerce-checkout #payment .wcpay-upe-element,
body.woocommerce-checkout #payment .wcpay-payment-element,
body.woocommerce-checkout #payment .StripeElement {
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.woocommerce-checkout #payment .form-row.place-order { margin-top: 12px; }
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { color: var(--ms-copy); font-size: 11px; line-height: 1.5; }

body.woocommerce-checkout #place_order {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--ms-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(16, 26, 45, .14);
}

body.woocommerce-checkout #place_order::after {
  content: "\2193";
  display: inline-block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

body.woocommerce-checkout #place_order:hover::after,
body.woocommerce-checkout #place_order:focus-visible::after {
  transform: translateY(2px);
}

body.woocommerce-checkout .moonshift-checkout-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 12px 0 0;
  color: var(--ms-copy);
  font-size: 10.5px;
  line-height: 1.4;
}

body.woocommerce-checkout .moonshift-checkout-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.woocommerce-checkout .moonshift-checkout-assurance b { color: #24715e; font-weight: 900; }


@media (min-width: 480px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  body.woocommerce-checkout #billing_email_field,
  body.woocommerce-checkout #billing_country_field { grid-column: 1 / -1; }
}

@media (min-width: 641px) {
  body.woocommerce-checkout .moonshift-checkout-page { padding: 28px 20px 40px; }
  body.woocommerce-checkout .moonshift-checkout-card { padding: 26px; }
}