/* /static/css/theme-air.css */
/* AIR THEME — подключается ПОСЛЕ инлайн-CSS, чтобы переопределять цвета */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Основная палитра (перезаписываем твои текущие переменные) */
  --bg:    #f7fbff;
  --bg-1:  #f7fbff;      /* верх */
  --bg-2:  #eaf2ff;      /* низ */
  --bg-3:  #f7fbff;      /* верх фона */
  --bg-4:  #eaf2ff;      /* низ фона */

  --panel: #ffffff;
  --gray-light: #818181;
  --ink:   #494949;
  --muted: #5c677a;
  --stroke: rgba(15, 23, 42, 0.10);

  /* Акцент (синий) — потом подберём точнее */
  --accent:        #81c2d2;
  --accent-hover:  #4ba5ba;

  --gold:     var(--ink); /* у тебя в табах был "gold" — в air делаем как текст */
  --cacao:    var(--ink);
  --footer-icon: var(--ink);
  --fnt-clr:  var(--ink);

  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-card: 0 10px 30px rgba(16, 24, 40, 0.10);
  --shadow-soft: 0 6px 18px rgba(16, 24, 40, 0.08);

    /* тонкая “сероватая” рамка */
  --card-border: rgba(15, 23, 42, 0.14);
  --card-shadow: 0 10px 24px rgba(16, 24, 40, 0.10);
  --card-shadow-2: 0 1px 0 rgba(255,255,255,0.70) inset;

  --btn-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --btn-size: 16px;      /* можно 16px, но 17 читается лучше */
  --btn-weight: 500;
  --btn-letter: 0.2px;

  --footer-h: 68px; /* ВАЖНО: одна константа для всех страниц */
  --footer-total-h: 68px;
  --footer-gap-chat: 0px; /* маленький зазор над футером для инпута в чатах */

}
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Фон (у тебя он рисуется через body::before — переопределяем) */
body::before{
  background:
    radial-gradient(120% 90% at 80% 10%, #2f80ed1a 0 18%, transparent 45%),
    radial-gradient(120% 90% at 10% 30%, rgba(255,255,255,.75) 0 22%, transparent 55%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-4) 100%);
}

/* =========================
   INDEX Tabs — clean active: white chip + thin blue underline
   ========================= */

:root{
  --tab-blue: #5a5a5a; /* ваш “air” синий */
  --tab-chip-border: rgba(61, 61, 61, 0.1);
}

/* базовый текст табов */
.tab{
  color: var(--gray-light) !important;
  text-shadow: none !important;
  position: relative !important;
  
}

/* УБРАТЬ “грязь”: полностью отключаем прежний glow */
.tab.active::before{
  content: none !important;
}

/* тонкая неактивная линия (еле заметная) */
.tab::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;                 /* стабильно, вместо translateY */
  transform: translateX(-50%);
  width: clamp(120px, 26vw, 190px);
  height: 1px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* белый “квадратик/чип” под активным текстом */
.tab.active{
  color: rgba(15, 23, 42, 0.92) !important;
  text-shadow: none !important;
}


.tab.active::marker{ content: none; } /* на всякий случай */

/* рисуем белый прямоугольник отдельным слоем */
.tab.active{
  z-index: 2 !important;
}

.tab.active span{ position: relative; z-index: 2; } /* если вдруг появится span в будущем */

/* чип через background-псевдоэлемент (без blur) */
.tab.active::before{
  content: "";
  position: absolute;

  height: 38px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--tab-chip-border);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(16,24,40,0.06);
  pointer-events: none;
  z-index: 1;
}

/* активная синяя линия — тонкая, без градиента и без свечения */
.tab.active::after{
  height: 2px;
  width: clamp(120px, 26vw, 190px);
  background: var(--tab-blue) !important;
  box-shadow: none !important;
  bottom: -6px;                  /* чуть ближе к тексту */
}


/* Карточки (у тебя .stat-card часто выглядит как панель) */
/* ЯЧЕЙКИ/КАРТОЧКИ профиля (у тебя это стат-блоки) */
.stat-card{
  background: #fff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;

  /* Убираем “бежевые” обводки/инсеты от старых стилей */
  box-shadow: var(--card-shadow), var(--card-shadow-2) !important;

  /* на всякий случай прибиваем фильтры/градиенты */
  filter: none !important;
}

/* Если у карточки где-то была “рамка” через псевдоэлементы */
.stat-card::before,
.stat-card::after{
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Тексты */
.stat-label{ color: var(--muted) !important; }
.stat-value,
.stat-value.pos,
.bmi-status{ color: var(--ink) !important; }

/* Инпуты */
input.input-field,
select.input-field{
  color: var(--ink) !important;
}
input.input-field::placeholder{
  color: rgba(11, 18, 32, 0.45) !important;
}
select.input-field:invalid{
  color: rgba(11, 18, 32, 0.45) !important;
}
/* (Опционально) Поля ввода/селекты делаем тоже “тонко-серыми” */
.input-field,
input.input-field,
select.input-field{
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(16,24,40,0.06) !important;
}

/* поля ввода внутри карточек */
.stat-card input,
.stat-card select,
.stat-card .input-field{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  caret-color: var(--muted) !important;
}
/* Цвет выделения текста (если выделяешь внутри поля) */
.stat-card input::selection,
.stat-card textarea::selection{
  background: rgba(47, 128, 237, 0.22);
}
/* Значения (Stacy, Female, 180…) — легче и чище */
.stat-card input,
.stat-card select{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-weight: 500 !important;     /* было жирно — делаем легче */
  letter-spacing: 0.1px;
  color: var(--ink) !important;
}

/* Если у тебя где-то значения не input/select, а div/span */
.stat-value{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}



/* =========================
   AIR BUTTON (универсальная синяя кнопка + схлопывание)
   ========================= */

/* 1) База: одинаково для всех кнопок */
.btn-air,
.button.btn-olivey,
.button.btn-ruby{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(220px, 85%, 560px);
  height: 46px;
  padding: 0 18px;
  max-width: 320px !important; 
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28) !important;

  background: linear-gradient(180deg, #79b4f6 0%, #3c7ad6 100%) !important;
  box-shadow:
    0 10px 24px rgba(31, 111, 230, 0.22),
    inset 0 1px 3px rgba(255,255,255,0.40) !important;

  color: #fff !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: 16px !important;  
  font-weight: 500 !important;
  letter-spacing: .2px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* важно: чтобы transform “схлопывал” кнопку как единый слой */
  transform: translateZ(0);
  will-change: transform;

  transition: transform 0.10s ease, box-shadow 0.12s ease, filter 0.12s ease;
}



/* 3) СХЛОПЫВАНИЕ (главное) */
.btn-air:active,
.button.btn-olivey:active,
.button.btn-ruby:active{
  transform: scale(0.965) translateZ(0) !important;
  filter: brightness(0.98) !important;
  box-shadow:
    0 6px 14px rgba(31,111,230,0.15),
    inset 0 8px 16px rgba(0,0,0,0.10) !important;
}

/* 4) Фокус с клавиатуры (приятно и доступно) */
.btn-air:focus-visible,
.button.btn-olivey:focus-visible,
.button.btn-ruby:focus-visible{
  outline: 3px solid rgba(47,128,237,0.35);
  outline-offset: 3px;
}

/* 5) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-air,
  .button.btn-olivey,
  .button.btn-ruby{
    transition: none;
  }
}
/* Убираем любые псевдоэлементы у старых кнопок (они дают "лишнюю полоску") */
.button.btn-olivey::before,
.button.btn-olivey::after,
.button.btn-ruby::before,
.button.btn-ruby::after{
  content: none !important;
}
/* “Бульк” как в твоём примере (jello-horizontal) */
@keyframes jello-horizontal{
  0%   { transform: scale3d(1,1,1); }
  30%  { transform: scale3d(1.25,.75,1); }
  40%  { transform: scale3d(.75,1.25,1); }
  50%  { transform: scale3d(1.15,.85,1); }
  65%  { transform: scale3d(.95,1.05,1); }
  75%  { transform: scale3d(1.05,.95,1); }
  100% { transform: scale3d(1,1,1); }
}


/* Если вдруг где-то кнопка без label-спана */
.button.is-pressed:not(:has(.btn-olivey__label, .btn-ruby__label)){
  animation: press-squish .55s both;
}
/* Минимальная “вдавленность” при удержании */
.button.btn-olivey.is-pressed,
.button.btn-ruby.is-pressed,
.btn-air.is-pressed{
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(.985) !important;
}


/* ВАЖНО: элемент текста должен быть inline-block, тогда transform-анимация видна всегда */
.button .btn-label{
  display: inline-block;
  transform: translateZ(0);
  will-change: transform;
}

/* Бульк — на ВСЕЙ кнопке */
.button.is-bouncy,
.btn-air.is-bouncy{
  animation: jello-horizontal .9s both;
  transform-origin: center;
  will-change: transform;
}

/* базовый текст для самой кнопки */
.btn-air,
.button.btn-olivey,
.button.btn-ruby{
  font-family: var(--btn-font) !important;
  font-weight: var(--btn-weight) !important;
  font-size: var(--btn-size) !important;
  letter-spacing: var(--btn-letter) !important;
  line-height: 1 !important;
}

/* и для ВСЕХ возможных label внутри */
.button .btn-label,
.button .btn-olivey__label,
.button .btn-ruby__label{
  font-family: var(--btn-font) !important;
  font-weight: var(--btn-weight) !important;
  font-size: var(--btn-size) !important;
  letter-spacing: var(--btn-letter) !important;
  line-height: 1 !important;
  text-shadow: none !important;  /* убираем старые "кнопочные" тени */
}

/* если где-то label был слишком жирным/большим — прибиваем */
#calcKbjuBtn .btn-olivey__label{
  font-size: var(--btn-size) !important;
}

