/* Token bridge: --t-* aliases for the WooCommerce checkout/order-received pages.
   --color-lexi-* come from tailwind.min.css (enqueued alongside this file by
   WooCommerceCheckoutAssets) but --t-* are normally scoped to
   [data-theme="theme-lexi"], which the WP theme pages don't carry. */
body.woocommerce-checkout {
  --t-bg:     var(--color-white);
  --t-fg:     var(--color-lexi-gray-900);
  --t-ln:     var(--color-lexi-gray-200);
  --t-mu:     var(--color-lexi-gray-50);
  --t-mu-fg:  var(--color-lexi-gray-500);
  --t-sf:     var(--color-lexi-gray-100);
  --t-ly:     var(--color-white);
  --t-pri:    var(--color-lexi-700);
  --t-pri-h:  var(--color-lexi-800);
  --t-pri-fg: var(--color-white);
  --t-sec:    var(--color-lexi-gray-950);
  --t-sec-fg: var(--color-white);
  /* WooCommerce Blocks uses --wp-admin-theme-color for radio/checkbox borders and
     focus rings; override it to dark slate so they match the checkout button palette
     instead of the WordPress default blue. */
  --wp-admin-theme-color: var(--t-sec);
}


/* Checkout login gate card — replaces the native WooCommerce must-login prompt.
   Hide the native prompt; our gate is injected above the checkout block via PHP. */
.wc-block-must-login-prompt {
  display: none !important;
}

/* Gate wrapper: fills the available viewport height so the card centers vertically. */
.lx-checkout-login-gate {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 40px 16px;
}

/* Card shell — design.md card-default: --t-ly bg, --t-ln border, 0.875rem radius. */
.lx-checkout-login-gate__card {
  background: var(--t-ly);
  border: 1px solid var(--t-ln);
  border-radius: 0.875rem;
  padding: 32px 28px 26px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--t-fg) 6%, transparent);
}

.lx-checkout-login-gate__logo {
  display: block;
  height: 14px !important;
  width: auto !important;
  margin: 0 auto 12px;
  opacity: 0.96;
}

/* design.md H5 — 1rem, 600, --t-fg */
.lx-checkout-login-gate__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--t-fg);
  margin: 0 0 8px;
  line-height: 1.3;
}

.lx-checkout-login-gate__body {
  font-size: 0.8125rem;
  color: var(--t-mu-fg);
  margin: 0 0 22px;
  line-height: 1.55;
}

/* Primary button — design.md button-primary: --t-sec bg, --t-sec-fg text */
.lx-checkout-login-gate__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 0.625rem;
  text-decoration: none;
  color: var(--t-sec-fg);
  background: var(--t-sec);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.lx-checkout-login-gate__google:hover {
  color: var(--color-teal-300);
  text-decoration: none;
}

.lx-checkout-login-gate__google img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.lx-checkout-login-gate__links {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  line-height: 1;
}

.lx-checkout-login-gate__link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--t-mu-fg);
  text-decoration: none;
  transition: color 0.15s;
  letter-spacing: 0.04em;
}

.lx-checkout-login-gate__link:hover {
  color: var(--t-fg);
}

.lx-checkout-login-gate__sep {
  color: var(--t-ln);
  font-size: 0.75rem;
  line-height: 1;
  padding-bottom: 1px;
}

.lx-checkout-login-gate__links-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--t-mu-fg);
  line-height: 1;
  white-space: nowrap;
  align-self: flex-end;
}

.lexi-checkout-topbar {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 0 16px;
}

.lexi-checkout-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}

.lexi-checkout-topbar__link:hover,
.lexi-checkout-topbar__link:focus,
.lexi-checkout-topbar__link:focus-visible {
  color: #111827;
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}

.lexi-checkout-topbar__logo {
  display: block;
  width: auto;
  height: 15px !important;
  flex: 0 0 auto;
}

.lexi-checkout-topbar__divider {
  color: #9ca3af;
  font-weight: 400;
}

.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
  border-radius: 0.75rem !important;
}

.wc-block-components-checkout-place-order-button {
  min-height: 56px;
  background-color: var(--t-sec) !important;
  color: var(--t-sec-fg) !important;
}

.wc-block-components-checkout-place-order-button:hover {
  color: var(--color-teal-300) !important;
}

.wc-block-components-totals-coupon {
  align-items: stretch !important;
  gap: 12px;
}

.wc-block-components-totals-coupon__input,
.wc-block-components-totals-coupon__button {
  min-height: 48px;
}

.wc-block-components-totals-coupon__input {
  margin: 0 !important;
}

