/*!
 * Bootstrap 5.3 template kit — shared base
 *
 * Brand retheming without a Sass rebuild: Bootstrap 5.3's utility classes
 * (.text-primary, .bg-primary, .border-primary, .link-primary, …) read
 * --bs-primary / --bs-primary-rgb at runtime, so overriding those two variables
 * retints them. Button variants do NOT — .btn-primary hardcodes its colors as
 * literal hex in --bs-btn-* custom properties, so it needs its own override
 * block below.
 */

:root {
  --brand: #3556d8;
  --brand-rgb: 53, 86, 216;
  --brand-dark: #22348f;
  --brand-darker: #16215c;

  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-text-emphasis: var(--brand-dark);
  --bs-primary-bg-subtle: #dde3fb;
  --bs-primary-border-subtle: #b7c2f3;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-link-hover-color-rgb: 34, 52, 143;

  /* Off-white / near-black surfaces instead of Bootstrap's stock pure white
     and #212529 dark — kept from the original editorial look. */
  --bs-body-bg: #f7f7f7;
  --bs-secondary-bg: #ececec;

  --kit-section-y: 5rem;
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #a9b8f5;
  --bs-primary-bg-subtle: #1b2140;
  --bs-primary-border-subtle: #33408f;
  --bs-body-bg: #171717;
  --bs-secondary-bg: #202020;
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

@media (width >= 768px) {
  :root {
    --kit-section-y: 7rem;
  }
}

/* Keep the scrollbar's place on every page, so the header and the content
   don't shift sideways between a long page (landing) and a short one
   (sign-in). Phones have overlay scrollbars: no effect there. */
html {
  scrollbar-gutter: stable;
}

/* Bootstrap pads <body> by the scrollbar's width while an offcanvas or a
   modal locks scrolling. With the gutter kept that padding is extra and the
   page would jump left by it. */
body {
  padding-right: 0 !important;
}

.section {
  padding-block: var(--kit-section-y);
}

:where(section[id], main[id]) {
  scroll-margin-top: 5rem;
}

/* ---------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

/* The blur and the translucent fill live on a pseudo-element: backdrop-filter
   on the header itself would make it the containing block for position:fixed
   descendants, squeezing the mobile offcanvas into the header's box (and its
   off-screen state widening the page). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 20%);
  transition: background 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--bs-border-color);
}

.site-header.is-stuck::before {
  background: color-mix(in srgb, var(--bs-body-bg), transparent 8%);
}

/* Color-mode toggle icons */
.theme-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
  display: block;
}

/* Minimal icon-button chrome for the theme toggle / navbar-toggler — Bootstrap
   5.3 has no built-in icon-button variant, so this is site-specific. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius);
  background: transparent;
  color: var(--bs-body-color);
  line-height: 1;
}

.btn-icon:hover {
  background: var(--bs-secondary-bg);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 4.5rem 5rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 40rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    60% 60% at 50% 0%,
    color-mix(in srgb, var(--bs-primary), transparent 84%) 0%,
    transparent 70%
  );
}

/* The same glow for pages with just a compact header */
.page-glow {
  position: relative;
  isolation: isolate;
}

.page-glow::before {
  content: "";
  position: absolute;
  /* Start under the translucent sticky header, so there's no hard top edge */
  inset: -4rem 0 auto;
  height: 28rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    50% 100% at 50% 0%,
    color-mix(in srgb, var(--bs-primary), transparent 84%) 0%,
    transparent 70%
  );
}

.hero-title {
  text-wrap: balance;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ---------------------------------------------------------------
   Pricing cards
   --------------------------------------------------------------- */

.pricing-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--bs-primary), transparent 60%);
  box-shadow: 0 1.5rem 2.5rem -1rem rgb(0 0 0 / 18%);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 1rem;
  z-index: 1;
}

/* The plan grid (landing #pricingGrid, cabinet «Оплата»): as many equal
   columns as there are plans (data-plans, 1-4), never an empty cell, the
   row centred. Columns follow the grid's own width (a container query, so
   the cabinet's side menu counts): one below 576px, two from 576px (a
   tablet), all of them in one row from 880px. A card is at most 22rem
   wide. Cards in a row stretch to one height (flex), so the buttons --
   pushed down by mt-auto -- stay on one line. Without container queries
   (old engines): one column. */
.plan-grid {
  --gap: 1.5rem;
  --plans: 4;
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.plan-grid-tight {
  --gap: 1rem;
}

.plan-grid[data-plans="1"] { --plans: 1; }
.plan-grid[data-plans="2"] { --plans: 2; }
.plan-grid[data-plans="3"] { --plans: 3; }

.plan-col {
  --cols: 1;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: 22rem;
  min-width: 0;
}

/* The loading spinner, «no plans»: a full row. */
.plan-grid > :not(.plan-col) {
  flex: 0 0 100%;
}

@container (min-width: 576px) {
  .plan-col { --cols: min(2, var(--plans)); }
}

@container (min-width: 880px) {
  .plan-col { --cols: var(--plans); }
}

.pricing-price {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer a {
  text-decoration: none;
  /* Bare URLs: Chrome won't break after "/", so without this a long link
     widens the page on phones. */
  overflow-wrap: anywhere;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .site-header,
  .site-header::before {
    transition: none;
  }

  .pricing-card:hover {
    transform: none;
  }
}

/* RU/EN toggle (lang.js): the same round button as the theme toggle, with text. */
.lang-toggle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* English chosen: hidden until i18n.js has swapped the Russian text
   (lang.js adds the class and drops it after 1.5 s at the latest). */
html.i18n-pending body { visibility: hidden; }

/* Text that must read right when no page script runs (the "this browser
   can't run the page" notes, open-in-browser.html): both languages are in
   the markup and lang.js, a classic script, picks one via <html lang>. */
html[lang="en"] [data-lang="ru"],
html:not([lang="en"]) [data-lang="en"] { display: none !important; }

/* Support conversations (support-thread.js): the cabinet and the admin
   panel. Bubbles, the reader's own on the right. */
.sup-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sup-msg {
  max-width: min(36rem, 92%);
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--bs-secondary-bg);
  overflow-wrap: anywhere;
}

.sup-msg.is-mine {
  align-self: flex-end;
  background: var(--bs-primary-bg-subtle);
}

.sup-body { white-space: pre-wrap; }
.sup-meta { margin-bottom: 0.25rem; }

.sup-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sup-img-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.sup-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 8rem;
  max-height: 8rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

.sup-img-btn.is-open { flex-basis: 100%; cursor: zoom-out; }
.sup-img-btn.is-open .sup-img { max-width: 100%; max-height: none; }

/* The cabinet's support avatar with "online" / "offline" (cabinet/support.js). */
.sup-presence {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sup-avatar {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.sup-avatar svg { width: 1.5rem; height: 1.5rem; }

.sup-presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid var(--bs-card-bg, var(--bs-body-bg));
  background: var(--bs-secondary-color);
}

.sup-presence.is-online .sup-presence-dot { background: var(--bs-success); }

.sup-hints { padding-left: 1.25rem; margin-bottom: 0; }
.sup-hints li + li { margin-top: 0.25rem; }