/* GlorySmile — legal pages (terms.html, privacy.html), body[data-page='legal'], "V34 Night".
   The only text-heavy pages on the site: one loud moment (the night head with the lit halo ring),
   then a calm, very readable document on the violet base. */

/* Smooth jumps from the table of contents. The global reduced-motion rule resets this. */
:root:has(> body[data-page='legal']) { scroll-behavior: smooth; }

body[data-page='legal'] {
  --legal-rail: minmax(13rem, 17rem);
  --legal-gap: clamp(4rem, 8vw, 9rem);
  --legal-measure: 44rem;                               /* about 70 characters of Onest per line at 18px */
  --legal-copy: #E6DFFA;                                /* body copy: a step under --text, less glare on violet (14:1) */
  --legal-copy: color-mix(in srgb, var(--text) 82%, var(--text-2));
  --legal-panel: var(--base-2);
}

/* ---------- Head: the night band under a transparent header, lit by the halo lamp ---------- */
.legal__head {
  position: relative; isolation: isolate;
  overflow: clip;                                        /* crops the lamp and its light at the viewport edge */
  background: var(--night);
  padding-top: calc(var(--header-h) + clamp(2.75rem, 7vw, 6.5rem));
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
/* The bottom edge of the band melts into the page base instead of ending on a seam */
.legal__head::after {
  content: ''; position: absolute; inset: auto 0 0; height: clamp(4rem, 10vw, 8rem); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 11, 62, 0), var(--base));
}

/* The lamp: the iridescent halo ring with a violet ring of light (halo.webp) inside it, the same lamp as the 404 zero.
   Phones: above the title, bleeding off the right edge. Tablets: beside the intro. Desktop: bleeding off the right edge
   of the band. It never shares a line with text, so the ring never cuts through a word. */
.legal__lamp {
  --lamp: clamp(168px, 50vw, 250px);
  position: relative; z-index: 0; pointer-events: none;
  width: var(--lamp); aspect-ratio: 1;
  order: -1; justify-self: end;
  margin-right: calc(var(--lamp) * -0.24);               /* a quarter of it stays outside the screen, cropped by the band */
}
.legal__lamp::before {                                    /* the light it throws into the band */
  content: ''; position: absolute; inset: -45%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.5), rgba(108, 59, 255, 0.16) 55%, rgba(108, 59, 255, 0));
}
.legal__glass {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: var(--night);
  -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
}
/* halo.webp: its light ring (centre 60.9% / 47.6%, radius 28.3% of the width) at 88% of the glass radius */
.legal__glass img { position: absolute; max-width: none; width: 155.7%; height: auto; left: -44.84%; top: 0.63%; }
.legal__ring { --size: 100%; --ring: 3px; position: absolute; inset: 0; }

.legal__head-in { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
/* "поверителност" is the longest word (9.5em at weight 300, 9.25em at 200): it sets the size, so both documents match */
.legal__title {
  font-size: clamp(1.75rem, 9.3vw, 4.75rem); line-height: 1; letter-spacing: -0.05em;
  color: var(--text); text-shadow: 0 0 60px rgba(108, 59, 255, 0.45);
}
@media (min-width: 640px) { .legal__title { font-weight: 200; } }
.legal__intro { display: grid; justify-items: start; gap: 1rem; }
.legal__lead { max-width: 30ch; color: var(--text); text-wrap: balance; }
.legal__date { font-size: var(--t-s); color: var(--text-2); }
.legal__date time { font-variant-numeric: tabular-nums; color: var(--text); }

/* Phones: the lamp sits right under the bar, the title follows it */
@media (max-width: 639.98px) {
  .legal__head { padding-top: calc(var(--header-h) + 0.75rem); }
  .legal__head-in { gap: 1.25rem; }
}

/* Tablets: the lamp is a grid item beside the intro, so it never meets the title */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .legal__head-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .legal__title { grid-column: 1 / -1; }
  .legal__lamp {
    --lamp: clamp(200px, 30vw, 280px);
    grid-column: 2; grid-row: 2; order: 0; margin-right: 0;
  }
}

