/* =====================================================
   Apple-inspired Design System
   ===================================================== */

:root {
  /* Brand — unchanged across themes */
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-link-blue: #0066cc;
  --apple-link-blue-dark: #2997ff;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Surfaces */
  --bg-page: #ffffff;
  --bg-section: #f5f5f7;
  --bg-surface: #ffffff;
  --bg-surface-2: #fafafa;
  --bg-input: #ffffff;
  --bg-disabled: #f5f5f7;
  --bg-backdrop: rgba(0, 0, 0, 0.45);
  --bg-skeleton-from: #f3f4f6;
  --bg-skeleton-to: #e5e7eb;

  /* Text */
  --text-primary: #1d1d1f;
  --text-secondary: rgba(0, 0, 0, 0.56);
  --text-muted: rgba(0, 0, 0, 0.42);
  --text-on-brand: #ffffff;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --border-hover: rgba(0, 0, 0, 0.24);
  --border-card: #e5e7eb;
  --border-card-hover: #d1d5db;
  --border-divider: #ececef;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.04) 0px 3px 5px 0px;
  --shadow-lift: 0 4px 16px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 12px 40px rgba(15, 23, 42, 0.16);

  /* Status */
  --status-warn-bg: #fff8e8;
  --status-warn-text: #6d4c00;
  --status-error-bg: #fff5f4;
  --status-error-text: #b00020;
  --status-error-strong: #ff3b30;
  --status-success-bg: #ecf8ee;
  --status-success-text: #0a6b2c;
  --status-info-bg: rgba(0, 113, 227, 0.06);

  /* Focus ring */
  --focus-ring: rgba(0, 113, 227, 0.32);

  /* Cookie banner */
  --cookie-fab-bg: rgba(29, 29, 31, 0.92);
  --cookie-fab-bg-hover: rgba(0, 0, 0, 1);
  --cookie-fab-text: #ffffff;

  /* Legacy aliases — keep so unmigrated rules still resolve */
  --apple-black: var(--text-primary);
  --apple-gray-bg: var(--bg-section);
  --apple-text-secondary: var(--text-secondary);
  --apple-border: var(--border-subtle);
  --apple-card-shadow: var(--shadow-card);
}

[data-theme="dark"] {
  --bg-page: #0b0b0d;
  --bg-section: #141417;
  --bg-surface: #1c1c20;
  --bg-surface-2: #232328;
  --bg-input: #1c1c20;
  --bg-disabled: #232328;
  --bg-backdrop: rgba(0, 0, 0, 0.7);
  --bg-skeleton-from: #1f1f24;
  --bg-skeleton-to: #2a2a30;

  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.66);
  --text-muted: rgba(245, 245, 247, 0.46);

  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-hover: rgba(255, 255, 255, 0.28);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-card-hover: rgba(255, 255, 255, 0.20);
  --border-divider: rgba(255, 255, 255, 0.08);

  --shadow-card: rgba(0, 0, 0, 0.4) 0px 3px 5px 0px;
  --shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.6);

  --status-warn-bg: rgba(255, 184, 0, 0.12);
  --status-warn-text: #ffd479;
  --status-error-bg: rgba(255, 59, 48, 0.14);
  --status-error-text: #ff8a80;
  --status-success-bg: rgba(52, 199, 89, 0.14);
  --status-success-text: #5dd47e;
  --status-info-bg: rgba(0, 113, 227, 0.16);

  --focus-ring: rgba(64, 156, 255, 0.5);

  --cookie-fab-bg: rgba(245, 245, 247, 0.92);
  --cookie-fab-bg-hover: #ffffff;
  --cookie-fab-text: #1d1d1f;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero */
.hero {
  background: #000000;
  padding: 28px 17px;
  color: #fff;
  text-align: center;
}

.hero .brand {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  line-height: 1.47;
  opacity: 0.72;
  margin-bottom: 6px;
}

.hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 39px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.2px;
  margin: 0 0 11px;
}

.hero p {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: 0.011em;
  margin: 0;
  opacity: 0.88;
}

