/* ==========================================================================
   site.css — публичната част (всичко извън /crm).

   Чат 4 слага само това, което трябва на записването: горната лента, футърът
   и петте стъпки. Чат 5 добавя героя, услугите, галерията и отзивите — тук,
   под същите променливи от base.css. Нови цветове не се въвеждат.

   Правило за целия файл: разстоянията са кратни на 4, ъглите идват от
   --r / --r-lg, а единственото силно петно на екрана е акцентът (--accent).
   ========================================================================== */

/* ============================================================ скелет ==== */

body.site {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background:
    radial-gradient(900px 400px at 50% -140px, #FFFDF9 0%, transparent 70%),
    var(--bg);
}

/* Две ширини за целия сайт, повече няма.
   .wrap   — четивна колона: записването, вътрешните страници, текстът.
   .wrap-w — широка: горната лента, футърът и секциите на началната страница.
   Полето отстрани е в самата мярка, за да не се лепи текстът за ръба
   на телефона. */
.wrap   { width: min(100% - 32px, 780px);  margin-inline: auto; }
.wrap-w { width: min(100% - 32px, 1060px); margin-inline: auto; }

.site-main { flex: 1; padding: 26px 0 44px; }

/* Началната страница започва направо с героя — без поле над него. */
body.home .site-main { padding-top: 0; }

/* -------------------------------------------------------- горна лента -- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 252, 247, .93);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 14px; height: 62px; }

/* Логото. Същото правило има и в crm.css — двата файла никога не се
   зареждат заедно, затова стои на две места. Тук е малко по-едро, защото
   е единственото име на екрана. */
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand b {
  font-family: var(--font-title);
  font-size: 25px; font-weight: 600; letter-spacing: -.02em;
}
.brand b::after { content: '.'; color: var(--accent); }
.brand span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
}

/* Логото е връзка към началната страница на всяка страница освен на нея
   самата. Подчертаването и синьото на връзката се махат тук. */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover b { color: var(--accent-2); }

.head-phone { font-weight: 500; }
.head-phone .lbl { color: var(--text-2); font-weight: 400; margin-right: 6px; }
/* На страниците с меню няма място и за етикета „Спешен случай" — там остава
   само номерът. На записването меню няма и етикетът се вижда. */
.site-header.with-nav .head-phone .lbl { display: none; }

/* ------------------------------------------------------------- менюто -- */
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: var(--text-2); text-decoration: none;
  font-size: 13.5px; padding: 7px 9px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: var(--bg-2); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 500; }

/* Бургерът се показва само на тесен екран (виж края на файла). */
.nav-toggle {
  display: none;
  font: inherit; cursor: pointer;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--text);
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ''; display: block; width: 17px; height: 1.5px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle .bars::before { transform: translateY(-5.5px); }
.nav-toggle .bars::after  { transform: translateY(4px); }

/* ------------------------------------------------------------ футър ---- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 26px 0 34px;
}
/* auto-fit нарочно: футърът на записването има две колони, този на сайта —
   четири. Едно правило върши работа и на двете места. */
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 30px; font-size: 14px;
}
.foot-grid h4 {
  font-family: var(--font-title); font-size: 15px; font-weight: 600;
  margin: 0 0 6px;
}
.foot-grid p { margin: 0 0 4px; color: var(--text-2); }
.foot-grid a { color: var(--text); text-decoration: none; }
.foot-grid a:hover { color: var(--accent-2); }
.hours-row { display: flex; justify-content: space-between; gap: 14px; max-width: 320px; }
.hours-row span:last-child { font-variant-numeric: tabular-nums; }

