/* Local-only RBXworld visual refresh, based on the supplied blue checkout reference. */
:root {
  --bg: #f5fbff;
  --surface: #ffffff;
  --surface-soft: #f3f9fc;
  --ink: #102a3b;
  --muted: #71889a;
  --line: #d7e8f1;
  --blue: #078fe8;
  --blue-soft: #eaf8ff;
  --green: #14a88c;
  --green-soft: #e9faf5;
  --green-line: #c5eee2;
  --action: #078fe8;
  --action-hover: #087bd0;
  --action-text: #ffffff;
  --brand-gradient: linear-gradient(110deg, #087fe8 0%, #19b6ed 100%);
  --brand-gradient-hover: linear-gradient(110deg, #1597f4 0%, #31c4f2 100%);
  --focus: #72c9f2;
  --shadow: 0 14px 34px -25px #087fbd48;
}

[data-theme="dark"] {
  --bg: #101b28;
  --surface: #172536;
  --surface-soft: #1d3043;
  --ink: #edf8ff;
  --muted: #a1b6c8;
  --line: #2c455a;
  --blue: #39b9f4;
  --blue-soft: #17384f;
  --green: #54d7bd;
  --green-soft: #183c3b;
  --green-line: #2d635b;
  --action: #168fe8;
  --action-hover: #27a8ef;
  --brand-gradient: linear-gradient(110deg, #087fe8 0%, #19b6ed 100%);
  --brand-gradient-hover: linear-gradient(110deg, #1597f4 0%, #31c4f2 100%);
  --focus: #278fc5;
  --shadow: 0 16px 38px -24px #0008;
}

body {
  background:
    radial-gradient(ellipse at 50% 6%, #e7f7ff 0, transparent 44rem),
    var(--bg);
}

[data-theme="dark"] body {
  background: radial-gradient(ellipse at 50% 4%, #122c42 0, transparent 42rem), var(--bg);
}

.site-header,
.shop-nav,
.site-footer {
  background: color-mix(in srgb, var(--surface) 96%, #eaf8ff);
  border-color: var(--line);
}

.brand-light {
  background: linear-gradient(105deg, #087fe8 5%, #19b6ed 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.shop-nav a[aria-current],
.shop-nav a:hover,
.login-button,
.currency-switch button,
.method-label a,
.profile-link,
.faq-answer a {
  color: var(--blue);
}

.hero h1 em {
  background: linear-gradient(105deg, #078fe8 8%, #16b9e8 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-earth {
  filter: drop-shadow(0 17px 24px #138ed426);
}

.purchase-card,
.buy-card.purchase-card {
  border-color: #d1e8f4;
  background: linear-gradient(155deg, #ffffff 55%, #f8fcff 100%);
  box-shadow: 0 16px 42px -29px #078fe866;
}

[data-theme="dark"] .purchase-card,
[data-theme="dark"] .buy-card.purchase-card {
  background: linear-gradient(155deg, #172536 50%, #172b3d 100%);
  border-color: var(--line);
}

.buy-card-heading .icon,
.amount-input > .icon,
.new-method .icon,
.promise-strip .icon,
.faq-list summary > .icon,
.amount-field > .icon {
  color: #078fe8;
}

.buy-card-heading-icon {
  opacity: 1;
}

.amount-field,
.amount-input.amount-field {
  background: linear-gradient(115deg, #f3f9fc 0%, #edf8fc 100%);
  border-color: #d3e8f2;
}

[data-theme="dark"] .amount-field,
[data-theme="dark"] .amount-input.amount-field {
  background: var(--surface-soft);
  border-color: var(--line);
}

.amount-field:focus-within,
.text-input:focus,
.text-input:focus-visible {
  border-color: #42b9ee;
  box-shadow: 0 0 0 3px #1ca8e51c;
}

#amount-range {
  background: linear-gradient(to right, #078fe8 var(--range-progress, 20%), #dceaf1 var(--range-progress, 20%));
  accent-color: #078fe8;
}

#amount-range::-webkit-slider-thumb {
  background: #12b6ed;
  box-shadow: 0 0 0 1px #078fe8, 0 2px 7px #087fbd36;
}

#amount-range::-moz-range-thumb {
  background: #12b6ed;
  box-shadow: 0 0 0 1px #078fe8;
}

.presets button[aria-pressed="true"],
.new-method.active {
  background: linear-gradient(145deg, #effbff 0%, #e7f8ff 100%);
  border-color: #48c3f4;
  color: #087bc7;
  box-shadow: 0 4px 14px -11px #078fe8b3;
}

[data-theme="dark"] .presets button[aria-pressed="true"],
[data-theme="dark"] .new-method.active {
  background: linear-gradient(145deg, #17374d 0%, #193c53 100%);
  border-color: #278fc5;
  color: #dff6ff;
}

.new-method {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.new-method:hover:not(:disabled) {
  border-color: #75cfee;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px -17px #078fe8b3;
}

.primary-button,
.register-button {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 8px 18px -10px #078fe882;
}

.primary-button:hover:not(:disabled),
.register-button:hover:not(:disabled) {
  background: var(--brand-gradient-hover);
  color: #fff;
  box-shadow: 0 9px 20px -10px #078fe899;
}

.primary-button:focus-visible,
.register-button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-color: #5cc3ef;
}

.primary-button:disabled,
.primary-button:disabled:hover,
.primary-button:disabled:active {
  background: #e7f0f5;
  color: #8297a7;
  box-shadow: none;
}

[data-theme="dark"] .primary-button:disabled {
  background: #2b4053;
  color: #9cb1c2;
}

.plus-stock {
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #d8eef8;
  border-radius: 999px;
  background: linear-gradient(105deg, #f5fcff 0%, #eaf8ff 100%);
  box-shadow: 0 3px 11px -8px #078fe87a;
}

.plus-stock b {
  background: linear-gradient(105deg, #087fe8 0%, #0b88e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

.plus-stock .icon {
  color: #078fe8;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: block;
  transform: translateY(-1px);
}

[data-theme="dark"] .plus-stock {
  background: linear-gradient(105deg, #173448 0%, #183b52 100%);
  border-color: #2e617a;
}

.plus-stock[hidden] {
  display: none;
}

/* Quiet interaction feedback for buttons and menu/dialog entrances. */
button:not(:disabled),
[role="button"],
.new-method,
.payment-choice,
.profile-option {
  transition-property: transform, box-shadow, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2,.75,.3,1);
}

button:active:not(:disabled),
[role="button"]:active,
.primary-button:active:not(:disabled),
.register-button:active:not(:disabled),
.secondary-button:active,
.icon-button:active,
.new-method:active:not(:disabled),
.payment-choice:active:not(:disabled),
.profile-option:active {
  transform: scale(.987);
}

dialog.modal[open] {
  animation: rbxworld-menu-open 210ms cubic-bezier(.2,.75,.3,1) both;
}

dialog.modal[open]::backdrop {
  animation: rbxworld-menu-backdrop 210ms ease-out both;
}

@keyframes rbxworld-menu-open {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rbxworld-menu-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled),
  [role="button"],
  .primary-button,
  .register-button,
  .secondary-button,
  .icon-button,
  .new-method,
  .payment-choice,
  .profile-option,
  dialog.modal[open],
  dialog.modal[open]::backdrop {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.recent-heading h2 {
  color: var(--ink);
}

.purchase-tile {
  position: relative;
  overflow: hidden;
  border-color: #d5e9f3;
  background: linear-gradient(150deg, var(--surface) 0%, #f6fbfe 100%);
  box-shadow: 0 9px 24px -22px #078fe8a6;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.purchase-tile::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(100deg, #078fe8 0%, #15c1ed 100%);
  content: "";
}

.purchase-tile:hover {
  transform: translateY(-2px);
  border-color: #a9dff3;
  box-shadow: 0 14px 26px -21px #078fe8b3;
}

.recent-method:not(.recent-method-in-game):not(.recent-method-gamepass) {
  color: #087fbd;
  background: #e9f8ff;
}

.recent-method-in-game {
  color: #087fbd;
  background: #e5f7ff;
}

.recent-method-gamepass {
  color: #b84957;
  background: #fff0f1;
}

.recent-amount .icon {
  color: #0a99df;
}

.recent-amount-in-game .icon {
  color: #319acb;
}

[data-theme="dark"] .purchase-tile {
  background: linear-gradient(150deg, #172536 0%, #192b3e 100%);
  border-color: var(--line);
}

[data-theme="dark"] .recent-method:not(.recent-method-in-game):not(.recent-method-gamepass),
[data-theme="dark"] .recent-method-in-game {
  color: #95e0ff;
  background: #173b52;
}

[data-theme="dark"] .recent-method-gamepass {
  color: #ffb7bd;
  background: #492c3a;
}

.checkout-modal {
  border-color: #cbe6f3;
  box-shadow: 0 28px 90px #087fbd35;
}

.checkout-modal .modal-shell {
  background: linear-gradient(165deg, #ffffff 0%, #f7fcff 100%);
}

[data-theme="dark"] .checkout-modal .modal-shell {
  background: linear-gradient(165deg, #172536 0%, #172b3d 100%);
}

.modal-header .overline,
.flow-steps,
.modal-subtitle,
#profile-help {
  display: none !important;
}

.modal-header {
  align-items: center;
  margin-bottom: 17px;
}

.modal-header h2 {
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -.7px;
}

.order-chip {
  margin-bottom: 19px;
  border: 1px solid #dceef7;
  background: linear-gradient(110deg, #f2faff 0%, #e9f7fd 100%);
  color: var(--ink);
}

.order-chip .icon {
  color: #078fe8;
}

[data-theme="dark"] .order-chip {
  background: linear-gradient(110deg, #173448 0%, #193b51 100%);
  border-color: var(--line);
}

.form-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.text-input {
  background: #f4f9fc;
  border-color: #d5e8f1;
}

[data-theme="dark"] .text-input {
  background: var(--surface-soft);
  border-color: var(--line);
}

.profile-results {
  gap: 8px;
  margin: 11px 0 0;
}

.profile-option {
  min-height: 68px;
  border-color: #d7e9f2;
  border-radius: 15px;
  background: linear-gradient(110deg, #fff 0%, #f6fbfe 100%);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.profile-option:hover {
  border-color: #80d1f0;
  background: #f2fbff;
  transform: translateY(-1px);
}

.profile-option.selected {
  border-color: #29b5ec;
  background: linear-gradient(110deg, #effaff 0%, #e5f7ff 100%);
}

.profile-option .avatar {
  background: linear-gradient(145deg, #e5f7ff, #f4fbff);
  border: 1px solid #d7edf7;
  color: #078fe8;
}

.selection-circle,
.profile-option.selected .selection-circle {
  border-color: #078fe8;
}

.profile-option.selected .selection-circle {
  background: var(--brand-gradient);
}

.search-status.profile-search-status {
  min-height: 20px;
  padding: 11px 2px 2px;
  color: var(--muted);
  font-size: 12px;
}

.modal-actions {
  margin-top: 18px;
}

.secondary-button {
  border-color: var(--line);
  color: var(--muted);
}

.secondary-button:hover {
  border-color: #a8dff2;
  background: var(--blue-soft);
  color: var(--blue);
}

.gp-place,
.gp-pass,
.checkout-recipient,
.confirm-profile,
.kaspi-invoice-total,
.payment-choice {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.gp-pass[aria-pressed="true"],
.kaspi-method[aria-pressed="true"],
.payment-choice[aria-pressed="true"] {
  border-color: #42b9ee;
  background: linear-gradient(135deg, #effaff 0%, #e1f6ff 100%);
  box-shadow: 0 6px 16px -14px #078fe8b3;
}

.gp-price {
  border: 1px solid #d5edf8;
  background: linear-gradient(125deg, #effaff 0%, #e4f7ff 100%);
}

.gp-place:hover,
.gp-pass:hover,
.kaspi-method:hover:not(:disabled) {
  border-color: #80d1f0;
}

[data-theme="dark"] .gp-place,
[data-theme="dark"] .gp-pass,
[data-theme="dark"] .checkout-recipient,
[data-theme="dark"] .confirm-profile,
[data-theme="dark"] .kaspi-invoice-total,
[data-theme="dark"] .payment-choice {
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%);
  border-color: var(--line);
}

[data-theme="dark"] .gp-pass[aria-pressed="true"],
[data-theme="dark"] .kaspi-method[aria-pressed="true"],
[data-theme="dark"] .payment-choice[aria-pressed="true"] {
  background: linear-gradient(135deg, #17384f 0%, #1b425a 100%);
  border-color: #278fc5;
}

[data-theme="dark"] .gp-price {
  background: linear-gradient(125deg, #17384f 0%, #1b425a 100%);
  border-color: #2d6179;
}

.promise-strip {
  display: none;
}

/* Keep customer pages consistent with the shop's blue/cyan theme. */
.portal-shell {
  color: var(--ink);
}

.portal-heading h1 {
  background: linear-gradient(105deg, #087fe8 5%, #19b6ed 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.portal-heading .overline,
.help-articles .overline {
  color: #168fc8;
}

.shop-nav a {
  border-radius: 999px;
  padding: 9px 13px;
  transition: color .16s ease, background .16s ease;
}

.shop-nav a:hover,
.shop-nav a[aria-current="page"] {
  background: linear-gradient(110deg, #effaff, #e8f7ff);
  color: #087fc7;
}

.portal-shell .portal-card,
.portal-shell .empty-state {
  border-color: #d6e9f2;
  background: linear-gradient(150deg, #fff 0%, #f7fbfe 100%);
  box-shadow: 0 12px 30px -25px #087fbd55;
}

.portal-shell .notice {
  border-color: #d9edf7;
  background: linear-gradient(110deg, #f2faff, #eaf7fc);
}

.portal-shell .order-toolbar,
.portal-shell .help-category {
  border-color: #d6e9f2;
  background: linear-gradient(145deg, #fff, #f5faff);
}

.portal-shell .order-filters {
  border-color: #d6e9f2;
  background: #f3f9fc;
}

.portal-shell .order-filters button[aria-pressed="true"],
.portal-shell .help-category[aria-current="page"] {
  border-color: #51bde9;
  background: linear-gradient(110deg, #eaf9ff, #e2f5fd);
  color: #087fc7;
}

.portal-shell .order-search {
  border-color: #d1e6f1;
  background: #f6fafc;
}

.portal-shell .order-card {
  position: relative;
  overflow: hidden;
  border-color: #d7e9f2;
  background: linear-gradient(150deg, #fff 0%, #f7fbfe 100%);
  box-shadow: 0 10px 25px -22px #078fe866;
}

.portal-shell .order-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(100deg, #078fe8, #15c1ed);
  content: "";
}

.portal-shell .order-card:hover {
  border-color: #a9dff3;
  box-shadow: 0 14px 26px -21px #078fe899;
}

.portal-shell .primary-button,
.portal-shell a.primary-button {
  background: var(--brand-gradient);
  color: #fff;
}

.portal-shell .primary-button:hover:not(:disabled) {
  background: var(--brand-gradient-hover);
}

.portal-shell .secondary-button {
  border-color: #d3e7f1;
  background: linear-gradient(145deg, #fff, #f3f9fc);
}

.portal-shell .payment-option:has(input:checked) {
  border-color: #51bde9;
  background: linear-gradient(110deg, #effaff, #e5f7ff);
}

.legal-page .legal-heading h1 {
  background: linear-gradient(105deg, #087fe8 5%, #19b6ed 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.legal-page .legal-document {
  border-color: #d6e9f2;
  background: linear-gradient(150deg, #fff 0%, #f7fbfe 100%);
  box-shadow: 0 12px 30px -25px #087fbd55;
}

.legal-page .legal-contact,
.legal-page .tariff-highlight {
  border: 1px solid #d7ebf5;
  background: linear-gradient(110deg, #effaff, #e5f7ff);
}

.recent-avatar,
.recent-avatar.tone-0,
.recent-avatar.tone-1,
.recent-avatar.tone-2,
.recent-avatar.tone-3 {
  border: 1px solid #e4ebef;
  background: #f4f7f9;
  color: #788894;
}

[data-theme="dark"] .portal-shell .portal-card,
[data-theme="dark"] .portal-shell .empty-state,
[data-theme="dark"] .portal-shell .order-card {
  border-color: var(--line);
  background: linear-gradient(150deg, var(--surface), #172b3d);
}

[data-theme="dark"] .portal-shell .notice,
[data-theme="dark"] .portal-shell .order-toolbar,
[data-theme="dark"] .portal-shell .help-category,
[data-theme="dark"] .portal-shell .secondary-button {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
}

[data-theme="dark"] .legal-page .legal-document {
  border-color: var(--line);
  background: linear-gradient(150deg, var(--surface), #172b3d);
}

[data-theme="dark"] .legal-page .legal-contact,
[data-theme="dark"] .legal-page .tariff-highlight {
  border-color: #2e617a;
  background: linear-gradient(110deg, #173448, #193b51);
}

[data-theme="dark"] .portal-shell .order-filters {
  border-color: var(--line);
  background: var(--surface-soft);
}

[data-theme="dark"] .portal-shell .order-filters button[aria-pressed="true"],
[data-theme="dark"] .portal-shell .help-category[aria-current="page"],
[data-theme="dark"] .portal-shell .payment-option:has(input:checked) {
  border-color: #278fc5;
  background: linear-gradient(110deg, #17384f, #1b425a);
  color: #dff6ff;
}

[data-theme="dark"] .recent-avatar,
[data-theme="dark"] .recent-avatar.tone-0,
[data-theme="dark"] .recent-avatar.tone-1,
[data-theme="dark"] .recent-avatar.tone-2,
[data-theme="dark"] .recent-avatar.tone-3 {
  border-color: #3a4a57;
  background: #34414b;
  color: #d9e3e9;
}

@media (max-width: 520px) {
  .plus-stock {
    gap: 4px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .plus-stock b {
    font-size: 14px;
  }

  .plus-stock .icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .modal-header h2 {
    font-size: 21px;
  }

  .profile-option {
    min-height: 64px;
    padding: 10px;
  }

  .portal-shell .order-card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-method,
  .purchase-tile,
  .profile-option {
    transition: none;
  }
}