@media (max-width: 734px) {
  .hero {
    padding: 20px 14px;
  }

  .hero h1 {
    font-size: 22px;
    line-height: 1.1;
  }

  .hero p {
    font-size: 17px;
  }
}

.muted {
  color: var(--apple-text-secondary);
  font-size: 14px;
  letter-spacing: -0.016em;
  line-height: 1.43;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

.page--wide {
  max-width: 1200px;
}

.content-section {
  background: var(--apple-gray-bg);
  padding: 60px 20px 80px;
}

.content-section--catalog {
  padding: 48px 24px 80px;
  min-height: calc(100vh - 48px - 168px);
}

.content-section--min-height {
  min-height: calc(100vh - 48px - 168px);
}

.content-inner {
  max-width: 680px;
  margin: 0 auto;
}

.panel {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.row {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--apple-black);
}

/* Native selects in main panels (SMB comparison + license selector) */
.panel select {
  width: 100%;
  padding: 12px 16px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background-color: var(--bg-input);
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231d1d1f' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .panel select:hover {
    border-color: var(--border-hover);
  }
}

.panel select:focus {
  outline: none;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.panel select:disabled {
  background-color: var(--bg-disabled);
  color: var(--text-secondary);
  cursor: not-allowed;
}

[data-theme="dark"] .panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f5f5f7' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");
}

/* Navigation */
.top-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 20px;
  height: 48px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
}

/* Pin the right-edge controls (theme + language) without disturbing the
   centered link group. .nav-controls is created at runtime by theme.js /
   i18n.js and holds both switchers in a tight flex row. */
.top-nav .nav-controls {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fallback: a stand-alone lang-switch (no container) still pins right. */
.top-nav > .lang-switch {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.top-nav a {
  color: rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .top-nav a:hover {
    color: #ffffff;
    text-decoration: none;
  }
}

.top-nav a.nav-link--active {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 640px) {
  .top-nav {
    gap: 16px;
    padding: 0 12px;
    height: auto;
    min-height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .top-nav a {
    font-size: 11px;
  }

  /* Narrow screens: bring controls back into the flex flow so they don't
     overlap wrapped links, and shrink them. Keep `position: relative` on
     each switcher so `.lang-switch__pill` / `.theme-switch__pill` keep a
     containing block (otherwise the absolutely-positioned pills size
     against `.top-nav` and paint over the navigation). */
  .top-nav .nav-controls,
  .top-nav > .lang-switch {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    gap: 6px;
  }
  .top-nav .lang-switch,
  .top-nav .theme-switch {
    position: relative;
    height: 22px;
  }
  .top-nav .lang-switch__btn {
    height: 18px;
    min-width: 26px;
    padding: 0 7px;
    font-size: 10px;
  }
  .top-nav .theme-switch__btn {
    height: 18px;
    width: 18px;
    min-width: 18px;
    padding: 0;
  }
  .top-nav .theme-switch__btn svg {
    width: 11px;
    height: 11px;
  }
}

/* =====================================================
   Language switcher (segmented EN | RU pill)
   ===================================================== */

.lang-switch {
  --lang-active: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 980px;
  height: 28px;
  isolation: isolate;
}

.lang-switch__pill {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 980px;
  background: #ffffff;
  transform: translateX(calc(var(--lang-active) * 100%));
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.lang-switch__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 12px;
  height: 24px;
  min-width: 36px;
  font: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  border-radius: 980px;
  transition:
    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.lang-switch__btn[aria-pressed="true"] {
  color: #1d1d1f;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__btn:not([aria-pressed="true"]):hover {
    color: #ffffff;
  }
}

.lang-switch__btn:active {
  transform: scale(0.97);
}

.lang-switch__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__pill {
    transition: none;
  }
}

/* =====================================================
   Theme switcher (segmented sun | moon, icons only)
   ===================================================== */

.theme-switch {
  --theme-active: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 980px;
  height: 28px;
  isolation: isolate;
}

.theme-switch__pill {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 980px;
  background: #ffffff;
  transform: translateX(calc(var(--theme-active) * 100%));
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.theme-switch__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  border-radius: 980px;
  transition:
    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.theme-switch__btn svg {
  width: 13px;
  height: 13px;
  display: block;
}

.theme-switch__btn[aria-pressed="true"] {
  color: #1d1d1f;
}

@media (hover: hover) and (pointer: fine) {
  .theme-switch__btn:not([aria-pressed="true"]):hover {
    color: #ffffff;
  }
}

.theme-switch__btn:active {
  transform: scale(0.97);
}

.theme-switch__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch__pill {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .device-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Russian UI: drop ALL-CAPS labels. Cyrillic uppercase is harsh in small
   widget labels (filter section headings, eyebrow text, etc.), so when the
   page is in RU we render those in their natural case. The corresponding
   English UI keeps the original uppercase look. */
html[lang="ru"] .filter-group h3,
html[lang="ru"] .wp-card__title,
html[lang="ru"] .wp-table th,
html[lang="ru"] .wp-pref-block__label,
html[lang="ru"] .landing-hero .brand,
html[lang="ru"] .pb-bom-table thead th {
  text-transform: none;
}

/* =====================================================
   Cookies / analytics consent — floating button + popover
   ===================================================== */

.cookie-root {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
}

.cookie-fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cookie-fab-bg);
  color: var(--cookie-fab-text);
  border: 0;
  border-radius: 980px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cookie-fab:hover {
    background: var(--cookie-fab-bg-hover);
  }
}

.cookie-fab:active {
  transform: scale(0.97);
}

.cookie-fab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    var(--shadow-lift);
}

.cookie-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-modal);
  transform-origin: bottom left;
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 180ms var(--ease-out),
    opacity 180ms var(--ease-out);
}

