/*
 * Consimțământul, în limbajul site-ului.
 *
 * Cărbune și cupru, aceeași tipografie, aceeași crestătură concavă la colțuri ca la plachetele
 * paginii — bannerul nu arată ca o piesă adusă de altundeva, fiindcă nu este.
 *
 * Culorile și fonturile se iau din tokenii temei, cu rezervă scrisă lângă fiecare: modulul trăiește
 * în plugin, deci trebuie să arate bine și dacă tema își schimbă numele variabilelor.
 */

/*
 * Tokenii stau și pe buton, nu numai pe rădăcina modulului.
 *
 * Butonul de redeschidere pleacă din `.ma-consent` când se andochează în subsol, iar acolo
 * `var(--ma-consent-copper)` nu mai avea de unde să se rezolve: `border` și `background` deveneau
 * declarații nevalide, deci butonul rămânea fără contur de cupru și fără disc de cărbune — un
 * desen singur pe fundalul subsolului. Cu tokenii pe el, se poartă cu sine oriunde ar fi mutat.
 */
.ma-consent,
.ma-consent__reopen {
  --ma-consent-ink: var(--wp--preset--color--iron, #0d0e0f);
  --ma-consent-coal: #171614;
  --ma-consent-copper: var(--wp--preset--color--copper, #b86f3d);
  --ma-consent-bronze: #e1b270;
  --ma-consent-cream: var(--wp--preset--color--cream, #f2eadc);
  --ma-consent-muted: rgb(242 234 220 / .74);
  --ma-consent-sans: var(--wp--custom--ma-font-sans, ui-sans-serif, system-ui, sans-serif);
  --ma-consent-display: var(--wp--custom--ma-font-display, Georgia, "Times New Roman", serif);
  --ma-consent-radius: 14px;
  --ma-consent-hair: 1.5px;
}

/*
 * Lățimile cerute aici sunt de gabarit, nu de conținut.
 *
 * Tema nu pune `border-box` peste tot, iar bara are umplutură: cu măsura socotită pe conținut,
 * interiorul ei ieșea cu până la 68 px mai lat decât ecranul și scotea pagina pe orizontală sub
 * 1024 px.
 */
.ma-consent,
.ma-consent *,
.ma-consent *::before,
.ma-consent *::after,
.ma-consent__reopen,
.ma-consent__reopen * { box-sizing: border-box; }

/* Crestătura concavă, aceeași piesă ca la plachetele paginii. */
.ma-consent__bar-inner,
.ma-consent__panel {
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 0 calc(var(--ma-consent-radius) - .25px), #000 calc(var(--ma-consent-radius) + .25px)) 100% 100% / 51% 51% no-repeat;
}

/*
 * Chenarul urmează crestătura: patru laturi drepte, oprite la rază, și patru sferturi de disc pline
 * din care masca de mai sus scoate interiorul. Nu există pseudo-element care să se suprapună la
 * colț, deci grosimea este aceeași pe laturi și pe curbe.
 */
.ma-consent__bar-inner::before,
.ma-consent__panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ma-consent-copper), var(--ma-consent-copper)),
    linear-gradient(var(--ma-consent-copper), var(--ma-consent-copper)),
    linear-gradient(var(--ma-consent-copper), var(--ma-consent-copper)),
    linear-gradient(var(--ma-consent-copper), var(--ma-consent-copper)),
    radial-gradient(circle at 0 0, var(--ma-consent-copper) 0 calc(var(--ma-consent-radius) + var(--ma-consent-hair)), #0000 calc(var(--ma-consent-radius) + var(--ma-consent-hair))),
    radial-gradient(circle at 100% 0, var(--ma-consent-copper) 0 calc(var(--ma-consent-radius) + var(--ma-consent-hair)), #0000 calc(var(--ma-consent-radius) + var(--ma-consent-hair))),
    radial-gradient(circle at 0 100%, var(--ma-consent-copper) 0 calc(var(--ma-consent-radius) + var(--ma-consent-hair)), #0000 calc(var(--ma-consent-radius) + var(--ma-consent-hair))),
    radial-gradient(circle at 100% 100%, var(--ma-consent-copper) 0 calc(var(--ma-consent-radius) + var(--ma-consent-hair)), #0000 calc(var(--ma-consent-radius) + var(--ma-consent-hair)));
  background-position:
    center 0, center 100%, 0 center, 100% center,
    left top, right top, left bottom, right bottom;
  background-size:
    calc(100% - (2 * var(--ma-consent-radius))) var(--ma-consent-hair),
    calc(100% - (2 * var(--ma-consent-radius))) var(--ma-consent-hair),
    var(--ma-consent-hair) calc(100% - (2 * var(--ma-consent-radius))),
    var(--ma-consent-hair) calc(100% - (2 * var(--ma-consent-radius))),
    calc(var(--ma-consent-radius) + var(--ma-consent-hair)) calc(var(--ma-consent-radius) + var(--ma-consent-hair)),
    calc(var(--ma-consent-radius) + var(--ma-consent-hair)) calc(var(--ma-consent-radius) + var(--ma-consent-hair)),
    calc(var(--ma-consent-radius) + var(--ma-consent-hair)) calc(var(--ma-consent-radius) + var(--ma-consent-hair)),
    calc(var(--ma-consent-radius) + var(--ma-consent-hair)) calc(var(--ma-consent-radius) + var(--ma-consent-hair));
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------- Vălul */

/*
 * Întunecă pagina cât timp întrebarea stă pe ecran.
 *
 * Nu prinde clicuri: pagina rămâne de citit și de derulat, iar consimțământul rămâne o alegere, nu
 * o taxă de trecere. Dispare în clipa în care vizitatorul a ales — oricum ar fi ales.
 */
.ma-consent__veil {
  position: fixed;
  /* Deasupra a tot, inclusiv a antetului fix, care stă la 1000. */
  z-index: 1200;
  inset: 0;
  background: rgb(6 7 6 / .66);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ma-consent__veil[hidden] { display: none; }

/*
 * Derularea se oprește cât ține întrebarea.
 *
 * Clasa vine de la un script mic din antet, nu din foaie: dacă JavaScriptul nu rulează, bannerul nu
 * se poate închide, iar o pagină blocată pentru totdeauna ar fi mai rea decât un banner nedismisat.
 * Așa, blocarea există exact acolo unde există și felul de a o ridica.
 */
.ma-consent-lock,
.ma-consent-lock body { overflow: hidden; }
.ma-consent-lock body { touch-action: none; }

/*
 * Cine a ales deja nu mai vede bannerul nici măcar o clipă.
 *
 * Pagina vine din cache cu bannerul în ea, pentru toți. Scriptul din antet citește cookie-ul înainte
 * de primul cadru și pune `ma-consent-chosen` pe `html`; regula de aici face restul.
 */
.ma-consent-chosen .ma-consent__bar,
.ma-consent-chosen .ma-consent__veil { display: none; }

/*
 * Butonul „înapoi sus” se dă la o parte cât ține bannerul.
 *
 * Bannerul stă lipit de talpa ecranului, pe toată lățimea la telefon, deci acoperea butonul, iar el
 * nu-și mai primea propriul clic. Clasa vine de la server, deci mutarea se face din primul cadru,
 * fără să se vadă cum sare; după alegere nu mai are ce ocoli.
 */
html:not(.ma-consent-chosen) .ma-consent-pending .ma-to-top.is-visible { transform: translateY(calc(-1 * var(--ma-consent-bar-h, 132px))); }
html:not(.ma-consent-chosen) .ma-consent-pending .ma-to-top:not(.is-visible) { transform: translateY(calc(.75rem - var(--ma-consent-bar-h, 132px))); }

/* ------------------------------------------------------------------------ Bannerul */

.ma-consent__bar {
  position: fixed;
  z-index: 1201;
  inset: auto 0 0;
  padding: clamp(10px, 2vw, 20px);
  pointer-events: none;
}
.ma-consent__bar[hidden] { display: none; }
.ma-consent__bar-inner {
  position: relative;
  display: flex;
  width: min(100%, var(--wp--custom--ma-hero-col, 1180px));
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 32px);
  margin-inline: auto;
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 34px);
  color: var(--ma-consent-cream);
  background: var(--ma-consent-coal);
  box-shadow: 0 18px 48px -22px rgb(0 0 0 / .8);
  pointer-events: auto;
}
.ma-consent__copy { min-width: 0; }
.ma-consent__title {
  margin: 0 0 6px;
  font-family: var(--ma-consent-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.2;
}
.ma-consent__text {
  max-width: 62ch;
  margin: 0;
  color: var(--ma-consent-muted);
  font-family: var(--ma-consent-sans);
  font-size: var(--ma-fs-base, .94rem);
  line-height: 1.5;
}
.ma-consent__text a { color: var(--ma-consent-bronze); }

/* ------------------------------------------------------------------------- Butoane */

.ma-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ma-consent__button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--ma-consent-copper);
  color: var(--ma-consent-cream);
  background: transparent;
  font-family: var(--ma-consent-sans);
  font-size: var(--ma-fs-sm, .82rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.ma-consent__button--primary { color: #17120c; background: var(--ma-consent-bronze); border-color: var(--ma-consent-bronze); }
.ma-consent__button:hover { transform: translateY(-1px); }
.ma-consent__button--ghost:hover { background: rgb(184 111 61 / .18); }
.ma-consent__button:focus-visible,
.ma-consent__reopen:focus-visible,
.ma-consent__close:focus-visible { outline: 3px solid var(--ma-consent-bronze); outline-offset: 3px; }

/* --------------------------------------------------------------------- Preferințe */

/*
 * Fereastra se așază singură în mijlocul ecranului.
 *
 * Este deschisă cu `show()`, nu cu `showModal()`, ca pagina din spate să rămână de derulat — iar o
 * fereastră nemodală este, din stilul browserului, `absolute`, adică așezată în curgere, la locul
 * ei din document: capătul paginii. Deschisă așa, browserul derula pagina până acolo ca să o aducă
 * la vedere. `fixed` cu `inset: 0` și `margin: auto` o ține în mijlocul ferestrei, oriunde ar fi
 * cititorul, și îi dă totodată reperul de care are nevoie chenarul.
 */
.ma-consent__panel {
  position: fixed;
  /*
   * Deschisă cu `showModal()`, fereastra stătea în stratul de deasupra al browserului și se desena
   * peste tot, oricare i-ar fi fost `z-index`. Deschisă cu `show()`, nu mai are stratul acela: cu
   * `z-index: auto` se desena în ordinea documentului, iar subsolul, care are strat propriu, trecea
   * peste ea — se vedea prin fereastră, deși fundalul era acolo. Numărul o ține deasupra tuturor:
   * peste antet, peste văl și peste bannerul de consimțământ.
   */
  z-index: 1300;
  inset: 0;
  margin: auto;
  width: min(100% - 24px, 620px);
  max-height: min(86vh, 760px);
  padding: 0;
  border: 0;
  color: var(--ma-consent-cream);
  background: var(--ma-consent-coal);
}
/* Fundalul ferestrei: același întuneric ca vălul bannerului, ca cele două să se recunoască. */
.ma-consent__panel::backdrop {
  background: rgb(6 7 6 / .66);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ma-consent__panel-form { display: grid; max-height: inherit; grid-template-rows: auto 1fr auto; }
.ma-consent__panel-head,
.ma-consent__panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px) clamp(20px, 3.2vw, 30px);
}
.ma-consent__panel-title {
  margin: 0;
  font-family: var(--ma-consent-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
}
.ma-consent__close {
  width: 48px;
  height: 48px;
  border: 0;
  color: var(--ma-consent-cream);
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.ma-consent__list {
  overflow-y: auto;
  padding: 0 clamp(20px, 3.2vw, 30px);
  border-block: 1px solid rgb(184 111 61 / .28);
}
.ma-consent__item { padding: 18px 0; }
.ma-consent__item + .ma-consent__item { border-top: 1px solid rgb(184 111 61 / .18); }
.ma-consent__item-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ma-consent__item-name { font-family: var(--ma-consent-display); font-size: 1.08rem; font-weight: 600; }
.ma-consent__item-text {
  margin: 8px 0 0;
  max-width: 58ch;
  color: var(--ma-consent-muted);
  font-family: var(--ma-consent-sans);
  font-size: var(--ma-fs-md, .9rem);
  line-height: 1.55;
}
.ma-consent__always { color: var(--ma-consent-bronze); }

/* Comutatorul: un `checkbox` adevărat, desenat. Tastatura și cititorul de ecran îl au întreg. */
.ma-consent__switch { position: relative; display: inline-flex; flex: none; width: 56px; height: 30px; cursor: pointer; }
.ma-consent__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ma-consent__switch-track {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ma-consent-copper);
  border-radius: 999px;
  background: rgb(184 111 61 / .12);
  transition: background-color 200ms ease;
}
.ma-consent__switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ma-consent-cream);
  transform: translateY(-50%);
  transition: transform 200ms ease, background-color 200ms ease;
}
.ma-consent__switch input:checked + .ma-consent__switch-track { background: var(--ma-consent-copper); }
.ma-consent__switch input:checked + .ma-consent__switch-track::after { transform: translate(26px, -50%); }
.ma-consent__switch input:disabled + .ma-consent__switch-track { border-color: rgb(184 111 61 / .4); background: rgb(184 111 61 / .35); cursor: not-allowed; }
.ma-consent__switch input:focus-visible + .ma-consent__switch-track { outline: 3px solid var(--ma-consent-bronze); outline-offset: 3px; }
.ma-consent__policy { color: var(--ma-consent-bronze); font-family: var(--ma-consent-sans); font-size: var(--ma-fs-md, .88rem); }

/*
 * Politica, citită în aceeași fereastră.
 *
 * Nu se pleacă din pagină ca să se citească ce se semnează: textul vine în locul listei de
 * categorii, cu un drum înapoi la fel de vizibil ca drumul dus. Conținutul se aduce o singură dată,
 * de pe acest site, și numai când chiar este cerut.
 */
.ma-consent__doc { position: relative; display: none; overflow-y: auto; padding: 4px clamp(20px, 3.2vw, 30px) 20px; }

/*
 * Roata de așteptare, cât se aduce textul politicii.
 *
 * Este aceeași ca la fotografiile din catalog — 34 px, inel subțire, un sfert de bronz care se
 * rotește —, fiindcă înseamnă același lucru în ambele locuri: mai durează o clipă. Înălțimea
 * minimă îi ține loc, altfel roata ar cădea peste marginea de sus a unei casete goale.
 */
.ma-consent__doc.is-loading { min-height: 140px; }
.ma-consent__doc.is-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px;
  border: 2px solid rgb(242 234 220 / .2);
  border-top-color: var(--ma-consent-bronze);
  border-radius: 50%;
  content: "";
  animation: ma-consent-spin .7s linear infinite;
}

@keyframes ma-consent-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ma-consent__doc.is-loading::after { animation: none; }
}

/*
 * Rândul „Se încarcă politica…” rămâne pentru cititoarele de ecran, dar nu se vede: pe ecran
 * vorbește roata, iar amândouă deodată ar fi fost o repetiție.
 */
.ma-consent__doc-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ma-consent[data-ma-consent-view="politica"] .ma-consent__doc { display: block; }
.ma-consent[data-ma-consent-view="politica"] .ma-consent__list { display: none; }
.ma-consent[data-ma-consent-view="politica"] .ma-consent__panel-foot .ma-consent__actions { display: none; }
.ma-consent__doc-body {
  color: var(--ma-consent-muted);
  font-family: var(--ma-consent-sans);
  font-size: var(--ma-fs-base, .92rem);
  line-height: 1.65;
}
.ma-consent__doc-body h2 {
  margin: 22px 0 8px;
  color: var(--ma-consent-cream);
  font-family: var(--ma-consent-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
}
.ma-consent__doc-body h2:first-child { margin-top: 4px; }
.ma-consent__doc-body p, .ma-consent__doc-body ul, .ma-consent__doc-body ol { margin: 0 0 12px; }
.ma-consent__doc-body ul, .ma-consent__doc-body ol { padding-left: 20px; }
.ma-consent__doc-body li { margin-bottom: 6px; }
.ma-consent__doc-body a { color: var(--ma-consent-bronze); }
.ma-consent__doc-body code { font-size: .88em; }
/*
 * Drumul înapoi: săgeata și cuvintele stau împreună, în mijlocul butonului.
 *
 * Butonul este `flex`, iar fără `justify-content` conținutul se aduna la stânga, cu un gol lung în
 * dreapta — la 390 px butonul are 316 și textul stătea în primii 190. Iar în vederea politicii el
 * este singurul lucru din subsolul ferestrei, deci subsolul îl așază în mijloc, nu îl împinge
 * într-un capăt, cum face când are și butoanele de salvare lângă el.
 */
.ma-consent__back { display: none; }
.ma-consent[data-ma-consent-view="politica"] .ma-consent__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ma-consent[data-ma-consent-view="politica"] .ma-consent__panel-foot { justify-content: center; }
.ma-consent[data-ma-consent-view="politica"] .ma-consent__policy { display: none; }

/* ----------------------------------------------------------------- Drumul înapoi */

/*
 * Butonul care redeschide preferințele.
 *
 * Nu mai are text, ci iconița MetalicArt a consimțământului salvat: un disc de cărbune cu contur de
 * cupru, de aceeași mărime ca butonul „înapoi sus” din dreapta, ca cele două controale să se
 * cântărească între ele. Numele îl dă `aria-label`, deci cititorul de ecran aude o propoziție
 * întreagă acolo unde ochiul vede un semn.
 *
 * Colțurile ecranului sunt cele sigure: `env(safe-area-inset-*)` ține butonul departe de bara de
 * gesturi și de marginea rotunjită a telefoanelor.
 */
.ma-consent__reopen {
  position: fixed;
  z-index: 899;
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  left: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-left, 0px));
  display: grid;
  /*
   * Aceeași măsură ca butonul „înapoi sus” din dreapta, la orice lățime.
   *
   * Cele două sunt o pereche: plutesc în aceeași bandă de jos, iar andocate stau pe același rând al
   * barei, la capete opuse. Acolo o diferență de opt pixeli nu se citește ca ierarhie, ci ca
   * scăpare — nimic din pagină nu spune că unul dintre ele ar fi mai important. Patruzeci și opt
   * este și pragul degetului, deci măsura nu scade sub el.
   *
   * Umplutura s-a strâns de la șase la patru pixeli odată cu discul: desenul rămâne la patruzeci,
   * adică aproape cât avea la cincizeci și șase, deci se vede la fel de bine într-un cerc mai mic.
   */
  width: 48px;
  height: 48px;
  padding: 4px;
  place-items: center;
  border: 1px solid var(--ma-consent-copper);
  border-radius: 50%;
  background: var(--ma-consent-coal);
  box-shadow: 0 14px 34px rgb(0 0 0 / .38);
  cursor: pointer;
  /* O singură mișcare, foarte scurtă, la zăbovire sau focalizare: fără rotire, puls sau aură. */
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ma-consent__reopen[hidden] { display: none; }

/*
 * Iconița se vede întreagă: `contain` într-o casetă pătrată, fără `cover`, fără decupare, fără
 * filtru și fără recolorare. Transparența este a fișierului.
 */
.ma-consent__reopen-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ma-consent__reopen:hover,
.ma-consent__reopen:focus-visible {
  border-color: rgb(225 178 112 / .95);
  box-shadow: 0 16px 38px rgb(0 0 0 / .46);
  transform: translateY(-1px);
}
.ma-consent__reopen:active { transform: scale(.96); }

/*
 * Andocarea în subsol, după aceeași logică ca butonul „înapoi sus”.
 *
 * Cât timp subsolul nu se vede, butonul plutește în colț. Când subsolul intră în ecran, același
 * element se mută în locul care îi este rezervat acolo, în stânga, deci nu mai are peste ce să cadă
 * — nici peste copyright, nici peste linkurile juridice. Se mută elementul, nu se desenează al
 * doilea: două butoane ar însemna două opriri de tabulare pentru aceeași acțiune.
 */
.ma-consent__reopen.is-docked {
  position: static;
  left: auto;
  bottom: auto;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .ma-consent__reopen { transition: border-color .22s ease; }
  .ma-consent__reopen:hover,
  .ma-consent__reopen:focus-visible,
  .ma-consent__reopen:active { transform: none; }
}

/* ------------------------------------------------------------------------ Telefon */

@media (max-width: 860px) {
  .ma-consent__bar-inner { flex-direction: column; align-items: stretch; }
  .ma-consent__actions { justify-content: stretch; }
  .ma-consent__button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-consent__button,
  .ma-consent__reopen,
  .ma-consent__switch-track,
  .ma-consent__switch-track::after { transition: none; }
  .ma-consent__button:hover { transform: none; }
}