/* Art direction: trusted hosted checkout; restrained violet brand palette, soft glass surface, compact payment UI. */
:root {
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --text-xs: clamp(.75rem, .72rem + .12vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .18vw, 1rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.02rem + .52vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.28rem + 1.1vw, 2rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --bg-start: #26033f;
  --bg-middle: #3b0764;
  --bg-end: #5b21b6;
  --surface: #fff;
  --surface-glass: rgba(255, 255, 255, .97);
  --surface-soft: #f8f6fb;
  --text: #17131b;
  --muted: #68606d;
  --faint: #8b8490;
  --border: rgba(23, 19, 27, .14);
  --border-strong: rgba(76, 29, 149, .28);
  --primary: #4c1d95;
  --primary-hover: #3b0764;
  --primary-soft: #f1ebfa;
  --error: #b42318;
  --success: #18764b;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;
  --shadow-panel: 0 28px 90px rgba(21, 5, 36, .26), 0 4px 18px rgba(21, 5, 36, .13);
  --transition: 180ms cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in oklab, var(--bg-end) 55%, transparent) 0, transparent 35%),
    radial-gradient(circle at 86% 84%, color-mix(in oklab, #8b5cf6 24%, transparent) 0, transparent 31%),
    linear-gradient(145deg, var(--bg-start) 0%, var(--bg-middle) 48%, var(--bg-end) 100%);
  background-attachment: fixed;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }

.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 30; padding: var(--space-2) var(--space-3); color: #fff; background: var(--primary); border-radius: var(--radius-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.background-shapes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: rgba(255,255,255,.16); }
.shape { position: absolute; display: block; opacity: .7; animation: float 13s ease-in-out infinite; }
.shape--circle { width: 76px; aspect-ratio: 1; left: 9%; top: 16%; border: 1px solid currentColor; border-radius: 50%; }
.shape--square { width: 52px; aspect-ratio: 1; right: 10%; top: 21%; border: 1px solid currentColor; border-radius: var(--radius-sm); transform: rotate(17deg); animation-delay: -3s; }
.shape--triangle { right: 14%; bottom: 16%; width: 0; height: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 58px solid rgba(255,255,255,.11); animation-delay: -8s; }
.shape--triangle::after { content: ''; position: absolute; left: -30px; top: 6px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 51px solid var(--bg-end); }
.shape--cross { left: 14%; bottom: 17%; width: 48px; height: 48px; animation-delay: -6s; }
.shape--cross::before, .shape--cross::after { content: ''; position: absolute; left: 23px; top: 0; width: 1px; height: 48px; background: currentColor; }
.shape--cross::after { transform: rotate(90deg); }
.shape--line { width: 88px; height: 1px; right: 7%; top: 52%; background: currentColor; transform: rotate(-28deg); animation-delay: -10s; }
.shape--dot { width: 12px; aspect-ratio: 1; left: 7%; top: 56%; border: 1px solid currentColor; border-radius: 50%; animation-delay: -5s; }

@keyframes float { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -14px; rotate: 5deg; } }

.payment-panel {
  width: 640px;
  min-height: 90vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-10) var(--space-6);
  /*background: var(--surface-glass);*/
  background-color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(12px);
}

