/* =========================================================
   HABIT TRACKER — Clean Premium Theme
   Strategy: light backgrounds everywhere so Tilda's dark text
   is always readable. Dark only on CTA + footer with nuclear
   text overrides. Red buttons as requested.

   Palette:
     Red:     #DC1D24  buttons / accent
     RedDk:   #B8151B  hover
     Navy:    #0F172A  CTA section / footer (dark)
     White:   #FFFFFF
     Gray1:   #F8F9FA  alternate light
     Gray2:   #F1F3F5  slightly deeper light
     Warm:    #FFF8F5  warm tint
     Text:    #111827  headings
     Muted:   #6B7280  body text
     Border:  #E5E7EB
   Font: Inter (all weights)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── VARIABLES ───────────────────────────────────────── */
:root, .t-body, #allrecords {
  --t-text-font: 'Inter', system-ui, sans-serif;
  --t-head-font: 'Inter', system-ui, sans-serif;

  --red:          #DC1D24;
  --red-dark:     #B8151B;
  --red-glow:     rgba(220,29,36,.28);
  --navy:         #0F172A;
  --navy-mid:     #1E293B;
  --white:        #FFFFFF;
  --gray1:        #F8F9FA;
  --gray2:        #F1F3F5;
  --warm:         #FFF8F5;
  --warm2:        #FFF3EE;
  --text:         #111827;
  --muted:        #6B7280;
  --border:       #E5E7EB;
  --border-warm:  #F0E8E3;

  --sh-xs: 0 1px 4px rgba(0,0,0,.06);
  --sh-sm: 0 2px 12px rgba(0,0,0,.08);
  --sh-md: 0 6px 28px rgba(0,0,0,.11);
  --sh-lg: 0 16px 56px rgba(0,0,0,.15);
  --sh-red: 0 4px 20px rgba(220,29,36,.30);
}

/* ─── GLOBAL ──────────────────────────────────────────── */
.t-body {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: var(--white) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── RESET TILDA ARTBOARD DEFAULTS ──────────────────── */
.t396__artboard,
.t396__carrier,
.t396__filter {
  background-color: var(--white) !important;
}

/* ═══════════════════════════════════════════════════════
   SECTION BACKGROUNDS — all light, text always readable
   ═══════════════════════════════════════════════════════ */

/* — Hero: image set via inline HTML, CSS handles artboard bg and text — */
#rec1972222661 .t396__artboard {
  background-color: #0a0f1e !important;
}

/* Hero text → white */
#rec1972222661 .tn-elem .tn-atom,
#rec1972222661 .tn-atom {
  color: #ffffff !important;
}

/* — Section 2: warm tint — */
#rec1972546931 .t396__artboard,
#rec1972546931 .t396__carrier {
  background-color: var(--warm) !important;
  background-image: none !important;
}
#rec1972546931 { border-top: 1px solid var(--border-warm) !important; }

/* — Section 3: light gray — */
#rec1972634421 .t396__artboard,
#rec1972634421 .t396__carrier {
  background-color: var(--gray1) !important;
  background-image: none !important;
}
#rec1972634421 { border-top: 1px solid var(--border) !important; }

/* — Section 4: white — */
#rec1972723131 .t396__artboard,
#rec1972723131 .t396__carrier {
  background-color: var(--white) !important;
  background-image: none !important;
}
#rec1972723131 { border-top: 1px solid var(--border) !important; }

/* — Section 5: warm tint — */
#rec1972785061 .t396__artboard,
#rec1972785061 .t396__carrier {
  background-color: var(--warm2) !important;
  background-image: none !important;
}

/* ── T776 скрыт, попап работает ─────────────────────────
   height:0 + overflow:hidden схлопывает весь блок в ноль.
   position:fixed попап не зависит от overflow родителя —
   он позиционируется относительно viewport, а не родителя. */
#rec1659652261 {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════
   CTA: THE ONE DARK SECTION
   ══════════════════════════════════════════════════════ */
#rec1972804191 .t396__artboard,
#rec1972804191 .t396__carrier {
  background-color: var(--navy) !important;
  background-image:
    radial-gradient(ellipse 60% 70% at 100% 50%,
      rgba(220,29,36,.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 50%,
      rgba(220,29,36,.08) 0%, transparent 55%) !important;
}
#rec1972804191 { border-top: 4px solid var(--red) !important; }