/* =========================
   AIR: Subscription modal (glass)
   ========================= */

/* затемнение фона */
.subscription-modal{
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* сама карточка модалки */
.subscription-modal .modal-content{
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(234, 242, 255, 0.82) 100%
    ) !important;

  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 18px !important;

  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18) !important;

  /* лёгкий “стеклянный” эффект */
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* текст в air-палитре */
.subscription-modal h3{
  color: var(--ink) !important;
  text-shadow: none !important;
}
.subscription-modal p{
  color: var(--muted) !important;
}

/* на всякий случай: чтобы не всплывали старые оранжевые стили на <button> внутри модалки */
.subscription-modal button{
  background: unset !important;
  box-shadow: none !important;
  font-size: unset !important;
  font-weight: unset !important;
}

/* =========================
   AIR: Footer like T-Bank (flat bar + hairline)
   ========================= */

/* футер — в ноль к низу */
.footer{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 100 !important;
}

/* сам бар — плоский, с тонкой линией сверху */
/* бар: фиксируем "рабочую" высоту, safe-area добавляем отдельной строкой */
.footer-bar{
  width: 100% !important;
  max-width: none !important;
  height: var(--footer-h) !important;
  min-height: var(--footer-h) !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(15, 23, 42, 0.12) !important;

  background: rgba(255,255,255,0.94) !important;
  box-shadow: none !important;

  /* внутренности */
  padding: 6px 14px 6px !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: center !important;

  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;


}

/* safe-area снизу отдельной полосой */
.footer-bar::after{
  content:"";
  grid-column: 1 / -1;
}





/* кнопки — компактные */
.bb-btn{
  width: 100% !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: start !important;
}

/* зелёный “язычок” активной вкладки — полностью убираем */
.bb-btn.is-active::before{ content:none !important; }

/* подписи — как iOS */
.bb-btn .bb-label{
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: rgba(11, 18, 32, 0.52) !important;
  text-shadow: none !important;
}

/* активная подпись — синяя */
.bb-btn.is-active .bb-label{
  color: #4aa4b9 !important;
  text-shadow: none !important;
}

/* иконка 24px, без лишних сдвигов */
.bb-btn .bb-ico{
  width: 24px !important;
  height: 24px !important;
  transform: none !important;
}

/* =========================
   Иконки серые/синие через MASK (без фотошопа)
   ========================= */
@supports (-webkit-mask-image: url("")) or (mask-image: url("")){
  .bb-btn .bb-ico{
    background-image: none !important;
    background-color: rgba(11, 18, 32, 0.44) !important; /* серый */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: none !important;
  }
  .bb-btn.is-active .bb-ico{
    background-color: #4aa4b9 !important; /* синий */
  }

  .bb-ico-balance  { -webkit-mask-image: url('/assets/bottoms/wallet1.png');  mask-image: url('/assets/bottoms/wallet1.png'); }
  .bb-ico-rating   { -webkit-mask-image: url('/assets/bottoms/star1.png');    mask-image: url('/assets/bottoms/star1.png'); }
  .bb-ico-book     { -webkit-mask-image: url('/assets/bottoms/book1.png');    mask-image: url('/assets/bottoms/book1.png'); }
  .bb-ico-bonus    { -webkit-mask-image: url('/assets/bottoms/gift1.png');    mask-image: url('/assets/bottoms/gift1.png'); }
  .bb-ico-profile  { -webkit-mask-image: url('/assets/bottoms/profile1.png'); mask-image: url('/assets/bottoms/profile1.png'); }
}

/* fallback (если mask вдруг не поддержится) */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .bb-btn .bb-ico{ filter: grayscale(1) brightness(0.65) !important; }
  .bb-btn.is-active .bb-ico{ filter: none !important; }
}


/* =========================
   AIR: Bonus page tweaks
   (только для .bonus-block)
   ========================= */

/* 1) Убираем бежевые слои-рамки и делаем карточку как на Profile */
.card.bonus-block{
  background: #fff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--card-shadow), var(--card-shadow-2) !important;
  color: var(--ink) !important;
}

/* глушим декоративные ::before/::after из bonus.html (они рисуют бежевую “рамку”) */
.card.bonus-block::before,
.card.bonus-block::after{
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}

