/* ============================================================
   Cookie Banner + Modal — LetsBoxIt
   Granular consent: técnicas | analíticas | marketing
   ============================================================ */

/* ── Banner base ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990;
  background: #FFFFFF;
  border-top: 1px solid #D6DCDC;
  box-shadow: 0 -4px 32px rgba(10,12,16,0.12);
  padding: 20px 28px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  transform: translateY(110%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.show { transform: translateY(0); }

.cookie-banner-text { flex: 1; min-width: 240px; }
.cookie-banner-text p { font-size: 14px; color: #3A4049; line-height: 1.55; margin: 0 0 6px; }
.cookie-banner-text a { color: #1BA2A0; font-weight: 600; }

.cookie-banner-btns {
  display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; align-items: center;
}
.cookie-btn-accept {
  padding: 10px 20px; border-radius: 8px;
  background: #1BA2A0; color: #FFFFFF;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; white-space: nowrap;
  transition: background 160ms;
}
.cookie-btn-accept:hover { background: #17908E; }
.cookie-btn-reject {
  padding: 10px 18px; border-radius: 8px;
  background: #F1F5F4; color: #3A4049;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1px solid #D0D8D7; white-space: nowrap;
  transition: background 160ms;
}
.cookie-btn-reject:hover { background: #E2ECEA; }
.cookie-btn-config {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #7A8594;
  text-decoration: underline; padding: 4px;
  white-space: nowrap;
}
.cookie-btn-config:hover { color: #1BA2A0; }

@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 18px 16px; }
  .cookie-banner-btns { flex-direction: column; align-items: stretch; }
  .cookie-banner-btns button { width: 100%; justify-content: center; }
}

/* ── Modal overlay ── */
.cookie-modal-overlay {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(10, 12, 16, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms;
}
.cookie-modal-overlay.show { opacity: 1; pointer-events: auto; }

.cookie-modal {
  background: #FFFFFF; border-radius: 16px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  padding: 36px 32px;
  box-shadow: 0 24px 80px rgba(10,12,16,0.22);
  transform: translateY(20px);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-modal-overlay.show .cookie-modal { transform: translateY(0); }

.cookie-modal h2 { font-size: 20px; font-weight: 700; color: #0A0C10; margin-bottom: 8px; }
.cookie-modal > p { font-size: 14px; color: #5A6472; line-height: 1.55; margin-bottom: 28px; }

/* ── Category toggle rows ── */
.cookie-cat {
  padding: 18px 0; border-top: 1px solid #EDF0F0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.cookie-cat:first-of-type { border-top: none; }
.cookie-cat-info { flex: 1; }
.cookie-cat-info strong { font-size: 15px; font-weight: 600; color: #0A0C10; display: block; margin-bottom: 4px; }
.cookie-cat-info span { font-size: 13px; color: #5A6472; line-height: 1.5; }

/* Toggle switch */
.cookie-toggle { position: relative; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle label {
  display: block; width: 44px; height: 24px; border-radius: 999px;
  background: #D0D8D7; cursor: pointer; position: relative;
  transition: background 200ms;
}
.cookie-toggle label::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 200ms;
}
.cookie-toggle input:checked + label { background: #1BA2A0; }
.cookie-toggle input:checked + label::after { transform: translateX(20px); }
.cookie-toggle input:disabled + label { opacity: 0.5; cursor: not-allowed; }
.cookie-always { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #1BA2A0; font-weight: 500; margin-top: 4px; text-align: center; width: 44px; }

/* Modal buttons */
.cookie-modal-footer { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.cookie-modal-footer .cookie-btn-accept { width: 100%; padding: 13px; font-size: 15px; }
.cookie-modal-footer .cookie-btn-reject-all {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #7A8594;
  text-decoration: underline; text-align: center; padding: 4px;
}
.cookie-modal-footer .cookie-btn-reject-all:hover { color: #1BA2A0; }
.cookie-modal-footer .cookie-btn-save {
  padding: 13px; border-radius: 8px;
  background: #F1F5F4; color: #0A0C10;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid #D0D8D7; width: 100%;
  transition: background 160ms;
}
.cookie-modal-footer .cookie-btn-save:hover { background: #E2ECEA; }