/*
 * BrewmyApp — Mobile Checkout Beautifier v2
 * Injected on WooCommerce checkout / pay-for-order pages
 * when accessed from the BrewmyApp mobile WebView.
 *
 * Creates a polished, native-app-like checkout experience
 * by hiding site chrome and restyling the payment form.
 */

/* ─── Variables ──────────────────────────────── */
:root {
  --bma-primary: #111827;
  --bma-primary-light: #1f2937;
  --bma-primary-hover: #374151;
  --bma-accent: #4f46e5;
  --bma-success: #16a34a;
  --bma-success-light: #dcfce7;
  --bma-danger: #ef4444;
  --bma-danger-light: #fef2f2;
  --bma-warning: #f59e0b;
  --bma-warning-light: #fffbeb;
  --bma-info: #3b82f6;
  --bma-info-light: #eff6ff;
  --bma-bg: #f4f5f7;
  --bma-card: #ffffff;
  --bma-text: #111827;
  --bma-text-secondary: #4b5563;
  --bma-muted: #9ca3af;
  --bma-border: #f0f1f3;
  --bma-border-light: #f7f8f9;
  --bma-radius: 14px;
  --bma-radius-sm: 10px;
  --bma-radius-xs: 6px;
  --bma-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --bma-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --bma-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --bma-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bma-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset & Base ───────────────────────────── */
body.bma-mobile-checkout {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--bma-font) !important;
  background: var(--bma-bg) !important;
  color: var(--bma-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
  /* Fix admin bar offset */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.bma-mobile-checkout * {
  box-sizing: border-box !important;
}

/* ─── Hide ALL Site Chrome ───────────────────── */
body.bma-mobile-checkout header,
body.bma-mobile-checkout .site-header,
body.bma-mobile-checkout .site-footer,
body.bma-mobile-checkout footer,
body.bma-mobile-checkout nav:not(#payment),
body.bma-mobile-checkout .main-navigation,
body.bma-mobile-checkout .site-navigation,
body.bma-mobile-checkout .nav-menu,
body.bma-mobile-checkout .navbar,
body.bma-mobile-checkout .top-bar,
body.bma-mobile-checkout .header-inner,
body.bma-mobile-checkout .footer-inner,
body.bma-mobile-checkout .sidebar,
body.bma-mobile-checkout #sidebar,
body.bma-mobile-checkout aside,
body.bma-mobile-checkout .widget-area,
body.bma-mobile-checkout .breadcrumb,
body.bma-mobile-checkout .breadcrumbs,
body.bma-mobile-checkout .woocommerce-breadcrumb,
body.bma-mobile-checkout .site-branding,
body.bma-mobile-checkout .menu-toggle,
body.bma-mobile-checkout .back-to-top,
body.bma-mobile-checkout .scroll-to-top,
body.bma-mobile-checkout .cookie-notice,
body.bma-mobile-checkout #cookie-notice,
body.bma-mobile-checkout .announcement-bar,
body.bma-mobile-checkout .storefront-handheld-footer-bar,
body.bma-mobile-checkout .storefront-breadcrumb,
body.bma-mobile-checkout .storefront-sorting,
body.bma-mobile-checkout .related,
body.bma-mobile-checkout .up-sells,
body.bma-mobile-checkout .cross-sells,
body.bma-mobile-checkout .wp-block-woocommerce-cart-cross-sells-block,
body.bma-mobile-checkout .ast-site-header-wrap,
body.bma-mobile-checkout .ast-above-header-wrap,
body.bma-mobile-checkout .ast-below-header-wrap,
body.bma-mobile-checkout #ast-desktop-header,
body.bma-mobile-checkout #ast-mobile-header,
body.bma-mobile-checkout .ast-footer-overlay,
body.bma-mobile-checkout .site-above-footer-wrap,
body.bma-mobile-checkout .site-below-footer-wrap,
body.bma-mobile-checkout .ast-small-footer,
body.bma-mobile-checkout .ksuspended-note,
body.bma-mobile-checkout .elementor-location-header,
body.bma-mobile-checkout .elementor-location-footer,
body.bma-mobile-checkout #colophon,
body.bma-mobile-checkout .admin-bar #wpadminbar,
body.bma-mobile-checkout #masthead,
body.bma-mobile-checkout .wp-site-blocks>header,
body.bma-mobile-checkout .wp-site-blocks>footer,
body.bma-mobile-checkout .kadence-pro-header,
body.bma-mobile-checkout .site-header-wrap,
body.bma-mobile-checkout .site-footer-wrap,
body.bma-mobile-checkout .fl-page-header,
body.bma-mobile-checkout .fl-page-footer,
body.bma-mobile-checkout #shopkeeper-header,
body.bma-mobile-checkout .flatsome-header,
body.bma-mobile-checkout .header-wrapper,
body.bma-mobile-checkout .footer-wrapper,
body.bma-mobile-checkout .wc-block-breadcrumbs,
body.bma-mobile-checkout .wp-block-breadcrumbs,
body.bma-mobile-checkout [data-block-name="woocommerce/breadcrumbs"],
body.bma-mobile-checkout .woocommerce-form-coupon-toggle,
body.bma-mobile-checkout .woocommerce-form-login-toggle,
body.bma-mobile-checkout .woocommerce-additional-fields {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─── Full-Width Layout ──────────────────────── */
body.bma-mobile-checkout #page,
body.bma-mobile-checkout .site,
body.bma-mobile-checkout #content,
body.bma-mobile-checkout .site-content,
body.bma-mobile-checkout .content-area,
body.bma-mobile-checkout main,
body.bma-mobile-checkout .site-main,
body.bma-mobile-checkout .entry-content,
body.bma-mobile-checkout .page .entry-content,
body.bma-mobile-checkout .ast-container,
body.bma-mobile-checkout .elementor-section-wrap,
body.bma-mobile-checkout .wp-site-blocks {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

/* ─── Hide Page Titles ───────────────────────── */
body.bma-mobile-checkout .woocommerce>h2,
body.bma-mobile-checkout .woocommerce>h1,
body.bma-mobile-checkout .entry-title,
body.bma-mobile-checkout .page-title,
body.bma-mobile-checkout .post-title,
body.bma-mobile-checkout .woocommerce-order-pay>h2,
body.bma-mobile-checkout .ast-archive-description,
body.bma-mobile-checkout .woocommerce-checkout>h1,
body.bma-mobile-checkout .woocommerce-checkout>h2,
body.bma-mobile-checkout .entry-content>h1,
body.bma-mobile-checkout .entry-content>h2,
body.bma-mobile-checkout .content-area>h1,
body.bma-mobile-checkout .site-main>h1,
body.bma-mobile-checkout .wp-block-post-title,
body.bma-mobile-checkout .page-header,
body.bma-mobile-checkout h1.wp-block-heading,
body.bma-mobile-checkout .wc-block-store-notices {
  display: none !important;
}

body.bma-mobile-checkout .entry-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ─── Main Container ─────────────────────────── */
body.bma-mobile-checkout .woocommerce {
  max-width: 100% !important;
  padding: 16px !important;
  padding-top: 20px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 24px) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  animation: bma-fade-in 0.35s ease-out !important;
}


/* ══════════════════════════════════════════════
   ORDER SUMMARY / REVIEW TABLE
   ══════════════════════════════════════════════ */

/* Section label above order table */
body.bma-mobile-checkout .woocommerce #order_review_heading,
body.bma-mobile-checkout .woocommerce h3#order_review_heading {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--bma-muted) !important;
  margin: 0 0 8px 4px !important;
  padding: 0 !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  box-shadow: var(--bma-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

/* Always hide table header in WebView (always mobile) */
body.bma-mobile-checkout .woocommerce table.shop_table thead {
  display: none !important;
}

/* Force stacked block layout for all table elements */
body.bma-mobile-checkout .woocommerce table.shop_table,
body.bma-mobile-checkout .woocommerce table.shop_table tbody {
  display: block !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tbody tr {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tbody tr:last-child {
  border-bottom: none !important;
}

/* Table cells — inline block inside flex row */
body.bma-mobile-checkout .woocommerce table.shop_table td {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--bma-text) !important;
  vertical-align: middle !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table td.product-name {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  padding-right: 12px !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table td.product-total {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--bma-text) !important;
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Product name */
body.bma-mobile-checkout .woocommerce table.shop_table .product-name {
  font-weight: 600 !important;
  color: var(--bma-text) !important;
  line-height: 1.4 !important;
}

/* Variation info */
body.bma-mobile-checkout .woocommerce table.shop_table .product-name .variation {
  display: block !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--bma-muted) !important;
  margin-top: 4px !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table .product-name .variation dt,
body.bma-mobile-checkout .woocommerce table.shop_table .product-name .variation dd {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table .product-name .variation dt::after {
  content: " " !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table .product-name .variation dd p {
  display: inline !important;
  margin: 0 !important;
}

/* Quantity x indicator — compact pill badge */
body.bma-mobile-checkout .woocommerce table.shop_table .product-name strong.product-quantity {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bma-text-secondary) !important;
  background: #f0f1f3 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

/* If theme uses a separate quantity column, collapse it */
body.bma-mobile-checkout .woocommerce table.shop_table td.product-quantity {
  display: none !important;
}

/* Tfoot — stacked flex rows for subtotal/shipping/total */
body.bma-mobile-checkout .woocommerce table.shop_table tfoot {
  display: block !important;
  border-top: 1px solid #eef0f2 !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr:last-child {
  border-bottom: none !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot th {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bma-text-secondary) !important;
  background: transparent !important;
  text-align: left !important;
  width: auto !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot td {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bma-text) !important;
  text-align: right !important;
  width: auto !important;
}

/* Grand total row — emphasized but clean */
body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr.order-total {
  border-top: 1.5px solid #d1d5db !important;
  border-bottom: none !important;
  padding: 13px 16px !important;
  margin-top: 2px !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr.order-total th {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bma-text) !important;
}

body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr.order-total td {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bma-text) !important;
}

/* Product thumbnails */
body.bma-mobile-checkout .woocommerce table.shop_table .product-thumbnail img,
body.bma-mobile-checkout .woocommerce table.shop_table td img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: var(--bma-radius-xs) !important;
  border: 1px solid #eef0f2 !important;
}


/* ══════════════════════════════════════════════
   PAYMENT METHODS
   ══════════════════════════════════════════════ */

/* Section label injected by JS */
body.bma-mobile-checkout .bma-section-label--payment {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--bma-muted) !important;
  margin: 6px 0 8px 4px !important;
}

body.bma-mobile-checkout #payment {
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  border: none !important;
  box-shadow: var(--bma-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

body.bma-mobile-checkout #payment .payment_methods {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  list-style: none !important;
}

body.bma-mobile-checkout #payment .payment_methods li {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
  list-style: none !important;
  transition: background var(--bma-transition) !important;
}

body.bma-mobile-checkout #payment .payment_methods li:last-child {
  border-bottom: none !important;
}

/* Highlight selected payment method row */
body.bma-mobile-checkout #payment .payment_methods li:has(input[type="radio"]:checked) {
  background: #f8f9fb !important;
}

body.bma-mobile-checkout #payment .payment_methods li label {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bma-text) !important;
  transition: background var(--bma-transition) !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.bma-mobile-checkout #payment .payment_methods li label:active {
  background: var(--bma-border-light) !important;
}

body.bma-mobile-checkout #payment .payment_methods li label img {
  max-height: 24px !important;
  width: auto !important;
  border-radius: 4px !important;
}

/* Custom radio buttons */
body.bma-mobile-checkout #payment .payment_methods li input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 50% !important;
  background: var(--bma-card) !important;
  margin: 0 0 0 16px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all var(--bma-transition) !important;
  align-self: center !important;
}

body.bma-mobile-checkout #payment .payment_methods li input[type="radio"]:checked {
  border-color: var(--bma-primary) !important;
  border-width: 2px !important;
}

