/* TippyTaps — global styles. Design tokens ported from the PAWS catalog design.
   Fonts: Bricolage Grotesque + Hanken Grotesk, loaded from Google Fonts by
   inc/enqueue.php (self-hosting is a follow-up). */

:root{
  --bg:#f2eee4; --surface:#fbf9f3; --surface-2:#f1ebdf; --ink:#18271f; --ink-2:#4a564e; --muted:#877f6e;
  --line:rgba(24,39,31,.12); --line-strong:rgba(24,39,31,.22);
  --accent:#2f9e70; --accent-ink:#1f7d57; --accent-soft:#e3efe8;
  --pop:#e0603a; --pop-ink:#b8461f; --pop-soft:#f7e3d9;
  --danger:#d24b2f; --danger-soft:#f8e3dc;
  --star:#f0b429; --forest:#153427; --forest-2:#1d4433; --lime:#cfe05a;
  --paper:#f2eee4; --green:#2f9e70; --green-ink:#1f7d57;
  --line-2:rgba(24,39,31,.08); --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --radius:20px; --radius-sm:13px;
  /* Checkbox tick, as a mask so the sidebar does not carry 123 copies of the same
     inline <svg> (see archive.css). Stroke is baked into the path because a mask
     only reads alpha — the colour comes from background-color at the use site. */
  --tt-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* TWO container widths, because the catalog and the content pages want
     opposite things and a single token cannot serve both (measured 2026-08-11
     on a 2000px viewport):

       --wrap (clamp 1440..1680) is the CATALOG width. Its card grid is
       `repeat(auto-fill,minmax(330px,1fr))` next to a 296px sidebar, so the
       container decides the column count: 1680 -> 3x422px cards, 1440 -> 3x342,
       1400 -> 2 columns. Hence the shape of the clamp:
         - 1680 ceiling: as wide as three columns are worth.
         - 92vw in the middle: a flat 1680 on a 1728px laptop (MacBook Pro 16")
           left only 24px of margin, so the cards ran into the screen edges.
           92vw gives 1590 there — 69px margins, still 3x392 cards.
         - 1440 floor, and it is load-bearing: below that, side margins start
           costing a whole column. At 1440 exactly, 92vw would yield 1325 and
           flip the grid to 2x464. The floor pins it to the viewport instead,
           so laptops keep three columns with no margin, which is the right
           trade at that size.

       --wrap-text (1320) is sized for PROSE-LED pages — front page, landings,
       O nás / Kontakt / Pre partnerov. Their headings and leads cap themselves
       in `ch` (h1 at 15ch = 649px, section h2 at 18ch = 483px), so inside a
       1680 container every heading left ~1000px of dead space to its right and
       the hero's miniStats were flung 525px away from the lead. That gap — not
       the page margins — is what "растянуто" on a 2000px Mac was about.

     A brief 2026-08-11 attempt to make --wrap fluid (`clamp(1680px,88vw,2000px)`)
     went the WRONG WAY for exactly this reason: it widened the container to 1760
     here and pushed the dead space after h1 from 1005px to 1085px. Widening only
     helps blocks that fill their width — the card grids — and hurts every capped
     one. Reverted.

     Do not merge these back into one number. If the catalog ever stops being
     column-based, revisit; until then they are different problems. */
  --wrap:clamp(1440px, 92vw, 1680px); --wrap-text:1320px; --wrap-pad:26px;
  --shadow-hover:0 24px 50px -22px rgba(24,39,31,.32);
  --disp:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base layer ----
   Without this every element that has no rule of its own inherits Astra's
   defaults: its cold #f0f5fa page background, #334155 slate text and the system
   font stack. The tokens and the Google font were both already loaded — nothing
   was applying them to the page itself, so only elements with an explicit
   font-family (h1/h2, .btn, .tt-*) looked like the design and the rest drifted,
   differently on every OS. Scoped to .tt-site so wp-admin is untouched. */
body.tt-site{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; }

/* ---- the four things we were borrowing from Astra's stylesheet ----
   Measured 2026-07-30 by disabling Astra's CSS in the browser and diffing computed
   styles across every distinct tag on the homepage: this is the WHOLE list of what
   its 116 kB was still doing for us. Declaring them here makes the design stand on
   its own — and 87% of that 116 kB matches nothing in our markup at all
   (docs/decisions.md).

   Redundant while Astra's CSS is loaded, which is the point: it has to be in place
   BEFORE anyone dequeues it, not after. */
.tt-site, .tt-site *, .tt-site *::before, .tt-site *::after{ box-sizing:border-box; }
.tt-site a{ text-decoration:none; }
.tt-site h1, .tt-site h2, .tt-site h3, .tt-site h4, .tt-site h5, .tt-site h6{ margin:0; }
/* Form controls do not inherit typography on their own — every browser hands them
   Arial 13.3px. The design assumes they read like the page. */
.tt-site button, .tt-site input, .tt-site select, .tt-site textarea{ font:inherit; color:inherit; }

/* Headings render in Astra's slate #1e293b today, not our --ink: it styles h1–h6
   directly, so the colour never reaches them by inheritance. Our own token is what
   the design specifies, so claim it. Near-black either way — but it is our
   near-black, and one theme should own the palette. */
.tt-site h1, .tt-site h2, .tt-site h3, .tt-site h4, .tt-site h5, .tt-site h6{ color:var(--ink); }

/* Astra gives every <p> a 28px bottom margin; this design doesn't expect one —
   its components set `margin-top` only (.stp p, .shead p) or zero it by hand
   (.tile .foot p), so that 28px was silently added to every gap on every page,
   and in the fixed-height "Ako to funguje" box it pushed the last line out of a
   clipped container. Prose that does want paragraph spacing sets it itself
   (.sec p and .prose p both use margin:0 0 12px). Headings are zeroed just above —
   they used to rely on Astra doing it. */
.tt-site p{ margin:0; }

/* Astra pins every form control to a fixed height:40px. Combined with the
   design's own vertical padding (14–16px) and border-box sizing, that leaves
   8–19px of content box for a 24px line — so the text in the hero search, the
   catalog filters and both forms was sliced through the middle. Twelve controls
   across four pages. Let the padding define the height, which is what the
   design's numbers assume. Checkboxes and radios keep their own box. */
.tt-site input:not([type=checkbox]):not([type=radio]),
.tt-site select,
.tt-site textarea{ height:auto; }

body.post-type-archive-tt_clinics{ background:var(--bg); }

.tt-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:34px var(--wrap-pad) 72px; box-sizing:border-box;
  font-family:var(--sans); color:var(--ink); }

/* ---- archive header ---- */
.tt-head{ margin-bottom:26px; }
.tt-head .tt-kick{ text-wrap:balance; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.tt-head h1{ font-family:var(--disp); font-size:36px; font-weight:700; letter-spacing:-.03em; margin:8px 0 6px; line-height:1.05; }
.tt-head .tt-found{ color:var(--muted); font-size:15px; font-weight:600; }

/* ---- card grid ---- */
.tt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }

.tt-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--ink); } }
.tt-card.is-partner{ border-color:rgba(47,158,112,.4); }

