/*
 * Shared interactive controls.
 *
 * Keep visual button decisions here instead of adding page-specific button
 * styles. Legacy class names remain in the markup for layout and JS hooks.
 */

:root {
  --control-height: 46px;
  --control-height-compact: 40px;
  --control-height-large: 60px;
  --control-radius: var(--r-md);
  --control-border: 2px solid var(--shadow-ink);
  --control-shadow: var(--elev-3);
  --control-shadow-hover: var(--elev-4);
  --control-secondary: rgba(255, 255, 255, 0.07);
  --control-secondary-hover: rgba(255, 255, 255, 0.13);
  --control-primary-hover: linear-gradient(180deg, #57ffed 0%, #08dcc5 100%);
  --control-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-button {
  --ui-button-bg: var(--control-secondary);
  --ui-button-bg-hover: var(--control-secondary-hover);
  --ui-button-color: var(--fg);
  --ui-button-glow: transparent;

  min-height: var(--control-height);
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  appearance: none;
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--ui-button-bg);
  box-shadow: var(--control-shadow);
  color: var(--ui-button-color);
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-fast) var(--control-ease),
    background var(--t-fast) var(--control-ease),
    border-color var(--t-fast) var(--control-ease),
    box-shadow var(--t-fast) var(--control-ease),
    color var(--t-fast) var(--control-ease),
    filter var(--t-fast) var(--control-ease);
}

.ui-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--ui-button-bg-hover);
  box-shadow: var(--control-shadow-hover), 0 10px 24px var(--ui-button-glow);
  color: var(--ui-button-color);
}

.ui-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: var(--elev-1);
  filter: brightness(0.96);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: 0.42;
  filter: saturate(0.35);
  box-shadow: var(--elev-1);
  cursor: not-allowed;
}

.ui-button.ui-button--primary {
  --ui-button-bg: var(--cta-bg);
  --ui-button-bg-hover: var(--control-primary-hover);
  --ui-button-color: var(--cta-fg);
  --ui-button-glow: rgba(255, 227, 43, 0.26);
  background: var(--ui-button-bg);
  border: 2px solid var(--shadow-ink);
  color: var(--ui-button-color);
}

.ui-button.ui-button--secondary,
a.ui-button.ui-button--secondary {
  --ui-button-bg: var(--control-secondary);
  --ui-button-bg-hover: var(--control-secondary-hover);
  --ui-button-color: var(--fg);
  --ui-button-glow: rgba(154, 77, 255, 0.16);
  background: var(--ui-button-bg);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: var(--ui-button-color);
}

.ui-button.ui-button--brand {
  --ui-button-bg: linear-gradient(180deg, #59c8ff 0%, #1fa3ff 100%);
  --ui-button-bg-hover: linear-gradient(180deg, #70d0ff 0%, #31afff 100%);
  --ui-button-color: #fff;
  --ui-button-glow: rgba(31, 163, 255, 0.36);
  background: var(--ui-button-bg);
  border: 2px solid var(--shadow-ink);
  color: var(--ui-button-color);
}

.ui-button.ui-button--compact {
  min-height: var(--control-height-compact);
  padding: 0 15px;
  font-size: 12px;
  letter-spacing: 0.9px;
}

.ui-button.ui-button--large {
  min-height: var(--control-height-large);
  padding: 0 36px;
  font-size: 17px;
  letter-spacing: 1.4px;
}

.ui-button.ui-button--featured {
  box-shadow: var(--elev-4), 0 0 34px rgba(255, 227, 43, 0.24);
}

.ui-icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  appearance: none;
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-secondary);
  box-shadow: var(--control-shadow);
  color: var(--fg);
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-fast) var(--control-ease),
    background var(--t-fast) var(--control-ease),
    border-color var(--t-fast) var(--control-ease),
    box-shadow var(--t-fast) var(--control-ease),
    color var(--t-fast) var(--control-ease);
}

.ui-icon-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--control-secondary-hover);
  box-shadow: var(--control-shadow-hover), 0 8px 22px rgba(154, 77, 255, 0.18);
  color: #fff;
}

.ui-icon-button:active {
  transform: translateY(2px);
  box-shadow: var(--elev-1);
}

