/* PointMintz cookie consent banner — Phase 2 (#10918).
 *
 * Companion stylesheet for /js/shared/cookie-consent-banner.js. Platform
 * pages (pointmintz.com / admin.pointmintz.com / public/platform/*.html /
 * public/admin.html) include this with <link rel="stylesheet" href="..."> so
 * the platform CSP (style-src 'self') accepts the rules without needing
 * nonces or unsafe-inline.
 *
 * The tenant runtime keeps its own nonce'd inline <style> block in
 * lib/presentation/html/html-tenant-runtime.js — rules below are kept in
 * sync there. */

/* Issue #10995 (Class Q 8yo-fail — primary CTA hidden behind cookie banner
 * at first paint on 375x667). Banner starts off-screen (translateY 100%)
 * and slides up via the .pm-cb--visible class flip after the consent JS
 * runs, so the first paint is clean and the hero "Reserve This Visit" CTA
 * stays visible above the fold on small mobile viewports. padding-bottom:
 * env(safe-area-inset-bottom) keeps the banner inside the iOS home-indicator
 * safe area when it appears. Mirrored in the nonce'd inline <style> block
 * in lib/presentation/html/html-tenant-runtime.js per the sync contract at
 * the top of this file. */
#pm-cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  color: #f5f5f5;
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  font-size: 13px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  font-family: inherit;
  transform: translateY(100%);
  transition: transform 280ms ease-out;
  will-change: transform;
}
#pm-cookie-banner.pm-cb--visible {
  display: block;
  transform: translateY(0);
}
/* Issue #11100 (Class Q — banner overlaps step CTAs on /booking even
 * after #10995 slide-in fix). Reserve bottom-padding on <body> when the
 * banner is mounted so in-flow CTAs (booking step Next/Continue, signup
 * form submits, etc.) get scroll-room above the fixed-bottom banner.
 * The cookie-consent-banner.js IIFE adds .has-cookie-banner on showBanner()
 * + sets --pm-cb-h to the measured banner height, then removes both on
 * hideBanner(). 96px fallback covers the no-JS / banner-not-yet-measured
 * paint window. Mirrored in lib/presentation/html/html-tenant-runtime.js
 * per the sync contract at the top of this file. */
body.has-cookie-banner {
  padding-bottom: var(--pm-cb-h, 96px);
}
#pm-cookie-banner .pm-cb-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#pm-cookie-banner .pm-cb-copy {
  flex: 1;
  margin: 0;
  min-width: 200px;
  line-height: 1.5;
}
#pm-cookie-banner a.pm-cb-privacy {
  color: #c9a95a;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 6px;
}
#pm-cookie-banner .pm-cb-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
#pm-cookie-banner button.pm-cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
  line-height: 1.2;
  border: none;
}
#pm-cookie-banner button.pm-cb-btn--secondary {
  background: transparent;
  color: #f5f5f5;
  border: 1px solid #666;
  font-weight: 600;
}
#pm-cookie-banner button.pm-cb-btn--primary {
  background: var(--brand-primary, #2f6e5b);
  color: #fff;
  font-weight: 700;
}
#pm-cookie-banner .pm-cb-gpc-notice {
  display: none;
  width: 100%;
  margin: 0;
  padding: 6px 8px 0;
  font-size: 12px;
  color: #c9a95a;
  line-height: 1.4;
}
#pm-cookie-banner.pm-cb--gpc .pm-cb-gpc-notice { display: block; }

#pm-cookie-prefs-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#pm-cookie-prefs-modal.pm-cb-modal--open { display: flex; }
#pm-cookie-prefs-modal .pm-cb-modal-card {
  background: #fff;
  color: #1a1a1a;
  border-radius: 8px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  font-family: inherit;
}
#pm-cookie-prefs-modal h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
#pm-cookie-prefs-modal .pm-cb-modal-intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}
#pm-cookie-prefs-modal .pm-cb-cat-row {
  border-top: 1px solid #eee;
  padding: 12px 0;
}
#pm-cookie-prefs-modal .pm-cb-cat-row:first-of-type { border-top: none; }
#pm-cookie-prefs-modal .pm-cb-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#pm-cookie-prefs-modal .pm-cb-cat-label {
  font-weight: 600;
  font-size: 14px;
}
#pm-cookie-prefs-modal .pm-cb-cat-desc {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
  line-height: 1.4;
}
#pm-cookie-prefs-modal .pm-cb-cat-toggle {
  min-width: 44px;
  min-height: 24px;
}
#pm-cookie-prefs-modal .pm-cb-cat-required {
  font-size: 11px;
  color: #888;
  margin-left: 8px;
}
#pm-cookie-prefs-modal .pm-cb-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}
#pm-cookie-prefs-modal .pm-cb-modal-actions button {
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  min-height: 44px;
  border: 1px solid #ccc;
  background: #fff;
  font-weight: 600;
}
#pm-cookie-prefs-modal .pm-cb-modal-actions button.pm-cb-btn--primary {
  background: var(--brand-primary, #2f6e5b);
  color: #fff;
  border-color: transparent;
}

/* Mobile (<=360px): stack the action row vertically so the three buttons
 * (Reject All / Customize / Accept All) don't overflow the 320px iPhone SE
 * viewport. Tested via `npm run audit:device`; without this rule the row
 * computes ~362px wide on a 320px viewport (#10918 smoke regression,
 * Class P mobile-broken, closes #10940). Each button is already
 * min-height:44px so the stacked column stays tap-target compliant. */
@media (max-width: 360px) {
  #pm-cookie-banner .pm-cb-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #pm-cookie-banner button.pm-cb-btn {
    width: 100%;
  }
}