body.bma-mobile-checkout #payment .payment_methods li input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--bma-primary) !important;
  animation: bma-radio-pop 0.2s ease-out !important;
}

@keyframes bma-radio-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  60% {
    transform: translate(-50%, -50%) scale(1.15);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Payment method description / card form area */
body.bma-mobile-checkout #payment .payment_methods li .payment_box {
  flex-basis: 100% !important;
  padding: 0 16px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 12px !important;
  color: var(--bma-text-secondary) !important;
  line-height: 1.5 !important;
}

body.bma-mobile-checkout #payment .payment_methods li .payment_box::before {
  display: none !important;
}

body.bma-mobile-checkout #payment .payment_methods li .payment_box p {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}

body.bma-mobile-checkout #payment .payment_methods li .payment_box p:last-child {
  margin-bottom: 0 !important;
}


/* ══════════════════════════════════════════════
   PAY / PLACE ORDER BUTTON
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout #payment .place-order,
body.bma-mobile-checkout #payment .form-row.place-order {
  padding: 14px 16px 16px !important;
  margin: 0 !important;
  background: var(--bma-card) !important;
  border-top: 1px solid var(--bma-border-light) !important;
}

body.bma-mobile-checkout #place_order,
body.bma-mobile-checkout #payment #place_order,
body.bma-mobile-checkout .woocommerce #payment #place_order,
body.bma-mobile-checkout button.button.alt,
body.bma-mobile-checkout .woocommerce-checkout-payment button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--bma-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--bma-radius-sm) !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--bma-font) !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  transition: all var(--bma-transition) !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.2) !important;
  -webkit-tap-highlight-color: transparent !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

body.bma-mobile-checkout #place_order::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

body.bma-mobile-checkout #place_order:active,
body.bma-mobile-checkout button.button.alt:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.2) !important;
}

/* Disabled state */
body.bma-mobile-checkout #place_order[disabled],
body.bma-mobile-checkout #place_order.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}