.foot-brand .brand { margin-bottom: 8px; }
.foot-brand .motto { color: var(--text-2); max-width: 28ch; }
.foot-links { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.foot-links a { color: var(--text-2); }
.foot-links a:hover { color: var(--accent-2); }

/* Членствата са редът, който казва „това е истински кабинет". */
.memberships { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.foot-note {
  grid-column: 1 / -1;
  margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
}
.foot-note a { color: var(--text-2); }

/* ============================================ лепящата лента на телефон == */
/* Двата бутона, които трябват на човек с болка в ръката: обаждане и час.
   Показва се само под 720px — правилото е в края на файла. */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 252, 247, .96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; padding: 11px 12px; }

/* ------------------------------------------------------ балончето ------ */
/* До чат 6 стои скрито: BOT_READY в site.js. Няма смисъл да каним хората
   към асистент, който още го няма. */
.bot-bubble {
  position: fixed; right: 18px; bottom: 18px; z-index: 25;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px;
  border: 1px solid var(--accent-25); border-radius: 999px;
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow-2); cursor: pointer; font: inherit;
}
.bot-bubble:hover { background: #FFF9F0; border-color: var(--accent); }

/* ================================================== вътрешните страници == */
/* Екип, поверителност, общи условия: заглавен блок и четивна колона. */
.page-head {
  padding: 34px 0 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow {
  display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 9px;
}
.page-head h1 { font-size: clamp(27px, 4.4vw, 36px); line-height: 1.15; }
.page-head .lead { margin: 10px 0 0; color: var(--text-2); max-width: 60ch; }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: 19px; margin: 34px 0 8px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 15.5px; margin: 20px 0 6px; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose li::marker { color: var(--accent); }
.prose .updated { color: var(--text-2); font-size: 13px; }

/* Жълтата бележка отгоре на юридическите страници. Пада при реален старт. */
.note-demo {
  margin: 0 0 24px; padding: 12px 15px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--accent-05);
  font-size: 13.5px; color: var(--text-2);
}

/* ----------------------------------------------------------- екипът ---- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.team-card { padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
/* Докато няма истински снимки — инициали. По-честно от стокова физиономия. */
.team-face {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  font-family: var(--font-title); font-size: 23px; color: var(--accent-2);
}
.team-card h2 { font-size: 17px; }
.team-card .role { color: var(--accent-2); font-size: 13px; margin: 2px 0 8px; }
.team-card p { margin: 0; color: var(--text-2); font-size: 14px; }

/* --------------------------------------------------- призив накрая ----- */
.cta-card {
  margin-top: 30px; padding: 22px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  background: var(--bg-2);
}
.cta-card h2 { font-size: 19px; }
.cta-card p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.cta-card .acts { margin: 0; }

/* ========================================================= записване ==== */

.booking { padding: 26px 26px 24px; }
.booking > h1 { font-size: 28px; }
.booking > .lead { margin: 6px 0 0; color: var(--text-2); }

/* -------------------------------------------------------- стъпалата ---- */
/* Крачките не са украса: всяка показва избраното до момента и връща назад
   с едно натискане. Затова стоят над сцената през целия път. */
.steps {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.steps li { min-width: 0; }
.steps button {
  font: inherit; width: 100%; text-align: left;
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 4px 9px;
  border: none; border-top: 2px solid var(--line);
  background: transparent; color: var(--text-2);
  cursor: pointer; border-radius: 0;
}
.steps button:disabled { cursor: default; opacity: .55; }
.steps button:not(:disabled):hover { color: var(--text); border-top-color: var(--accent-25); }
.steps .n {
  font-family: var(--font-title); font-size: 13px; font-weight: 600;
  color: var(--text-2);
}
.steps .lb { font-size: 13px; }
.steps .vl {
  display: block; font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.steps li[aria-current="step"] button { border-top-color: var(--accent); color: var(--text); }
.steps li[aria-current="step"] .n { color: var(--accent); }
.steps li.done .vl { color: var(--accent-2); font-weight: 500; }

/* ----------------------------------------------------------- сцена ----- */
.stage { margin-top: 20px; }
.step { animation: step-in .16s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } }

.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-head h2 { font-size: 19px; }
.step-head .sub { color: var(--text-2); font-size: 13px; margin: 2px 0 0; }

.back {
  font: inherit; font-size: 13px;
  border: 1px solid var(--line); background: var(--card); color: var(--text-2);
  padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.back:hover { border-color: var(--accent-25); color: var(--text); }

.loading, .none {
  color: var(--text-2); text-align: center; padding: 26px 6px;
}
.none b { display: block; color: var(--text); font-weight: 500; margin-bottom: 3px; }

/* --------------------------------------------------- 1. услугите ------- */
.svc-list { display: grid; gap: 8px; }
.svc {
  font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.svc:hover { border-color: var(--accent); background: #FFF9F0; }
.svc .nm { font-weight: 500; }
.svc .dsc { grid-column: 1; color: var(--text-2); font-size: 13px; }
.svc .meta {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center; text-align: right; white-space: nowrap;
  font-size: 13px; color: var(--text-2);
}
.svc .price { display: block; color: var(--accent-2); font-weight: 500; }

.urgent {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--busy);
  border-radius: var(--r); background: var(--bg-2);
  font-size: 13.5px; color: var(--text-2);
}
.urgent a { font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------- 2. дните ------ */
/* Решетката се държи тясна нарочно: при 780px квадратните клетки стават
   огромни и месецът заприличва на стенен календар. */
.cal-nav, .dow, .days { max-width: 520px; margin-inline: auto; }

.cal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.cal-nav h3 { font-size: 17px; flex: 1; text-align: center; }

.dow, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dow {
  margin-bottom: 5px;
  font-size: 11.5px; color: var(--text-2); text-align: center;
}
.days { grid-auto-rows: 1fr; }

.day {
  font: inherit; cursor: pointer;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, background .12s ease;
}
.day:hover:not(:disabled) { border-color: var(--accent); background: #FFF9F0; }
.day .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--free); }

/* Зает, почивен или извън прозореца за записване — плосък и неактивен.
   Причината не се обявява: пациентът няма нужда да знае кой кога идва. */
.day:disabled {
  cursor: default; background: transparent;
  border-color: transparent; color: #BCB2A4;
}
.day.blank { visibility: hidden; }
.day.today { box-shadow: inset 0 0 0 1px var(--accent-25); }
.day[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #FFFCF7;
}
.day[aria-pressed="true"] .dot { background: #FFFCF7; }

.legend { margin: 12px 0 0; color: var(--text-2); font-size: 12.5px; text-align: center; }

/* ------------------------------------------------------ 3. часовете ---- */
.slot-group + .slot-group { margin-top: 16px; }
.slot-group h4 {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 8px;
}
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.slot {
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  padding: 11px 6px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.slot:hover { border-color: var(--accent); background: #FFF9F0; }

.break-note {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; color: var(--text-2); font-size: 12.5px;
}
.break-note::before, .break-note::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ------------------------------------------------- 4. име и телефон ---- */
.pick {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 12px 15px; margin-bottom: 16px;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--bg-2);
}
.pick .when { font-family: var(--font-title); font-size: 18px; }
.pick .what { color: var(--text-2); font-size: 13.5px; }

.form-err {
  margin: 14px 0 0; padding: 9px 12px;
  background: #FBF1EF; border: 1px solid #E3C4BF; color: #8E3F37;
  border-radius: var(--r); font-size: 13.5px;
}
.btn-big { width: 100%; padding: 13px 20px; font-size: 16px; margin-top: 16px; }
.fine { margin: 10px 0 0; text-align: center; }

/* --------------------------------------------------------- готово ------ */
.done { text-align: center; padding: 6px 0 4px; }
.done .tick {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--second); color: #FFFCF7;
  font-size: 27px; line-height: 1;
}
.done h2 { font-size: 23px; }
.done .sum {
  margin: 16px auto 0; max-width: 380px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.done .sum .when { font-family: var(--font-title); font-size: 25px; line-height: 1.2; }
.done .sum .what { margin-top: 4px; }
.done .sum .where { margin-top: 10px; color: var(--text-2); font-size: 13.5px; }

.code-box {
  margin: 14px auto 0; max-width: 380px; padding: 11px 16px;
  border: 1px dashed var(--accent-25); border-radius: var(--r);
  background: var(--accent-05);
}
.code-box b {
  display: block; font-family: var(--font-title);
  font-size: 24px; letter-spacing: .16em; color: var(--accent-2);
}
.acts {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 20px;
}

/* Този ред пада при реален старт — тогава SMS-ите наистина тръгват. */
.demo-note {
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------------- отмяна -------- */
.cancel-box { margin-top: 16px; padding: 14px 18px; }
.cancel-box > summary {
  cursor: pointer; font-size: 14px; color: var(--accent-2);
  list-style: none;
}
.cancel-box > summary::-webkit-details-marker { display: none; }
.cancel-box > summary::before { content: '＋ '; }
.cancel-box[open] > summary::before { content: '－ '; }
.cancel-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.cancel-form .field { flex: 1 1 150px; }
.cancel-msg { margin: 12px 0 0; font-size: 13.5px; }
.cancel-msg.ok  { color: #4F6249; }
.cancel-msg.err { color: #8E3F37; }

/* ========================================================== по-тесен ==== */

/* Под 1040 лентата е тясна за всичко наведнъж и пада първото, което се
   подразбира: думите под логото. */
@media (max-width: 1040px) {
  .head-in .brand span { display: none; }
}

/* Менюто пада в чекмедже под лентата. Отваря се от бургера, затваря се при
   избор на връзка — това го прави site.js. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 14px;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .site-nav[data-open="false"] { display: none; }
  .site-nav a { padding: 11px 8px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .site-nav a:last-child { border-bottom: none; }
  .head-in { position: relative; }
}

@media (max-width: 720px) {
  .mobile-bar { display: flex; }
  .head-cta { display: none; }      /* от тук надолу го поема лентата долу */
  .bot-bubble { bottom: 74px; right: 14px; }
  /* без това лентата покрива последния ред на футъра */
  .site-footer { padding-bottom: 92px; }
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .booking { padding: 20px 16px 18px; border-radius: var(--r); }
  .booking > h1 { font-size: 24px; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .steps button { padding: 7px 2px 8px; }
  .steps .lb { display: none; }              /* остават номерът и избраното */
  .steps .vl { font-size: 12px; }
  .foot-grid { grid-template-columns: 1fr; }
  .head-phone .lbl { display: none; }
  .page-head { padding: 24px 0 20px; margin-bottom: 20px; }
  .cta-card { padding: 18px; }
  .cta-card .acts .btn { width: 100%; }
  .cal-nav h3 { min-width: 0; flex: 1; }
  .day { border-radius: var(--r-sm); }
  .slots { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .acts .btn { width: 100%; }
}