/* ─── GDPR Cookie Consent — PROJECT UP ────────────────────────────────────
   Brand: PROJECT UP | projectup.cz
   Barvy: Forest Green #3B5438 | Sage #87968D | Tan #CAAC85
   Font: Inter (shodný s webem)
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --cookie-green:       #3B5438;
  --cookie-green-dark:  #2e4229;
  --cookie-sage:        #87968D;
  --cookie-tan:         #CAAC85;
  --cookie-tan-dark:    #b89668;
  --cookie-bg-banner:   #3B5438;
  --cookie-text-banner: #F5F0E8;
  --cookie-bg-modal:    #ffffff;
  --cookie-text-modal:  #1e1e1e;
  --cookie-border:      #e4dfd9;
  --cookie-radius:      6px;
  --cookie-shadow:      0 8px 32px rgba(0, 0, 0, .22);
  --cookie-z-banner:    9990;
  --cookie-z-overlay:   9995;
  --cookie-z-modal:     9999;
  --cookie-z-fab:       9980;
  --cookie-transition:  .2s ease;
  --cookie-font:        'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ─── BANNER ─────────────────────────────────────────────────────────────── */
.cookie-banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  background: var(--cookie-bg-banner);
  color:      var(--cookie-text-banner);
  z-index:    var(--cookie-z-banner);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, .25);
  transform:  translateY(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  display:    none;
  font-family: var(--cookie-font);
  border-top: 3px solid var(--cookie-tan);
}
.cookie-banner--visible {
  display:   block;
  transform: translateY(0);
}
.cookie-banner__inner {
  max-width:   1040px;
  margin:      0 auto;
  padding:     18px 24px;
  display:     flex;
  align-items: center;
  gap:         20px;
}
.cookie-banner__icon {
  flex-shrink: 0;
  color:       var(--cookie-tan);
  opacity:     .9;
  display:     flex;
  align-items: center;
}
.cookie-banner__content {
  flex:        1;
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}
.cookie-banner__text {
  flex:        1 1 260px;
  margin:      0;
  font-size:   .875rem;
  line-height: 1.55;
  color:       var(--cookie-text-banner);
}
.cookie-banner__text a {
  color:           var(--cookie-tan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__text a:hover { color: #e0c49a; }
.cookie-banner__actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  flex-shrink: 0;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
/* EDPB Guidelines 03/2022: Accept a Reject mají mít stejnou vizuální váhu */
.cookie-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         9px 18px;
  border-radius:   var(--cookie-radius);
  border:          2px solid transparent;
  font-family:     var(--cookie-font);
  font-size:       .82rem;
  font-weight:     600;
  letter-spacing:  .02em;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--cookie-transition), color var(--cookie-transition),
                   border-color var(--cookie-transition), opacity var(--cookie-transition),
                   transform var(--cookie-transition);
  line-height:     1;
  text-decoration: none;
}
.cookie-btn:focus-visible {
  outline:        2px solid var(--cookie-tan);
  outline-offset: 3px;
}
.cookie-btn:active { transform: scale(.97); }

/* Přijmout — Tan (teplá, přátelská) */
.cookie-btn--accept {
  background:   var(--cookie-tan);
  color:        #2a1f0e;
  border-color: var(--cookie-tan);
}
.cookie-btn--accept:hover { background: var(--cookie-tan-dark); border-color: var(--cookie-tan-dark); }

/* Odmítnout — Sage (stejná vizuální váha = GDPR compliant, bez dark patternu) */
.cookie-btn--reject {
  background:   var(--cookie-sage);
  color:        #ffffff;
  border-color: var(--cookie-sage);
}
.cookie-btn--reject:hover { background: #6f807a; border-color: #6f807a; }

/* Nastavení — ghost */
.cookie-btn--ghost {
  background:   transparent;
  color:        rgba(245, 240, 232, .75);
  border-color: rgba(245, 240, 232, .35);
}
.cookie-btn--ghost:hover {
  background:   rgba(255, 255, 255, .1);
  color:        var(--cookie-text-banner);
  border-color: rgba(245, 240, 232, .6);
}

/* ─── OVERLAY ────────────────────────────────────────────────────────────── */
.cookie-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(20, 30, 20, .55);
  backdrop-filter: blur(2px);
  z-index:    var(--cookie-z-overlay);
}
.cookie-overlay--open { display: block; }

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.cookie-modal {
  display:        none;
  position:       fixed;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%) scale(.97);
  width:          min(560px, calc(100vw - 32px));
  max-height:     calc(100vh - 48px);
  background:     var(--cookie-bg-modal);
  color:          var(--cookie-text-modal);
  border-radius:  10px;
  box-shadow:     var(--cookie-shadow);
  z-index:        var(--cookie-z-modal);
  overflow:       hidden;
  flex-direction: column;
  font-family:    var(--cookie-font);
  border-top:     4px solid var(--cookie-green);
  transition:     transform var(--cookie-transition), opacity var(--cookie-transition);
  opacity:        0;
}
.cookie-modal--open {
  display:   flex;
  transform: translate(-50%, -50%) scale(1);
  opacity:   1;
}

