/* =========================
   TB: Variables (���� �� header)
========================= */
:root {
  --tb-h: 64px;               /* �������� �� ���� (desktop) */
}
@media (max-width: 768px){
  :root { --tb-h: 56px; }     /* �������� �� ���� (mobile) */
}

/* =========================
   TB: Base
========================= */
.tb-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483647;        /* ��� ������ */
  isolation: isolate;         /* �������� stacking context */
  background-color: #000;     /* �����: ������ ����� */
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: background-color .25s ease; /* ������ ����� 40% */
  will-change: background-color;
  min-height: var(--tb-h);
}
.tb-header.tb--transparent{
  background-color: rgba(0,0,0,.40);   /* 40% opacity */
}

.tb-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--tb-h);
  display: flex;
  align-items: center;
  justify-content: space-between; /* ���� �����, ��������� ���������� */
  position: relative;
}

/* ���� */
.tb-logo{ width: 60px; height: auto; display:block; }
@media (max-width:768px){ .tb-logo{ width: 40px; } }

/* ��������� */
.tb-burger{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 28px; cursor: pointer;
  display: none; line-height: 1;
}
@media (max-width:768px){ .tb-burger{ display: inline-flex; } }

/* =========================
   TB: Navigation
========================= */
.tb-nav{
  margin-left: auto;
  margin-right: auto; /* �������� ������ ������ ����� ��������� */
}
.tb-menu{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 18px; align-items: center;
}
.tb-link{
  color:#fff; text-decoration:none; font-weight:700;
  font-size: 1.05rem;
  padding: 8px 14px;
  border-radius: 10px;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.tb-link:hover{
  background: rgba(255,255,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.tb-link::before{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:3px; background:#0fd0d0; transition: width .25s ease;
}
.tb-link:hover::before{ width:100%; }

/* Dropdown (desktop) */
.tb-dropdown{ position: relative; }
.tb-drop-menu{
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px;
  background: #000;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  padding: 6px;
}

/* ��������� �� dropdown ��� hover (desktop) ��� ������ JS ������ .tb-open */
@media (min-width:769px){
  .tb-dropdown:hover > .tb-drop-menu,
  .tb-dropdown.tb-open > .tb-drop-menu{
    display:block;
  }
}

.tb-drop-link{
  display:block; color:#fff; text-decoration:none; font-weight:600;
  padding:10px 12px; border-radius:8px; transition: background .2s ease;
}
.tb-drop-link:hover{ background: rgba(255,255,255,.92); }

/* =========================
   TB: Mobile menu panel
========================= */
@media (max-width:768px){
  .tb-nav{
    position: fixed;
    top: var(--tb-h); left: 0; right: 0;
    background: rgba(0,0,0,.96);
    border-top: 1px solid rgba(255,255,255,.08);
    display: none;
    max-height: calc(100vh - var(--tb-h));
    overflow-y: auto;
    padding: 10px 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    margin: 0; /* ����� - ���������� ������������ �� ������� ���� */
  }
  .tb-nav.tb-nav--open{ display:block; opacity:1; transform: translateY(0); }

  .tb-menu{ flex-direction: column; gap: 8px; padding: 0 12px; }
  .tb-item{ width: 100%; }
  .tb-link{
    display:block; width:100%; text-align:center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
  }
  .tb-link:hover{ background: rgba(255,255,255,.12); transform:none; }

  .tb-drop-link:hover{ background: rgba(255,255,255,.12); }

  /* ��������� �� ����� �� ������ ��� �������� ���� */
  body.tb-no-scroll{ overflow: hidden; }
}

/* =========================
   TB: Page offset (�� �����)
========================= */
.tb-push{ padding-top: calc(var(--tb-h) + 10px); }

/* =========================
   DESKTOP-ONLY "��������" � dropdown "���������"
   (��� ������� � HTML)
========================= */
@media (min-width:769px){
  /* ������ ����� ����� � ������ �� ��������� ���� �������� �� ������ */
  .tb-drop-menu .tb-accordion-toggle{
    position: relative;
    font-weight: 800;
  }
  .tb-drop-menu .tb-accordion-toggle::after{
    content:"?";
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    transition: transform .25s ease;
    pointer-events: none;
  }
  .tb-drop-menu .tb-accordion-toggle.tb-open::after{
    transform: translateY(-50%) rotate(180deg);
  }

  /* ��������, ����� JS ������ ���� ����� ���� (������) */
  .tb-drop-menu .tb-drop-section{
    display: none;           /* ������ �� ������������ */
    padding: 6px 0 2px 0;
    border-left: 2px solid rgba(255,255,255,.12);
    margin-left: 8px;
  }
  .tb-drop-menu .tb-drop-section .tb-drop-link{
    font-weight: 600;
    opacity: .95;
  }
}


@media (max-width: 768px) {
  :root { --tb-h: 64px; }              /* мобилна височина на хедъра */
}

/* разстояние отгоре + коректен офсет за скрол до anchor-и */
html { scroll-padding-top: calc(var(--tb-h) + 0px); }
.page-content { padding-top: calc(var(--tb-h) + 0px); }