.ui-icon-button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ui-icon-button.ui-icon-button--close,
.lightbox-close.ui-icon-button,
.model-close.ui-icon-button,
.news-modal-close.ui-icon-button,
.char-modal-close.ui-icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--control-radius);
  background: rgba(5, 1, 18, 0.82);
  box-shadow: var(--control-shadow);
  color: var(--fg);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.ui-icon-button.ui-icon-button--close:hover,
.lightbox-close.ui-icon-button:hover,
.model-close.ui-icon-button:hover,
.news-modal-close.ui-icon-button:hover,
.char-modal-close.ui-icon-button:hover {
  transform: translateY(-2px);
  border-color: var(--accent-hot);
  background: rgba(255, 78, 201, 0.72);
  box-shadow: var(--control-shadow-hover), 0 8px 24px rgba(255, 78, 201, 0.28);
}

.ui-icon-button.ui-icon-button--close:active,
.lightbox-close.ui-icon-button:active,
.model-close.ui-icon-button:active,
.news-modal-close.ui-icon-button:active,
.char-modal-close.ui-icon-button:active {
  transform: translateY(2px);
  box-shadow: var(--elev-1);
}

/* Header actions use one compact footprint. */
.header-actions .ui-button {
  flex: 0 0 auto;
}

.hamburger.ui-icon-button {
  display: none;
  background: var(--control-secondary);
}

.hamburger.ui-icon-button.open {
  background: rgba(255, 78, 201, 0.3);
  border-color: var(--accent-hot);
}

/* The subscribe action is visually joined to its input, but uses the same type scale. */
.hero-subscribe button.ui-button {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-left: 2px solid var(--shadow-ink);
  border-radius: 0;
  box-shadow: none;
}

.hero-subscribe button.ui-button:hover:not(:disabled),
.hero-subscribe button.ui-button:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}

.btn-show-more.ui-button {
  width: fit-content;
  margin: 40px auto 0;
}

.btn-show-more.ui-button[hidden] {
  display: none;
}

.footer-cta .ui-button--large {
  min-width: 190px;
}

.news-modal-link.ui-button {
  width: fit-content;
  min-height: var(--control-height);
  padding: 0 22px;
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 1.2px;
}

.char-modal-left .ui-button {
  width: 100%;
}

.social-icons a.ui-icon-button,
.news-share-btn.ui-icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-secondary);
  box-shadow: var(--control-shadow);
}

.social-icons a.ui-icon-button:hover,
.news-share-btn.ui-icon-button:hover {
  transform: translateY(-2px);
  border-color: var(--accent-hot);
  background: rgba(255, 78, 201, 0.28);
  box-shadow: var(--control-shadow-hover), 0 8px 22px rgba(255, 78, 201, 0.22);
}

.social-icons a.ui-icon-button:active,
.news-share-btn.ui-icon-button:active {
  transform: translateY(2px);
  box-shadow: var(--elev-1);
}

.faq-question {
  transition: background var(--t-fast) var(--control-ease);
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 1080px) {
  .hamburger.ui-icon-button {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  .ui-button.ui-button--large {
    min-height: 54px;
    padding: 0 26px;
    font-size: 16px;
  }

  .hero-subscribe button.ui-button {
    width: 100%;
    min-height: 48px;
    border-top: 2px solid var(--shadow-ink);
    border-left: 0;
  }

  .lightbox-close.ui-icon-button,
  .model-close.ui-icon-button,
  .news-modal-close.ui-icon-button,
  .char-modal-close.ui-icon-button {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 25px;
  }
}

@media (max-width: 425px) {
  .header-actions .ui-button.ui-button--compact {
    min-height: 40px;
    padding: 0 12px;
  }

  .header-actions .btn-tg.ui-button {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .header-actions .lang-switcher.ui-button {
    min-width: 44px;
  }

  .hamburger.ui-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .social-icons a.ui-icon-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
}

@media (max-width: 720px) {
  .nf-back.ui-button {
    transform: translateX(-50%);
  }

  .nf-back.ui-button:hover {
    transform: translate(-50%, -2px);
  }

  .nf-back.ui-button:active {
    transform: translate(-50%, 2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-icon-button {
    transition-duration: 0.01ms;
  }
}