.wc-block-components-totals-coupon__button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 20px !important;
  line-height: 1.2;
}

.wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading {
  display: none !important;
}

.wc-block-checkout__billing-fields .wc-block-components-checkout-step__description {
  display: none !important;
}

.wc-block-checkout__contact-fields {
  margin-bottom: 8px !important;
}

.wc-block-components-notice-banner,
.wc-block-components-validation-error,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: 0.875rem;
}

.wc-block-components-notice-banner,
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible,
.wc-block-components-notice-banner > .wc-block-components-button:focus,
.wc-block-components-notice-banner > .wc-block-components-button:focus-visible,
.components-snackbar-list__notice-container:focus,
.components-snackbar-list__notice-container:focus-visible,
.components-snackbar-list__notice:focus,
.components-snackbar-list__notice:focus-visible,
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-button:not(.is-link):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-components-notice-snackbar-list,
.wc-block-components-notices__snackbar {
  left: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-components-notice-snackbar-list:not(:has(.wc-block-components-notice-banner)),
.wc-block-components-notices__snackbar:empty,
.woocommerce.wc-block-store-notices.alignwide:has(> .woocommerce-notices-wrapper:empty) {
  display: none !important;
}

.components-snackbar-list__notice-container,
.components-snackbar-list__notice {
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-components-notice-banner.wc-block-components-notice-snackbar,
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
  padding-right: 8px !important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content p {
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.wc-block-components-notice-banner > .wc-block-components-button {
  margin-top: 1px !important;
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
}

.lexi-checkout-hidden-field {
  display: none !important;
}

.lexi-email-locked-field {
  position: relative;
}

.lexi-email-hover-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 7px 10px;
  border-radius: 0.375rem;
  background: #111827;
  color: #ffffff;
  font-size: 0.6875rem;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: normal;
}

.lexi-email-locked-field.lexi-tooltip-active .lexi-email-hover-tooltip,
.lexi-email-locked-field:focus-within .lexi-email-hover-tooltip {
  display: block;
}

.lexi-bacs-gateway-icon {
  max-height: 22px;
  width: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

#radio-control-wc-payment-method-options-bacs__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

#radio-control-wc-payment-method-options-bacs__label .wc-block-components-payment-method-icons {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

#radio-control-wc-payment-method-options-sepay__label {
  width: 100%;
}

#radio-control-wc-payment-method-options-sepay__label .lexi-sepay-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

#radio-control-wc-payment-method-options-sepay__label .lexi-sepay-label-text {
  display: block;
  width: 100%;
}

#radio-control-wc-payment-method-options-sepay__label .lexi-sepay-logo-row {
  display: block;
  width: calc(100% + 36px);
  margin: 0 0 0 -36px;
}

#radio-control-wc-payment-method-options-sepay__label .lexi-sepay-logo-row img {
  display: block;
  max-width: min(100%, 420px);
  height: auto;
  margin: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
  width: 36px !important;
  height: 36px !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
  object-fit: contain;
  border-radius: 8px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
  min-width: 36px !important;
  flex: 0 0 36px !important;
}

.wc-block-components-order-summary-item__quantity {
  transform: scale(0.85);
  transform-origin: top right;
}

/* Payment method radio: WC checkout.css sets border/outline via currentColor which
   inherits a blue from the page. Override border-color and outline directly instead
   of fighting currentColor inheritance. Selector mirrors WC's own to beat specificity. */
body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
  border-color: var(--t-ln) !important;
}

body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: var(--t-fg) !important;
}

/* tailwind.min.css has input:where([type=radio]):focus { box-shadow: <blue ring> }
   via --tw-ring-color: oklch(54.6% .245 262.881). Kill it here. */
body.woocommerce-checkout input[type="radio"]:focus,
body.woocommerce-checkout input[type="radio"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

#radio-control-wc-payment-method-options-sepay {
  top: 16px !important;
  transform: none !important;
}

label[for="radio-control-wc-payment-method-options-sepay"].wc-block-components-radio-control__option,
label[for="radio-control-wc-payment-method-options-sepay"] .wc-block-components-radio-control__option-layout,
label[for="radio-control-wc-payment-method-options-sepay"] .wc-block-components-radio-control__label-group {
  align-items: flex-start !important;
}

/* Order-received page: SePay gateway section (bank-transfer card, generated by
   the third-party SePay plugin at woocommerce_thankyou_sepay). The section
   reorder (QR card first, instructions second, native order content last) is
   done in JS (checkout-block-behavior.js, reorderSepayOrderReceivedSections)
   because the block-based Order Confirmation template renders these as
   separate sibling blocks under <main> with no shared flex wrapper -- there
   is no CSS-only way to move .payment-instructions out of the "status" block
   it's nested in. This section only carries the visual restyle. */