/* 2) ВЕСЬ текст — тёмный (в т.ч. то, что задано inline style="color: ...") */
.card.bonus-block,
.card.bonus-block *{
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* вторичный текст — как muted (чтобы выглядел “воздушно”, но не коричневым) */
.card.bonus-block .subtext,
.card.bonus-block .pill__text,
.card.bonus-block .pill__text--ref{
  color: var(--muted) !important;
}

/* pill тоже переводим в “серый/профильный” стиль (если она появится) */
.card.bonus-block .pill{
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 6px 14px rgba(16,24,40,0.06) !important;
}

/* 3) Бульк кнопки “Open chat” — гарантируем, даже если где-то переопределялось */
.button.btn-olivey.is-bouncy,
.button.btn-ruby.is-bouncy,
.btn-air.is-bouncy{
  animation: jello-horizontal .9s both !important;
}
/* =========================
   AIR: BONUS page — text + card
   ========================= */

/* Весь текст внутри карточки бонусов делаем тёмным,
   даже если он задан инлайном/старыми стилями */
.card.bonus-block,
.card.bonus-block *{
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* Но текст на кнопке должен остаться белым */
.card.bonus-block .button,
.card.bonus-block .button *{
  color: #fff !important;
  text-shadow: none !important;
}
/* чтобы при трансформе ничего не вылезало за карточку */
.card.bonus-block { overflow: hidden !important; }

/* мягкая анимация: максимум ~+8% по ширине вместо +25% */
@keyframes jello-soft{
  0%   { transform: scale3d(1,1,1); }
  30%  { transform: scale3d(1.08,.96,1); }
  40%  { transform: scale3d(.97,1.03,1); }
  50%  { transform: scale3d(1.05,.98,1); }
  65%  { transform: scale3d(.99,1.01,1); }
  75%  { transform: scale3d(1.01,.99,1); }
  100% { transform: scale3d(1,1,1); }
}

/* применяем мягкий “бульк” только на странице бонусов */
.card.bonus-block .button.is-bouncy,
.card.bonus-block .btn-air.is-bouncy{
  animation: jello-soft .52s both !important;
  transform-origin: center !important;
}

/* AIR: hint under "Доступный баланс" */
.card.bonus-block .balance-hint{
  width: 95%;
  box-sizing: border-box;

  margin-top: -5px;
  padding: 0 10px;           /* как у pill */

  text-align: left !important;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 400 !important;

  font-size: 11px !important;     /* меньше iOS иногда не делает */
  line-height: 1.35 !important;

  color: #8a8a8a !important;      /* светло-серый */
  opacity: 1 !important;          /* лучше не “гасить” opacity, иначе уходит в “грязь” */
}
/* =========================
   AIR: Rating rows — light gray border (instead of brown)
   ========================= */
.rating-card .rating-list li{
  border: 1px solid var(--card-border) !important;
  box-shadow: none !important;          /* если “рамка” была через shadow */
  outline: none !important;
}


/* =========================
   AIR: Balance — pill + buttons (stable center)
   ========================= */

/* PILL: тонкая серая рамка как в Profile + лёгкая тень */
.card.bonus-block .pill{
  background: #fff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 999px !important;

  /* аккуратная “воздушная” тень */
  box-shadow: 0 6px 14px rgba(16,24,40,0.06) !important;

  /* чтобы не раздувало ширину */
  box-sizing: border-box !important;
}

/* убираем старый внутренний “овал/градиент” от pill (он даёт странный кант) */
.card.bonus-block .pill::after{
  content: none !important;
}

/* текст в pill */
.card.bonus-block .pill__text{
  color: var(--muted) !important;
  text-shadow: none !important;
}
.card.bonus-block .pill .value{
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* CTA: фиксируем центрирование и одинаковую ширину — без “прыжков” */
.card.bonus-block .cta{
  width: 96% !important;
  max-width: 460px !important;
  margin: 12px auto 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Кнопки: всегда 100% ширины CTA, без clamp (он и даёт “слева → центр”) */
.card.bonus-block .cta .button,
.card.bonus-block .cta .btn-air,
.card.bonus-block .cta .button.btn-olivey,
.card.bonus-block .cta .button.btn-ruby{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Важно: текст на кнопке остаётся белым */
.card.bonus-block .cta .button,
.card.bonus-block .cta .button *{
  color: #fff !important;
}

/* AIR: BALANCE — Android compact sizing */
@supports not (-webkit-touch-callout: none){
  @media (pointer: coarse){

    body[data-page="balance"] .card.bonus-block .pill{
      width: 100% !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 16px !important;
      border-radius: 22px !important;
    }

    body[data-page="balance"] .card.bonus-block .pill__text{
      font-size: 11px !important;
      line-height: 1.05 !important;
      max-width: 72% !important;
    }

    body[data-page="balance"] .card.bonus-block .pill .value{
      font-size: 12px !important;
    }

    body[data-page="balance"] .card.bonus-block .cta{
      padding: 0 8px !important;
    }

    body[data-page="balance"] .card.bonus-block .cta .button,
    body[data-page="balance"] .card.bonus-block .cta .btn-air,
    body[data-page="balance"] .card.bonus-block .cta .btn-olivey,
    body[data-page="balance"] .card.bonus-block .cta .btn-ruby{
      min-height: 46px !important;
      padding: 8px 14px !important;
      font-size: 13px !important;
      border-radius: 24px !important;
    }

    body[data-page="balance"] .card.bonus-block .balance-hint{
      text-align: left !important;
      font-size: 10px !important;
      line-height: 1.2 !important;
    }
  }
}

/* =========================
   AIR: Support / FAQ page (#supportPage)
   ========================= */

/* Заголовок (у тебя инлайном белый — перебиваем) */
#supportPage h2{
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* Вопросы/ответы — тёмно-серые */
#supportPage .faq-question{
  color: rgba(11,18,32,0.78) !important;
  text-shadow: none !important;
}

#supportPage .faq-answer{
  color: rgba(11,18,32,0.72) !important;
  text-shadow: none !important;
}

/* Стрелочки — тёмно-серые */
#supportPage .arrow{
  color: rgba(11,18,32,0.62) !important;
}

/* Линии между вопросами — светло-серые */
#supportPage .faq-item{
  border-bottom: 1px solid rgba(15,23,42,0.12) !important;
}

/* Если у faq-item уже есть border/box-shadow — прибиваем лишнее */
#supportPage .faq,
#supportPage .faq-item{
  box-shadow: none !important;
}

/* Кнопки — по центру, одинаковой ширины (и без "уезда влево") */
#supportPage .cta{
  width: 96% !important;
  max-width: 460px !important;
  margin: 18px auto 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Внутренние div’ы у тебя разные — делаем их на всю ширину */
#supportPage .cta > div{
  width: 100% !important;
}

/* Сами кнопки на всю ширину контейнера + убираем инлайн margin-top:20px */
#supportPage .cta .button.btn-olivey{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;          /* перебьёт margin-top:20px из inline */
  display: inline-flex !important;
  justify-content: center !important;
}

body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
)

/* =========================
   BOOK (final) — grid + photo tiles + frosted labels + heart
   ========================= */

/* 0) запрет горизонтального "плавания" */
body[data-page="book"] .recipe-grid{
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}
body[data-page="book"] .recipe-grid,
body[data-page="book"] .recipe-item{
  max-width: 100% !important;
}

/* 1) базовая раскладка кнопки */
body[data-page="book"] .recipe-item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 6px !important;
  padding: 0 !important;

  transform: translateZ(0);
}
/* =========================
   BOOK — widen inner window (more space for 4 columns)
   ========================= */

