/* GWfan sheet — one look for every dialog (lot 2, 2026-10-23).
   Two engines stay in place and only get dressed:
   - KVS popups (login, signup, reset, support, add tokens) open in fancybox
     2.1.5, which KVS main.js relies on to bind its ajax forms. Fancybox writes
     its geometry inline, so the geometry rules below are the only place in the
     kit where !important is allowed (see tools/stylelint/.stylelintrc.json).
   - GWfan <dialog class="gw-action-dialog"> (subscribe, tip, message, unlock).
   Mobile (< 600px): a sheet rising from the bottom. Wider: a centred card. */

/* Fancybox: overlay and close button ------------------------------------- */

.fancybox-lock .fancybox-overlay,
.fancybox-overlay {
  background-color: var(--gw2-scrim);
  background-image: none;
  backdrop-filter: blur(4px);
}

.fancybox-wrap:has(.gw-account-modal) .fancybox-close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gw2-surface-2);
}

.fancybox-wrap:has(.gw-account-modal) .fancybox-close::before,
.fancybox-wrap:has(.gw-account-modal) .fancybox-close::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 10px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--gw2-text-2);
  transform: rotate(45deg);
}

.fancybox-wrap:has(.gw-account-modal) .fancybox-close::after { transform: rotate(-45deg); }
.fancybox-wrap:has(.gw-account-modal) .fancybox-close:hover::before,
.fancybox-wrap:has(.gw-account-modal) .fancybox-close:hover::after { background: var(--gw2-text); }

/* Fancybox: geometry (inline styles from fancybox must be overridden) ----- */

.fancybox-wrap:has(.gw-account-modal) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: min(440px, calc(100vw - 32px)) !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
}

.fancybox-wrap:has(.gw-account-modal) .fancybox-skin {
  padding: 0 !important;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sheet);
  background: var(--gw2-surface);
  box-shadow: var(--gw2-shadow-sheet);
  color: var(--gw2-text);
  animation: gw2-sheet-up var(--gw2-dur-sheet) var(--gw2-ease-spring);
}

.fancybox-wrap:has(.gw-account-modal) .fancybox-inner {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - 48px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: transparent;
}

@media (max-width: 599px) {
  .fancybox-wrap:has(.gw-account-modal) {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .fancybox-wrap:has(.gw-account-modal) .fancybox-skin {
    border-bottom: 0;
    border-radius: var(--gw2-radius-sheet) var(--gw2-radius-sheet) 0 0;
  }

  .fancybox-wrap:has(.gw-account-modal) .fancybox-skin::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: var(--gw2-radius-pill);
    background: var(--gw2-line-strong);
  }

  .fancybox-wrap:has(.gw-account-modal) .fancybox-inner { max-height: calc(100dvh - 32px); }
}