/* SePay card shell: design.md card rules (shell radius 0.875rem, --t-ly bg, --t-ln border).
   Darker border + subtle shadow to give the card more presence on the order-received page. */
.woocommerce-sepay-bank-details {
  border-radius: 0.875rem !important;
  border-color: color-mix(in srgb, var(--t-ln) 45%, var(--t-fg)) !important;
  background-color: var(--t-ly) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--t-fg) 7%, transparent), 0 1px 3px color-mix(in srgb, var(--t-fg) 4%, transparent) !important;
}

.woocommerce-sepay-bank-details .box-title {
  border-color: var(--t-ln) !important;
  color: var(--t-fg);
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

.woocommerce-sepay-bank-details .qr-title,
.woocommerce-sepay-bank-details .manual-title {
  font-size: 0.875rem !important;
}

.woocommerce-sepay-bank-details .bank-info-row {
  border-color: var(--t-ln);
}

.woocommerce-sepay-bank-details .bank-info-cell {
  color: var(--t-fg);
  font-size: 0.875rem !important;
}

/* Manual-transfer note: design.md feedback shell (--t-sf surface, 0.875rem radius). */
.woocommerce-sepay-bank-details .note {
  background-color: var(--t-sf) !important;
  border-radius: 0.875rem;
  color: var(--t-fg) !important;
  font-size: 0.8125rem !important;
}

.woocommerce-sepay-bank-details .sepay-pay-footer {
  font-size: 0.8125rem !important;
  color: var(--t-mu-fg) !important;
}

/* QR download button: design.md button-primary (--t-sec bg, --t-sec-fg text). */
.woocommerce-sepay-bank-details .button-qr {
  background-color: var(--t-sec) !important;
  color: var(--t-sec-fg) !important;
  border-radius: 0.625rem !important;
}

.woocommerce-sepay-bank-details .button-qr:hover {
  color: var(--color-teal-300) !important;
}

/* Cover the "SePay" wordmark banner on top of the SePay-generated QR image with
   the LexiBot logo. The QR image (qr.sepay.vn/img?...&template=compact) is one
   flat 540x540 external image with three fixed bands: a SePay logo banner at
   the top, the scannable QR code in the middle (with its own small decorative
   center watermark, left untouched -- covering *that* isn't what was
   requested and isn't the SePay brand mark), and bank/napas/VietQR logos at
   the bottom. This can't be edited server-side, so it's a CSS overlay, not a
   logo swap. Measured directly from the actual 540x540 PNG: the logo content
   only spans rows 11-74 (2%-13.7%) and columns 169-370 (31.3%-68.5%); the
   decorative green corner brackets (.qr-top-border, drawn by sepay.css) run
   along the outer 30% of each edge; the blue QR frame starts at row 85
   (15.7%). The cover is sized/centered to the logo's actual footprint (not
   full width/height) so it doesn't touch the corner brackets or the QR frame. */
.woocommerce-sepay-bank-details .qr-element {
  overflow: hidden;
}

.woocommerce-sepay-bank-details .qr-element::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 14%;
  background-color: var(--t-bg, #fff);
  background-image: url("../images/logos/lexibot-logo-v2-light-mode.svg");
  background-size: 100px auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* Order-received page: typography + card treatment for the native
   order-confirmation blocks (title, order summary, order details table,
   billing address). This used to get ad-hoc borders/spacing from a legacy
   WPCodeBox "Front-end CSS" snippet; now that it's disabled, design.md tokens
   fill the gap instead of restoring the old hardcoded look. Sizes match the
   compact H5 scale already used for checkout step headings, not marketing
   H1/H2 sizes -- this is an App UI receipt, not a landing page. */
body.woocommerce-order-received main.wp-block-group > * {
  margin-bottom: 24px;
}

body.woocommerce-order-received main.wp-block-group > *:last-child {
  margin-bottom: 0;
}

body.woocommerce-order-received .wc-block-order-confirmation-status h1 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--t-fg);
  margin: 0 0 4px;
}

body.woocommerce-order-received .wc-block-order-confirmation-status > p {
  font-size: 0.875rem;
  color: var(--t-mu-fg);
  margin: 0;
}

body.woocommerce-order-received .wp-block-heading {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--t-fg) !important;
  margin: 0 0 12px;
}

