/* Планета здоров'я Online — спільні стилі кабінету і входу.
   Вітрина (index.html) поки тримає стилі всередині себе. */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F5F7F2;
  --bg-green:#E9F6E6;
  --ink:#0E1B12;
  --ink-soft:#4A564C;
  --green:#51B848;
  --green-deep:#3A9A32;
  --green-dark:#123420;
  --amber:#FFB020;
  --red:#D64541;
  --line:rgba(14,27,18,0.12);
  --line-strong:rgba(14,27,18,0.24);
  --radius:10px;
}

*{box-sizing:border-box;}
/* scroll-padding-top: перехід за посиланням-якорем зупиняється НИЖЧЕ
   прикріпленої шапки, інакше заголовок розділу ховається під нею */
html{scroll-behavior:smooth; scroll-padding-top:92px;}
body{
  margin:0;
  background:var(--bg-soft);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; color:var(--ink); font-weight:800; letter-spacing:-0.01em;}
h1,h2{text-transform:uppercase;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

a:focus-visible, button:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

.eyebrow{
  font-weight:700; font-size:13px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--green);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; background:var(--green); color:#fff;
  border-radius:var(--radius); font-weight:700; font-size:15px;
  border:1px solid var(--green);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--green-deep); border-color:var(--green-deep); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong);}
.btn-ghost:hover{background:rgba(14,27,18,0.04); border-color:var(--ink); color:var(--ink);}
.btn-dark{background:var(--ink); border-color:var(--ink);}
.btn-dark:hover{background:#000; border-color:#000;}
.btn-sm{padding:10px 18px; font-size:14px;}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:0 32px; height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.brand .logo-dot{
  width:38px; height:38px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:17px;
}
.brand-text{
  font-weight:900; font-size:15px; text-transform:uppercase;
  letter-spacing:0.04em; line-height:1.15;
}
.brand-text .online{color:var(--green);}
.header-actions{display:flex; align-items:center; gap:12px;}
.header-actions .btn{padding:11px 22px;}

/* ---------- FORMS ---------- */
.field{margin-bottom:18px;}
.field label{
  display:block; font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:700;
  margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-soft);
  border:1.5px solid var(--line); border-radius:10px;
  padding:13px 15px; font-family:inherit; font-size:15px;
  color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--green); background:#fff;
}
.form-error{
  display:none;
  background:#FBEBEA; border:1px solid rgba(214,69,65,0.4);
  color:#8C2320; border-radius:10px;
  padding:12px 15px; font-size:14px; font-weight:600; margin-bottom:18px;
}
.form-error.show{display:block;}
.form-ok{
  display:none;
  background:var(--bg-green); border:1px solid rgba(81,184,72,0.4);
  color:#1E5C19; border-radius:10px;
  padding:12px 15px; font-size:14px; font-weight:600; margin-bottom:18px;
}
.form-ok.show{display:block;}

/* ---------- CARDS ---------- */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:36px;
}

footer{
  padding:36px 0 44px; border-top:1px solid var(--line);
  background:var(--bg-soft);
}
footer .frow{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
footer .fbrand{font-weight:900; font-size:15px; text-transform:uppercase;}
footer .fbrand .online{color:var(--green);}
footer .fmeta{font-size:13px; color:var(--ink-soft);}

@media (max-width:560px){
  .wrap{padding:0 20px;}
  .nav-inner{padding:0 20px; gap:12px;}
  .brand-text{font-size:13px;}
  .header-actions{gap:8px;}
  .header-actions .btn{padding:10px 16px; font-size:13.5px;}
  .hide-sm{display:none !important;}
  /* на вузькому екрані кнопкам можна переноситись на другий рядок,
     інакше довгий напис розпирає сітку за край екрана */
  main .btn{white-space:normal; text-align:center;}
}