/* KVS modal content, in fancybox or on the direct-access page ------------ */

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal {
  width: auto;
  max-width: none;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 0;
  background: transparent;
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .title__modal,
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal h2 {
  margin: 0 0 8px;
  padding-right: 48px; /* room for the close button; legacy forces the margins */
  color: var(--gw2-text);
  text-align: left;
  font-family: var(--gw2-font-display);
  font-size: 26px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.1;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal p {
  margin: 0 0 16px;
  color: var(--gw2-text-2);
  font-size: var(--gw2-fs-sm);
  line-height: 1.5;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal label {
  color: var(--gw2-text-2);
  font-size: 13px;
  font-weight: var(--gw2-fw-semibold);
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal :is(.textfield, .input, input[type="text"], input[type="email"], input[type="password"], textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface-sunken);
  color: var(--gw2-text);
  font: var(--gw2-fw-regular) 15px / 1.2 var(--gw2-font-ui);
  outline: none;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal textarea { padding: 12px 14px; }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal :is(input, textarea, select)::placeholder { color: var(--gw2-faint); }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal :is(input, textarea, select):focus { border-color: var(--gw2-pink); box-shadow: var(--gw2-focus-ring); outline: none; }

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .gw-account-button {
  /* gwfan.css sets `color: var(--gw-on-accent) !important`; redefining the
     variable here is enough to win without another !important. */
  --gw-on-accent: var(--gw2-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 var(--gw2-space-4);
  border: 0;
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font: var(--gw2-fw-black) var(--gw2-fs-md) / 1.2 var(--gw2-font-ui);
  cursor: pointer;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .gw-account-button:hover { filter: brightness(1.06); }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .gw-account-button:focus-visible { box-shadow: var(--gw2-focus-ring); outline: none; }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .gw-account-button:disabled { opacity: 0.5; cursor: not-allowed; }

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal .gw-account-button--secondary {
  min-height: 48px;
  border: 1px solid var(--gw2-line-strong);
  background: var(--gw2-surface-2);
  box-shadow: none;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal a:not(.gw-account-button) { color: var(--gw2-pink-text); }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-account-modal :is(.field-error, .generic-error) { color: var(--gw2-pink-text); }

/* Token packs (Add tokens) */

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-packages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-packages legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--gw2-muted);
  font-size: var(--gw2-fs-xs);
  font-weight: var(--gw2-fw-semibold);
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-packages .gw-token-package {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--gw2-line);
  border-radius: 18px;
  background: var(--gw2-surface-sunken);
  color: var(--gw2-text);
  cursor: pointer;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-packages .gw-token-package:has(input:checked) {
  border: 2px solid transparent;
  background: linear-gradient(var(--gw2-surface-2), var(--gw2-surface-2)) padding-box, var(--gw2-gradient) border-box;
}

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-package input { accent-color: var(--gw2-pink); width: 18px; height: 18px; }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-package > span { flex-grow: 1; font-family: var(--gw2-font-display); font-size: 18px; font-weight: var(--gw2-fw-black); }
:is(.fancybox-wrap, .gw-direct-auth-card) .gw-token-package .gw-token-price { font-size: var(--gw2-fs-md); font-weight: var(--gw2-fw-semibold); }

:is(.fancybox-wrap, .gw-direct-auth-card) .gw-topup-context {
  padding: 12px 14px;
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-pink-bg);
  color: var(--gw2-text-soft);
}

/* GWfan native dialogs ---------------------------------------------------- */

dialog.gw-action-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 22px 20px 24px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sheet);
  background: var(--gw2-surface);
  box-shadow: var(--gw2-shadow-sheet);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
  animation: gw2-sheet-up var(--gw2-dur-sheet) var(--gw2-ease-spring);
}

dialog.gw-action-dialog::backdrop { background: var(--gw2-scrim); backdrop-filter: blur(4px); }

dialog.gw-action-dialog h2 {
  margin: 0 0 12px;
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: 24px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.15;
}

dialog.gw-action-dialog p { margin: 0 0 10px; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); line-height: 1.5; }
dialog.gw-action-dialog .gw-action-balance { color: var(--gw2-muted); font-size: 13px; }
dialog.gw-action-dialog label { color: var(--gw2-text-2); font-size: 13px; font-weight: var(--gw2-fw-semibold); }

dialog.gw-action-dialog :is(input, textarea) {
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface-sunken);
  color: var(--gw2-text);
  font: var(--gw2-fw-regular) 15px / 1.3 var(--gw2-font-ui);
}

dialog.gw-action-dialog input { min-height: 50px; padding: 0 14px; }
dialog.gw-action-dialog textarea { padding: 12px 14px; }
dialog.gw-action-dialog :is(input, textarea):focus { border-color: var(--gw2-pink); box-shadow: var(--gw2-focus-ring); outline: none; }

dialog.gw-action-dialog .gw-crop-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gw2-space-2);
  margin-top: var(--gw2-space-4);
}

dialog.gw-action-dialog .gw-crop-actions button,
dialog.gw-confirmation-dialog > button {
  min-height: var(--gw2-tap);
  border: 0;
  border-radius: var(--gw2-radius-sm);
  background: transparent;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1.2 var(--gw2-font-ui);
  cursor: pointer;
}