/* Order summary (Order #, Date, Total, Email, Payment method) as a quiet
   surface list, matching design.md's --t-sf grouped-surface rule. */
body.woocommerce-order-received .wc-block-order-confirmation-summary-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 0;
  padding: 16px;
  background: var(--t-sf);
  border-radius: 0.875rem;
}

body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
  font-size: 0.75rem;
  color: var(--t-mu-fg);
}

body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--t-fg);
}

/* Order details table: design.md shell radius (0.875rem) + --t-ln dividers. */
body.woocommerce-order-received .wc-block-order-confirmation-totals__table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
  border: 1px solid var(--t-ln);
  border-radius: 0.875rem;
  overflow: hidden;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--t-ln);
  color: var(--t-fg);
  text-align: left;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table th:last-child,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td:last-child {
  text-align: right;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
  background: var(--t-sf);
  font-weight: 600;
}

body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child td,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child th {
  border-bottom: none;
  font-weight: 700;
}

/* BACS gateway: "Complete Your Payment" card on the order-received page.
   Rendered by WooCommerceCheckoutContent::get_en_bacs_instructions_html()
   via woocommerce_before_thankyou, so it sits above the native confirmation
   blocks. Matches the card-default shell (--t-ly, --t-ln, 0.875rem) used by
   the billing address and order summary blocks below it. */
#lx-bmc-payment-steps {
  background: var(--t-ly);
  border: 1px solid color-mix(in srgb, var(--t-ln) 45%, var(--t-fg));
  border-radius: 0.875rem;
  padding: 24px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--t-fg) 7%, transparent), 0 1px 3px color-mix(in srgb, var(--t-fg) 4%, transparent);
}

.lx-bmc__card-image {
  display: block;
  margin: 0 auto 8px;
  height: 18px;
  max-height: 18px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.lx-bmc__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--t-fg);
  margin: 0 0 32px;
  text-align: center;
}

.lx-bmc__steps {
  display: flex;
  flex-direction: column;
}

.lx-bmc__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--t-ln);
}

.lx-bmc__step:first-child {
  border-top: none;
  padding-top: 0;
}

.lx-bmc__step:last-child {
  padding-bottom: 0;
}

.lx-bmc__step-number {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--t-pri);
  color: var(--t-pri-fg);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.lx-bmc__step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lx-bmc__step-heading {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--t-fg);
  margin: 0;
  line-height: 1.4;
}

.lx-bmc__amount-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lx-bmc__total-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--t-pri);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lx-bmc__step-description {
  font-size: 0.875rem;
  color: var(--t-mu-fg);
  margin: 0;
  line-height: 1.55;
}

.lx-bmc__note {
  margin-top: 0;
  padding: 10px 14px;
  background: var(--t-sf);
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  color: var(--t-fg);
  line-height: 1.55;
}

/* Shared button base for BACS section */
.lx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lx-btn .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
}

/* button-outline for Copy and BMC buttons */
.lx-btn--copy,
.lx-btn--bmc {
  background: transparent;
  color: var(--t-fg);
  border: 1px solid var(--t-ln);
}

.lx-btn--copy:hover,
.lx-btn--bmc:hover {
  background: var(--t-mu);
  color: var(--t-fg);
  text-decoration: none;
}

.lx-btn--copy.lx-btn--copied {
  color: var(--t-pri);
  border-color: var(--t-pri);
}

/* button-outline for the home step link */
.lx-btn--home {
  background: transparent;
  color: var(--t-fg);
  border: 1px solid var(--t-ln);
}

.lx-btn--home:hover {
  background: var(--t-mu);
  color: var(--t-fg);
  text-decoration: none;
}

/* PayPal credit-card form loading shimmer.
   Appended to <body> with position:fixed so it sits above PayPal's iframe
   compositing layers. A teal gradient sweep runs left-to-right over the full
   payment option block while the card-form iframes are mounting. */
#lexi-paypal-loading-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  border-radius: 0.875rem;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--t-bg) 62%, transparent);
}

#lexi-paypal-loading-overlay.lexi-paypal-loading--visible {
  display: block;
}

#lexi-paypal-loading-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    color-mix(in srgb, var(--t-pri) 18%, transparent) 45%,
    color-mix(in srgb, var(--t-pri) 28%, transparent) 50%,
    color-mix(in srgb, var(--t-pri) 18%, transparent) 55%,
    transparent 80%
  );
  background-size: 250% 100%;
  animation: lexi-shimmer 1.8s ease-in-out infinite;
}