/* Whole-card link, on EVERY screen (sQuem, 2026-08-01 — it was mobile-only before,
   and the ask has always been that the card itself opens the venue). The real links
   sit above it because they are positioned and it is not, so Zavolať / Detail still
   win the click. */
.tt-card-hit{ display:block; position:absolute; inset:0; z-index:0;
  border-radius:var(--radius); }
.tt-card > .tt-name,
.tt-card .tt-actions,
.tt-card .tt-chead a{ position:relative; z-index:1; }

.tt-thumb{ --thumb-h:170px;
  width:100%; height:var(--thumb-h); border-radius:16px; flex:none; overflow:hidden; background:#fff;
  display:grid; place-items:center; }
/* `contain`, not `cover`: the thumb holds a LOGO, and a wide logo cropped to a
   square loses its own name. Padding keeps it off the edges.
   Sized with max-* against the box height in px, NOT `height:100%`: the thumb is a
   grid with place-items:center, so the image is content-sized and the percentage
   never resolved — a square logo rendered 360px tall inside a 170px box and got
   clipped in half. `aspect-ratio:auto` drops the ratio WordPress sets from the
   width/height attributes, which is what stretched it. */
.tt-thumb img{ width:auto; height:auto; max-width:100%; max-height:var(--thumb-h);
  aspect-ratio:auto; object-fit:contain; padding:14px; box-sizing:border-box; }