/* 1) уменьшаем общий боковой padding у контейнера (только book) */
body[data-page="book"] .card-container{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 2) перебиваем inline padding у самой карточки (там сейчас 12px 15px 7px) */
body[data-page="book"] .card.bonus-block.rating-card{
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* 3) 4 колонки уже на 360px (вместо 380px) */
@media (min-width: 360px){
  body[data-page="book"] .recipe-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}



/* 2) фон карточки-контейнера (только book) */
body[data-page="book"]        .card.bonus-block.rating-card,
body[data-page="drink"]       .card.bonus-block.rating-card,
body[data-page="sauces"]      .card.bonus-block.rating-card,
body[data-page="favorites"]   .card.bonus-block.rating-card,
body[data-page="salads"]      .card.bonus-block.rating-card,
body[data-page="breakfast"]   .card.bonus-block.rating-card,
body[data-page="soups"]       .card.bonus-block.rating-card,
body[data-page="ragout"]      .card.bonus-block.rating-card,
body[data-page="pasta"]       .card.bonus-block.rating-card,
body[data-page="sea"]         .card.bonus-block.rating-card,
body[data-page="meat"]        .card.bonus-block.rating-card,
body[data-page="bird"]        .card.bonus-block.rating-card,
body[data-page="dich"]        .card.bonus-block.rating-card,
body[data-page="side-dishes"] .card.bonus-block.rating-card,
body[data-page="dessert"]     .card.bonus-block.rating-card,
body[data-page="bakery"]      .card.bonus-block.rating-card,
body[data-page="snacks"]      .card.bonus-block.rating-card,
body[data-page="pp"]          .card.bonus-block.rating-card,
body[data-page="vegetarian"]  .card.bonus-block.rating-card,
body[data-page="children"]    .card.bonus-block.rating-card,
body[data-page="holidays"]    .card.bonus-block.rating-card{
  background:
    radial-gradient(140% 90% at 50% 110%,
      rgba(234, 209, 252, 0.4) 0%,
      rgba(215, 234, 255, 0.28) 35%,
      rgba(255, 255, 255, 0.00) 72%),

    radial-gradient(120% 85% at 18% 8%,
      rgba(250, 254, 254, 0.62) 0%,
      rgba(217, 255, 245, 0.22) 42%,
      rgba(255, 255, 255, 0.88) 78%),

    linear-gradient(180deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.95) 55%,
      rgba(255,255,255,0.92) 100%) !important;

  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow), var(--card-shadow-2) !important;
}
body[data-page="book"] .card.bonus-block.rating-card .recipe-grid{
  background: transparent !important;
}

/* 3) photo tile: контейнер под картинку без оформления */
body[data-page="book"] .recipe-item--photo .recipe-icon{
  width: 92px !important;
  height: 92px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;

  position: relative !important; /* нужно для "подиума" */
}

/* 4) сама картинка */
body[data-page="book"] .recipe-item--photo .recipe-icon img,
body[data-page="book"] .recipe-item--photo .recipe-icon-img{
  width: 78px !important;
  height: 78px !important;

  object-fit: contain !important;
  display: block !important;

  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;

  /* тень по контуру PNG (если где-то перетирается — держится за !important) */
  filter: drop-shadow(0px 4px 10px rgba(16,24,40,0.28)) !important;
}

/* 5) "подиум" (мягкая тень под картинкой) */
body[data-page="book"] .recipe-item--photo .recipe-icon::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;

  width: 64px !important;
  height: 18px !important;
  border-radius: 999px !important;

  background: radial-gradient(closest-side,
    rgba(16,24,40,0.16),
    rgba(16,24,40,0.00)) !important;

  filter: blur(6px) !important;
  pointer-events: none !important;
}

/* 6) пилюли-лейблы: фикс ширина + frosted */
body[data-page="book"] .recipe-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;

  padding: 7px 10px !important;
  border-radius: 999px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  background: rgba(255,255,255,0.42) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;

  border: 1px solid rgba(15,23,42,0.14) !important;
  box-shadow: 0 4px 10px rgba(16,24,40,0.12) !important;

  color: rgba(11,18,32,0.82) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18px !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 7) tap-эффект (только пилюля, ничего не "разъезжается") */
body[data-page="book"] .recipe-item:active .recipe-label{
  transform: translateY(1px) !important;
  box-shadow: 0 6px 14px rgba(16,24,40,0.05) !important;
}

/* 8) Favorites heart: mask (прячем PNG и рисуем цветом) */
body[data-page="book"] .recipe-item--photo[onclick*="favorites.html"] .recipe-icon-img{
  opacity: 0 !important;
}