/* Switch between the two legal documents */
.legal__docs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-top: 0.5rem;
  border: 1px solid var(--hair); border-radius: var(--r-pill); background: rgba(10, 6, 32, 0.6);
}
.legal__docs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: var(--r-pill);
  font-size: var(--t-s); font-weight: 600; text-decoration: none; color: var(--text-2);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.legal__docs a:hover { color: var(--text); background: var(--surface); }
.legal__docs a[aria-current] { background: var(--ultra); color: var(--on-accent); box-shadow: 0 0 24px rgba(108, 59, 255, 0.55); }
.legal__docs a:focus-visible { outline-offset: 2px; }
/* Phones: two equal halves, the same edges as the contents panel under it */
@media (max-width: 639.98px) {
  .legal__docs { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .legal__docs a { justify-content: center; padding-inline: 0.75rem; }
}

/* ---------- Body: contents + document ---------- */
.legal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Phones and tablets: the contents fold into one quiet panel */
.legal__toc-m {
  border: 1px solid var(--hair); border-radius: 22px; background: var(--legal-panel);
}
.legal__toc-m details { border-bottom: 0; }
.legal__toc-m summary { padding-inline: 1.25rem; font-size: var(--t-m); color: var(--text); }
.legal__toc-m summary:hover { color: var(--violet-hi); }
.legal__toc-m summary:focus-visible { outline-offset: -3px; border-radius: 22px; }
.legal__toc-m details > div { padding: 0 1.25rem 0.75rem; }
.legal__toc-m ol { list-style: none; padding: 0; display: grid; }
.legal__toc-m li { border-top: 1px solid var(--hair); }
.legal__toc-m a {
  display: flex; align-items: baseline; gap: 0.85rem; min-height: 48px; padding-block: 0.75rem;
  color: var(--text); text-decoration: none; line-height: 1.35;
}
.legal__toc-m a:hover { color: var(--violet-hi); }
.legal__toc-m a span { color: var(--violet-hi); font-variant-numeric: tabular-nums; min-width: 1.5em; }

/* Desktop: sticky contents rail with the section being read lit up */
.legal__toc { display: none; }
.legal__toc-title { font-size: var(--t-s); font-weight: 600; color: var(--text-2); margin-bottom: 0.75rem; padding-left: 1.15rem; }
/* The track is drawn by the links themselves (no marker pulled outside the rail's overflow box). */
.legal__toc ol { list-style: none; padding: 0; }
.legal__toc a {
  display: flex; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0.35rem 0.75rem 0.35rem 1.1rem;
  border-radius: 0 12px 12px 0;
  color: var(--text-2); font-size: var(--t-s); line-height: 1.3; text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.legal__toc ol a { border-left: 2px solid var(--hair); }
.legal__toc a span { min-width: 1.35em; font-variant-numeric: tabular-nums; color: var(--text-2); transition: color 0.25s var(--ease); }
.legal__toc a:hover { color: var(--text); background-color: rgba(108, 59, 255, 0.12); }
.legal__toc a[aria-current] {
  color: var(--text); font-weight: 500; border-left-color: var(--violet-hi);
  background-image: linear-gradient(90deg, rgba(108, 59, 255, 0.34), rgba(108, 59, 255, 0) 92%);
}
.legal__toc a[aria-current] span { color: var(--violet-hi); }
.legal__toc a:focus-visible { outline-offset: -3px; }
.legal__toc-top {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 1.25rem; padding-inline: 1.15rem 0.75rem;
  font-size: var(--t-s); font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: var(--r-pill);
  transition: color 0.25s var(--ease);
}
.legal__toc-top:hover { color: var(--violet-hi); }
.legal__toc-top svg, .legal__top svg { width: 18px; height: 18px; transform: rotate(-90deg); }

/* ---------- Document ---------- */
.legal__doc {
  min-width: 0; max-width: var(--legal-measure);
  font-size: var(--t-m); line-height: 1.75; color: var(--legal-copy);
}
/* 18px wherever the 44rem measure opens up: about 71 characters per line (17px there ran to 84 on tablets) */
@media (min-width: 640px) { .legal__doc { font-size: 1.125rem; } }
.legal__doc p { max-width: none; }
.legal__doc strong { font-weight: 600; color: var(--text); }

/* Links inside the text: violet, underlined, unmistakably links */
.legal__doc :is(p, li, dd) a {
  color: var(--violet-hi); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: rgba(169, 139, 255, 0.55);
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.legal__doc :is(p, li, dd) a:hover { color: var(--text); text-decoration-color: currentColor; text-decoration-thickness: 2px; }

.legal__sec + .legal__sec {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hair);
}
.legal__sec h2 {
  display: flex; gap: 0.5em; align-items: baseline;
  font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.08; color: var(--text);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.legal__n { font-weight: 200; color: var(--violet-hi); font-variant-numeric: tabular-nums; }
.legal__sec h3 {
  font-family: var(--f-text); font-weight: 600; font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text); margin: 2.75rem 0 0.75rem;
}
.legal__sec > * + p, .legal__sec > * + ul, .legal__sec > * + ol, .legal__sec > * + dl { margin-top: 1.1em; }
.legal__sec h3 + * { margin-top: 0; }
.legal__sec ul, .legal__sec ol { padding-left: 1.35rem; }
.legal__sec li { padding-left: 0.35rem; }
.legal__sec li + li { margin-top: 0.65em; }
.legal__sec li::marker { color: var(--violet-hi); }
.legal__sec ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Key/value rows (merchant identification, purposes and legal bases, retention): one quiet table panel */
.legal__facts {
  border: 1px solid var(--hair); border-radius: 22px; background: var(--legal-panel);
  padding-inline: clamp(1rem, 2.5vw, 1.5rem);
}
.legal__sec > p + .legal__facts { margin-top: 1.5rem; }
.legal__facts + p { margin-top: 1.5rem; }
.legal__facts > div { display: grid; gap: 0.2rem; padding-block: 1rem; border-top: 1px solid var(--hair); }
.legal__facts > div:first-child { border-top: 0; }
.legal__facts dt { font-size: var(--t-s); color: var(--text-2); line-height: 1.45; }
.legal__facts dd { line-height: 1.55; color: var(--text); }
@media (min-width: 640px) {
  .legal__facts > div { grid-template-columns: minmax(9.5rem, 0.42fr) 1fr; gap: 1.5rem; align-items: baseline; }
}
/* Purpose rows read better with the purpose first and the basis as the quiet line */
.legal__facts--basis dt { font-size: var(--t-m); color: var(--text); line-height: 1.5; }
.legal__facts--basis dd { font-size: var(--t-s); font-weight: 600; line-height: 1.5; color: var(--violet-hi); }
.legal__facts--basis dd span { display: block; font-weight: 400; color: var(--text-2); white-space: nowrap; }
@media (min-width: 640px) {
  .legal__facts--basis > div { grid-template-columns: 1fr minmax(13rem, 0.6fr); }
}

/* Statutory withdrawal form, folded into its own panel */
.legal__form { margin-top: 1.75rem; border: 1px solid var(--hair); border-radius: 22px; background: var(--legal-panel); }
.legal__form details { border-bottom: 0; }
.legal__form summary { padding-inline: clamp(1rem, 2.5vw, 1.5rem); font-size: var(--t-m); color: var(--text); }
.legal__form summary:hover { color: var(--violet-hi); }
.legal__form summary:focus-visible { outline-offset: -3px; border-radius: 22px; }
.legal__form details > div { padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem); color: var(--legal-copy); }
.legal__form-body {
  border-top: 1px solid var(--hair); padding-top: 1.25rem;
  font-size: var(--t-s); line-height: 1.65;
}
.legal__form-body > p:first-child { color: var(--text-2); }
.legal__form-body ul { list-style: none; padding: 0; margin-top: 0.75rem; }
/* Each line of the form reads as a line to fill in */
.legal__form-body li { position: relative; padding: 0.7rem 0 0.7rem 1.25rem; border-bottom: 1px dashed var(--line); }
.legal__form-body li + li { margin-top: 0; }
.legal__form-body li::before {
  content: ''; position: absolute; left: 0; top: calc(0.7rem + 0.82em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet-hi);
}
.legal__form-body ul + p { margin-top: 0.9rem; color: var(--text-2); }

/* End of document: the sibling document as one framed row (title left, lit arrow right), then back to top */
.legal__end {
  display: grid; justify-items: start; gap: 1.75rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
.legal__next {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; min-height: 64px;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--hair);
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text); text-decoration: none;
  transition: border-color 0.25s var(--ease);
}
.legal__next:hover { border-color: rgba(169, 139, 255, 0.45); }
.legal__next:focus-visible { outline-offset: 6px; }
.legal__next > span:first-child { transition: color 0.25s var(--ease); }
.legal__next-icon {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--ultra); color: var(--on-accent); box-shadow: 0 14px 36px -14px rgba(108, 59, 255, 0.95);
  transition: background-color 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.legal__next-icon svg { width: 22px; height: 22px; }