/* EVERY tile is white (sQuem: logos 2026-08-06, initials 2026-08-07) — the rule
   is on `.tt-thumb` above, not on a modifier. Logos ship flattened onto white
   (BUSINESS.md §3), so on the beige surface each one read as a white rectangle
   floating in a beige frame. The first pass whitened only tiles that HAD a logo,
   on the reasoning that the initials are the graphic when there is none; in a
   grid that produced the opposite problem — one beige tile among white ones
   reads as a broken image, not as a design choice.
   `.has-logo` stays on the element as a state hook (clinic-card.php) but no
   longer carries any style. */
.tt-thumb .tt-ini{ font-family:var(--disp); font-weight:700; font-size:44px; color:var(--accent-ink); }
/* Phones: a 170px white tile on every card made a 15-venue list very long, with
   small logos floating in it (browser review, 2026-10-06). Lower, still white —
   the colour is sQuem's call above. */
@media (max-width:600px){
  .tt-thumb{ --thumb-h:118px; }
  .tt-thumb img{ padding:10px; }
  .tt-thumb .tt-ini{ font-size:34px; }
}

/* flex:1 is what makes the Zavolať/Detail row line up across a grid row.
   Four of .tt-body's six children are conditional (rating, address, status,
   badges, chips), so its content height varies card to card. The grid already
   stretches .tt-card to the tallest in the row, but that surplus used to pool
   at the bottom of .tt-card, BELOW .tt-body — and `margin-top:auto` on
   .tt-actions resolves inside .tt-body, which had no free space to give it.
   The buttons therefore sat wherever the last rendered block ended: a card with
   no chips row put them ~40px higher than its neighbour. Stretching .tt-body
   hands it that surplus, and the auto margin finally has something to absorb. */
.tt-body{ display:flex; flex-direction:column; gap:10px; flex:1; }
/*
 * Name on its own line, rating under it — ALWAYS.
 *
 * This was a wrapping flex row with space-between, so the layout depended on how
 * long the venue's name happened to be: "Psí salón Dog Bar" left room and the stars
 * sat beside the name, "Psí salón Veselá Labka (Petržalka)" did not and they dropped
 * below. Two cards side by side in one grid, two different layouts, and nothing on
 * the card explained why (sQuem, 2026-08-13 — the same "blocks float when there is
 * little info" the Trello card is about).
 *
 * A column removes the dependency: every card reads name → rating → address, whatever
 * the name is.
 */
