/* ---------- Safety ---------- */
[hidden]{ display:none !important; }

/* Shorthand helpers to survive renames:
   - Banner:   #cookieConsentBanner | .cookie-banner | [data-cookie-banner]
   - Controls: #cookieConsentButtons | .cookie-controls | [data-cookie-controls]
   - Labels:   label | .cookie-label | [data-cookie-label]
   - Switch:   .toggle-switch | .cookie-switch | [data-switch]
   - Buttons:  button | .btn | [role="button"] | input[type="button"] | input[type="submit"] */
:root{
  --c-banner-max: 680px;
  --c-banner-min: 520px;
  --c-gap: 28px;
  --c-bg: rgba(51,51,51,.92);
  --c-fg: #fff;
  --c-link: #ccc;
  --c-shadow: 0 10px 25px rgba(0,0,0,.35);
  --c-radius: 15px;
  --c-font: 400 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --c-accent: rgba(85,170,225,.95);
}

/* ---------- Banner (desktop) ---------- */
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]){
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(var(--c-banner-min), 33vw, var(--c-banner-max));
  background: var(--c-bg);
  color: var(--c-fg);
  padding: 24px 28px;
  z-index: 1000;
  box-shadow: var(--c-shadow);
  border-top-left-radius: var(--c-radius);
  border-top-right-radius: var(--c-radius);

  /* two columns: text | controls */
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: var(--c-gap);
  row-gap: 14px;
  align-items: start;

  font: var(--c-font);
  animation: c-banner-in .8s cubic-bezier(.25,1,.3,1);
}

:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(#cookieConsentContent, .cookie-content, [data-cookie-content]){
  min-width: 0;
  text-align: left;
  padding-right: 0;
}
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(#cookieConsentContent, .cookie-content, [data-cookie-content]) a{
  color: var(--c-link);
  text-decoration: underline;
}

/* ---------- Controls (right column) ---------- */
:is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]){
  display: grid;
  padding-right: 2px;
  gap: 10px;
  justify-items: end;
}

/* Label row with text on the left and switch on the right */
:is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]) :is(label, .cookie-label, [data-cookie-label]){
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

/* ---------- Buttons ---------- */
:is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]) :is(button, .btn, [role="button"], input[type="button"], input[type="submit"]){
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
  font-family: inherit;
  width: auto;                 /* desktop default */
  min-width: 120px;
  justify-self: end;
}
:is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]) :is(button, .btn, [role="button"], input[type="button"], input[type="submit"]):hover{
  background:#f1f1f1;
}

/* ---------- Toggle Switch ---------- */
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(.toggle-switch, .cookie-switch, [data-switch]){
  justify-self: end;
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
}
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(.toggle-switch, .cookie-switch, [data-switch]) input{
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) .slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #aaa;
  transition: .2s;
}
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) .slider:before{
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: .2s;
}
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) input:checked + .slider{ background: var(--c-accent); }
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) input:checked + .slider:before{ transform: translateX(28px); }

/* "Essential" disabled look (if present) */
:is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) #essentialCookies[disabled] + .slider{
  filter: grayscale(.15) brightness(.95);
  opacity: .85;
}

/* ---------- Mobile & Touch ---------- */
/* Works without <meta viewport>: matches narrow, device width, or coarse pointer */
@media (max-width: 720px),
       (max-device-width: 768px),
       (hover: none) and (pointer: coarse){

  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]){
    grid-template-columns: 1fr; /* stack */
    width: min(80vw, 500px);
    padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
    column-gap: 0;
    row-gap: 16px;
    font-size: 20px;
    line-height: 1.65;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(#cookieConsentContent, .cookie-content, [data-cookie-content]){
    font-size: 20px;
  }

  :is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]){
    justify-items: stretch;  /* full width in this column */
    gap: 14px;
  }

  /* Label: fixed 64px column for the switch, text may wrap */
  :is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]) :is(label, .cookie-label, [data-cookie-label]){
    grid-template-columns: 1fr 64px;
    font-size: 20px;
    text-align: left;
    white-space: normal;
  }

  /* Larger switch for fingers */
  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) :is(.toggle-switch, .cookie-switch, [data-switch]){
    width: 64px;
    height: 34px;
  }
  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) .slider:before{
    left: 2px; top: 2px; width: 30px; height: 30px;
  }
  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]) input:checked + .slider:before{
    transform: translateX(30px);
  }

  /* Buttons: enforce full width on small/touch screens */
  :is(#cookieConsentButtons, .cookie-controls, [data-cookie-controls]) :is(button, .btn, [role="button"], input[type="button"], input[type="submit"]){
    font-size: 16px;
    padding: 12px 16px;
    height: 44px;              /* ≥44px for tap targets */
    border-radius: 10px;
    width: 100% !important;    /* <-- make it wide again */
    justify-self: stretch;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  :is(#cookieConsentBanner, .cookie-banner, [data-cookie-banner]){ animation: none; }
}
@keyframes c-banner-in{
  from{ transform: translate(-50%, 20px); opacity: 0; }
  to  { transform: translate(-50%, 0);  opacity: 1; }
}