/* ══════════════════════════════════════════════
   TERMS & CONDITIONS
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper {
  padding: 0 18px 14px !important;
  margin: 0 !important;
}

body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper p {
  font-size: 12px !important;
  color: var(--bma-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 6px 0 !important;
}

body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: var(--bma-text-secondary) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body.bma-mobile-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px !important;
  color: var(--bma-text-secondary) !important;
}

/* Terms checkbox */
body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 5px !important;
  background: var(--bma-card) !important;
  margin: 0 8px 0 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: all var(--bma-transition) !important;
}

body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
  background: var(--bma-primary) !important;
  border-color: var(--bma-primary) !important;
}

body.bma-mobile-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 6px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}


/* ══════════════════════════════════════════════
   FORM INPUTS (for gateways showing fields)
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout #payment .form-row input[type="text"],
body.bma-mobile-checkout #payment .form-row input[type="number"],
body.bma-mobile-checkout #payment .form-row input[type="tel"],
body.bma-mobile-checkout #payment .form-row input[type="email"],
body.bma-mobile-checkout #payment .form-row input[type="password"],
body.bma-mobile-checkout #payment .form-row select,
body.bma-mobile-checkout .woocommerce-checkout input[type="text"],
body.bma-mobile-checkout .woocommerce-checkout input[type="tel"],
body.bma-mobile-checkout .woocommerce-checkout input[type="email"],
body.bma-mobile-checkout .woocommerce-checkout input[type="password"],
body.bma-mobile-checkout .woocommerce-checkout select {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #e2e5ea !important;
  border-radius: var(--bma-radius-sm) !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  font-family: var(--bma-font) !important;
  color: var(--bma-text) !important;
  background: var(--bma-card) !important;
  box-sizing: border-box !important;
  transition: border-color var(--bma-transition), box-shadow var(--bma-transition) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body.bma-mobile-checkout #payment .form-row input:focus,
body.bma-mobile-checkout .woocommerce-checkout input:focus,
body.bma-mobile-checkout .woocommerce-checkout select:focus {
  border-color: var(--bma-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

body.bma-mobile-checkout #payment .form-row label:not([for="payment_method"]),
body.bma-mobile-checkout .woocommerce-checkout .form-row>label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bma-text-secondary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}


/* ══════════════════════════════════════════════
   NOTICES & ALERTS
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .woocommerce-error,
body.bma-mobile-checkout .woocommerce-message,
body.bma-mobile-checkout .woocommerce-info,
body.bma-mobile-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.bma-mobile-checkout .wc-block-components-notice-banner {
  border-radius: var(--bma-radius-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  list-style: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

body.bma-mobile-checkout .woocommerce-error {
  background: var(--bma-danger-light) !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

body.bma-mobile-checkout .woocommerce-message {
  background: var(--bma-success-light) !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

body.bma-mobile-checkout .woocommerce-info {
  background: var(--bma-info-light) !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
}

body.bma-mobile-checkout .woocommerce-error::before,
body.bma-mobile-checkout .woocommerce-message::before,
body.bma-mobile-checkout .woocommerce-info::before {
  display: none !important;
}

body.bma-mobile-checkout .woocommerce-error li,
body.bma-mobile-checkout .woocommerce-message li {
  list-style: none !important;
}


/* ══════════════════════════════════════════════
   ORDER RECEIVED / THANK YOU PAGE
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .woocommerce-thankyou-order-received,
body.bma-mobile-checkout .woocommerce-order-received .woocommerce>p:first-of-type {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4) !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: var(--bma-radius) !important;
  padding: 24px 20px !important;
  margin-bottom: 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #065f46 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

body.bma-mobile-checkout .woocommerce-order-details,
body.bma-mobile-checkout .woocommerce-customer-details {
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  box-shadow: var(--bma-shadow-md) !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

body.bma-mobile-checkout .woocommerce-order-details h2,
body.bma-mobile-checkout .woocommerce-customer-details h2,
body.bma-mobile-checkout .woocommerce-order-details__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--bma-text-secondary) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
}

/* Order overview key-value pairs */
body.bma-mobile-checkout .woocommerce-order-overview {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  box-shadow: var(--bma-shadow-md) !important;
  overflow: hidden !important;
}

body.bma-mobile-checkout .woocommerce-order-overview li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
  font-size: 14px !important;
  color: var(--bma-text-secondary) !important;
}

body.bma-mobile-checkout .woocommerce-order-overview li:last-child {
  border-bottom: none !important;
}

body.bma-mobile-checkout .woocommerce-order-overview li strong {
  color: var(--bma-text) !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════
   LOADING / SPINNER (WC blockUI)
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 1 !important;
}

body.bma-mobile-checkout .wc-block-components-spinner,
body.bma-mobile-checkout .loader,
body.bma-mobile-checkout .blockUI.blockMsg::before {
  border-color: var(--bma-border) !important;
  border-top-color: var(--bma-primary) !important;
}


/* ══════════════════════════════════════════════
   WOOCOMMERCE BLOCK CHECKOUT
   (for sites using new block-based checkout)
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .wp-block-woocommerce-checkout {
  padding: 16px !important;
  max-width: 100% !important;
}

body.bma-mobile-checkout .wc-block-checkout__main,
body.bma-mobile-checkout .wc-block-checkout__sidebar {
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

body.bma-mobile-checkout .wc-block-checkout__sidebar {
  order: -1 !important;
  margin-bottom: 16px !important;
}

body.bma-mobile-checkout .wc-block-components-checkout-step {
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  box-shadow: var(--bma-shadow-md) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
  border: none !important;
}

body.bma-mobile-checkout .wc-block-components-checkout-step__heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bma-text) !important;
  letter-spacing: 0.2px !important;
}

body.bma-mobile-checkout .wc-block-components-checkout-step__description {
  font-size: 13px !important;
  color: var(--bma-text-secondary) !important;
}

body.bma-mobile-checkout .wc-block-components-button {
  background: var(--bma-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bma-radius-sm) !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.25) !important;
  transition: all var(--bma-transition) !important;
}

body.bma-mobile-checkout .wc-block-components-button:active {
  transform: scale(0.98) !important;
}

/* Block radio buttons */
body.bma-mobile-checkout .wc-block-components-radio-control__option {
  padding: 14px 16px !important;
}

body.bma-mobile-checkout .wc-block-components-radio-control__input {
  border-color: var(--bma-border) !important;
}

body.bma-mobile-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--bma-primary) !important;
  background: var(--bma-primary) !important;
}

/* Block text inputs */
body.bma-mobile-checkout .wc-block-components-text-input input {
  border: 1.5px solid var(--bma-border) !important;
  border-radius: var(--bma-radius-sm) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}

body.bma-mobile-checkout .wc-block-components-text-input input:focus {
  border-color: var(--bma-primary) !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

/* Block order summary */
body.bma-mobile-checkout .wc-block-components-order-summary {
  background: var(--bma-card) !important;
  border-radius: var(--bma-radius) !important;
  box-shadow: var(--bma-shadow-md) !important;
  overflow: hidden !important;
}


/* ══════════════════════════════════════════════
   SAVED PAYMENT METHODS
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .woocommerce-SavedPaymentMethods {
  list-style: none !important;
  border: 1px solid #eef0f2 !important;
  border-radius: var(--bma-radius-sm) !important;
  overflow: hidden !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

body.bma-mobile-checkout .woocommerce-SavedPaymentMethods li {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--bma-border-light) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.bma-mobile-checkout .woocommerce-SavedPaymentMethods li:last-child {
  border-bottom: none !important;
}

body.bma-mobile-checkout .woocommerce-SavedPaymentMethods li label {
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  color: var(--bma-text) !important;
}


/* ══════════════════════════════════════════════
   PRIVACY POLICY / LEGAL TEXT
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: var(--bma-muted) !important;
  line-height: 1.6 !important;
}

body.bma-mobile-checkout .woocommerce-privacy-policy-text a {
  color: var(--bma-text-secondary) !important;
  text-underline-offset: 2px !important;
}


/* ══════════════════════════════════════════════
   HR / DIVIDERS
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout hr {
  border: none !important;
  border-top: 1px solid var(--bma-border-light) !important;
  margin: 16px 0 !important;
}


/* ══════════════════════════════════════════════
   RESPONSIVE — Extra narrow tweaks (< 340px)
   ══════════════════════════════════════════════ */

@media (max-width: 340px) {
  body.bma-mobile-checkout .woocommerce table.shop_table tbody tr {
    padding: 10px 12px !important;
  }

  body.bma-mobile-checkout .woocommerce table.shop_table tfoot tr {
    padding: 8px 12px !important;
  }

  body.bma-mobile-checkout #payment .payment_methods li label {
    padding: 11px 12px !important;
    font-size: 12px !important;
  }
}


/* ══════════════════════════════════════════════
   SCROLLBAR (WebKit — hide in WebView)
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout ::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}


/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */

@keyframes bma-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bma-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger card animations */
body.bma-mobile-checkout .woocommerce table.shop_table {
  animation: bma-slide-up 0.4s ease-out 0.05s both !important;
}

body.bma-mobile-checkout #payment {
  animation: bma-slide-up 0.4s ease-out 0.15s both !important;
}

body.bma-mobile-checkout .woocommerce-order-overview,
body.bma-mobile-checkout .woocommerce-order-details,
body.bma-mobile-checkout .woocommerce-customer-details {
  animation: bma-slide-up 0.4s ease-out 0.1s both !important;
}


/* ══════════════════════════════════════════════
   SECURE PAYMENT BADGE (injected by JS)
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .bma-secure-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 0 !important;
  color: var(--bma-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

body.bma-mobile-checkout .bma-secure-badge svg {
  flex-shrink: 0 !important;
}

/* Powered by BrewmyApp footer */
body.bma-mobile-checkout .bma-powered {
  text-align: center !important;
  padding: 12px 0 4px !important;
  color: var(--bma-muted) !important;
  font-size: 11px !important;
  opacity: 0.6 !important;
}

body.bma-mobile-checkout .bma-powered a {
  color: var(--bma-text-secondary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}


/* ══════════════════════════════════════════════
   STRIPE PAYMENT FORM
   ══════════════════════════════════════════════ */

body.bma-mobile-checkout .wc-payment-form,
body.bma-mobile-checkout .wc-upe-form,
body.bma-mobile-checkout #wc-stripe-upe-form {
  border: 1px solid #eef0f2 !important;
  border-radius: var(--bma-radius-xs) !important;
  background: #fafbfc !important;
  padding: 10px !important;
  margin: 0 !important;
}

body.bma-mobile-checkout .wc-payment-form .wc-stripe-upe-element,
body.bma-mobile-checkout .wc-payment-form .StripeElement {
  border-radius: var(--bma-radius-sm) !important;
  overflow: hidden !important;
}

body.bma-mobile-checkout .wc-payment-form .StripeElement iframe {
  border-radius: var(--bma-radius-sm) !important;
}

/* Generic gateway fieldsets (Stripe, PayPal, etc.) */
body.bma-mobile-checkout #payment .payment_box fieldset {
  border: 1px solid #eef0f2 !important;
  border-radius: var(--bma-radius-xs) !important;
  background: #fafbfc !important;
  padding: 10px !important;
  margin: 0 !important;
}