.payment-header { text-align: center; }
.logos { min-height: 86px; display: flex; justify-content: center; align-items: center; margin-bottom: var(--space-5); }
.logo-slot { min-width: 230px; min-height: 76px; display: grid; place-items: center; color: var(--primary); }
.logo-slot img { width: 80%; }
.amount-title { color: var(--muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; }
.amount { margin-top: var(--space-1); font-size: var(--text-xl); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.payment-title { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-base); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.payment-content { margin-top: var(--space-8); min-height: 0; }

h1 { margin-bottom: var(--space-4); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; text-align: center; }
.payment-options { display: grid; gap: var(--space-3); }
.payment-option {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  box-shadow: 0 1px 2px rgba(23,19,27,.04);
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.payment-option:hover { border-color: var(--border-strong); color: var(--primary); box-shadow: 0 6px 20px rgba(76,29,149,.09); transform: translateY(-1px); }
.payment-option:active { transform: translateY(0) scale(.997); }
.payment-option[aria-expanded="true"] { color: var(--primary); background: var(--primary-soft); border-color: var(--border-strong); }
.option-icon { width: 44px; height: 38px; display: grid; place-items: center; font-weight: 800; }
.blik-mark { font-size: .875rem; letter-spacing: -.04em; }
.option-name { font-size: var(--text-base); font-weight: 700; text-align: left; }
.chevron { color: var(--faint); transition: transform var(--transition); }
.payment-option[aria-expanded="true"] .chevron { color: var(--primary); transform: rotate(180deg); }

.method-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.16,1,.3,1), opacity 180ms ease; }
.method-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.panel-inner { min-height: 0; overflow: hidden; }
.form-shell { margin-top: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.form-title { margin-bottom: var(--space-2); font-size: var(--text-base); font-weight: 800; }
.form-hint { margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.action-shell .form-hint { margin-bottom: 0; }
.blik-code { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-2); }
.blik-digit { width: 100%; min-width: 0; height: 54px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-lg); font-weight: 800; text-align: center; caret-color: var(--primary); font-variant-numeric: tabular-nums; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 700; }
.field input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); outline: none; font-variant-numeric: tabular-nums; transition: border-color var(--transition), box-shadow var(--transition); }
.field input::placeholder { color: var(--faint); }
.field input:focus, .blik-digit:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(76,29,149,.13); }
.field input[aria-invalid="true"], .blik-digit[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.submit-button { width: 100%; min-height: 48px; margin-top: var(--space-5); padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius-md); color: #fff; background: var(--primary); font-size: var(--text-sm); font-weight: 800; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
.submit-button:hover { background: var(--primary-hover); box-shadow: 0 7px 18px rgba(59,7,100,.18); }
.submit-button:active { transform: scale(.997); }
.form-status, .wallet-status { min-height: 1.5em; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 700; text-align: center; }
.form-status[data-state="error"] { color: var(--error); }
.form-status[data-state="success"], .wallet-status { color: var(--success); }

.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wallet-button { min-height: 58px; display: grid; place-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition); }
.wallet-button:hover { border-color: var(--border-strong); background: var(--surface-soft); box-shadow: 0 5px 15px rgba(76,29,149,.08); transform: translateY(-1px); }
.wallet-button:active { transform: translateY(0) scale(.997); }
.wallet-mark { display: inline-flex; align-items: center; gap: .32em; font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
.wallet-mark--google b { color: var(--primary); font-size: 1.18em; font-weight: 800; }
.wallet-mark--apple { font-weight: 700; }
.wallet-status:empty { display: none; }

.payment-footer { margin-top: auto; padding-top: var(--space-8); color: var(--faint); font-size: var(--text-xs); font-weight: 500; line-height: 1.45; text-align: center; }
.payment-footer p + p { margin-top: var(--space-1); }

:focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }

@media (max-width: 640px) {
  body { padding: 0; place-items: start center; }
  .background-shapes { display: none; }
  .payment-panel { width: 100%; min-height: 100vh; min-height: 100dvh; height: auto; padding: var(--space-8) clamp(var(--space-4),5vw,var(--space-8)) var(--space-6); border: 0; box-shadow: none; backdrop-filter: none; }
  .payment-content { margin-top: var(--space-6); }
  .logos { min-height: 72px; }
  .brand-logo { width: min(265px, 76vw); }
  .payment-option { min-height: 60px; padding-inline: var(--space-4); }
}

@media (max-width: 430px) {
  .payment-option { grid-template-columns: 44px 1fr 22px; gap: var(--space-2); }
  .option-icon { width: 40px; }
  .form-shell { padding: var(--space-4); }
  .blik-code { gap: var(--space-1); }
  .blik-digit { height: 50px; border-radius: var(--radius-sm); }
  .fields { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .wallet-grid { gap: var(--space-2); }
  .wallet-mark { font-size: .95rem; }
}

@media (max-height: 900px) and (min-width: 641px) { body { place-items: start center; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }