/* ===== Cookie Banner (WCAG, minimal) ===== */

/* ——— Banner ——— */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 10px;                 /* leaves a bit of space from the bottom */
  margin: 0 auto;
  width: fit-content;
  max-inline-size: 92vw;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  padding: .65rem .9rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  font: inherit;                /* match site font */
  font-size: .95rem;
  direction: rtl;               /* ensure RTL UI */
  z-index: 1600;                /* above header/menu/lightbox */
  display: none;                /* shown by JS only if no choice */
}

.cookie-banner p {
  margin: 0 0 .5rem;
  color: #111;
}

.cookie-actions {
  display: inline-flex;
  gap: .5rem;
  margin-inline-start: .6rem;
  flex-wrap: wrap;
}

.cb-btn {
  border: 1px solid #333;
  background: #000;
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

.cb-btn.cb-decline {
  background: #fff;
  color: #000;
}

.cb-link {
  background: none;
  border: none;
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* Strong focus visibility across themes */
.cb-btn:focus,
.cb-link:focus,
.cookie-dialog__close:focus,
#cookie-form input:focus,
#cookie-form label:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* ——— Dialog Overlay ——— */
.cookie-dialog[hidden] { display: none; }

.cookie-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1700;                  /* above banner & other UI */
  display: grid;
  place-items: center;
}

/* ——— Dialog Box ——— */
.cookie-dialog__box {
  background: #fff;
  width: min(520px, 92vw);
  max-inline-size: 92vw;
  border-radius: 12px;
  padding: 1rem .9rem;
  position: relative;
  border: 1px solid #ddd;
  direction: rtl;
  font: inherit;
}

.cookie-dialog__close {
  position: absolute;
  inset-inline-start: .5rem;
  top: .3rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-dialog__desc {
  margin: .25rem 0 .8rem;
  color: #222;
}

/* ——— Form ——— */
.cookie-form .cookie-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .4rem 0;
}

/* Stabilize labels/checkboxes vs global styles */
.cookie-form label {
  color: #000;
  margin: 0;
  line-height: 1.4;
}

.cookie-form input[type="checkbox"] {
  inline-size: 1rem;
  block-size: 1rem;
}

.cookie-dialog__actions {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
}

/* --- Tiny inline hint over the YouTube facade when media cookies are blocked --- */
#yt-consent-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;            /* clicks go to the facade unless on the button */
}

.yt-consent-hint__box {
  pointer-events: auto;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: 10px;
  max-width: 90%;
  text-align: center;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.yt-consent-hint__btn {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

.yt-consent-hint__btn:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
}