.tt-chead{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.tt-name{ font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.tt-name:hover{ color:var(--accent-ink); }
.tt-rating{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; white-space:nowrap; }
.tt-rating b{ font-weight:800; }
.tt-rating .tt-rc{ color:var(--muted); font-weight:600; }
/* 17px, up from 15 (sQuem, 2026-08-12). The rating is the first thing scanned in
   a card, and half-stars need the extra room to read as halves rather than as a
   smudge — a 12px-wide glyph split down the middle leaves 6px of gold. */
.tt-stars{ display:inline-flex; gap:1.5px; }
.tt-stars svg{ width:17px; height:17px; flex:none; }

.tt-addr{ color:var(--muted); font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tt-addr svg{ width:15px; height:15px; color:var(--pop); flex:none; }

.tt-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tt-status{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; padding:5px 12px; border-radius:999px; }
.tt-status.is-open{ background:var(--accent-soft); color:var(--accent-ink); }
.tt-status.is-closed{ background:var(--surface-2); color:var(--muted); }
.tt-status .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }

.tt-badges{ display:flex; gap:7px; flex-wrap:wrap; }
/* The base carries a neutral fill, not just geometry. Salon and hotel badges
   ("Vyžaduje očkovanie", "Strihá mačky", "Na objednávku") are printed with no
   modifier class, so a colour-only-by-modifier rule rendered them as bare text
   with padding around it — invisible as a badge (2026-08-13). Any future badge
   without a modifier now reads as one instead of disappearing. */
.tt-badge{ font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;
  background:var(--surface-2); color:var(--ink-2); }
.tt-badge.sos{ background:var(--danger-soft); color:var(--danger); }
.tt-badge.verified{ background:var(--accent-soft); color:var(--accent-ink); }
.tt-badge.home{ background:#eef1fb; color:#4a5aa8; }

/* ---- salon / hotel card rows ----
   Only these two types print a price. The number is display-face and sized to
   read at a glance; the unit stays muted and small because it is the venue's own
   wording and can run long ("každých začatých 24 hodín"). tabular-nums so a
   column of prices lines up down the grid. */
.tt-price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.tt-price .v{ font-family:var(--disp); font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.015em; }
.tt-price .u{ font-size:13px; font-weight:600; color:var(--muted); }

/* Hotel facts sit where a clinic prints its discipline chips. Inline text rather
   than pills: three pills of different widths read as tags to filter by, and
   these are statements about the venue, not links. */
.tt-facts{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; font-weight:600; color:var(--ink-2); }
.tt-facts span{ display:inline-flex; align-items:center; gap:6px; }
.tt-facts svg{ width:14px; height:14px; color:var(--muted); flex:none; }

.tt-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tt-chip{ font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid rgba(47,158,112,.28); }
/* "+N" is a count, not a discipline — neutral so it doesn't read as one more chip. */
.tt-chip.is-more{ background:transparent; color:var(--muted); border-color:var(--line-strong); border-style:dashed; }
/* The last chip and "+N" wrap as one: on their own the count was left alone on a
   line of its own under three chips (430px phones). Truncating chips instead
   cut the third one down to "S…" at 375px. */
.tt-chips-tail{ display:flex; gap:6px; }

.tt-actions{ display:flex; gap:9px; margin-top:auto; padding-top:6px; }
.tt-btn{ border:0; border-radius:999px; padding:11px 16px; font-size:14px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; justify-content:center; text-decoration:none;
  transition:transform .16s, background .16s, color .16s, border-color .16s; }
.tt-btn svg{ width:16px; height:16px; }
.tt-btn.call{ background:var(--accent); color:#fff; flex:1; }
@media (hover:hover){ .tt-btn.call:hover{ background:var(--accent-ink); transform:translateY(-2px); } }
.tt-btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
/* "Objednať sa" on a card whose venue takes booking requests. */
.tt-btn.book{ background:var(--accent-soft); color:var(--accent-ink); }
@media (hover:hover){ .tt-btn.ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); transform:translateY(-2px); } }

.tt-empty{ grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--muted); font-weight:600; }
.tt-empty b{ display:block; font-family:var(--disp); color:var(--ink); font-size:20px; margin-bottom:8px; }

@media (max-width:560px){
  .tt-grid{ grid-template-columns:1fr; }
  .tt-head h1{ font-size:28px; }
}

/* ===== Cookie consent (.tt-cc-*) — markup in inc/cookie-consent.php =====

   Ported from Toplekari and repainted here, not copied: their buttons are
   6px-radius rectangles, ours are pills (.tt-btn), so a verbatim port would have
   read as a widget from another site parked at the bottom of the page.

   ⚠️ Правовой механизм. Внешний вид менять можно; display / z-index / position /
   inset — нет: от них зависит, показывается ли баннер вообще. */
.tt-cc{ font-family:inherit; box-sizing:border-box; }
.tt-cc *, .tt-cc *::before, .tt-cc *::after{ box-sizing:border-box; }

/* BANNER */
.tt-cc-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9998;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-hover);
  padding:22px 24px; max-width:980px; margin:0 auto;
  display:none;
  transform:translateY(20px); opacity:0;
  transition:transform .3s, opacity .3s;
}
.tt-cc-banner.is-open{ display:block; transform:translateY(0); opacity:1; }
.tt-cc-banner__row{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.tt-cc-banner__text{ flex:1; min-width:260px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.tt-cc-banner__text strong{ font-family:var(--disp); color:var(--ink); font-weight:700; }
.tt-cc-banner__text a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.tt-cc-banner__actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Кнопки: залита только «Prijať všetky» — основное действие. Будь все три
   контурными, выбор читался бы как три равнозначных, и человек застревал бы
   на баннере вместо того, чтобы пройти дальше. */
.tt-cc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border-radius:999px;
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; border:1.5px solid transparent;
  transition:background .16s, border-color .16s, color .16s, transform .16s;
  text-decoration:none; white-space:nowrap;
}
.tt-cc-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
@media (hover:hover){ .tt-cc-btn--primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); transform:translateY(-2px); } }
.tt-cc-btn--outline{ background:transparent; color:var(--accent-ink); border-color:var(--accent); }
.tt-cc-btn--outline:hover{ background:var(--accent-soft); }
/* ⚠️ Astra paints `button:focus` blue at 0,1,1, which beats these single classes —
   the browser review saw "Odmietnuť všetky" turn bright blue the moment the
   settings opened and focus landed on it. `.tt-cc` in front keeps each button its
   own colours when focused; the ring is the only focus signal. */
