@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500;700&display=swap');

/* ── Appoint-Booking · shared Bright styles for the legal pages ──────────
   (privacy-policy, terms, cancellation-policy). Restyles the existing
   markup — only the look changes, the legal text is untouched. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fffdf8; --card: #ffffff; --cream: #f1efe7;
  --ink: #0b1f17; --ink2: #26382f; --muted: #46564e; --faint: #7a867f;
  --line: #e7e2d8; --lime: #c6f27e; --green: #12a06a;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pill: 99px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.7; }
a { color: var(--green); }

.lang-en [data-lang="bg"] { display: none; }
.lang-bg [data-lang="en"] { display: none; }

/* ── nav ─────────────────────────────────────────────────────────────── */
nav {
  background: rgba(255,253,248,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: 0 clamp(16px,4vw,40px);
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 32px; width: 32px; border-radius: 9px; object-fit: cover; }
.nav-logo-text { font-family: var(--display); font-size: 1.12rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.nav-logo-text span { color: var(--green); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.back-link { font-size: .875rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.lang-toggle { display: inline-flex; gap: 2px; background: var(--cream); border-radius: var(--pill); padding: 3px; }
.lang-btn { padding: 6px 12px; border: 0; border-radius: var(--pill); font-family: var(--body); font-size: .78rem; font-weight: 700; cursor: pointer; background: transparent; color: var(--muted); transition: all .16s; }
.lang-btn.active { background: var(--ink); color: var(--bg); }

/* ── page hero ───────────────────────────────────────────────────────── */
.page-hero { background: var(--lime); color: var(--ink); padding: clamp(40px,6vw,64px) clamp(16px,4vw,40px); }
.page-hero .tag { display: inline-block; background: var(--ink); color: var(--lime); font-size: .72rem; font-weight: 700; padding: 5px 13px; border-radius: var(--pill); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .14em; }
.page-hero h1 { font-family: var(--display); font-size: clamp(2rem,5vw,3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin-bottom: 10px; text-wrap: balance; }
.page-hero p { color: var(--ink2); font-size: .95rem; font-weight: 500; opacity: .85; }

/* ── content ─────────────────────────────────────────────────────────── */
.content { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,56px) clamp(16px,4vw,40px) 80px; }
.content h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin-top: 40px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.content p { margin-bottom: 14px; font-size: 1rem; color: var(--muted); }
.content ul { margin: 10px 0 16px 22px; }
.content li { margin-bottom: 7px; font-size: 1rem; color: var(--muted); }
.content a { color: var(--green); font-weight: 600; }
.content strong { color: var(--ink); }
.highlight-box { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; padding: 18px 22px; margin: 22px 0; font-size: .96rem; color: var(--muted); }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: rgba(255,253,248,.6); padding: 32px clamp(16px,4vw,40px); text-align: center; font-size: .85rem; }
footer a { color: var(--lime); text-decoration: none; }
.footer-links { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: .8rem; color: rgba(255,253,248,.5); }

/* Social icons in footer */
.foot-social { display: flex; align-items: center; gap: 10px; }
.foot-social-lbl { font-size: 13px; color: var(--muted); margin-right: 2px; }
.foot-social .soc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--muted); transition: background .15s ease, color .15s ease, transform .15s ease; }
.foot-social .soc:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.foot-social .soc svg { width: 19px; height: 19px; fill: currentColor; display: block; }
footer .foot-social { justify-content: center; margin: 2px 0 12px; }
footer .foot-social-lbl { color: rgba(255,253,248,.6); }