/* Nuclear: force ALL text white in CTA section */
#rec1972804191 .tn-elem .tn-atom,
#rec1972804191 .tn-atom,
#rec1972804191 .t-section__title,
#rec1972804191 .t-title,
#rec1972804191 .t-descr,
#rec1972804191 .t-text {
  color: rgba(255,255,255,.95) !important;
}

/* — Section 7: white — */
#rec1985710111 .t396__artboard,
#rec1985710111 .t396__carrier {
  background-color: var(--white) !important;
  background-image: none !important;
}
#rec1985710111 { border-top: 1px solid var(--border) !important; }

/* — T706 block: gray1 — */
#rec1660115011.t-rec {
  background-color: var(--gray1) !important;
}
#rec1660115011 { border-top: 1px solid var(--border) !important; }

/* — Section 8: warm — */
#rec1972850351 .t396__artboard,
#rec1972850351 .t396__carrier {
  background-color: var(--warm) !important;
  background-image: none !important;
}
#rec1972850351 { border-top: 1px solid var(--border-warm) !important; }

/* — FAQ: white — */
#rec1659694871.t-rec {
  background-color: var(--white) !important;
}
#rec1659694871 { border-top: 1px solid var(--border) !important; }

/* ══════════════════════════════════════════════════════
   FOOTER: DARK
   ══════════════════════════════════════════════════════ */
#rec1731969141,
#rec1731969141.t-rec {
  background-color: var(--navy) !important;
  background: var(--navy) !important;
  border-top: 3px solid var(--red) !important;
}

/* Nuclear: footer text white */
#rec1731969141 .t-text,
#rec1731969141 .t-descr,
#rec1731969141 .t-name {
  color: rgba(255,255,255,.60) !important;
}

/* ─── TYPOGRAPHY ──────────────────────────────────────── */
.tn-atom {
  font-family: 'Inter', system-ui, sans-serif !important;
}
.t-text, .t-descr, .t-name, .t-section__descr,
.t550__descr, .t776__descr {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
}
.t-section__title, .t-title,
.t550__title, .t776__title,
.t-name_xl, .t-name_lg, .t-name_md {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
}
.t-section__title {
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
}

/* Prices */
.t776__price, .t776__pricenow {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  font-size: 24px !important;
  letter-spacing: -0.3px;
}
.t776__priceold {
  color: #9CA3AF !important;
  text-decoration: line-through;
}

/* ─── BUTTONS ─────────────────────────────────────────── */
.t-btn, a.t-btn, .t776__btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  border-radius: 8px !important;
  background: var(--red) !important;
  background-color: var(--red) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-red) !important;
  border: none !important;
  transition: all .20s ease !important;
  cursor: pointer !important;
}
.t-btn:hover, a.t-btn:hover, .t776__btn:hover {
  background: var(--red-dark) !important;
  background-color: var(--red-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(220,29,36,.45) !important;
}
.t-btn:active, a.t-btn:active { transform: translateY(0) !important; }

/* CTA section buttons — white outline → red fill */
#rec1972804191 .t-btn,
#rec1972804191 a.t-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
#rec1972804191 .t-btn:hover,
#rec1972804191 a.t-btn:hover {
  background: var(--red) !important;
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: var(--sh-red) !important;
  transform: translateY(-2px) !important;
}

/* ─── CATALOG — T776 ──────────────────────────────────── */
.t776 { background: transparent !important; }

.t776__col {
  background-color: var(--white) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: all .28s cubic-bezier(.22,.68,0,1.2) !important;
}
.t776__col:hover {
  box-shadow: var(--sh-lg) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(220,29,36,.25) !important;
}
.t776__col::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--red) !important;
  width: 40px;
  margin: 16px 16px 0 !important;
  border-radius: 2px;
}

.t776__imgwrapper, .t1002__picture-wrapper {
  overflow: hidden !important;
  transition: transform .4s ease !important;
}
.t776__col:hover .t776__bgimg { transform: scale(1.04) !important; }

