/* ========================
   СБРОС И БАЗА
   ======================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
  min-height: 100%;
  background: linear-gradient(
    180deg,
    #e8f3ff 0%,
    var(--bg-body) 40%,
    #ffffff 100%
  );
}

body{
  background: transparent; /* важно */
}


/* ========================
   ПЕРЕМЕННЫЕ
   ======================== */

:root {
    /* Лэйаут */
    --topbar-height: 38px;
    --header-height: 80px;
    --footer-height: 60px;
    --content-max-width: 1200px;
    --header-max-width: 1200px;

    /* Основная палитра */
    --primary: #0084ff;
    --primary-dark: #0064c2;

    --text-main: #1f2933;
    --text-muted: #7b8794;

    --bg-body: #f5f7fa;
    --bg-topbar: #0b1f33;
    --bg-header: #ffffff;
    --bg-footer: #0b1f33;

    --border-soft: #e1e7f0;

    /* Таблицы / списки */
    --table-header-bg: #f3f3f3;
    --table-border: #dddddd;
    --table-row-border: #eeeeee;
    --table-row-hover-bg: #f8f8f8;

    /* Кнопки (состояния) */
    --btn-success-bg: #43bf4d;
    --btn-success-hover-bg: #3aa643;

    --btn-info-bg: #29a6ff;
    --btn-info-hover-bg: #1c94eb;

    --btn-danger-bg: #e6463e;
    --btn-danger-hover-bg: #cd3a33;

    --btn-warning-bg: #ff9800;
    --btn-warning-hover-bg: #fb8c00;

    --btn-muted-bg: #bfbfbf;
    --btn-muted-hover-bg: #aaaaaa;

    /* Инпуты / формы / карточки */
    --input-border: #c8c8c8;
    --input-border-soft: #e1e7f0;
    --input-focus: #29a6ff;
    --input-focus-shadow: rgba(41, 166, 255, 0.4);

    --chip-bg: #f1f5ff;
    --card-border-soft: #edf0f8;
    --card-bg-soft: #f5f7ff;

    /* Оверлеи, ошибки */
    --overlay-bg: rgba(0, 0, 0, 0.45);
    --overlay-strong-bg: rgba(0, 0, 0, 0.5);

    --error: #c53030;

    /* ========================
       ДОП ПЕРЕМЕННЫЕ ДЛЯ СПИСКОВ (чтобы не было “необъявленных”)
       ======================== */
    --radius: 12px;
    --radius-sm: 10px;

    --shadow-sm: 0 1px 2px rgba(15, 35, 52, 0.08);
    --shadow-md: 0 10px 28px rgba(15, 35, 52, 0.14);

    --focus-ring: 0 0 0 3px rgba(0, 132, 255, 0.25);

    --protocols-menu-width: 260px;
    --protocols-menu-maxh: 260px;
}

/* ========================
   ТЕЛО СТРАНИЦЫ
   ======================== */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-main);
    background: linear-gradient(
        180deg,
        #e8f3ff 0%,
        var(--bg-body) 40%,
        #ffffff 100%
    );
}

/* Обёртка, чтобы футер прижимался вниз */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Центрирующий контейнер */
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

/* Основной контент: отступы от шапки и подвала */
.content {
    padding-top: calc(var(--topbar-height) + var(--header-height));
    padding-bottom: var(--footer-height);
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* ============================
   Центральный макет / карточки
   ============================ */

.page-main {
    flex: 1;
    padding: 32px 0 40px;
}

.page-main-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.page-card {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 35, 52, 0.12);
    padding: 24px 24px 32px;
}

/* Адаптив для карточек */
@media (max-width: 900px) {
    .page-card {
        padding: 20px 18px 26px;
    }
}

@media (max-width: 600px) {
    .page-card {
        padding: 18px 16px 24px;
    }
}

.topbar-phone { text-decoration: none; color: inherit; }
.topbar-phone:hover { text-decoration: underline; }


.topbar-social{
  display:flex;
  gap:10px;
  align-items:center;
}

.topbar-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  text-decoration:none;
}

.topbar-social-link img{
  width:18px;
  height:18px;
  display:block;
}