body[data-page="book"] .recipe-item--photo[onclick*="favorites.html"] .recipe-icon::before{
  content: "" !important;
  width: 66px !important;
  height: 66px !important;
  display: block !important;

  background-color: #84bfcf !important;

  -webkit-mask-image: url("/static/assets/book/heart.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("/static/assets/book/heart.png") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  transform: translateY(16px) !important;
}

/* =========================
   AIR: DRINKS — gradient window + glass category buttons
   ========================= */


/* AIR: DRINKS — шапку не рамочим */
body[data-page="drink"]       .drinks-header,
body[data-page="sauces"]      .drinks-header,
body[data-page="favorites"]   .drinks-header,
body[data-page="salads"]      .drinks-header,
body[data-page="breakfast"]   .drinks-header,
body[data-page="soups"]       .drinks-header,
body[data-page="ragout"]      .drinks-header,
body[data-page="pasta"]       .drinks-header,
body[data-page="sea"]         .drinks-header,
body[data-page="meat"]        .drinks-header,
body[data-page="bird"]        .drinks-header,
body[data-page="dich"]        .drinks-header,
body[data-page="side-dishes"] .drinks-header,
body[data-page="dessert"]     .drinks-header,
body[data-page="bakery"]      .drinks-header,
body[data-page="snacks"]      .drinks-header,
body[data-page="pp"]          .drinks-header,
body[data-page="vegetarian"]  .drinks-header,
body[data-page="children"]    .drinks-header,
body[data-page="holidays"]    .drinks-header{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* тексты в шапке */
body[data-page="drink"]       .drinks-back,
body[data-page="sauces"]      .drinks-back,
body[data-page="favorites"]   .drinks-back,
body[data-page="salads"]      .drinks-back,
body[data-page="breakfast"]   .drinks-back,
body[data-page="soups"]       .drinks-back,
body[data-page="ragout"]      .drinks-back,
body[data-page="pasta"]       .drinks-back,
body[data-page="sea"]         .drinks-back,
body[data-page="meat"]        .drinks-back,
body[data-page="bird"]        .drinks-back,
body[data-page="dich"]        .drinks-back,
body[data-page="side-dishes"] .drinks-back,
body[data-page="dessert"]     .drinks-back,
body[data-page="bakery"]      .drinks-back,
body[data-page="snacks"]      .drinks-back,
body[data-page="pp"]          .drinks-back,
body[data-page="vegetarian"]  .drinks-back,
body[data-page="children"]    .drinks-back,
body[data-page="holidays"]    .drinks-back{
  color: rgba(38, 40, 45, 0.7) !important;
  font-weight: 600 !important;
}
body[data-page="drink"]       .drinks-title,
body[data-page="sauces"]      .drinks-title,
body[data-page="favorites"]   .drinks-title,
body[data-page="salads"]      .drinks-title,
body[data-page="breakfast"]   .drinks-title,
body[data-page="soups"]       .drinks-title,
body[data-page="ragout"]      .drinks-title,
body[data-page="pasta"]       .drinks-title,
body[data-page="sea"]         .drinks-title,
body[data-page="meat"]        .drinks-title,
body[data-page="bird"]        .drinks-title,
body[data-page="dich"]        .drinks-title,
body[data-page="side-dishes"] .drinks-title,
body[data-page="dessert"]     .drinks-title,
body[data-page="bakery"]      .drinks-title,
body[data-page="snacks"]      .drinks-title,
body[data-page="pp"]          .drinks-title,
body[data-page="vegetarian"]  .drinks-title,
body[data-page="children"]    .drinks-title,
body[data-page="holidays"]    .drinks-title{
  color: rgba(88, 88, 88, 0.88) !important;
  text-shadow: none !important;
}

/* стеклянные кнопки категорий */
body[data-page="drink"]       .drinks-item.drinks-item--toggle,
body[data-page="sauces"]      .drinks-item.drinks-item--toggle,
body[data-page="favorites"]   .drinks-item.drinks-item--toggle,
body[data-page="salads"]      .drinks-item.drinks-item--toggle,
body[data-page="breakfast"]   .drinks-item.drinks-item--toggle,
body[data-page="soups"]       .drinks-item.drinks-item--toggle,
body[data-page="ragout"]      .drinks-item.drinks-item--toggle,
body[data-page="pasta"]       .drinks-item.drinks-item--toggle,
body[data-page="sea"]         .drinks-item.drinks-item--toggle,
body[data-page="meat"]        .drinks-item.drinks-item--toggle,
body[data-page="bird"]        .drinks-item.drinks-item--toggle,
body[data-page="dich"]        .drinks-item.drinks-item--toggle,
body[data-page="side-dishes"] .drinks-item.drinks-item--toggle,
body[data-page="dessert"]     .drinks-item.drinks-item--toggle,
body[data-page="bakery"]      .drinks-item.drinks-item--toggle,
body[data-page="snacks"]      .drinks-item.drinks-item--toggle,
body[data-page="pp"]          .drinks-item.drinks-item--toggle,
body[data-page="vegetarian"]  .drinks-item.drinks-item--toggle,
body[data-page="children"]    .drinks-item.drinks-item--toggle,
body[data-page="holidays"]    .drinks-item.drinks-item--toggle{
  background: rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;

  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12) !important;
  border-radius: 22px !important;

  color: rgba(11, 18, 32, 0.82) !important;
  font-weight: 600 !important;
}


/* =========================
   CATEGORY PAGES — widen inner window (drink/sauces/...): меньше боковых отступов
   ========================= */

/* 1) общий контейнер страницы */
body[data-page="drink"]       .card-container,
body[data-page="sauces"]      .card-container,
body[data-page="favorites"]   .card-container,
body[data-page="salads"]      .card-container,
body[data-page="breakfast"]   .card-container,
body[data-page="soups"]       .card-container,
body[data-page="ragout"]      .card-container,
body[data-page="pasta"]       .card-container,
body[data-page="sea"]         .card-container,
body[data-page="meat"]        .card-container,
body[data-page="bird"]        .card-container,
body[data-page="dich"]        .card-container,
body[data-page="side-dishes"] .card-container,
body[data-page="dessert"]     .card-container,
body[data-page="bakery"]      .card-container,
body[data-page="snacks"]      .card-container,
body[data-page="pp"]          .card-container,
body[data-page="vegetarian"]  .card-container,
body[data-page="children"]    .card-container,
body[data-page="holidays"]    .card-container{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 2) перебиваем inline padding у самой “рамки” карточки (в HTML сейчас 12px 15px 7px) */
body[data-page="drink"]       .card.bonus-block.rating-card,
body[data-page="sauces"]      .card.bonus-block.rating-card,
body[data-page="favorites"]   .card.bonus-block.rating-card,
body[data-page="salads"]      .card.bonus-block.rating-card,
body[data-page="breakfast"]   .card.bonus-block.rating-card,
body[data-page="soups"]       .card.bonus-block.rating-card,
body[data-page="ragout"]      .card.bonus-block.rating-card,
body[data-page="pasta"]       .card.bonus-block.rating-card,
body[data-page="sea"]         .card.bonus-block.rating-card,
body[data-page="meat"]        .card.bonus-block.rating-card,
body[data-page="bird"]        .card.bonus-block.rating-card,
body[data-page="dich"]        .card.bonus-block.rating-card,
body[data-page="side-dishes"] .card.bonus-block.rating-card,
body[data-page="dessert"]     .card.bonus-block.rating-card,
body[data-page="bakery"]      .card.bonus-block.rating-card,
body[data-page="snacks"]      .card.bonus-block.rating-card,
body[data-page="pp"]          .card.bonus-block.rating-card,
body[data-page="vegetarian"]  .card.bonus-block.rating-card,
body[data-page="children"]    .card.bonus-block.rating-card,
body[data-page="holidays"]    .card.bonus-block.rating-card{
  padding-left: 12px !important;  /* было 15px — станет шире */
  padding-right: 12px !important;
}
/* 3) внутренние блоки — на 100% ширины (часто где-то стоит max-width или auto-margins) */
/* 3) внутренние блоки — на 100% ширины (для всех recipe pages) */
body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
) .drinks-scroll,
body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
) .drinks-list{
  width: 100% !important;
  max-width: none !important;
}

/* кнопка-группа — на всю ширину */
body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
) .drinks-item.drinks-item--toggle{
  width: 100% !important;
}

/* карточка рецепта — на всю ширину */
body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
) .drink-recipe{
  width: 100% !important;
  max-width: none !important;
}

/* =========================
   DRINK — compact typography for narrow Android (Redmi)
   ========================= */