.t776__textwrapper { padding: 16px 16px 20px !important; }
.t776__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 8px !important;
}
.t776__descr {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ─── FAQ — T550 ──────────────────────────────────────── */
.t550__circle {
  border-color: var(--red) !important;
  background-color: rgba(220,29,36,.06) !important;
  box-shadow: 0 0 0 4px rgba(220,29,36,.06) !important;
}
.t550__digit {
  color: var(--red) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}
.t550__line {
  background: linear-gradient(to bottom, rgba(220,29,36,.3), rgba(220,29,36,.02)) !important;
}
.t550__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-size: 17px !important;
  letter-spacing: -0.2px !important;
  transition: color .2s !important;
}
.t550__col:hover .t550__title { color: var(--red) !important; }
.t550__descr {
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.t550__col {
  border-radius: 10px !important;
  padding: 4px 10px !important;
  transition: background .2s !important;
}
.t550__col:hover { background: rgba(220,29,36,.03) !important; }

/* ─── FOOTER — T981 ───────────────────────────────────── */
.t981 { background: transparent !important; }

.t981__menu-link,
.t981__logo .t-title,
.t981__secondary-menu,
.t981__secondary-menu a,
.t981__secondary-menu li {
  color: rgba(255,255,255,.50) !important;
  font-family: 'Inter', sans-serif !important;
}
.t981__secondary-menu a { border-bottom-color: rgba(255,255,255,.12) !important; }
.t981__secondary-menu a:hover,
.t981__menu-link:hover { color: var(--red) !important; }

.t981__logo .t-title {
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.4px !important;
  color: #ffffff !important;
}
.t981__wrapper { justify-content: center !important; }
.t981__col_right { width: auto !important; text-align: center !important; }
.t981__secondary-menu { text-align: center !important; }
.t981__secondary-menu ul {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: 16px !important;
  padding: 0 !important; margin: 0 !important; list-style: none !important;
}

/* ─── NAVIGATION ──────────────────────────────────────── */
.t-menu__link-item, .t-menu__link-item a, .t-header__menu-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
  color: var(--text) !important;
}

/* ─── FORMS ───────────────────────────────────────────── */
.t-input-group input,
.t-input-group textarea,
.t-input-group select {
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  background-color: var(--white) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.t-input-group input:focus,
.t-input-group textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(220,29,36,.10) !important;
  outline: none !important;
}
.t-input-title {
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.t-form__successbox {
  background: rgba(220,29,36,.07) !important;
  border-color: var(--red) !important;
  color: var(--red-dark) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.t-form__errorbox-wrapper {
  background: #FEF2F2 !important;
  border-color: #FCA5A5 !important;
  border-radius: 8px !important;
}

/* ─── SLIDERS ─────────────────────────────────────────── */
.t-slds__arrow {
  background-color: var(--red) !important;
  border-radius: 50% !important;
  transition: all .2s !important;
}
.t-slds__arrow:hover {
  background-color: var(--red-dark) !important;
  transform: scale(1.1) !important;
}
.t-slds__bullet { background: rgba(220,29,36,.2) !important; }
.t-slds__bullet_active { background: var(--red) !important; }

/* ─── POPUP ───────────────────────────────────────────── */
.t-popup__container {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--sh-lg) !important;
}

/* ─── LINKS ───────────────────────────────────────────── */
#allrecords a, .t-body a { color: var(--red) !important; }
#allrecords a:hover, .t-body a:hover { color: var(--red-dark) !important; }
#allrecords a.t-btn, .t-body a.t-btn { color: #ffffff !important; }

/* ─── CUSTOM BUTTONS — белый текст всегда ─────────────── */
#allrecords .hc__btn,
#allrecords .hc__btn:hover,
#allrecords .s8__btn,
#allrecords .s8__btn:hover,
#allrecords .shop__btn,
#allrecords .shop__btn:hover { color: #ffffff !important; }

/* ─── LABELS ──────────────────────────────────────────── */
.t-label, .t-tag {
  background: rgba(220,29,36,.10) !important;
  color: var(--red) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* ─── T706 BLOCK ──────────────────────────────────────── */
#rec1660115011 .t-text, #rec1660115011 .t-descr {
  color: var(--muted) !important;
}
#rec1660115011 .t-title, #rec1660115011 .t-section__title {
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -0.6px !important;
}

/* ─── NO TOP BORDERS DEFAULT ──────────────────────────── */
.t-rec + .t-rec { border-top: none !important; }

/* ─── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--gray1); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* ─── SELECTION ───────────────────────────────────────── */
::selection { background: rgba(220,29,36,.15); color: var(--red-dark); }

/* ─── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t-btn, .t776__col, .t-slds__arrow { transition: none !important; }
}