/* ============================================================
   KosovaJob redesign — cookie consent banner (kj-cookie-consent.php)
   Batch 1 Root, 2026-09-15 export. Every value below is read off the
   bundle's rendered [data-cookie] element (inline styles) and its
   responsive rule, not the token sheet:
     position fixed left 24 / bottom 24, z 80, width min(440px, 100vw-48),
     bg #fff, 1px --border-subtle (#E2E7EF), r 20,
     shadow 0 24px 60px -20px rgba(4,30,66,.35) + --shadow-md,
     padding 18px 20px 16px, animation kjFadeUp .45s .6s ease-out both;
     row: flex, gap 12; icon tile 36x36 r10 --coral-50 / --coral-600;
     title display 800/15 --text-strong, mb 4; copy 13px/1.5 --text-muted;
     link --coral-600 700; buttons grid 1fr 1fr gap 8 mt 14, h 40 r 999,
     outline 1.5px --border-default (#CBD3E0) / gradient + --shadow-accent;
     <=767: left/right/bottom 12, width auto, r 18.
   z-index: the bundle uses 80. Here 120 — above the EPI FAB (86) and the
   search-box dropdowns (60), below the mobile filter sheet (130), the share
   (160) / rate dialogs and the follow popup (1000), so an open dialog is
   never sat on by the banner.
   ============================================================ */
.kj-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 120;
  width: min(440px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(4, 30, 66, .35), var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
  padding: 18px 20px 16px;
  font-family: var(--kj-font-mulish, var(--kj-font, system-ui, sans-serif));
  color: var(--kj-b3-title, #041E42);
  animation: kjCookieIn .45s .6s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
  transition: opacity .25s ease, transform .25s ease;
}
.kj-cookie.is-out { opacity: 0; transform: translateY(12px); pointer-events: none; }
@keyframes kjCookieIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.kj-cookie__row { display: flex; align-items: flex-start; gap: 12px; }
.kj-cookie__ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-600, #EE4753);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kj-cookie__ico svg { display: block; }
.kj-cookie__body { flex: 1 1 0; min-width: 0; }
.kj-cookie__t {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  color: var(--kj-b3-title, #041E42);
  margin-bottom: 4px;
}
.kj-cookie__p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
  text-wrap: pretty;
}
.kj-cookie__p a { color: var(--kj-coral-600, #EE4753); font-weight: 700; text-decoration: none; }
.kj-cookie__p a:hover { color: var(--kj-coral-700, #CE3340); }
.kj-cookie__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.kj-cookie__btn {
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease, filter .15s ease;
}
.kj-cookie__btn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }
.kj-cookie__btn--all {
  border: 0;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  font-weight: 800;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
.kj-cookie__btn--all:hover { color: #fff; background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%)); filter: brightness(1.04); }
@media (max-width: 767px) {
  .kj-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; border-radius: 18px; }
}
/* a signed-in phone has the bottom tab bar (headerArea_new.php, 2026-10-09, 60px + the safe
   area): the first-visit banner sits above it instead of on it */
@media (max-width: 759px) {
  body:has(.kj-tabbar) .kj-cookie { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* the open EPI panel (z 85, bottom 76, 16/16 since 2026-10-09) is drawn where the
     card sits: while it is open the card drops under the panel so the composer can be
     reached — the design renders no cookie card at all. Since 2026-10-13 (Batch 3 w1-epi)
     the panel shrinks back into its button for 340 ms after .is-open has left it
     (.is-closing): the card stays under it until the panel is gone */
  body:has(.kj-epipanel.is-open, .kj-epipanel.is-closing) .kj-cookie { z-index: 84; }
  .kj-cookie__btn { padding: 0 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-cookie { animation: none; }
}