.cookie-pop[data-state="open"] {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.cookie-pop__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--apple-black);
  letter-spacing: -0.01em;
}

.cookie-pop__copy {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apple-text-secondary);
  letter-spacing: -0.005em;
}

.cookie-pop__actions {
  display: flex;
  gap: 8px;
}

.cookie-pop__btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 14px;
  border-radius: 980px;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.cookie-pop__btn:active {
  transform: scale(0.97);
}

.cookie-pop__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cookie-pop__btn.is-active {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: var(--text-on-brand);
}

@media (hover: hover) and (pointer: fine) {
  .cookie-pop__btn:hover:not(.is-active) {
    border-color: var(--border-hover);
  }
  .cookie-pop__btn.is-active:hover {
    background: var(--apple-blue-hover);
    border-color: var(--apple-blue-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-pop {
    transition: opacity 1ms;
    transform: scale(1);
  }
}

/* =====================================================
   Notification bell + news popover (news-bell.js)
   ===================================================== */

.news-bell {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.news-bell svg {
  width: 15px;
  height: 15px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .news-bell:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
  }
}

.news-bell:active {
  transform: scale(0.95);
}

.news-bell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.6);
}

.news-bell__dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
  border: 1.5px solid rgba(0, 0, 0, 0.8);
}

.news-pop {
  position: fixed;
  top: 56px;
  right: 16px;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-modal);
  z-index: 1100;
  transform-origin: top right;
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 180ms var(--ease-out),
    opacity 180ms var(--ease-out);
}

.news-pop.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.news-pop__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--apple-black);
  letter-spacing: -0.01em;
}

.news-pop__item {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.news-pop__item:last-child {
  padding-bottom: 2px;
}

.news-pop__date {
  display: block;
  font-size: 11px;
  color: var(--apple-text-secondary);
  margin-bottom: 2px;
}

.news-pop__item-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-black);
}

.news-pop__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apple-text-secondary);
  letter-spacing: -0.005em;
}

.news-pop__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--apple-link-blue);
}

@media (max-width: 640px) {
  .top-nav .news-bell {
    width: 22px;
    height: 22px;
  }
  .top-nav .news-bell svg {
    width: 12px;
    height: 12px;
  }
  .news-pop {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-pop {
    transition: opacity 1ms;
    transform: scale(1);
  }
}