/**
 * Cookie consent banner (GDPR) — guest public surfaces
 * v2.0.0 — May 2026: card layout, token buttons, contrast fix, has-cookie-banner sync
 */

:root {
  --cookie-banner-inset: var(--spacing-4);
  --cookie-banner-card-radius: var(--radius-xl, 16px);
  --cookie-banner-offset: 7.5rem;
}

body.cookie-banner-visible,
body.has-cookie-banner {
  padding-bottom: calc(var(--cookie-banner-offset) + env(safe-area-inset-bottom, 0px));
}

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cookie-banner);
  padding: var(--cookie-banner-inset);
  padding-bottom: calc(var(--cookie-banner-inset) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  animation: cookieConsentFadeIn 0.4s ease-out;
}

.cookie-consent-banner.is-hidden {
  display: none;
}

.cookie-consent-banner__card {
  pointer-events: auto;
  max-width: min(56rem, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--cookie-banner-card-radius);
  border: 1px solid var(--color-primary-200);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary-50) 88%, var(--color-white)) 0%,
    var(--color-white) 58%
  );
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-neutral-900) 6%, transparent),
    0 12px 32px color-mix(in srgb, var(--color-neutral-900) 12%, transparent);
}

.cookie-consent-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  flex: 1;
  min-width: 0;
}

.cookie-consent-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--font-size-lg);
}

.cookie-consent-copy {
  min-width: 0;
}

.cookie-consent-title {
  margin: 0 0 var(--spacing-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.cookie-consent-lead {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.cookie-link {
  color: var(--color-primary-700);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-link:hover,
.cookie-link:focus-visible {
  color: var(--color-primary-800, var(--color-primary));
}

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

.cookie-btn-accept,
.cookie-btn-reject {
  flex: var(--guest-cookie-btn-flex, initial);
  min-height: var(--touch-target-min, 44px);
  padding: var(--spacing-2) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition:
    background-color var(--transition-fast, 0.2s ease),
    border-color var(--transition-fast, 0.2s ease),
    color var(--transition-fast, 0.2s ease),
    box-shadow var(--transition-fast, 0.2s ease),
    transform var(--transition-fast, 0.2s ease);
}

.cookie-btn-accept {
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-500) 28%, transparent);
}

.cookie-btn-accept:hover,
.cookie-btn-accept:focus-visible {
  background: var(--color-primary-600, var(--color-primary));
  border-color: var(--color-primary-600, var(--color-primary));
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-500) 34%, transparent);
}

.cookie-btn-reject {
  border: 1px solid var(--color-neutral-300);
  background: var(--color-white);
  color: var(--text-primary);
}

.cookie-btn-reject:hover,
.cookie-btn-reject:focus-visible {
  border-color: var(--color-neutral-400);
  background: var(--color-neutral-50, var(--bg-secondary));
  color: var(--text-primary);
}

/* Hide when modals / booking / nav compete for bottom stack */
body.modal-open .cookie-consent-banner,
body.listing-detail-booking-open .cookie-consent-banner,
body.offcanvas-open .cookie-consent-banner,
body.auth-modal-open .cookie-consent-banner,
body.navbar-collapse-open .cookie-consent-banner,
body.guest-nav-mobile-open .cookie-consent-banner,
body.guests-drawer-open .cookie-consent-banner,
body.guest-navbar-dropdown-open .cookie-consent-banner,
body.user-chat-panel-open .cookie-consent-banner,
body.owner-chat-panel-open .cookie-consent-banner,
body.chat-panel-open .cookie-consent-banner {
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
}

body.has-mobile-cta .cookie-consent-banner {
  bottom: calc(var(--mobile-cta-height, 72px) + env(safe-area-inset-bottom, 0px));
}

body.has-cookie-banner footer,
body.has-cookie-banner .home-footer,
body.has-cookie-banner .footer-section,
body.cookie-banner-visible footer,
body.cookie-banner-visible .home-footer,
body.cookie-banner-visible .footer-section {
  padding-bottom: calc(var(--cookie-banner-offset) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767.98px) {
  :root {
    --cookie-banner-offset: 11.5rem;
  }

  .cookie-consent-banner__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  .cookie-consent-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cookie-consent-actions {
    width: 100%;
    flex-direction: column-reverse;
  }

  .cookie-btn-accept,
  .cookie-btn-reject {
    width: 100%;
    justify-content: center;
  }
}

@keyframes cookieConsentFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent-banner {
    animation: none;
  }

  .cookie-btn-accept:hover,
  .cookie-btn-accept:focus-visible,
  .cookie-btn-reject:hover,
  .cookie-btn-reject:focus-visible {
    transform: none;
  }
}