dialog.gw-action-dialog .gw-crop-actions .gw-action,
dialog.gw-confirmation-dialog > button.gw-action {
  min-height: 56px;
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font-size: var(--gw2-fs-md);
  font-weight: var(--gw2-fw-black);
}

dialog.gw-action-dialog .gw-crop-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
dialog.gw-action-dialog .gw-form-status { margin: 8px 0 0; color: var(--gw2-pink-text); font-size: 13px; }
dialog.gw-action-dialog .gw-form-status:empty { display: none; }

dialog.gw-confirmation-dialog { width: min(360px, calc(100vw - 32px)); text-align: center; }
dialog.gw-confirmation-dialog > button { width: 100%; }

@media (max-width: 599px) {
  dialog.gw-action-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: var(--gw2-radius-sheet) var(--gw2-radius-sheet) 0 0;
  }

  dialog.gw-action-dialog::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: -12px auto 16px;
    border-radius: var(--gw2-radius-pill);
    background: var(--gw2-line-strong);
  }
}

/* Subscribe sheet content (lot 3) ---------------------------------------- */

dialog.gw2-subscribe-sheet { text-align: center; }
dialog.gw2-subscribe-sheet h2 { margin: 12px 0 0; font-size: 26px; }
.gw2-subscribe__head { display: flex; justify-content: center; margin-top: 6px; }

.gw2-subscribe__price {
  margin: 4px 0 0;
  color: var(--gw2-text-2);
  font-size: 15px;
  font-weight: var(--gw2-fw-semibold);
}

dialog.gw-action-dialog .gw2-subscribe__price { color: var(--gw2-text-2); font-size: 15px; }

.gw2-subscribe__amount {
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-2xl);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.1;
}

.gw2-perks { display: flex; flex-direction: column; gap: var(--gw2-space-3); margin: var(--gw2-space-4) 0 0; text-align: left; }

.gw2-perks li {
  position: relative;
  padding-left: 36px;
  color: var(--gw2-text-soft);
  font-size: var(--gw2-fs-sm);
  line-height: 24px;
}

.gw2-perks li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gw2-pink-bg);
}

.gw2-perks li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 9px;
  width: 5px;
  height: 9px;
  border: solid var(--gw2-pink-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.gw2-perks strong { color: var(--gw2-text); font-weight: var(--gw2-fw-black); }

dialog.gw-action-dialog .gw2-subscribe__balance {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  color: var(--gw2-muted);
  font-size: 13px;
}

.gw2-subscribe__balance strong { color: var(--gw2-text); font-weight: var(--gw2-fw-semibold); }

dialog.gw-action-dialog .gw2-subscribe__short {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-pink-bg);
  color: var(--gw2-text-soft);
  font-size: 13px;
  text-align: left;
}

dialog.gw-action-dialog .gw2-subscribe__terms { margin: 4px 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-subscribe__terms a { color: var(--gw2-pink-text); }

/* Celebration after a confirmed subscription */

@keyframes gw2-ring-spin {
  from { transform: rotate(0deg) scale(0.9); }
  70% { transform: rotate(320deg) scale(1.06); }
  to { transform: rotate(360deg) scale(1); }
}

.gw2-celebrate { display: flex; flex-direction: column; align-items: center; gap: var(--gw2-space-3); padding: 8px 0 4px; }
.gw2-celebrate .gw2-avatar--ring { animation: gw2-ring-spin 900ms var(--gw2-ease-spring); }
dialog.gw-action-dialog .gw2-celebrate h2 { margin: 6px 0 0; font-size: 30px; }
dialog.gw-action-dialog .gw2-celebrate p { margin: 0; }
dialog.gw-action-dialog .gw2-celebrate .gw-action {
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font: var(--gw2-fw-black) var(--gw2-fs-md) / 1.2 var(--gw2-font-ui);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .fancybox-wrap:has(.gw-account-modal) .fancybox-skin,
  dialog.gw-action-dialog,
  .gw2-celebrate .gw2-avatar--ring { animation: none; }
}