/* === Shared Header === */
:root{
  --foreground: var(--foreground, 210 15% 20%);
  --primary: var(--primary, 330 81% 60%);
  --border: var(--border, 330 15% 92%);
}

header{ position:sticky; top:0; z-index:50; background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border-bottom:1px solid hsl(var(--border)); }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:8px; font-weight:900; text-decoration:none; color: hsl(var(--foreground)); }
.nav-links{ display:flex; gap: 28px; align-items:center; }
.nav-links a{ color:#000; font-weight:600; text-decoration:none; border-bottom:2px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover{ color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.nav-links a.active{ color: hsl(var(--primary)); background: hsl(var(--primary) / .12); border:1px solid hsl(var(--primary) / .45); border-bottom-color: hsl(var(--primary)/.45); padding:6px 10px; border-radius:999px; box-shadow: 0 6px 16px hsla(330,81%,60%,.15); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1rem; font-weight:800; border-radius:12px; border:none; cursor:pointer; text-decoration:none; }
.btn-primary{ background: hsl(var(--primary)); color:#fff; box-shadow: 0 8px 24px hsla(330,81%,60%, .18); }
.btn-primary:hover{ filter: brightness(.95); }
/* Mobile */
.nav-toggle{ 
  display:none; 
  background:#fff; 
  border:1px solid hsl(var(--border)); 
  border-radius:10px; 
  padding:.4rem .6rem; 
  font-weight:800; 
  cursor:pointer; 
}
@media (max-width: 768px){
  .nav-toggle{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    /* === Longer button for opening the menu === */
    padding: .6rem 1.4rem;      /* was .4rem .6rem */
    min-width: 120px;           /* ensures visibly longer button */
    height: 44px;               /* solid touch target */
    font-size: 1.05rem;
    gap: .5rem;
  }
  .nav-links{ 
    display:none; position:absolute; right:16px; left:16px; top:64px; 
    background:#fff; border:1px solid hsl(var(--border)); border-radius:12px; padding:10px; 
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    flex-direction: column; gap:.5rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.5rem .6rem; border-radius:8px; }
  .nav-links a:hover{ background: hsl(var(--primary) / .08); }
}


/* === Desktop: фиксированная шапка === */
@media (min-width: 769px){
  :root{
    --header-h: 72px; /* при необходимости подкорректируй высоту */
  }

  header{
    position: fixed !important; /* было sticky, теперь фиксированная */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
  }

  body{
    padding-top: var(--header-h); /* чтобы контент не прятался под шапкой */
  }

  .nav{
    min-height: var(--header-h);
    align-items: center;
  }
}


/* === Override: nav "Записаться" button styled like floating FAB === */
header .nav .btn.btn-primary{
  background: #FAD1E6 !important;     /* светло‑розовый фон */
  color: #7A0144 !important;           /* тёмно‑тёмно розовый текст */
  border: 2px solid #F30878 !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 18px rgba(243,8,120,.18);
  letter-spacing: .2px;
  padding: .6rem 1rem !important;
  transition: transform .18s ease, box-shadow .18s ease,
              background .18s ease, color .18s ease, border-color .18s ease;
}
header .nav .btn.btn-primary:hover{
  background: #F30878 !important;
  color: #ffffff !important;
  border-color: #F30878 !important;
  box-shadow: 0 14px 28px rgba(243,8,120,.30);
  transform: translateY(-1px);
}
header .nav .btn.btn-primary:active{
  transform: translateY(0);
}