/* MeuPay UI 3.0 — shared design system
   Shared by admin, checkout and access pages. No external framework required. */
:root{
  color-scheme:light;
  --mp-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mp-bg:#f7f9fb;
  --mp-bg-2:#f0f4f5;
  --mp-surface:#ffffff;
  --mp-surface-soft:#f8fafc;
  --mp-surface-raised:#ffffff;
  --mp-text:#0f172a;
  --mp-text-2:#334155;
  --mp-muted:#64748b;
  --mp-subtle:#94a3b8;
  --mp-border:#e6ebef;
  --mp-border-strong:#d8e0e5;
  --mp-primary:#0f9f75;
  --mp-primary-700:#08795a;
  --mp-primary-soft:#eaf8f3;
  --mp-primary-line:#bfe8d9;
  --mp-navy:#0c2438;
  --mp-navy-2:#123149;
  --mp-success:#0f9f75;
  --mp-success-700:#08795a;
  --mp-success-soft:#eaf8f3;
  --mp-warning:#d97706;
  --mp-warning-soft:#fff7ed;
  --mp-danger:#d92d20;
  --mp-danger-soft:#fff1f2;
  --mp-purple:#7c3aed;
  --mp-cyan:#0891b2;
  --mp-radius-xs:8px;
  --mp-radius-sm:12px;
  --mp-radius:16px;
  --mp-radius-lg:22px;
  --mp-radius-xl:28px;
  --mp-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --mp-shadow-sm:0 6px 20px rgba(16,24,40,.06);
  --mp-shadow:0 14px 36px rgba(16,24,40,.08);
  --mp-shadow-lg:0 24px 64px rgba(16,24,40,.13);
  --mp-ease:cubic-bezier(.2,.8,.2,1);
  --mp-fast:140ms;
  --mp-normal:220ms;
  --mp-space-1:4px;
  --mp-space-2:8px;
  --mp-space-3:12px;
  --mp-space-4:16px;
  --mp-space-5:20px;
  --mp-space-6:24px;
  --mp-space-7:32px;
  --mp-space-8:40px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --mp-bg:#09111f;
  --mp-bg-2:#0c1626;
  --mp-surface:#101b2d;
  --mp-surface-soft:#0d1727;
  --mp-surface-raised:#142137;
  --mp-text:#f5f7fb;
  --mp-text-2:#d7deea;
  --mp-muted:#9aa8bd;
  --mp-subtle:#6f819c;
  --mp-border:#22314a;
  --mp-border-strong:#32435e;
  --mp-primary:#39c69a;
  --mp-primary-700:#66d6b2;
  --mp-primary-soft:rgba(57,198,154,.12);
  --mp-primary-line:rgba(57,198,154,.26);
  --mp-success:#3dd598;
  --mp-success-soft:rgba(61,213,152,.10);
  --mp-warning:#f5a524;
  --mp-warning-soft:rgba(245,165,36,.10);
  --mp-danger:#ff7066;
  --mp-danger-soft:rgba(255,112,102,.10);
  --mp-shadow-xs:0 1px 2px rgba(0,0,0,.2);
  --mp-shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --mp-shadow:0 16px 40px rgba(0,0,0,.24);
  --mp-shadow-lg:0 26px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{font-family:var(--mp-font);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;color:var(--mp-text);font-family:var(--mp-font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a{color:inherit}
img{max-width:100%}
::selection{background:rgba(15,159,117,.18)}

.mp-hidden{display:none!important}
.mp-muted{color:var(--mp-muted)!important}
.mp-small{font-size:12px;color:var(--mp-muted)}
.mp-kicker{font-size:11px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--mp-primary)}
.mp-divider{height:1px;background:var(--mp-border);border:0;margin:20px 0}

.mp-card{
  background:var(--mp-surface);
  border:1px solid var(--mp-border);
  border-radius:var(--mp-radius-lg);
  box-shadow:var(--mp-shadow-xs);
}
.mp-card--lift{box-shadow:var(--mp-shadow-sm)}

.mp-btn{
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;padding:0 16px;
  background:var(--mp-primary);color:#fff;text-decoration:none;font-weight:800;font-size:14px;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--mp-fast) var(--mp-ease),box-shadow var(--mp-fast) var(--mp-ease),background var(--mp-fast),border-color var(--mp-fast),opacity var(--mp-fast);
  box-shadow:0 8px 20px rgba(15,159,117,.18);
}
.mp-btn:hover{transform:translateY(-1px);background:var(--mp-primary-700);box-shadow:0 12px 24px rgba(15,159,117,.22)}
.mp-btn:active{transform:translateY(0) scale(.99)}
.mp-btn:focus-visible{outline:3px solid rgba(15,159,117,.18);outline-offset:2px}
.mp-btn[disabled],.mp-btn.is-loading{opacity:.6;pointer-events:none}
.mp-btn--secondary{background:var(--mp-surface);color:var(--mp-text);border-color:var(--mp-border-strong);box-shadow:var(--mp-shadow-xs)}
.mp-btn--secondary:hover{background:var(--mp-surface-soft);box-shadow:var(--mp-shadow-sm)}
.mp-btn--soft{background:var(--mp-primary-soft);color:var(--mp-primary);border-color:var(--mp-primary-line);box-shadow:none}
.mp-btn--ghost{background:transparent;color:var(--mp-text-2);border-color:transparent;box-shadow:none}
.mp-btn--danger{background:var(--mp-danger);box-shadow:0 8px 20px rgba(217,45,32,.16)}
.mp-btn--success{background:var(--mp-success);box-shadow:0 8px 20px rgba(11,159,111,.16)}
.mp-btn--sm{min-height:36px;padding:0 12px;border-radius:10px;font-size:12px}
.mp-btn--lg{min-height:52px;border-radius:14px;padding:0 20px;font-size:15px}

.mp-icon-btn{
  width:42px;height:42px;border:1px solid var(--mp-border);border-radius:12px;background:var(--mp-surface);
  color:var(--mp-text-2);display:inline-grid;place-items:center;cursor:pointer;
  transition:.16s var(--mp-ease);box-shadow:var(--mp-shadow-xs)
}
.mp-icon-btn:hover{background:var(--mp-surface-soft);border-color:var(--mp-border-strong);transform:translateY(-1px)}
.mp-icon-btn svg{width:19px;height:19px}

.mp-input,.mp-select,.mp-textarea{
  width:100%;border:1px solid var(--mp-border-strong);background:var(--mp-surface);color:var(--mp-text);
  border-radius:12px;min-height:46px;padding:0 13px;outline:none;font-size:14px;
  transition:border-color var(--mp-fast),box-shadow var(--mp-fast),background var(--mp-fast)
}
.mp-textarea{min-height:116px;padding:12px 13px;resize:vertical}
.mp-input::placeholder,.mp-textarea::placeholder{color:var(--mp-subtle)}
.mp-input:focus,.mp-select:focus,.mp-textarea:focus{border-color:var(--mp-primary);box-shadow:0 0 0 4px rgba(15,159,117,.10)}
.mp-label{display:block;font-size:12px;font-weight:800;color:var(--mp-text-2);margin:0 0 7px}
.mp-help{font-size:11px;color:var(--mp-muted);line-height:1.45;margin-top:6px}
.mp-field{margin-bottom:16px}

.mp-badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 9px;border-radius:999px;background:var(--mp-surface-soft);color:var(--mp-text-2);font-size:11px;font-weight:800;border:1px solid var(--mp-border)}
.mp-badge--success{background:var(--mp-success-soft);border-color:transparent;color:var(--mp-success-700)}
.mp-badge--warning{background:var(--mp-warning-soft);border-color:transparent;color:var(--mp-warning)}
.mp-badge--danger{background:var(--mp-danger-soft);border-color:transparent;color:var(--mp-danger)}
.mp-badge--info{background:var(--mp-primary-soft);border-color:transparent;color:var(--mp-primary)}

.mp-alert{border:1px solid var(--mp-border);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;background:var(--mp-surface-soft)}
.mp-alert--success{background:var(--mp-success-soft);border-color:rgba(11,159,111,.18);color:var(--mp-success-700)}
.mp-alert--danger{background:var(--mp-danger-soft);border-color:rgba(217,45,32,.16);color:var(--mp-danger)}
.mp-alert--info{background:var(--mp-primary-soft);border-color:var(--mp-primary-line);color:var(--mp-primary-700)}

.mp-spinner{width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:999px;display:inline-block;animation:mpSpin .75s linear infinite}
@keyframes mpSpin{to{transform:rotate(360deg)}}

.mp-toast-stack{position:fixed;right:18px;bottom:18px;z-index:100000;display:flex;flex-direction:column;gap:9px;width:min(360px,calc(100vw - 36px));pointer-events:none}
.mp-toast{pointer-events:auto;background:var(--mp-surface);border:1px solid var(--mp-border);box-shadow:var(--mp-shadow);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;animation:mpToastIn .22s var(--mp-ease)}
.mp-toast strong{display:block;font-size:13px}.mp-toast p{margin:3px 0 0;color:var(--mp-muted);font-size:12px;line-height:1.4}
@keyframes mpToastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.mp-skeleton{background:linear-gradient(90deg,var(--mp-surface-soft) 25%,var(--mp-border) 40%,var(--mp-surface-soft) 60%);background-size:300% 100%;animation:mpShimmer 1.5s linear infinite;border-radius:10px}
@keyframes mpShimmer{to{background-position:-300% 0}}

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