.tt-cc .tt-cc-btn--primary:focus{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tt-cc .tt-cc-btn--ghost:focus{ background:transparent; color:var(--ink-2); border-color:var(--line-strong); }
.tt-cc .tt-cc-btn--outline:focus{ background:transparent; color:var(--accent-ink); border-color:var(--accent); }
.tt-cc .tt-cc-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tt-cc .tt-cc-modal__title:focus{ outline:none; }
/* Phones: the banner took ~40% of a 375px screen. Tighter, buttons in one row. */
@media (max-width:600px){
  .tt-cc-banner{ left:10px; right:10px; bottom:10px; padding:14px 14px 12px; }
  .tt-cc-banner__row{ gap:10px; }
  .tt-cc-banner__text{ min-width:0; font-size:13px; line-height:1.5; }
  .tt-cc-banner__actions{ width:100%; flex-wrap:nowrap; }
  .tt-cc-banner__actions .tt-cc-btn{ flex:1; padding:10px 8px; font-size:13px; }
}
.tt-cc-btn--ghost{ background:transparent; color:var(--ink-2); border-color:var(--line-strong); }
@media (hover:hover){ .tt-cc-btn--ghost:hover{ border-color:var(--ink); color:var(--ink); } }
.tt-cc-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* MODAL */
.tt-cc-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(21,52,39,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
.tt-cc-modal.is-open{ display:flex; }
.tt-cc-modal__inner{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  width:100%; max-width:560px; max-height:90vh; overflow:auto;
  box-shadow:var(--shadow-hover);
  animation:tt-cc-in .25s ease-out;
}
@keyframes tt-cc-in{ from{ transform:scale(.95); opacity:0; } to{ transform:scale(1); opacity:1; } }

.tt-cc-modal__head{ padding:24px 28px 16px; border-bottom:1px solid var(--line); }
.tt-cc-modal__title{ margin:0 0 6px; font-family:var(--disp); font-size:26px; font-weight:700;
  letter-spacing:-.03em; color:var(--ink); }
.tt-cc-modal__head p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.6; }

.tt-cc-modal__body{ padding:16px 28px; }
.tt-cc-cat{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.tt-cc-cat:last-child{ border-bottom:none; }
.tt-cc-cat__info{ flex:1; }
.tt-cc-cat__title{ font-family:var(--disp); font-size:17px; font-weight:700; color:var(--ink); margin:0 0 5px; }
.tt-cc-cat__desc{ font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0; }

/* TOGGLE — контурная дорожка, как переключатели на «Právne». */
.tt-cc-toggle{ position:relative; flex-shrink:0; width:44px; height:24px; }
.tt-cc-toggle input{ opacity:0; width:0; height:0; }
.tt-cc-toggle__slider{
  position:absolute; cursor:pointer; inset:0;
  background:transparent; border:1.5px solid var(--line-strong);
  border-radius:999px; transition:background .2s, border-color .2s;
}
.tt-cc-toggle__slider::before{
  position:absolute; content:''; height:15px; width:15px;
  left:3px; top:3px; background:var(--muted); border-radius:50%;
  transition:transform .2s, background .2s;
}
.tt-cc-toggle input:checked + .tt-cc-toggle__slider{ background:var(--accent-soft); border-color:var(--accent); }
.tt-cc-toggle input:checked + .tt-cc-toggle__slider::before{ transform:translateX(20px); background:var(--accent); }
.tt-cc-toggle input:disabled + .tt-cc-toggle__slider{ cursor:not-allowed; opacity:.5; }
.tt-cc-toggle input:focus-visible + .tt-cc-toggle__slider{ outline:2px solid var(--accent); outline-offset:2px; }

.tt-cc-modal__foot{
  padding:18px 28px 24px; border-top:1px solid var(--line);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
.tt-cc-modal__foot .tt-cc-btn{ flex:1; min-width:140px; }

@media (max-width:640px){
  .tt-cc-banner{ left:8px; right:8px; bottom:8px; padding:18px; border-radius:var(--radius-sm); }
  .tt-cc-banner__row{ gap:14px; }
  .tt-cc-banner__actions{ width:100%; }
  .tt-cc-banner__actions .tt-cc-btn{ flex:1; }
  .tt-cc-modal__head, .tt-cc-modal__body, .tt-cc-modal__foot{ padding-left:20px; padding-right:20px; }
}

@media (prefers-reduced-motion:reduce){
  .tt-cc-banner{ transition:none; }
  .tt-cc-modal__inner{ animation:none; }
  .tt-cc-btn:hover{ transform:none; }
}