/* assets/css/cookie.css
   Clean + fixed:
   - No duplicate selectors
   - Strong bottom-left lock on all pages
   - Uses .show to display
   - Keeps text readable even if other CSS overrides styles
   - Better layout + spacing on mobile
*/

/* =========================
   Cookie popup (bottom-left)
   ========================= */
#cookieNotice.cookie-container{
  position: fixed !important;
  left: 16px !important;
  bottom: 16px !important;
  right: auto !important;
  top: auto !important;
  inset: auto auto 16px 16px !important; /* bottom-left lock */

  width: min(420px, calc(100% - 32px));
  display: none; /* hidden by default */
  gap: 12px;

  padding: 14px 16px;
  background: #444949;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 99999;

  /* Readable by default */
  color: #fff;
  font-family: inherit;

  /* Safety against weird inherited transforms/margins */
  transform: none !important;
  margin: 0 !important;
}

/* Show banner when JS adds .show */
#cookieNotice.cookie-container.show{
  display: grid;
}

/* =========================
   Text + links
   ========================= */
#cookieNotice.cookie-container p{
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Keep link readable */
#cookieNotice.cookie-container a{
  color: #9ad0ff;
  text-decoration: underline;
}

/* =========================
   Buttons row
   ========================= */
#cookieNotice .cookie-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap; /* prevents overflow on small screens */
}

#cookieNotice .cookie-actions button{
  white-space: nowrap;
}

/* =========================
   Force colors (defensive)
   ========================= */
#cookieNotice.cookie-container,
#cookieNotice.cookie-container *{
  color: #fff !important;
}

#cookieNotice.cookie-container a{
  color: #9ad0ff !important;
  text-decoration: underline !important;
}

/* Ensure buttons remain readable */
#cookieNotice #acceptCookie{
  color: #fff !important;
}

#cookieNotice #declineCookie{
  color: #fff !important;
  border-color: rgba(255,255,255,.7) !important;
}

/* =========================
   Mobile polish
   ========================= */
@media (max-width: 576px){
  #cookieNotice.cookie-container{
    left: 12px !important;
    bottom: 12px !important;
    inset: auto auto 12px 12px !important;
    width: calc(100% - 24px) !important;
  }

  #cookieNotice .cookie-actions{
    justify-content: space-between;
  }
}