.cookie-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 22px 16px;
  background:      #f9f7f5;
  border-bottom:   1px solid var(--cookie-border);
}
.cookie-modal__header-inner {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.cookie-modal__icon {
  color:       var(--cookie-green);
  flex-shrink: 0;
}
.cookie-modal__title {
  margin:      0;
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--cookie-green);
  letter-spacing: -.01em;
}
.cookie-modal__close {
  background:    transparent;
  border:        1px solid var(--cookie-border);
  color:         #888;
  cursor:        pointer;
  padding:       6px;
  border-radius: var(--cookie-radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background var(--cookie-transition), color var(--cookie-transition);
  line-height:   1;
}
.cookie-modal__close:hover {
  background: #f0ece8;
  color:      var(--cookie-green);
  border-color: #ccc;
}
.cookie-modal__close:focus-visible {
  outline:        2px solid var(--cookie-tan);
  outline-offset: 2px;
}

.cookie-modal__body {
  padding:    4px 22px 16px;
  overflow-y: auto;
  flex:       1;
}
.cookie-modal__intro {
  margin:      14px 0 4px;
  font-size:   .82rem;
  color:       #777;
  line-height: 1.5;
}

.cookie-modal__footer {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     14px 22px 18px;
  border-top:  1px solid var(--cookie-border);
  flex-wrap:   wrap;
  background:  #f9f7f5;
}
.cookie-modal__policy-link {
  margin-left:     auto;
  font-size:       .78rem;
  color:           var(--cookie-sage);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space:     nowrap;
}
.cookie-modal__policy-link:hover { color: var(--cookie-green); }

/* ─── CATEGORY ROWS ──────────────────────────────────────────────────────── */
.cookie-category {
  padding:       14px 0;
  border-bottom: 1px solid var(--cookie-border);
}
.cookie-category:last-child { border-bottom: none; }

.cookie-category__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   5px;
}
.cookie-category__name {
  font-weight: 600;
  font-size:   .9rem;
  color:       var(--cookie-green);
  cursor:      default;
}
label.cookie-category__name { cursor: pointer; }
.cookie-category__desc {
  margin:      0;
  font-size:   .8rem;
  color:       #666;
  line-height: 1.5;
}

/* ─── BADGE ──────────────────────────────────────────────────────────────── */
.cookie-badge {
  font-size:     .7rem;
  font-weight:   700;
  padding:       3px 9px;
  border-radius: 99px;
  white-space:   nowrap;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cookie-badge--required {
  background: #edf4ec;
  color:      var(--cookie-green);
  border:     1px solid #c3d9c1;
}

/* ─── TOGGLE SWITCH ──────────────────────────────────────────────────────── */
.cookie-toggle {
  position:    relative;
  display:     inline-block;
  width:       44px;
  height:      24px;
  flex-shrink: 0;
  cursor:      pointer;
}
.cookie-toggle input {
  opacity:  0;
  width:    0;
  height:   0;
  position: absolute;
}
.cookie-toggle__slider {
  position:      absolute;
  inset:         0;
  background:    #d0ccc8;
  border-radius: 24px;
  transition:    background var(--cookie-transition);
}
.cookie-toggle__slider::before {
  content:       '';
  position:      absolute;
  width:         18px;
  height:        18px;
  left:          3px;
  top:           3px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform var(--cookie-transition);
  box-shadow:    0 1px 4px rgba(0, 0, 0, .2);
}
.cookie-toggle input:checked + .cookie-toggle__slider {
  background: var(--cookie-green);
}
.cookie-toggle input:checked + .cookie-toggle__slider::before {
  transform: translateX(20px);
}
.cookie-toggle input:focus-visible + .cookie-toggle__slider {
  outline:        2px solid var(--cookie-tan);
  outline-offset: 2px;
}

/* ─── FLOATING ACTION BUTTON (FAB) ──────────────────────────────────────── */
.cookie-settings-fab {
  display:         none;
  position:        fixed;
  bottom:          22px;
  right:           22px;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--cookie-green);
  color:           var(--cookie-tan);
  border:          none;
  cursor:          pointer;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(0, 0, 0, .25);
  z-index:         var(--cookie-z-fab);
  transition:      transform var(--cookie-transition), opacity var(--cookie-transition),
                   box-shadow var(--cookie-transition);
  opacity:         .75;
}
.cookie-settings-fab--visible     { display: flex; }
.cookie-settings-fab:hover        { opacity: 1; transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.cookie-settings-fab:focus-visible { outline: 2px solid var(--cookie-tan); outline-offset: 3px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cookie-banner__inner    { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 18px; }
  .cookie-banner__icon     { display: none; }
  .cookie-banner__content  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cookie-banner__actions  { width: 100%; }
  .cookie-btn              { flex: 1; justify-content: center; padding: 11px 10px; }
  .cookie-modal__footer    { flex-direction: column; align-items: stretch; }
  .cookie-modal__footer .cookie-btn { width: 100%; justify-content: center; }
  .cookie-modal__policy-link { margin-left: 0; text-align: center; }
  .cookie-settings-fab     { bottom: 14px; right: 14px; width: 40px; height: 40px; }
}