/* ============================================================
 * cookies.css — Banner de consentimiento (tema «hotel», self-hosted).
 * Port del de www.okmystay.com: misma estructura y mismo comportamiento;
 * lo que cambia es la piel.
 *
 * La piel se pide por --cookie-* y CADA TEMA las define en su site.css
 * (hotel las saca de su teal/dorado, fincas de su pino/terracota). El
 * fichero lo hereda `fincas` del padre `hotel`, y sus variables no
 * existen allí: sin este indirecto, la caja de Cabañitas saldría con los
 * colores del tema hotel. Los literales son el último recurso.
 * Como las --cookie-* se resuelven contra la paleta del tema, una web con
 * su propia SITE.palette se lleva la caja en SU color sin tocar nada.
 * Barra inferior NO bloqueante.
 * Aceptar y Rechazar tienen el MISMO peso visual (requisito AEPD).
 * ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 12px;
  pointer-events: none; /* la barra transparente no captura clics; sí la caja */
}
.cookie-banner[hidden] { display: none; }

.cookie-box {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--cookie-bg, #10454d);
  color: var(--cookie-fg-soft, rgba(255, 255, 255, .86));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  padding: 16px 18px;
}
.cookie-box:focus { outline: none; }

.cookie-title { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--cookie-fg, #fff); }
.cookie-desc { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.45; }
.cookie-desc a { color: var(--cookie-accent, #cfa672); }

.cookie-config { margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .55rem; }
.cookie-config[hidden] { display: none; }
.cookie-cat { display: flex; gap: .55rem; align-items: flex-start;
              font-size: .85rem; line-height: 1.4; }
.cookie-cat input { margin-top: .2rem; flex: 0 0 auto; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cookie-btn {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: .55rem 1.05rem;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1.1;
}
/* Aceptar y Rechazar: idénticos (mismo tamaño, color y prominencia). */
.cookie-accept, .cookie-reject {
  background: var(--cookie-accent, #cfa672);
  color: var(--cookie-accent-fg, #09454e);
  border-color: var(--cookie-accent, #cfa672);
}
/* Configurar / Guardar: secundarios (outline), pero perfectamente visibles. */
.cookie-ghost {
  background: transparent;
  color: var(--cookie-fg, #fff);
  border-color: rgba(255, 255, 255, .35);
}
.cookie-btn:hover { opacity: .92; }
.cookie-btn:focus-visible { outline: 2px solid var(--cookie-accent, #cfa672);
                            outline-offset: 2px; }

/* Enlace-botón "Preferencias de cookies". Hereda el color del contenedor
   para pasar por uno más de los enlaces del pie. */
.cookie-prefs-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer;
  opacity: .85;
}
.cookie-prefs-link:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 520px) {
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1 1 auto; }
}