@media (max-width: 410px){

  /* назад + заголовок */
  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drinks-back{ font-size: 13px !important; }


  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drinks-title{ font-size: 26px !important; }

  /* кнопка категории (“Lemonades”) */
  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drinks-item.drinks-item--toggle{
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drinks-label{ font-size: 12px !important; }


  /* карточка блюда */
  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe{ border-radius: 16px !important; }
  
  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__title{
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__meta{ font-size: 10px !important; }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__subtitle{ font-size: 12px !important; }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__details,
  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__details li{
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* ===== DRINK: уменьшаем картинки у рецептов (только Android узкие экраны) ===== */

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__img{
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    flex: 0 0 52px !important;
  }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__header{ gap: 10px !important; }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__fav{
    width: 24px !important;
    height: 24px !important;
  }

  body:is(
    [data-page="drink"],
    [data-page="sauces"],
    [data-page="favorites"],
    [data-page="salads"],
    [data-page="breakfast"],
    [data-page="soups"],
    [data-page="ragout"],
    [data-page="pasta"],
    [data-page="sea"],
    [data-page="meat"],
    [data-page="bird"],
    [data-page="dich"],
    [data-page="side-dishes"],
    [data-page="dessert"],
    [data-page="bakery"],
    [data-page="snacks"],
    [data-page="pp"],
    [data-page="vegetarian"],
    [data-page="children"],
    [data-page="holidays"]
  ) .drink-recipe__info{
    min-width: 0 !important;
  }

}



/* =========================
   AIR: DRINKS — recipe card (expanded) glass + meta + divider
   ========================= */

body[data-page="drink"]       .drink-recipe,
body[data-page="sauces"]      .drink-recipe,
body[data-page="favorites"]   .drink-recipe,
body[data-page="salads"]      .drink-recipe,
body[data-page="breakfast"]   .drink-recipe,
body[data-page="soups"]       .drink-recipe,
body[data-page="ragout"]      .drink-recipe,
body[data-page="pasta"]       .drink-recipe,
body[data-page="sea"]         .drink-recipe,
body[data-page="meat"]        .drink-recipe,
body[data-page="bird"]        .drink-recipe,
body[data-page="dich"]        .drink-recipe,
body[data-page="side-dishes"] .drink-recipe,
body[data-page="dessert"]     .drink-recipe,
body[data-page="bakery"]      .drink-recipe,
body[data-page="snacks"]      .drink-recipe,
body[data-page="pp"]          .drink-recipe,
body[data-page="vegetarian"]  .drink-recipe,
body[data-page="children"]    .drink-recipe,
body[data-page="holidays"]    .drink-recipe{
  /* стеклянная карточка вместо бежевой */
  background: rgba(255, 255, 255, 0.40) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;

  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.10) !important;
  border-radius: 18px !important;

  overflow: visible !important; /* чтобы фон/углы были аккуратные */
}

/* если где-то есть внутренний фон у details — убираем */
body:is(
  [data-page="drink"],
  [data-page="sauces"],
  [data-page="favorites"],
  [data-page="salads"],
  [data-page="breakfast"],
  [data-page="soups"],
  [data-page="ragout"],
  [data-page="pasta"],
  [data-page="sea"],
  [data-page="meat"],
  [data-page="bird"],
  [data-page="dich"],
  [data-page="side-dishes"],
  [data-page="dessert"],
  [data-page="bakery"],
  [data-page="snacks"],
  [data-page="pp"],
  [data-page="vegetarian"],
  [data-page="children"],
  [data-page="holidays"]
) .drink-recipe__details{
  background: transparent !important;
}


/* мета-строка: время + калории (светло-серая) */
body[data-page="drink"]       .drink-recipe__meta,
body[data-page="sauces"]      .drink-recipe__meta,
body[data-page="favorites"]   .drink-recipe__meta,
body[data-page="salads"]      .drink-recipe__meta,
body[data-page="breakfast"]   .drink-recipe__meta,
body[data-page="soups"]       .drink-recipe__meta,
body[data-page="ragout"]      .drink-recipe__meta,
body[data-page="pasta"]       .drink-recipe__meta,
body[data-page="sea"]         .drink-recipe__meta,
body[data-page="meat"]        .drink-recipe__meta,
body[data-page="bird"]        .drink-recipe__meta,
body[data-page="dich"]        .drink-recipe__meta,
body[data-page="side-dishes"] .drink-recipe__meta,
body[data-page="dessert"]     .drink-recipe__meta,
body[data-page="bakery"]      .drink-recipe__meta,
body[data-page="snacks"]      .drink-recipe__meta,
body[data-page="pp"]          .drink-recipe__meta,
body[data-page="vegetarian"]  .drink-recipe__meta,
body[data-page="children"]    .drink-recipe__meta,
body[data-page="holidays"]    .drink-recipe__meta{
  color: rgba(15, 23, 42, 0.46) !important;  /* светло-серый */
  font-weight: 600 !important;
}





/* настройки СЕРДЦА избранного */
/* =========================
   AIR: DRINKS — favorite heart: outline (heart.png) + filled (heart2.png) via masks
   ========================= */

body[data-page="drink"]       .drink-recipe__fav,
body[data-page="sauces"]      .drink-recipe__fav,
body[data-page="favorites"]   .drink-recipe__fav,
body[data-page="salads"]      .drink-recipe__fav,
body[data-page="breakfast"]   .drink-recipe__fav,
body[data-page="soups"]       .drink-recipe__fav,
body[data-page="ragout"]      .drink-recipe__fav,
body[data-page="pasta"]       .drink-recipe__fav,
body[data-page="sea"]         .drink-recipe__fav,
body[data-page="meat"]        .drink-recipe__fav,
body[data-page="bird"]        .drink-recipe__fav,
body[data-page="dich"]        .drink-recipe__fav,
body[data-page="side-dishes"] .drink-recipe__fav,
body[data-page="dessert"]     .drink-recipe__fav,
body[data-page="bakery"]      .drink-recipe__fav,
body[data-page="snacks"]      .drink-recipe__fav,
body[data-page="pp"]          .drink-recipe__fav,
body[data-page="vegetarian"]  .drink-recipe__fav,
body[data-page="children"]    .drink-recipe__fav,
body[data-page="holidays"]    .drink-recipe__fav{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* УБИРАЕМ старый способ через background-image */
  background-image: none !important;
  opacity: 1 !important;

  /* НЕАКТИВНО: контурная маска */
  -webkit-mask-image: url("/static/assets/book/heart.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 80% !important;

  mask-image: url("/static/assets/book/heart.png") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 80% !important;

  /* Цвет контура */
  background-color: #48a5b9 !important;

  transition: transform 0.12s ease-out, filter 0.15s ease-out;
}

/* АКТИВНО: залитая маска + другой цвет */
body[data-page="drink"]       .drink-recipe__fav.is-active,
body[data-page="sauces"]      .drink-recipe__fav.is-active,
body[data-page="favorites"]   .drink-recipe__fav.is-active,
body[data-page="salads"]      .drink-recipe__fav.is-active,
body[data-page="breakfast"]   .drink-recipe__fav.is-active,
body[data-page="soups"]       .drink-recipe__fav.is-active,
body[data-page="ragout"]      .drink-recipe__fav.is-active,
body[data-page="pasta"]       .drink-recipe__fav.is-active,
body[data-page="sea"]         .drink-recipe__fav.is-active,
body[data-page="meat"]        .drink-recipe__fav.is-active,
body[data-page="bird"]        .drink-recipe__fav.is-active,
body[data-page="dich"]        .drink-recipe__fav.is-active,
body[data-page="side-dishes"] .drink-recipe__fav.is-active,
body[data-page="dessert"]     .drink-recipe__fav.is-active,
body[data-page="bakery"]      .drink-recipe__fav.is-active,
body[data-page="snacks"]      .drink-recipe__fav.is-active,
body[data-page="pp"]          .drink-recipe__fav.is-active,
body[data-page="vegetarian"]  .drink-recipe__fav.is-active,
body[data-page="children"]    .drink-recipe__fav.is-active,
body[data-page="holidays"]    .drink-recipe__fav.is-active{
  -webkit-mask-image: url("/static/assets/book/heart2.png") !important;
  mask-image: url("/static/assets/book/heart2.png") !important;

  background-color: #81c2d2 !important;
  transform: scale(1.05);
}
/* 4) Компактнее для узких экранов (Android/Redmi), iPhone 11 (414px) не трогаем */
@media (max-width: 410px){

  /* картинка-категория (контейнер) */
  body[data-page="book"] .recipe-item--photo .recipe-icon{
    width: 70px !important;
    height: 70px !important;
  }

  /* сама PNG-картинка внутри */
  body[data-page="book"] .recipe-item--photo .recipe-icon img,
  body[data-page="book"] .recipe-item--photo .recipe-icon-img{
    width: 65px !important;
    height: 65px !important;
  }

  /* “подиум” (тень под картинкой) — тоже чуть уменьшаем */
  body[data-page="book"] .recipe-item--photo .recipe-icon::after{
    width: 56px !important;
    height: 16px !important;
    bottom: 9px !important;
    filter: blur(5px) !important;
  }

  /* овал (пилюля) с названием категории */
  body[data-page="book"] .recipe-label{
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;

    padding: 6px 8px !important;     /* меньше “воздуха” внутри */
    font-size: 10px !important;      /* чуть меньше текст */
  }

  /* расстояния между плитками — компактнее */
  body[data-page="book"] .recipe-grid{
    gap: 12px 8px !important;
  }

  /* если сердечко (Favorites) тоже кажется крупным — уменьшим и его */
  body[data-page="book"] .recipe-item--photo[onclick*="favorites.html"] .recipe-icon::before{
    width: 58px !important;
    height: 58px !important;
    transform: translateY(14px) !important;
  }
  body:is(
    [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
    [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
    [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
    [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
    [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
  ){
    --recipe-thumb: 52px;
    --recipe-gap:   10px;
  }

}
@media (min-width: 390px){
  body:is(
    [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
    [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
    [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
    [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
    [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
  ){
    --recipe-thumb: 80px;
  }
}

/* =========================
   RECIPE ROW — центрируем картинку по вертикали, НЕ ломая старый layout (flex)
   ========================= */

body:is(
  [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
  [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
  [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
  [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
  [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
){
  --recipe-thumb: 90px;
  --recipe-gap:   12px;
}

/* оставляем flex-раскладку как раньше, но делаем место под абсолютную картинку */
body:is(
  [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
  [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
  [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
  [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
  [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
) .drink-recipe__header{
  position: relative !important;
  padding-left: calc(var(--recipe-thumb) + var(--recipe-gap)) !important;

  /* важно: НЕ меняем твою текущую структуру, просто подстраховываем */
  display: flex !important;
  gap: var(--recipe-gap) !important; /* если у тебя gap уже задан — это просто зафиксирует */
}

/* картинка вынимается из потока и всегда центрируется по вертикали */
body:is(
  [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
  [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
  [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
  [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
  [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
) .drink-recipe__img{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: var(--recipe-thumb) !important;
  height: var(--recipe-thumb) !important;

  display: block !important;
  margin: 0 !important;

  object-fit: contain !important;
  object-position: center !important;
}

/* текст как раньше: занимает доступное место */
body:is(
  [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
  [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
  [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
  [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
  [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
) .drink-recipe__info{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* сердечко — как было справа */
body:is(
  [data-page="drink"], [data-page="sauces"], [data-page="favorites"], [data-page="salads"],
  [data-page="breakfast"], [data-page="soups"], [data-page="ragout"], [data-page="pasta"],
  [data-page="sea"], [data-page="meat"], [data-page="bird"], [data-page="dich"],
  [data-page="side-dishes"], [data-page="dessert"], [data-page="bakery"], [data-page="snacks"],
  [data-page="pp"], [data-page="vegetarian"], [data-page="children"], [data-page="holidays"]
) .drink-recipe__fav{
  margin-left: auto !important;
}







/* =========================
   AIR: HELP (support chat) — title, input placeholder, thin gray borders, blue send
   ========================= */

/* 1) заголовок "24/7 Support chat" (или твой текст) — темно-серый */
body[data-page="help"] .support-title{
  color: rgba(15, 23, 42, 0.72) !important;
}

/* 3) окно чата — убрать “толстую” рамку/градиент и сделать тонкую серую */
body[data-page="help"] .chat-window,
body[data-page="index"] .chat-window{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.72) 0%,
    rgba(255,255,255,0.60) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;

  border: 1px solid rgba(15, 23, 42, 0.20) !important;
  box-shadow:
    0 10px 24px rgba(16, 24, 40, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset !important;
  border-radius: 22px !important;
  padding: 0px 6px 0px;   
}

/* прибиваем старые декоративные слои (они и дают “жирные” рамки) */
body[data-page="help"] .chat-window::before,
body[data-page="help"] .chat-window::after,
body[data-page="index"] .chat-window::before,
body[data-page="index"] .chat-window::after{
  border-radius: 0px;  
  content: none !important;
  display: none !important;
}

/* 3) поле ввода — тонкая серая рамка как у таблиц/ячеек */
body[data-page="help"] .input-box,
body[data-page="index"] .input-box{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.64) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;

  border: 1px solid rgba(15, 23, 42, 0.20) !important;
  box-shadow:
    0 12px 26px rgba(16, 24, 40, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.60) inset !important;
  border-radius: 22px !important;
}

/* прибиваем старые декоративные слои у input-box */
body[data-page="help"] .input-box::before,
body[data-page="help"] .input-box::after,
body[data-page="index"] .input-box::before,
body[data-page="index"] .input-box::after{
  content: none !important;
  display: none !important;
}

/* 2) placeholder "Type a message..." — светло-серый */
body[data-page="help"] #support-input::placeholder,
body[data-page="index"] #support-input::placeholder{
  color: rgba(15, 23, 42, 0.38) !important;
  opacity: 1 !important;
}

/* (доп.) цвет вводимого текста, чтобы был аккуратный */
body[data-page="help"] #support-input,
body[data-page="index"] #support-input{
  color: rgba(15, 23, 42, 0.86) !important;
}

/* 4) кнопка отправки — синяя */
body[data-page="help"] #support-send,
body[data-page="index"] #support-send{
  color: #48a5b9 !important;
  background: transparent !important;
}

/* лёгкий tap-эффект */
body[data-page="help"] #support-send:active,
body[data-page="index"] #support-send:active{
  transform: scale(0.96);
}
/* =========================
   AIR: HELP — message bubble contrast
   ========================= */

/* Пузырь сообщения (первое приветствие и любые сообщения в окне) */
body[data-page="help"] .chat-window .message,
body[data-page="help"] .chat-window .bot-message,
body[data-page="help"] .chat-window .assistant-message,
body[data-page="index"] .chat-window .message,
body[data-page="index"] .chat-window .bot-message,
body[data-page="index"] .chat-window .assistant-message{
  /* чуть плотнее и "выше" чем фон окна */
  background: rgba(255, 255, 255, 0.92) !important;

  /* тонкая, но заметная рамка */
  border: 1px solid rgba(15, 23, 42, 0.08) !important;

  /* легкая тень, чтобы отделялось от окна */
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.05) !important;

  border-radius: 16px !important;
}

/* Если сообщение сейчас белое без рамки из-за inline — прибиваем псевдо-слои */
body[data-page="help"] .chat-window .message::before,
body[data-page="help"] .chat-window .message::after,
body[data-page="help"] .chat-window .bot-message::before,
body[data-page="help"] .chat-window .bot-message::after,
body[data-page="help"] .chat-window .assistant-message::before,
body[data-page="help"] .chat-window .assistant-message::after,
body[data-page="index"] .chat-window .message::before,
body[data-page="index"] .chat-window .message::after,
body[data-page="index"] .chat-window .bot-message::before,
body[data-page="index"] .chat-window .bot-message::after,
body[data-page="index"] .chat-window .assistant-message::before,
body[data-page="index"] .chat-window .assistant-message::after{
  content: none !important;
  display: none !important;
}

/* Текст внутри пузыря — чуть темнее для читаемости */
body[data-page="help"] .chat-window .message,
body[data-page="help"] .chat-window .bot-message,
body[data-page="help"] .chat-window .assistant-message,
body[data-page="index"] .chat-window .message,
body[data-page="index"] .chat-window .bot-message,
body[data-page="index"] .chat-window .assistant-message{
  color: rgba(15, 23, 42, 0.86) !important;
}

/* =========================
   GLOBAL FIX: card-container without extra bottom air
   ========================= */

:root{
  --footer-total-h: calc(var(--footer-h) + var(--safe-bottom));
  --content-gap: 0px;

  /* iOS correction:
     Android: safe-bottom = 0 => 0px
     iPhone: safe-bottom > 0 => clamp до 10px */
  --ios-fudge: clamp(0px, var(--safe-bottom), 30px);
}

/* ОСНОВНОЙ СКРОЛЛ-КОНТЕЙНЕР */
.content{
  margin: 0 !important;

  height: calc(var(--tg-height, 100dvh) - var(--footer-total-h) - var(--content-gap) + var(--ios-fudge)) !important;
  max-height: calc(var(--tg-height, 100dvh) - var(--footer-total-h) - var(--content-gap) + var(--ios-fudge)) !important;

  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.keyboard-open .content{
  height: calc(var(--tg-height, 100dvh) - var(--safe-bottom) - var(--content-gap) + var(--ios-fudge)) !important;
  max-height: calc(var(--tg-height, 100dvh) - var(--safe-bottom) - var(--content-gap) + var(--ios-fudge)) !important;
}

@supports (height: 100lvh){
  .content{
    height: calc(100lvh - var(--footer-total-h) - var(--content-gap) + var(--ios-fudge)) !important;
    max-height: calc(100lvh - var(--footer-total-h) - var(--content-gap) + var(--ios-fudge)) !important;
  }
  body.keyboard-open .content{
    height: calc(100lvh - var(--safe-bottom) - var(--content-gap) + var(--ios-fudge)) !important;
    max-height: calc(100lvh - var(--safe-bottom) - var(--content-gap) + var(--ios-fudge)) !important;
  }
}


/* =========================
   AIR: Chat input (HELP + INDEX)
   ========================= */

/* placeholder */
#message-input::placeholder,
#support-input::placeholder{
  color: rgba(15, 23, 42, 0.38) !important;
  opacity: 1 !important;
}
/* send button */
#send-button,
#support-send{
  color: #48a5b9 !important;
  background: transparent !important;
  border: 0 !important;
}

#send-button:active,
#support-send:active{
  transform: scale(0.96);
}
/* camera icon in input */
#image-label svg{
  stroke: #48a5b9 !important;
  opacity: 0.95 !important;
}

/* если вдруг где-то есть path с inline stroke */
#image-label svg *{
  stroke: #6e6e6e !important;
}


/* =========================
   AIR: BOOK — iOS horizontal drift fix (Telegram WebView)
   ========================= */

/* 1) Жёстко запрещаем горизонтальный скролл на всей странице book */
body[data-page="book"]{
  overflow-x: hidden !important;
  width: 100%;
  position: relative;
  touch-action: pan-y; /* просим браузер считать жесты вертикальными */
}

/* 2) На всякий случай — зажимаем контейнеры, которые могут расширяться из-за теней/filters */
body[data-page="book"] .card-container,
body[data-page="book"] .card,
body[data-page="book"] .recipe-grid{
  max-width: 100%;
  overflow-x: hidden !important;
}

/* 3) Иногда iOS “дёргает” сетку из-за translateZ(0) → убираем именно на book */
body[data-page="book"] .recipe-item{
  transform: none !important; /* было translateZ(0) */
}

/* 4) Страховка: чтобы картинки точно не раздували ширину */
body[data-page="book"] .recipe-icon-img{
  max-width: 100%;
}


/* AIR: BALANCE — Android: blue buttons wider + shorter */
@supports not (-webkit-touch-callout: none){
  @media (pointer: coarse){
    body[data-page="balance"] .card.bonus-block .cta{
      padding: 0 6px !important;   /* меньше боковых отступов => визуально шире */
    }

    body[data-page="balance"] .card.bonus-block .cta .button,
    body[data-page="balance"] .card.bonus-block .cta .btn-air,
    body[data-page="balance"] .card.bonus-block .cta .btn-olivey,
    body[data-page="balance"] .card.bonus-block .cta .btn-ruby{
      width: 100% !important;      /* на всю ширину карточки */
      min-height: 40px !important; /* ниже */
      height: 40px !important;
      padding: 0 14px !important;  /* компактнее */
      font-size: 13px !important;
      border-radius: 22px !important;
    }
  }
}
/* ======================================
   AIR: Android — global compact mode
   Applies to ALL pages (balance/profile/bonus/etc.)
   ====================================== */
@supports not (-webkit-touch-callout: none){
  @media (pointer: coarse){

    /* 1) базовый шрифт чуть меньше */
    body{
      font-size: 15px;
    }

    /* 2) кнопки: шире и ниже */
    .cta{
      padding: 0 6px !important;
    }

    .button,
    .btn-air,
    .btn-olivey,
    .btn-ruby{
      width: 100% !important;
      min-height: 44px !important;
      height: 44px !important;
      padding: 0 14px !important;
      font-size: 13px !important;
      border-radius: 22px !important;
    }
  }
}

/* =========================
   AIR: MODALS (popup + subscription-modal)
   ========================= */

@keyframes airFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes airScaleIn{
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* общий AIR overlay */
.air-modal,
.subscription-modal{
  display: none;                 /* попап оплаты включается через JS (display:flex) */
  position: fixed;
  inset: 0;
  z-index: 99999;

  padding: 16px;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  animation: airFadeIn .18s ease forwards;
}

/* карточка модалки */
.air-modal__card,
.subscription-modal .modal-content{
  width: min(92vw, 320px);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);

  padding: 22px 20px 20px;
  text-align: center;

  color: var(--ink);
  animation: airScaleIn .18s ease forwards;
}

/* заголовок/текст */
.air-modal__card h3,
.subscription-modal .modal-content h3{
  margin: 0 0 10px 0;
  font-family: var(--btn-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: none;
}

.air-modal__card p,
.subscription-modal .modal-content p{
  margin: 0 0 16px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
  opacity: 1;
}

/* кнопка ОК внутри модалки — компактнее обычных */
.air-modal__btn,
.subscription-modal .modal-content button{
  width: 210px !important;
  max-width: 92% !important;
  height: 44px !important;
}

/* AIR: partner program terms link under Withdraw button */
.cta .referral-more{
  width: clamp(220px, 85%, 320px);
  max-width: 320px;
  margin-top: 10px;

  text-align: center;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;

  color: #8a8a8a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
  padding: 0 10px;   
}
.cta .referral-more:active{ opacity: 1; }

/* =========================
   Страница формы вывода средств
   ========================= */

body[data-page="withdraw"] .cta .referral-more{
  text-align: center !important;
  margin-top: 20px;
  margin-bottom: 20px;  
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}