@keyframes lexi-shimmer {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* PayPal (ppcp) order-received success card. */
.lx-payment-success {
  margin-bottom: 40px;
}

.lx-payment-success__card {
  background: var(--t-ly);
  border: 1px solid color-mix(in srgb, var(--t-ln) 45%, var(--t-fg));
  border-radius: 0.875rem;
  padding: 32px 28px 28px;
  max-width: 48rem;
  margin: 0 auto;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--t-fg) 7%, transparent), 0 1px 3px color-mix(in srgb, var(--t-fg) 4%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lx-payment-success__icon-container {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-green-500) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.lx-payment-success__icon {
  font-size: 32px;
  color: var(--color-green-500);
}

.lx-payment-success .lx-payment-success__title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--t-fg);
  margin: 0 0 8px;
  line-height: 1.3;
}

.lx-payment-success .lx-payment-success__message {
  font-size: 0.9375rem;
  color: var(--t-mu-fg);
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

.lx-payment-success__content {
  width: 100%;
}

.lx-payment-success__divider {
  border-top: 1px solid var(--t-ln);
  margin: 20px 0;
}

.lx-payment-success__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lx-payment-success__info-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
}

.lx-payment-success__info-icon {
  font-size: 18px;
  color: var(--t-pri);
  flex-shrink: 0;
  margin-top: 1px;
}

.lx-payment-success__text {
  font-size: 0.875rem;
  color: var(--t-fg);
  margin: 0;
  line-height: 1.6;
}

.lx-payment-success__highlight {
  color: var(--t-pri);
  font-weight: 600;
}

.lx-payment-success__link {
  color: var(--t-pri);
  text-decoration: none;
}

.lx-payment-success__link:hover {
  text-decoration: underline;
}

.lx-payment-success__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 10px 20px;
  background: var(--t-pri);
  color: var(--t-pri-fg);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.lx-payment-success__button:hover {
  background: var(--t-pri-h);
  color: var(--t-pri-fg);
  text-decoration: none;
}

.lx-payment-success__button-icon {
  font-size: 18px;
}

/* Billing address: hidden for SePay, BACS, and PayPal order-received flows. */
body.woocommerce-order-received:has(.woocommerce-sepay-bank-details) .wc-block-order-confirmation-address-wrapper,
body.woocommerce-order-received:has(#lx-bmc-payment-steps) .wc-block-order-confirmation-address-wrapper,
body.woocommerce-order-received:has(.lx-payment-success) .wc-block-order-confirmation-address-wrapper {
  display: none;
}

/* Billing address: design.md card-default (--t-ly bg, --t-ln border). */
body.woocommerce-order-received .wc-block-order-confirmation-billing-address {
  background: var(--t-ly);
  border: 1px solid var(--t-ln);
  border-radius: 0.875rem;
  padding: 16px;
  font-size: 0.875rem;
  color: var(--t-fg);
  line-height: 1.6;
}

/* Checkout trust/warranty accordion below the order summary sidebar.
   Intentionally quiet: muted text, no card shell, just divider lines so it
   doesn't compete with the main checkout form or order totals. */
.lx-checkout-trust {
  border-top: 1px solid var(--t-ln);
  padding: 0 2px;
}

.lx-checkout-trust__item {
  border-bottom: 1px solid var(--t-ln);
  outline: none;
}

.lx-checkout-trust__item:last-child {
  border-bottom: none;
}

.lx-checkout-trust__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  color: var(--t-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  user-select: none;
  outline: none;
}

.lx-checkout-trust__summary::-webkit-details-marker {
  display: none;
}

.lx-checkout-trust__summary:focus,
.lx-checkout-trust__summary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.lx-checkout-trust__label {
  flex: 1;
}

.lx-checkout-trust__chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -2px;
}

.lx-checkout-trust__item[open] > .lx-checkout-trust__summary .lx-checkout-trust__chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.lx-checkout-trust__body {
  padding: 0 0 10px;
  font-size: 0.8125rem;
  color: var(--t-mu-fg);
  line-height: 1.6;
}

.lx-checkout-trust__body p {
  margin: 0 0 6px;
}

.lx-checkout-trust__body p:last-child {
  margin-bottom: 0;
}

.lx-checkout-trust__body a {
  color: var(--t-mu-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lx-checkout-trust__body a:hover {
  color: var(--t-fg);
}

.wc-block-components-radio-control__label {
  font-weight: 500 !important;
}

.wc-block-components-radio-control-accordion-content {
  font-size: 0.8125rem !important;
  color: var(--t-mu-fg);
}

.wc-block-components-product-badge,
.wc-block-components-sale-badge,
.wc-block-cart-item__prices {
  display: none !important;
}