/* Rizzi Store Design System — shared buyer-facing UI */
:root{
  --rzx-primary:#2563eb;
  --rzx-primary-hover:#1d4ed8;
  --rzx-primary-soft:rgba(37,99,235,.12);
  --rzx-success:#16a34a;
  --rzx-success-soft:rgba(22,163,74,.12);
  --rzx-warning:#d97706;
  --rzx-warning-soft:rgba(217,119,6,.12);
  --rzx-danger:#dc2626;
  --rzx-danger-soft:rgba(220,38,38,.12);
  --rzx-info:#0284c7;
  --rzx-info-soft:rgba(2,132,199,.12);
  --rzx-bg:#f4f7fb;
  --rzx-surface:#fff;
  --rzx-surface-2:#f8fafc;
  --rzx-text:#0f172a;
  --rzx-muted:#64748b;
  --rzx-line:#dbe3ef;
  --rzx-shadow-sm:0 8px 24px rgba(15,23,42,.07);
  --rzx-shadow:0 20px 55px rgba(15,23,42,.12);
  --rzx-radius-sm:12px;
  --rzx-radius:18px;
  --rzx-radius-lg:26px;
  --rzx-content:1180px;
  --rzx-bottom-space:24px;
}
html[data-theme="dark"]{
  --rzx-bg:#08111f;
  --rzx-surface:#101b2d;
  --rzx-surface-2:#142238;
  --rzx-text:#eef5ff;
  --rzx-muted:#9eb0c9;
  --rzx-line:#253955;
  --rzx-primary:#3b82f6;
  --rzx-primary-hover:#60a5fa;
  --rzx-primary-soft:rgba(59,130,246,.16);
  --rzx-shadow-sm:0 10px 28px rgba(0,0,0,.24);
  --rzx-shadow:0 22px 64px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.rzx-app{
  background:
    radial-gradient(circle at 12% -4%,rgba(37,99,235,.10),transparent 28rem),
    var(--rzx-bg)!important;
  color:var(--rzx-text)!important;
  min-height:100vh;
}
body.rzx-app::selection{background:rgba(37,99,235,.28)}
body.rzx-app a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
body.rzx-app h1,body.rzx-app h2,body.rzx-app h3{letter-spacing:-.025em}
body.rzx-app .container{width:min(var(--rzx-content),calc(100% - 32px))}
body.rzx-app .section{padding:28px 0 96px}
body.rzx-app .topbar{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid var(--rzx-line)!important;
  background:color-mix(in srgb,var(--rzx-surface) 90%,transparent)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:none!important;
}
body.rzx-app .topbar .nav{min-height:68px!important}
body.rzx-app .brand{color:var(--rzx-text)!important;text-decoration:none!important;font-weight:900!important;letter-spacing:-.025em}
body.rzx-app .brand-logo{border-radius:13px!important;box-shadow:none!important}
body.rzx-app .btn,
body.rzx-app .button,
body.rzx-app button.btn,
body.rzx-app input[type="submit"].btn{
  min-height:44px;
  border-radius:13px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}
body.rzx-app .btn.primary,
body.rzx-app button.primary,
body.rzx-app .button.primary{
  color:#fff!important;
  background:var(--rzx-primary)!important;
  border-color:var(--rzx-primary)!important;
  box-shadow:0 9px 22px rgba(37,99,235,.20)!important;
}
body.rzx-app .btn.primary:hover,
body.rzx-app button.primary:hover{background:var(--rzx-primary-hover)!important;transform:translateY(-1px)}
body.rzx-app .btn:not(.primary):not(.danger):not(.bad),
body.rzx-app button.btn:not(.primary):not(.danger):not(.bad){
  color:var(--rzx-text)!important;
  background:var(--rzx-surface)!important;
  border:1px solid var(--rzx-line)!important;
  box-shadow:none!important;
}
body.rzx-app .btn.danger,body.rzx-app button.danger{background:var(--rzx-danger)!important;color:#fff!important;border-color:var(--rzx-danger)!important}
body.rzx-app .card,
body.rzx-app .auth-card,
body.rzx-app .buy-card,
body.rzx-app .glass,
body.rzx-app .glass-card,
body.rzx-app .payment-card,
body.rzx-app .checkout-card{
  color:var(--rzx-text)!important;
  background:var(--rzx-surface)!important;
  border:1px solid var(--rzx-line)!important;
  border-radius:var(--rzx-radius-lg)!important;
  box-shadow:var(--rzx-shadow-sm)!important;
  background-image:none!important;
  backdrop-filter:none!important;
}
body.rzx-app .card::before,
body.rzx-app .auth-card::before,
body.rzx-app .buy-card::before{display:none!important}
body.rzx-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.rzx-app select,
body.rzx-app textarea,
body.rzx-app .input{
  width:100%;
  min-height:48px!important;
  border:1px solid var(--rzx-line)!important;
  border-radius:13px!important;
  color:var(--rzx-text)!important;
  background:var(--rzx-surface-2)!important;
  outline:none;
  box-shadow:none!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body.rzx-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
body.rzx-app select:focus,
body.rzx-app textarea:focus{
  border-color:var(--rzx-primary)!important;
  box-shadow:0 0 0 4px var(--rzx-primary-soft)!important;
  background:var(--rzx-surface)!important;
}
body.rzx-app .field{position:relative}
body.rzx-app .field label,body.rzx-app label{color:var(--rzx-text)}
body.rzx-app .field>label{display:block;margin-bottom:7px;font-size:12px;font-weight:850;color:var(--rzx-muted)!important}
body.rzx-app .desc,body.rzx-app .muted{color:var(--rzx-muted)!important;line-height:1.65}
body.rzx-app .alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px!important;
  border-radius:14px!important;
  border:1px solid var(--rzx-line)!important;
  background:var(--rzx-surface-2)!important;
  color:var(--rzx-text)!important;
  box-shadow:none!important;
}
body.rzx-app .alert.success{border-color:color-mix(in srgb,var(--rzx-success) 34%,var(--rzx-line))!important;background:var(--rzx-success-soft)!important}
body.rzx-app .alert.error,body.rzx-app .alert.danger{border-color:color-mix(in srgb,var(--rzx-danger) 34%,var(--rzx-line))!important;background:var(--rzx-danger-soft)!important}
body.rzx-app .alert.warning{border-color:color-mix(in srgb,var(--rzx-warning) 34%,var(--rzx-line))!important;background:var(--rzx-warning-soft)!important}

/* Shared page header */
.rzx-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 22px}
.rzx-page-head small,.rzx-kicker{display:block;color:var(--rzx-primary);font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
.rzx-page-head h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.05}
.rzx-page-head p{margin:9px 0 0;color:var(--rzx-muted);max-width:680px}
.rzx-page-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* Auth */
body.rzx-page-auth{display:grid;min-height:100vh}
body.rzx-page-auth .form-wrap{
  width:min(1080px,calc(100% - 32px));
  min-height:100vh;
  margin:auto;
  padding:34px 0;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(390px,500px);
  align-items:center;
  gap:clamp(24px,5vw,72px);
}
.rzx-auth-visual{
  min-height:580px;
  padding:52px;
  border:1px solid var(--rzx-line);
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(37,99,235,.96),rgba(29,78,216,.86)),
    var(--rzx-primary);
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:var(--rzx-shadow);
}
.rzx-auth-visual::before,.rzx-auth-visual::after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.12)}
.rzx-auth-visual::before{width:290px;height:290px;right:-90px;top:-90px}
.rzx-auth-visual::after{width:180px;height:180px;left:-70px;bottom:-70px}
.rzx-auth-visual>*{position:relative;z-index:1}
.rzx-auth-visual .brand{display:inline-flex!important;color:#fff!important;margin-bottom:90px}
.rzx-auth-visual h2{font-size:clamp(36px,5vw,62px);line-height:.98;margin:0;max-width:620px;color:#fff!important}
.rzx-auth-visual p{font-size:16px;line-height:1.7;max-width:560px;color:rgba(255,255,255,.82);margin:20px 0 0}
.rzx-auth-points{display:grid;gap:12px;margin-top:32px}
.rzx-auth-points span{display:flex;gap:10px;align-items:center;font-weight:750;color:#fff}
.rzx-auth-points i{width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.17);font-style:normal;font-size:12px}
body.rzx-page-auth .auth-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:32px!important;
  border-radius:28px!important;
}
body.rzx-page-auth .auth-card>.brand{margin-bottom:26px}
body.rzx-page-auth .auth-card h1{font-size:32px!important;margin:0 0 9px!important}
body.rzx-page-auth .auth-card .desc{margin-bottom:22px}
.rzx-auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:13px}
.rzx-auth-links a{font-weight:850;color:var(--rzx-primary)}
.rzx-password-wrap{position:relative}
.rzx-password-wrap input{padding-right:50px!important}
.rzx-password-toggle{position:absolute!important;right:6px;top:50%;transform:translateY(-50%);min-width:38px!important;width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--rzx-muted)!important;box-shadow:none!important;display:grid!important;place-items:center}
.rzx-password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.rzx-otp-input{font-size:28px!important;letter-spacing:.36em!important;text-align:center;font-weight:900!important;padding-left:.36em!important}
.rzx-otp-hint{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1px solid var(--rzx-line);border-radius:13px;background:var(--rzx-primary-soft);color:var(--rzx-muted);font-size:12px;line-height:1.55;margin:15px 0}

/* Payment and checkout */
body.rzx-page-payment .pay-shell{padding:28px 16px 110px!important;background:transparent!important}
body.rzx-page-payment .pay-card{max-width:980px!important;padding:24px!important;border-radius:30px!important;background:var(--rzx-surface)!important;border:1px solid var(--rzx-line)!important;box-shadow:var(--rzx-shadow)!important;backdrop-filter:none!important}
body.rzx-page-payment .pay-grid{grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr)!important;gap:16px!important}
body.rzx-page-payment .pay-panel{border:1px solid var(--rzx-line)!important;background:var(--rzx-surface-2)!important;border-radius:20px!important;padding:18px!important}
body.rzx-page-payment .pay-panel .pay-panel{background:var(--rzx-surface)!important;border-radius:14px!important;padding:12px 13px!important}
body.rzx-page-payment .qrbox{border:1px solid #e2e8f0;border-radius:20px!important;padding:17px!important;box-shadow:0 10px 26px rgba(15,23,42,.08)}
body.rzx-page-payment .status-pill{background:var(--rzx-warning-soft)!important;border-color:color-mix(in srgb,var(--rzx-warning) 35%,var(--rzx-line))!important;color:var(--rzx-warning)!important}
body.rzx-page-payment .status-pill.info{background:var(--rzx-info-soft)!important;color:var(--rzx-info)!important;border-color:color-mix(in srgb,var(--rzx-info) 35%,var(--rzx-line))!important}
body.rzx-page-payment .status-pill.success{background:var(--rzx-success-soft)!important;color:var(--rzx-success)!important;border-color:color-mix(in srgb,var(--rzx-success) 35%,var(--rzx-line))!important}
body.rzx-page-payment .status-pill.danger{background:var(--rzx-danger-soft)!important;color:var(--rzx-danger)!important;border-color:color-mix(in srgb,var(--rzx-danger) 35%,var(--rzx-line))!important}
.rzx-payment-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.rzx-payment-progress span{position:relative;padding-top:22px;color:var(--rzx-muted);font-size:11px;font-weight:750;text-align:center}
.rzx-payment-progress span::before{content:"";position:absolute;top:4px;left:50%;width:12px;height:12px;border-radius:999px;transform:translateX(-50%);background:var(--rzx-line);box-shadow:0 0 0 4px var(--rzx-surface)}
.rzx-payment-progress span::after{content:"";position:absolute;top:9px;left:calc(50% + 10px);right:calc(-50% + 10px);height:2px;background:var(--rzx-line)}
.rzx-payment-progress span:last-child::after{display:none}
.rzx-payment-progress span.done::before,.rzx-payment-progress span.active::before{background:var(--rzx-primary)}
.rzx-payment-progress span.done::after{background:var(--rzx-primary)}
.rzx-payment-progress span.active{color:var(--rzx-primary)}
.rzx-auto-check{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 13px;border:1px solid var(--rzx-line);border-radius:14px;background:var(--rzx-info-soft);color:var(--rzx-muted);font-size:12px}
.rzx-spinner{width:18px;height:18px;border-radius:999px;border:2px solid color-mix(in srgb,var(--rzx-primary) 22%,transparent);border-top-color:var(--rzx-primary);animation:rzx-spin .8s linear infinite;flex:none}
@keyframes rzx-spin{to{transform:rotate(360deg)}}
.rzx-success-mark{width:84px;height:84px;margin:0 auto 20px;border-radius:999px;display:grid;place-items:center;background:var(--rzx-success-soft);color:var(--rzx-success);animation:rzx-pop .45s cubic-bezier(.2,.8,.2,1)}
.rzx-success-mark svg{width:45px;height:45px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes rzx-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.rzx-state-card{text-align:center;max-width:640px!important;padding:42px 30px!important}
.rzx-state-card h1{margin:0 0 10px;font-size:34px}
.rzx-state-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Order and account pages */
body.rzx-page-order .form-wrap{width:min(980px,calc(100% - 28px));max-width:none!important;margin:0 auto;padding:28px 0 110px!important}
body.rzx-page-order .auth-card.track-box{max-width:none!important;padding:26px!important}
body.rzx-page-order .track-status-hero{background:var(--rzx-primary-soft)!important;border-color:color-mix(in srgb,var(--rzx-primary) 30%,var(--rzx-line))!important;box-shadow:none!important}
body.rzx-page-order .track-status-total{background:var(--rzx-surface)!important}
body.rzx-page-order .track-step{background:var(--rzx-surface-2)!important;border-color:var(--rzx-line)!important}
body.rzx-page-order .track-step.done{background:var(--rzx-success-soft)!important;border-color:color-mix(in srgb,var(--rzx-success) 30%,var(--rzx-line))!important}
body.rzx-page-order .track-step.current{background:var(--rzx-primary-soft)!important;border-color:var(--rzx-primary)!important}
body.rzx-page-order .detail-row,
body.rzx-page-order .replacement-box,
body.rzx-page-order .track-warranty,
body.rzx-page-order .product-data-item{
  background:var(--rzx-surface-2)!important;
  border-color:var(--rzx-line)!important;
}
body.rzx-page-order .product-data-card{background:var(--rzx-success-soft)!important;border-color:color-mix(in srgb,var(--rzx-success) 34%,var(--rzx-line))!important}
body.rzx-page-order .product-data-pre{background:var(--rzx-surface)!important;color:var(--rzx-text)!important;border-color:var(--rzx-line)!important}
body.rzx-page-account .rz-account-hero,
body.rzx-page-account .rz-history-hero,
body.rzx-page-account .rz-page-hero{
  border:1px solid var(--rzx-line)!important;
  background:var(--rzx-surface)!important;
  box-shadow:var(--rzx-shadow-sm)!important;
  border-radius:var(--rzx-radius-lg)!important;
}
body.rzx-page-account .rz-account-summary-card,
body.rzx-page-account .rz-account-setting-card,
body.rzx-page-account .rz-order-history-card,
body.rzx-page-account .rz-balance-history-card{
  border-color:var(--rzx-line)!important;
  background:var(--rzx-surface)!important;
  box-shadow:var(--rzx-shadow-sm)!important;
}
body.rzx-page-account .rz-status-pill,
body.rzx-page-order .status-pill{border-radius:999px!important}
.rzx-empty-state{padding:40px 22px;text-align:center;border:1px dashed var(--rzx-line);border-radius:var(--rzx-radius);background:var(--rzx-surface-2)}
.rzx-empty-state svg{width:44px;height:44px;color:var(--rzx-primary);margin-bottom:14px}
.rzx-empty-state h2{margin:0 0 7px}
.rzx-empty-state p{color:var(--rzx-muted);margin:0 0 18px}

/* Content/support */
body.rzx-page-content main.section> .container,
body.rzx-page-support main.section> .container{max-width:var(--rzx-content)}
body.rzx-page-content .card,
body.rzx-page-support .card,
body.rzx-page-content .glass,
body.rzx-page-support .glass{box-shadow:var(--rzx-shadow-sm)!important}
.rzx-content-rail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.rzx-side-help{position:sticky;top:88px;display:grid;gap:10px;padding:18px;border:1px solid var(--rzx-line);border-radius:var(--rzx-radius);background:var(--rzx-surface)}
.rzx-side-help a{display:flex;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;background:var(--rzx-surface-2);font-weight:800;color:var(--rzx-text);text-decoration:none}

/* Universal form submit state */
.is-submitting button[type="submit"],button.rzx-loading{
  position:relative!important;
  pointer-events:none!important;
  color:transparent!important;
  opacity:.82!important;
}
.is-submitting button[type="submit"]::after,button.rzx-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:19px;height:19px;margin:-9.5px;border-radius:999px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;animation:rzx-spin .7s linear infinite
}
.rzx-toast-stack{position:fixed;right:18px;top:86px;z-index:300;display:grid;gap:10px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.rzx-toast{pointer-events:auto;padding:13px 15px;border:1px solid var(--rzx-line);border-radius:14px;background:var(--rzx-surface);box-shadow:var(--rzx-shadow);color:var(--rzx-text);display:flex;align-items:flex-start;gap:10px;animation:rzx-toast-in .24s ease}
.rzx-toast.success{border-color:color-mix(in srgb,var(--rzx-success) 35%,var(--rzx-line))}
.rzx-toast.error{border-color:color-mix(in srgb,var(--rzx-danger) 35%,var(--rzx-line))}
@keyframes rzx-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rzx-skeleton{position:relative;overflow:hidden;background:var(--rzx-surface-2)!important;color:transparent!important}
.rzx-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(148,163,184,.18),transparent);animation:rzx-shimmer 1.3s infinite}
@keyframes rzx-shimmer{to{transform:translateX(100%)}}

/* Mobile */
@media(max-width:900px){
  body.rzx-page-auth .form-wrap{grid-template-columns:1fr;max-width:540px;padding:22px 0 88px}
  .rzx-auth-visual{display:none}
  body.rzx-page-auth .auth-card{padding:25px!important}
  body.rzx-page-payment .pay-grid{grid-template-columns:1fr!important}
  .rzx-content-rail{grid-template-columns:1fr}.rzx-side-help{position:static}
}
@media(max-width:760px){
  :root{--rzx-bottom-space:90px}
  body.rzx-app .container{width:min(100%,calc(100% - 24px))}
  body.rzx-app .section{padding:18px 0 104px}
  body.rzx-app .topbar .nav{min-height:62px!important}
  body.rzx-app .nav-actions .btn{min-height:40px!important;padding:8px 10px!important}
  .rzx-page-head{align-items:flex-start;display:grid;margin-bottom:16px}
  .rzx-page-head h1{font-size:30px}
  .rzx-page-actions{width:100%}.rzx-page-actions .btn{flex:1}
  body.rzx-page-auth .form-wrap{width:min(100%,calc(100% - 24px));padding:18px 0 88px}
  body.rzx-page-auth .auth-card{padding:22px!important;border-radius:22px!important}
  body.rzx-page-auth .auth-card h1{font-size:28px!important}
  body.rzx-page-payment .pay-shell{padding:14px 12px 100px!important}
  body.rzx-page-payment .pay-card{padding:15px!important;border-radius:22px!important}
  body.rzx-page-payment .pay-panel{padding:14px!important;border-radius:17px!important}
  .rzx-payment-progress{gap:3px}.rzx-payment-progress span{font-size:9px}
  body.rzx-page-order .form-wrap{width:min(100%,calc(100% - 20px));padding-top:14px!important}
  body.rzx-page-order .auth-card.track-box{padding:15px!important;border-radius:22px!important}
  .rzx-toast-stack{left:12px;right:12px;top:74px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.rzx-auth-column{display:grid;gap:14px;width:100%}
.rzx-auth-resend{padding:16px 18px;border:1px solid var(--rzx-line);border-radius:18px;background:var(--rzx-surface);box-shadow:var(--rzx-shadow-sm);text-align:center}
.rzx-auth-resend p{margin:0 0 10px;color:var(--rzx-muted);font-size:12px}
body.rzx-page-payment .form-wrap{width:min(760px,calc(100% - 28px));max-width:none!important;min-height:100vh;margin:auto;padding:28px 0 108px!important;display:grid;place-items:center}
body.rzx-page-payment .form-wrap>.auth-card{width:100%!important;max-width:none!important;padding:28px!important}
.rzx-topup-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.rzx-topup-summary{padding:18px;border:1px solid var(--rzx-line);border-radius:18px;background:var(--rzx-surface-2)}
.rzx-topup-summary h2{font-size:17px;margin:0 0 14px}
.rzx-money-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rzx-line)}
.rzx-money-row:last-child{border-bottom:0;padding-bottom:0}.rzx-money-row span{color:var(--rzx-muted);font-size:12px}.rzx-money-row b{text-align:right}
.rzx-quick-amounts{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 16px}.rzx-quick-amounts button{min-height:36px!important;padding:7px 10px!important;font-size:11px!important}
@media(max-width:760px){.rzx-topup-layout{grid-template-columns:1fr}.rzx-topup-summary{order:-1}}