/* Funporch Consent – Modal/Popover UI (brand: #6508ef) */
:root { --fp-brand:#6508ef; --fp-bg:#0b0b0c; --fp-text:#ffffff; }

#fpc-banner { display:none !important; } /* modal-only */

/* Overlay: flex-center + fade */
#fpc-modal{
  position:fixed; inset:0; z-index:100000;
  display:none; opacity:0; pointer-events:none;
  background:rgba(0,0,0,.56);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  transition:opacity .18s ease-out;
  display:flex; align-items:center; justify-content:center; /* vertical center */
}
#fpc-modal.show{ opacity:1; pointer-events:auto; }

/* Panel: max-h + internal scroll for mobile */
#fpc-modal .panel{
  width:min(720px, calc(100vw - 32px));
  max-height:min(90vh, 820px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 auto;
  background:#fff; color:#111;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(18px); opacity:.98;
  transition:transform .22s ease-out, opacity .22s ease-out;
}
#fpc-modal.show .panel{ transform:translateY(0); opacity:1; }

@media (prefers-reduced-motion: reduce){
  #fpc-modal, #fpc-modal .panel { transition:none; transform:none; }
}

/* Header */
#fpc-modal .top{ background:var(--fp-brand); color:#fff; padding:18px 22px; }
#fpc-modal .top h2{ margin:0; font-size:1.35rem; font-weight:800; }

/* Body spacing */
#fpc-modal .body{ padding:32px; }
@media (max-width:480px){ #fpc-modal .body{ padding:18px; } }

#fpc-modal .body p{ margin:0 0 8px 0; color:#333; }
#fpc-modal a{ color:#111; text-decoration:underline; }
#fpc-modal a:hover{ opacity:.85; }

/* Buttons */
.fpc-btn{ border:0; padding:11px 16px; border-radius:12px; cursor:pointer; font-weight:600; }
.fpc-btn-ghost{ background:transparent; color:#111; outline:1px solid rgba(0,0,0,.2); }
.fpc-btn-primary{ background:#22c55e; color:#111; }
.fpc-btn-dark{ background:#111; color:#fff; }
/* Light ghost for dark overlays */
.fpc-btn-ghost-light{ background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.6); }

/* Intro view */
#fpc-intro .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:32px; }

/* Settings view switch */
#fpc-settings{ display:none; }
#fpc-modal.mode-settings #fpc-intro{ display:none; }
#fpc-modal.mode-settings #fpc-settings{ display:block; }

#fpc-modal .grid{ display:grid; gap:14px; }
#fpc-modal .row{ border:1px solid #eee; border-radius:14px; padding:12px 14px; background:#fff; }
#fpc-modal .row h3{
  margin:0 0 6px 0; font-size:1rem;
  display:flex; align-items:center; justify-content:space-between;
}
#fpc-modal .row p{ margin:0; opacity:.85; font-size:.95rem; }

.toggle{ display:inline-flex; align-items:center; gap:8px; }
.fpc-switch{ position:relative; display:inline-block; width:52px; height:28px; }
.fpc-switch input{ display:none; }
.fpc-slider{
  position:absolute; inset:0; cursor:pointer;
  background:#d6d6d6; border-radius:999px; transition:.2s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.fpc-slider:before{
  content:""; position:absolute; height:22px; width:22px; left:3px; top:3px;
  background:#fff; border-radius:999px; transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.fpc-switch input:checked + .fpc-slider{ background:var(--fp-brand); }
.fpc-switch input:checked + .fpc-slider:before{ transform:translateX(24px); }

#fpc-settings .actions{ display:flex; justify-content:flex-end; gap:10px; padding-top:8px; }

/* Focus style: accessible, not the default blue */
#fpc-modal .panel :focus-visible{
  outline:2px solid var(--fp-brand);
  outline-offset:2px;
  border-radius:8px;
}

/* Lock scroll while open */
body.fpconsent-lock{ overflow:hidden; }

/* Help search engines ignore modal text */
[data-nosnippet]{ -webkit-user-select:none; user-select:none; }

/* ---------- YouTube click-to-play overlay ---------- */
.fpc-ytwrap{ position:relative; display:block; max-width:100%; }
.fpc-ytwrap iframe{ display:block; max-width:100%; }
.fpc-ytblock{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:16px;
  background:rgba(0,0,0,.6);
  color:#fff; text-align:center;
  backdrop-filter:blur(1px);
}
.fpc-ytblock .msg{ font-size:.98rem; line-height:1.35; }
.fpc-ytblock .actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }