/* Ecompag UI foundation. Shared by merchant, admin and payer screens. */
:root {
  color-scheme: dark;
  --ui-brand: #91d52a;
  --ui-brand-strong: #a5e64b;
  --ui-brand-soft: #1b2a12;
  --ui-bg: #0c100b;
  --ui-surface: #111511;
  --ui-surface-raised: #191d19;
  --ui-text: #f2f5ef;
  --ui-muted: #aeb8ad;
  --ui-border: #2d342d;
  --ui-success: #62d3a5;
  --ui-success-soft: #15392d;
  --ui-warning: #986400;
  --ui-warning-soft: #fff6df;
  --ui-danger: #b42332;
  --ui-danger-soft: #fff0f1;
  --ui-info: #1769aa;
  --ui-info-soft: #eaf4ff;
  --ui-focus: #a5e64b;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-shadow-sm: 0 1px 3px rgb(15 23 42 / 8%);
  --ui-shadow-md: 0 12px 32px rgb(15 23 42 / 10%);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primary-red: #91d52a;
  --secondary-red: #76b91d;
  --dark-red: #4d7c0f;
  --pure-black: #0c100b;
  --dark-black: #111511;
  --darker-black: #191d19;
  --border-gray: #2d342d;
  --pure-white: #f2f5ef;
  --text-gray: #aeb8ad;
}

[data-theme-mode="dark"],
[data-ui-theme="dark"] {
  color-scheme: dark;
  --ui-brand: #91d52a;
  --ui-brand-strong: #a5e64b;
  --ui-bg: #0c100b;
  --ui-surface: #111511;
  --ui-surface-raised: #191d19;
  --ui-text: #f2f5ef;
  --ui-muted: #aeb8ad;
  --ui-border: #2d342d;
  --ui-brand-soft: #1b2a12;
  --ui-success: #62d3a5;
  --ui-success-soft: #15392d;
  --ui-warning: #ffd36f;
  --ui-warning-soft: #3a3019;
  --ui-danger: #ff8791;
  --ui-danger-soft: #3d2027;
  --ui-info: #82c3ff;
  --ui-info-soft: #1b3043;
  --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 22%);
  --ui-shadow-md: 0 12px 32px rgb(0 0 0 / 28%);
}

[data-theme-mode="light"],
[data-ui-theme="light"] {
  color-scheme: light;
  --ui-brand: #79b51f;
  --ui-brand-strong: #679c19;
  --ui-brand-soft: #eef7e4;
  --ui-bg: #f4f7f1;
  --ui-surface: #ffffff;
  --ui-surface-raised: #edf1e9;
  --ui-text: #182016;
  --ui-muted: #5e6b58;
  --ui-border: #d5ddcf;
  --ui-success: #147d58;
  --ui-success-soft: #e8f7f0;
  --ui-warning: #986400;
  --ui-warning-soft: #fff6df;
  --ui-danger: #b42332;
  --ui-danger-soft: #fff0f1;
  --ui-info: #1769aa;
  --ui-info-soft: #eaf4ff;
  --ui-focus: #679c19;
  --ui-shadow-sm: 0 1px 3px rgb(15 23 42 / 8%);
  --ui-shadow-md: 0 12px 32px rgb(15 23 42 / 10%);
  --primary-red: #79b51f;
  --secondary-red: #679c19;
  --dark-red: #4d7c0f;
  --pure-black: #f4f7f1;
  --dark-black: #ffffff;
  --darker-black: #edf1e9;
  --border-gray: #d5ddcf;
  --pure-white: #182016;
  --text-gray: #5e6b58;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

.ui-page { min-height: 100vh; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
.ui-container { width: min(100% - 32px, 1440px); margin-inline: auto; }
.ui-stack { display: grid; gap: var(--ui-space-4); }
.ui-row { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; }
.ui-card { color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }
.ui-card__body { padding: clamp(16px, 2vw, 24px); }
.ui-muted { color: var(--ui-muted) !important; }

.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); font: 600 14px/1.2 var(--ui-font); text-decoration: none; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.ui-button:hover { transform: translateY(-1px); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.ui-button--primary { color: #11160d; background: var(--ui-brand); }
.ui-button--primary:hover { color: #11160d; background: var(--ui-brand-strong); }
.ui-button--secondary { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.ui-button--danger { color: #fff; background: var(--ui-danger); }
.ui-button--quiet { color: var(--ui-muted); background: transparent; border-color: transparent; }

.ui-field { display: grid; gap: 6px; min-width: 0; }
.ui-field label, .ui-label { color: var(--ui-text); font-size: 13px; font-weight: 650; }
.ui-control { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font: 400 15px/1.4 var(--ui-font); }
.ui-control::placeholder { color: var(--ui-muted); opacity: .8; }
.ui-control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-help { color: var(--ui-muted); font-size: 12px; }
.ui-error-text { color: var(--ui-danger); font-size: 12px; }

.ui-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 9px; border-radius: 999px; color: var(--ui-muted); background: var(--ui-surface-raised); font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ui-badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.ui-badge--success, .ui-status--paid, .ui-status--captured, .ui-status--approved, .ui-status--won { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-badge--warning, .ui-status--pending, .ui-status--authorized, .ui-status--review, .ui-status--disputed { color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-badge--danger, .ui-status--declined, .ui-status--canceled, .ui-status--expired, .ui-status--refunded, .ui-status--lost { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-badge--info, .ui-status--created, .ui-status--processing { color: var(--ui-info); background: var(--ui-info-soft); }

.ui-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.ui-table { width: 100%; border-collapse: collapse; color: var(--ui-text); font-size: 13px; }
.ui-table th, .ui-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-table th { color: var(--ui-muted); background: var(--ui-surface-raised); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ui-table tr:last-child td { border-bottom: 0; }

.ui-alert { padding: 14px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); color: var(--ui-text); }
.ui-alert--success { background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 24%, transparent); }
.ui-alert--warning { background: var(--ui-warning-soft); border-color: color-mix(in srgb, var(--ui-warning) 24%, transparent); }
.ui-alert--error { background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 24%, transparent); }
.ui-alert--info { background: var(--ui-info-soft); border-color: color-mix(in srgb, var(--ui-info) 24%, transparent); }
.ui-empty, .ui-error-state { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 6vw, 56px) 20px; text-align: center; color: var(--ui-muted); }
.ui-empty h2, .ui-error-state h2 { margin: 0; color: var(--ui-text); font-size: 18px; }
.ui-skeleton { min-height: 16px; overflow: hidden; border-radius: 6px; background: linear-gradient(90deg, var(--ui-surface-raised) 20%, var(--ui-border) 45%, var(--ui-surface-raised) 70%); background-size: 240% 100%; animation: ui-shimmer 1.4s ease infinite; }
@keyframes ui-shimmer { to { background-position-x: -240%; } }

.ui-shell { min-height: 100vh; color: var(--ui-text); background: var(--ui-bg); }
.ui-shell :where(.main-content, .app-content) { min-width: 0; }
.ui-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block: 8px 24px; }
.ui-page-heading h1 { margin: 0; color: var(--ui-text); font-size: clamp(22px, 3vw, 30px); font-weight: 750; letter-spacing: -.025em; }
.ui-page-heading p { margin: 6px 0 0; color: var(--ui-muted); font-size: 14px; }

/* Existing login and registration pages, aligned with the WauazePay theme. */
body:has(.login-card), body:has(.register-card) { color: var(--ui-text); font-family: var(--ui-font); background: radial-gradient(ellipse at 50% -10%, #172311 0, #0c100b 58%); }
body:has(.admin-card), body:has(.verification-card) { color: var(--ui-text); background: radial-gradient(ellipse at 50% -10%, #172311 0, #0c100b 58%) !important; }
.admin-card, .verification-card { color: var(--ui-text) !important; background: linear-gradient(145deg, #191d19, #111511) !important; border: 1px solid var(--ui-border) !important; box-shadow: 0 24px 64px rgb(0 0 0 / 34%) !important; }
.admin-card :is(.card-title, .form-label, label), .verification-card :is(.card-title, .form-label, label) { color: var(--ui-text) !important; }
.admin-card :is(.card-subtitle, .form-text), .verification-card :is(.card-subtitle, .form-text) { color: var(--ui-muted) !important; }
.admin-card :is(.form-control, .code-input), .verification-card :is(.form-control, .code-input) { color: var(--ui-text) !important; background: var(--ui-surface-raised) !important; border-color: var(--ui-border) !important; }
.admin-card .btn-biometric, .verification-card .btn-biometric { color: var(--ui-text) !important; background: transparent !important; border: 1px solid var(--ui-border) !important; }
.login-card, .register-card { color: var(--ui-text); background: linear-gradient(145deg, #191d19, #111511); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: 0 24px 64px rgb(0 0 0 / 34%); }
.login-card .card-title, .register-card .card-title { color: #f4f7fb; letter-spacing: -.02em; }
.login-card .form-label, .register-card .form-label { color: #e4eaf2; }
.login-card .form-control, .register-card .form-input, .register-card .form-select { color: #f3f6fb; background-color: #111720; border-color: #414d60; border-radius: 10px; }
.login-card .form-control:focus, .register-card .form-input:focus, .register-card .form-select:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px rgb(145 213 42 / 18%); }
.login-card .btn-primary, .register-card .btn-next { color: #11160d; background: var(--ui-brand); border: 0; border-radius: 10px; box-shadow: 0 8px 18px rgb(145 213 42 / 20%); }
.login-card .btn-primary:hover, .register-card .btn-next:hover { color: #11160d; background: var(--ui-brand-strong); }
.login-card a, .register-card a { color: var(--ui-brand-strong); }
.login-card a:hover, .register-card a:hover { color: #c5f28a; }
.register-card .card-subtitle { color: #aeb9c8; }
.register-card .wizard-icon { border: 1px solid #465266; }
.register-card .wizard-icon.active { border-color: var(--ui-brand); }
.register-card .checkbox-label { color: #d4dce7; }
.register-card .terms-modal { color: #182231; }

/* Merchant shell surface refinements; navigation geometry stays owned by the legacy layout. */
html[data-nav-layout] { --default-font-family: var(--ui-font); }
html[data-nav-layout] .main-content { color: var(--ui-text); }
html[data-nav-layout] .main-content .card:not(.modal-content) { border-color: var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }
html[data-nav-layout] .app-header { box-shadow: 0 1px 0 rgb(255 255 255 / 6%), 0 8px 24px rgb(0 0 0 / 10%); }
html[data-nav-layout] .side-menu__item { min-height: 40px; }

/* Admin sidebar uses the same neutral scale and active brand treatment. */
.sidebar { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-md); }
.sidebar h4 { color: var(--ui-text); border-color: var(--ui-border); }
.sidebar a { color: var(--ui-muted); }
.sidebar a:hover { color: var(--ui-text); background: var(--ui-brand-soft); border-color: transparent; }
.sidebar a.active { color: #11160d; background: var(--ui-brand); }
.content { min-width: 0; background: var(--ui-bg); }
body:has(.sidebar) { color: var(--ui-text) !important; background: var(--ui-bg) !important; }
body:has(.sidebar) .content { color: var(--ui-text) !important; background: var(--ui-bg) !important; }
body:has(.sidebar) .content :is(.card, .flat-card, .stat-card, .stat-box, .modal-content, .dropdown-menu, .table-responsive, .filter-bar, .search-bar, .filter-card, .form-control, .form-select, textarea, input:not([type="checkbox"]):not([type="radio"]), select) {
  color: var(--ui-text) !important;
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}
body:has(.sidebar) .content :is(.card-header, .table thead th, .table th, .pagination, .nav-tabs, .modal-header, .modal-footer) {
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-raised) !important;
  border-color: var(--ui-border) !important;
}
body:has(.sidebar) .content :is(.btn-k:not(.red):not(.danger), .btn-pagination, .btn-open-filter, .btn-pag, .tab-btn.active, .page-link.active) {
  color: #11160d !important;
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
}
body:has(.sidebar) .content :is(button, a.btn, input[type="submit"], .btn-k) {
  color: #11160d !important;
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
}
body:has(.sidebar) .content :is(button, a.btn, input[type="submit"], .btn-k):hover {
  color: #11160d !important;
  background: var(--ui-brand-strong) !important;
  border-color: var(--ui-brand-strong) !important;
}
body:has(.sidebar) .content :is(.btn-k:not(.red):not(.danger), .btn-pagination, .btn-open-filter, .btn-pag):hover {
  color: #11160d !important;
  background: var(--ui-brand-strong) !important;
  border-color: var(--ui-brand-strong) !important;
}
body:has(.sidebar) .content :is(.text-dark, .text-black, .text-body, label, .card-title, .modal-title) { color: var(--ui-text) !important; }
body:has(.sidebar) .content :is(.text-muted, .form-text, small) { color: var(--ui-muted) !important; }

/* Merchant navigation and content use the same shared palette. */
html[data-nav-layout] body { color: var(--ui-text); background-color: var(--ui-bg); }
html[data-nav-layout] .main-content,
html[data-nav-layout] .app-content,
html[data-nav-layout] .content { color: var(--ui-text); background-color: var(--ui-bg); }
html[data-nav-layout] .main-content :is(.card, .modal-content, .dropdown-menu, .table-responsive) { color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-border); }

/* Standalone API reference shares the same WauazePay dark/green identity. */
body:has(.sidebar-link) { color: var(--ui-text) !important; background: var(--ui-bg) !important; }
body:has(.sidebar-link) .header,
body:has(.sidebar-link) .sidebar,
body:has(.sidebar-link) .main-content,
body:has(.sidebar-link) .content-section,
body:has(.sidebar-link) .endpoint-card,
body:has(.sidebar-link) .code-block,
body:has(.sidebar-link) .search-box input { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
body:has(.sidebar-link) :is(.header, .sidebar, .main-content, .content-section, .endpoint-card) { border-color: var(--ui-border) !important; }
body:has(.sidebar-link) :is(.sidebar-link.active, .code-tab.active) { color: #11160d !important; background: var(--ui-brand) !important; border-color: var(--ui-brand) !important; }
body:has(.sidebar-link) :is(.sidebar-link:hover, .code-tab:hover) { color: var(--ui-brand-strong) !important; background-color: var(--ui-brand-soft) !important; }
body:has(.sidebar-link) :is(a, .method-badge) { color: var(--ui-brand) !important; }
body:has(.sidebar-link) :is(.header-title, .sidebar-heading, .menu-btn) { color: var(--ui-brand) !important; }
body:has(.sidebar-link) .method-badge { color: #11160d !important; background: var(--ui-brand) !important; }
body:has(.sidebar-link) :is(.btn-dl, .copy-button) { color: #11160d !important; background: var(--ui-brand) !important; border-color: var(--ui-brand) !important; }

/* Shared legacy controls: one WauazePay primary button across every profile. */
:where(.btn-primary, .btn-next, .btn-email, .btn-dl, .copy-button, .toggle-btn, .button-primary, .primary-button, input[type="submit"], button[type="submit"], .docs-page .btn):not(.btn-danger):not(.danger):not([data-variant="danger"]) {
  color: #11160d !important;
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 6px 18px rgb(145 213 42 / 16%);
}
:where(.btn-primary, .btn-next, .btn-email, .btn-dl, .copy-button, .toggle-btn, .button-primary, .primary-button, input[type="submit"], button[type="submit"], .docs-page .btn):not(.btn-danger):not(.danger):not([data-variant="danger"]):hover {
  color: #11160d !important;
  background-color: var(--ui-brand-strong) !important;
  border-color: var(--ui-brand-strong) !important;
}
.btn:not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-link):not(.btn-danger):not(.btn-warning),
a.btn:not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-link):not(.btn-danger):not(.btn-warning),
.btn-dl, .copy-button { color: #11160d !important; background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; }
.btn:not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-link):not(.btn-danger):not(.btn-warning):hover,
a.btn:not(.btn-outline):not(.btn-secondary):not(.btn-light):not(.btn-link):not(.btn-danger):not(.btn-warning):hover,
.btn-dl:hover, .copy-button:hover { color: #11160d !important; background-color: var(--ui-brand-strong) !important; border-color: var(--ui-brand-strong) !important; }
:where(a, .link-primary, .text-primary) { --bs-link-color: var(--ui-brand); --bs-link-hover-color: var(--ui-brand-strong); }
::selection { color: #11160d; background: rgb(145 213 42 / 35%); }

/* Hosted checkout: isolated, mobile-first payment surface. */
.checkout-page { min-height: 100vh; margin: 0; color: var(--ui-text); background: radial-gradient(ellipse at 50% 0, #172311 0, var(--ui-bg) 62%); font-family: var(--ui-font); }
.checkout-wrap { width: min(100% - 32px, 480px); margin: 0 auto; padding: clamp(20px, 5vh, 48px) 0 24px; }
.checkout-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; color: var(--ui-text); font-size: 13px; font-weight: 700; }
.checkout-brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: var(--ui-brand); }
.checkout-card { padding: clamp(20px, 5vw, 32px); color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); }
.checkout-intro { margin-bottom: 22px; }
.checkout-kicker { color: var(--ui-brand); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-intro h1, .checkout-state h1 { margin: 7px 0 6px; color: var(--ui-text); font-size: clamp(22px, 6vw, 27px); font-weight: 750; letter-spacing: -.03em; overflow-wrap: anywhere; }
.checkout-intro p, .checkout-state p { margin: 0; color: var(--ui-muted); font-size: 14px; line-height: 1.55; }
.checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-raised); }
.checkout-total span { color: var(--ui-muted); font-size: 13px; }
.checkout-total strong { color: var(--ui-text); font-size: clamp(21px, 6vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.checkout-sandbox { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 11px 12px; border: 1px solid #f0d99b; border-radius: 10px; color: #74520a; background: #fff8e6; font-size: 12px; line-height: 1.5; }
.checkout-sandbox i { margin-top: 1px; }
.checkout-methods { display: grid; gap: 10px; min-width: 0; margin: 24px 0 18px; padding: 0; border: 0; }
.checkout-methods legend { margin-bottom: 10px; color: var(--ui-text); font-size: 13px; font-weight: 700; }
.checkout-method { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.checkout-method:hover, .checkout-method.is-selected { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.checkout-method input { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-brand); flex: 0 0 auto; }
.checkout-method-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: var(--ui-text); background: var(--ui-surface-raised); font-size: 18px; flex: 0 0 auto; }
.checkout-method-icon--pix { color: #147d58; background: #e8f7f0; }
.checkout-method-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.checkout-method-copy strong { color: var(--ui-text); font-size: 13px; }
.checkout-method-copy small { color: var(--ui-muted); font-size: 11px; line-height: 1.4; }
.checkout-method-check { color: var(--ui-brand); opacity: 0; }
.checkout-method.is-selected .checkout-method-check { opacity: 1; }
.checkout-payer-field { margin-bottom: 18px; }
.checkout-submit { width: 100%; min-height: 50px; font-size: 14px; }
.checkout-privacy { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 0; color: #768397; font-size: 11px; }
.checkout-result { margin-top: 18px; padding: 18px; border-radius: 12px; }
.checkout-result--error { color: #8f2430; background: #fff0f1; border: 1px solid #f3c5ca; font-size: 13px; line-height: 1.5; }
.checkout-result--success { display: grid; justify-items: center; gap: 8px; color: #344156; background: #f1faf6; border: 1px solid #bce8d4; text-align: center; }
.checkout-result--success h2 { margin: 0; color: #126647; font-size: 19px; }
.checkout-result--success p { margin: 0; color: #536579; font-size: 13px; line-height: 1.5; }
.checkout-result--success .checkout-state-icon { width: 42px; height: 42px; color: #147d58; background: #dff5eb; }
.checkout-reference { display: grid; justify-items: center; gap: 8px; width: 100%; margin-top: 8px; padding-top: 14px; border-top: 1px solid #d4eee1; }
.checkout-reference span { color: #647184; font-size: 11px; }
.checkout-reference code { max-width: 100%; overflow-wrap: anywhere; color: #17212f; font-size: 12px; }
.checkout-reference .ui-button { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.checkout-state { display: grid; justify-items: center; gap: 12px; min-height: 230px; align-content: center; text-align: center; }
.checkout-state-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #147d58; background: #e8f7f0; font-size: 22px; }
.checkout-state-icon--error { color: #b42332; background: #fff0f1; }
.checkout-footer { padding: 18px 8px 0; color: #768397; text-align: center; font-size: 11px; }

@media (max-width: 360px) {
  .checkout-wrap { width: min(100% - 20px, 480px); padding-top: 16px; }
  .checkout-card { padding: 18px 15px; border-radius: 15px; }
  .checkout-method { gap: 9px; padding: 10px; }
  .checkout-method-icon { width: 36px; height: 36px; }
}

@media (max-width: 640px) {
  .ui-container { width: min(100% - 24px, 1440px); }
  .ui-page-heading { display: grid; }
  .ui-button { min-height: 44px; }
  .ui-table { min-width: 680px; }
}