/* ============================================================
   PETRONA — Cookie consent banner
   Loaded on every page (EN + /ar/*). Reuses main.css tokens,
   the .eyebrow label and .btn button styles as-is — the only
   rules below are the ones main.css has no equivalent for
   (the bar itself, its layout, and a compact .btn override).
   Arabic mirroring needs nothing extra: .eyebrow and .btn are
   already neutralised for RTL in css/rtl.css, and the button
   order follows native flexbox direction under html[dir="rtl"].
   ============================================================ */

.cookie-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--onyx);
  border-top:1px solid rgba(255,255,255,.14);
  padding:1.3rem var(--gutter);
  box-shadow:0 -12px 34px rgba(0,0,0,.22);
  transform:translateY(100%);
  opacity:0;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
  will-change:transform;
}
.cookie-consent.is-visible{transform:translateY(0);opacity:1}

.cookie-consent__inner{
  width:min(1280px,100% - 2*var(--gutter));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
  flex-wrap:wrap;
}

.cookie-consent__text{flex:1 1 380px;max-width:56ch}
.cookie-consent__text .eyebrow{margin-bottom:.4rem}
.cookie-consent__desc{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.72)}

.cookie-consent__actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}

/* Compact sizing only — colors, borders and hover states stay main.css's own */
.cookie-consent .btn{padding:.8rem 1.5rem;font-size:.7rem}

@media (max-width:640px){
  .cookie-consent{padding:1.15rem 1.25rem}
  .cookie-consent__inner{gap:1.1rem}
  .cookie-consent__actions{width:100%}
  .cookie-consent__actions .btn{flex:1 1 auto;justify-content:center}
}