.legal__next:hover > span:first-child { color: var(--violet-hi); }
.legal__next:hover .legal__next-icon { background: var(--ultra-deep); transform: translateX(4px); box-shadow: 0 0 32px rgba(108, 59, 255, 0.65); }
.legal__next:active .legal__next-icon { transform: scale(0.94); }
.legal__top { --fg: var(--text); }

/* ---------- Placeholders: unknown company facts, impossible to miss until filled ---------- */
.legal__doc mark.todo {
  background: rgba(169, 139, 255, 0.16);
  color: var(--lilac);
  outline: 1px dashed var(--violet-hi);
  outline-offset: -1px;
  border-radius: 6px;
  padding: 0.05em 0.35em;
  font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Desktop: contents rail + document, the head on the same grid ---------- */
@media (min-width: 1024px) {
  .legal__head-in, .legal__body { grid-template-columns: var(--legal-rail) minmax(0, var(--legal-measure)); column-gap: var(--legal-gap); }
  /* the title stays clear of the lamp: "поверителност" is 9.3em wide, the lamp starts at 62% of its size from the right edge */
  .legal__title { grid-column: 1 / -1; font-size: clamp(4.5rem, 6.4vw, 6.25rem); }
  .legal__intro { grid-column: 2; }                     /* lead, date and switch start on the text column */
  /* 30vw up to 460px: its lower arc always ends above the band's bottom edge (no hard crop at 1600-1920) */
  .legal__lamp {
    --lamp: clamp(300px, 30vw, 460px);
    position: absolute; z-index: -1; order: 0; margin: 0;
    top: calc(var(--header-h) + 1.75rem); right: calc(var(--lamp) * -0.38);
  }
  .legal__top { display: none; }                         /* the rail already holds "Към началото" */
  .legal__body { padding-top: clamp(1rem, 2vw, 2rem); }
  .legal__toc-m { display: none; }
  .legal__toc {
    display: block; align-self: start;
    position: sticky; top: calc(var(--sticky-top) + 2.5rem); transition: top 0.35s var(--ease);
    max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
  }
}

/* ---------- Print: the document only, dark text on paper ---------- */
@media print {
  body[data-page='legal'] { background: none; color: #000; }
  body[data-page='legal'] :is(.site-header, .site-footer, .menu, .drawer, .drawer-backdrop, .toast, .skip),
  .legal__lamp, .legal__docs, .legal__toc, .legal__toc-m, .legal__end { display: none !important; }
  .legal__head { background: none; padding: 0 0 1.5rem; }
  .legal__head::after { display: none; }
  .legal__title { font-size: 2rem; text-shadow: none; }
  .legal__title, .legal__lead, .legal__date, .legal__date time, .legal__doc, .legal__doc :is(h2, h3, strong, dt, dd, a, mark), .legal__n,
  .legal__facts--basis dd, .legal__facts--basis dd span { color: #000 !important; }
  .legal__facts, .legal__form { background: none; border-color: #999; }
  .legal__doc { max-width: none; font-size: 11pt; }
  .legal__sec { break-inside: auto; }
  .legal__sec h2, .legal__sec h3 { break-after: avoid; }
}