﻿/* Shared NOVIQ button styles. Loaded after page styles. */
:root {
  --button-radius: 12px;
  --button-surface: #121b30;
  --button-border: rgba(154, 180, 229, .25);
  --button-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  --button-ease: cubic-bezier(.2, .7, .2, 1);
}
button, input[type="submit"], input[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root :is(button, input[type="submit"], input[type="button"], .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button) {
  box-sizing: border-box;
  touch-action: manipulation;
  transition: background .2s var(--button-ease), border-color .2s var(--button-ease), color .2s var(--button-ease), box-shadow .2s var(--button-ease), opacity .2s, translate .2s var(--button-ease);
}
/* Usable fallback for buttons added without a variant class. */
button:not([class]) {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
:root :is(.button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button, .offer-later, .language-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  background: linear-gradient(150deg, #16213a, #10182b);
  color: #e3eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--button-shadow);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transform: none;
}
:root :is(.primary-button, .button-primary), :root .offer-actions .button-primary {
  position: relative;
  min-height: 48px;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 20px;
  border: 1px solid rgba(134, 236, 255, .65);
  background: linear-gradient(110deg, #55e5eb, #7ba5ff);
  color: #071226;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 22px rgba(49, 170, 231, .19);
  font-weight: 750;
}
:root .primary-button span:last-child, :root .button-primary > span:last-child {
  color: inherit;
  font-size: inherit;
}
:root :is(.primary-button, .button-primary) > span:nth-child(2) {
  font-size: 18px;
  line-height: 1;
}
:root :is(.button-ghost, .offer-later, .all-plans-link, .back-link, .support-button) {
  background: rgba(22, 33, 58, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  color: #b6d7f2;
}
:root :is(.all-plans-link, .back-link) { width: fit-content; }
:root .register-button {
  min-height: 40px;
  padding: 9px 16px;
  border-color: rgba(49, 217, 231, .45);
  background: linear-gradient(130deg, rgba(49, 217, 231, .15), rgba(98, 135, 255, .15));
  color: #b9f6ff;
  font-size: 12px;
}
:root .language-toggle {
  min-width: 42px;
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 11px;
  font-size: 12px;
  letter-spacing: .04em;
}
:root :is(.offer-later, .bot-row [data-configure-bot]) { min-height: 40px; padding: 9px 14px; font-size: 12px; }
:root :is(.offer-close, .floating-support-close) {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--button-border);
  border-radius: 12px;
  background: #141e33;
  color: #c1cde8;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
:root .password-visibility-toggle {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(49, 217, 231, .2);
  border-radius: 8px;
  background: rgba(49, 217, 231, .07);
  color: #a3ecf4;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}
:root .password-visibility-toggle[aria-pressed="true"] { border-color: rgba(49, 217, 231, .6); background: rgba(49, 217, 231, .16); }
:root .floating-support-button {
  min-height: 48px;
  padding: 12px 18px;
  border-color: rgba(86, 219, 238, .5);
  border-radius: 16px;
  background: linear-gradient(135deg, #172a46, #121d37);
  color: #eefaff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Choice buttons retain their card layouts. */
:root :is(.plan-card, .checkout-plan, .offer-options button, .auth-methods button) {
  border: 1px solid var(--button-border);
  border-radius: 14px;
  background: linear-gradient(145deg, #121b30, #0c1325);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transform: none;
}
:root :is(.checkout-plan, .offer-options button) { min-height: 58px; padding: 14px 16px; }
:root .auth-methods button { min-height: 44px; padding: 11px 14px; }
:root :is(.plan-card.recommended-plan, .checkout-plan.is-recommended, .offer-options .offer-recommended) { border-color: rgba(49, 217, 231, .5); }
:root :is(.plan-card, .checkout-plan, .offer-options button, .auth-methods button)[aria-pressed="true"] {
  border-color: #67e8f0;
  background: linear-gradient(125deg, rgba(49, 217, 231, .2), rgba(98, 135, 255, .18));
  box-shadow: inset 3px 0 0 #67e8f0, 0 0 0 1px rgba(49, 217, 231, .12), 0 8px 26px rgba(0, 0, 0, .16);
}
:root .plan-card[aria-pressed="true"] :is(.selection-state, .plan-kicker) { color: #9cf2f4; }
:root .plan-card .selection-state { position: static; margin-top: 16px; }
:root .price-list .price-option strong small { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0; }
:root :is(.checkout-plan, .offer-options button) strong small { font-size: 10px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
/* Focus remains distinct from selection and hover. */
:root :is(button, input[type="submit"], input[type="button"], a):focus-visible {
  outline: 2px solid #a9f4ff;
  outline-offset: 4px;
}
@media (hover: hover) {
  :root :is(button, .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: rgba(103, 232, 240, .8);
    color: #f1fbff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .25), 0 0 0 1px rgba(49, 217, 231, .1);
    translate: 0 -2px;
  }
  :root :is(.primary-button, .button-primary):not(:disabled):hover, :root .offer-actions .button-primary:hover {
    background: linear-gradient(110deg, #83f3f2, #9abbff);
    color: #071226;
    box-shadow: 0 10px 30px rgba(49, 170, 231, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
  }
  :root :is(.offer-close, .floating-support-close, .password-visibility-toggle):not(:disabled):hover { translate: none; background: #1a2d46; }
  :root :is(.plan-card, .checkout-plan, .offer-options button)[aria-pressed="true"]:hover { color: var(--ink); }
}
:root :is(button, .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22);
}
:root .password-visibility-toggle:not(:disabled):active { translate: none; }
:root :is(button, input[type="submit"], input[type="button"], .button):is(:disabled, [aria-disabled="true"]) {
  opacity: .48;
  cursor: not-allowed;
  translate: none;
  box-shadow: none;
}
:root button[type="submit"]:disabled { cursor: wait; }
:root button[aria-busy="true"] { cursor: wait; }
@media (max-width: 560px) {
  :root .bot-settings-actions { align-items: stretch; }
  :root .bot-settings-actions > button { flex: 1 1 auto; }
  :root .offer-actions { flex-wrap: wrap; gap: 12px; }
  :root .offer-actions .button-primary { flex: 1 1 180px; }
  :root .checkout-plan { flex-wrap: wrap; gap: 10px; }
  :root .checkout-plan > strong { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(button, input[type="submit"], input[type="button"], .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button) { transition: none; }
  :root :is(button, .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button):is(:hover, :active) { translate: none; }
}
@media (forced-colors: active) {
  :root :is(button, .button, .primary-button, .register-button, .all-plans-link, .back-link, .support-button) { border: 1px solid ButtonText; }
  :root [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
}
/* Neutralize the older card lift; movement is shared through translate. */
@media (hover: hover) {
  :root .plan-card:not([aria-pressed="true"]):hover { transform: none; }
}
