/* The WELLthy Woman consent manager styles. Spec: wwco-site-design-system-v2.0.md
   Mint canvas, black text, magenta buttons with white text (5.70:1), one card shadow. Every button on the first
   layer is the same size, weight, shape, color and row (Themis spec item 6). Selectors are namespaced .wwc-* and
   carry the specificity needed to beat a page's element rules. */

.wwc-consent, .wwc-consent *, .wwc-yt, .wwc-yt * { box-sizing: border-box; }
.wwc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ banner + panel */
.wwc-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; padding: 12px; pointer-events: none; }
.wwc-consent[hidden] { display: none !important; }
.wwc-consent .wwc-card {
  pointer-events: auto; max-width: 920px; margin: 0 auto; background: #fff; color: #000;
  border-radius: 8px; padding: 1.35rem 1.5rem 1.3rem;
  box-shadow: 0 1px 2px rgba(52,22,19,.06), 0 16px 34px -14px rgba(52,22,19,.30), 0 0 0 1px rgba(0,0,0,.10);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 300; font-size: .88rem; line-height: 1.6; letter-spacing: 0; text-transform: none; text-align: left;
}
.wwc-consent .wwc-view[hidden] { display: none !important; }
.wwc-consent .wwc-title {
  margin: 0 0 .5rem; padding: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.2rem; line-height: 1.25;
  letter-spacing: -.014em; color: #000; text-transform: none; outline: none;
}
.wwc-consent .wwc-text { margin: 0 0 .8rem; padding: 0; color: #000; font: inherit; max-width: none; }
.wwc-consent .wwc-link, .wwc-yt .wwc-link, .wwc-consent .wwc-textbtn { color: #be1a87; text-decoration: underline; text-underline-offset: .2em; font-weight: 400; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.wwc-consent .wwc-link:hover, .wwc-yt .wwc-link:hover, .wwc-consent .wwc-textbtn:hover { color: #000; }
.wwc-consent .wwc-gpc { background: #f4fffb; border-left: 4px solid #0F7C68; padding: .6rem .8rem; border-radius: 2px; margin: 0 0 .9rem; font-weight: 400; }
.wwc-consent .wwc-gpc[hidden] { display: none !important; }

/* the buttons: identical, three across */
.wwc-consent .wwc-actions { display: flex; gap: .7rem; margin: .9rem 0 0; }
.wwc-consent .wwc-btn, .wwc-yt .wwc-btn, .lg-btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; text-align: center; text-decoration: none;
  background: #be1a87; color: #fff; border-radius: 2px;
  font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: .68rem; line-height: 1.2; letter-spacing: .19em; text-transform: uppercase;
  padding: 1.05rem 1rem; min-height: 46px; box-shadow: var(--btn-shadow, 0 6px 14px -4px rgba(0,0,0,.35));
  transition: background .15s, box-shadow .15s, transform .15s;
}
.wwc-consent .wwc-actions .wwc-btn { flex: 1 1 0; min-width: 0; }
.wwc-consent .wwc-btn:hover, .wwc-yt .wwc-btn:hover, .lg-btn:hover { background: #000; color: #fff; box-shadow: var(--btn-shadow-hover, 0 10px 20px -6px rgba(0,0,0,.45)); transform: translateY(-1px); }
.wwc-consent .wwc-btn:active, .wwc-yt .wwc-btn:active, .lg-btn:active { box-shadow: var(--btn-shadow-active, 0 3px 8px -3px rgba(0,0,0,.35)); transform: translateY(0); }
.wwc-consent .wwc-btn:focus-visible, .wwc-yt .wwc-btn:focus-visible, .wwc-consent .wwc-link:focus-visible, .wwc-consent .wwc-textbtn:focus-visible, .wwc-consent .wwc-check:focus-visible, .lg-btn:focus-visible {
  outline: 3px solid #000; outline-offset: 3px;
}
.wwc-yt .wwc-btn:focus-visible { outline-color: #f4fffb; }
@media (prefers-reduced-motion: reduce) { .wwc-consent .wwc-btn, .wwc-yt .wwc-btn, .lg-btn { transition: none; transform: none !important; } }

/* panel rows */
.wwc-consent .wwc-fs { border: 0; margin: .4rem 0 0; padding: 0; min-width: 0; }
.wwc-consent .wwc-row { display: flex; align-items: flex-start; gap: .9rem; padding: .8rem 0; border-top: 1px solid rgba(0,0,0,.10); cursor: pointer; margin: 0; }
.wwc-consent .wwc-row:first-of-type { border-top: 0; }
.wwc-consent .wwc-row-txt { flex: 1 1 auto; display: block; min-width: 0; }
.wwc-consent .wwc-row-name { display: block; font-weight: 600; font-size: .9rem; color: #000; }
.wwc-consent .wwc-row-desc { display: block; font-size: .82rem; color: #000; margin-top: .15rem; }
.wwc-consent .wwc-always { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #000; padding-top: .15rem; }
.wwc-consent .wwc-check { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: #be1a87; cursor: pointer; }
.wwc-consent .wwc-check:disabled { cursor: default; }
.wwc-consent .wwc-backrow { margin-top: .9rem; }

/* ------------------------------------------------------------ video facade */
.wwc-yt { position: relative; display: block; width: 100%; margin: 1.6rem auto; aspect-ratio: 16 / 9; background: #000; color: #f4fffb; border-radius: 6px; font-family: Poppins, system-ui, sans-serif; text-align: center; }
.wwc-yt-lb { margin: 0; height: 100%; aspect-ratio: auto; }
.wwc-yt .wwc-yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; border-radius: 6px; margin: 0; }
.wwc-yt .wwc-yt-body { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.2rem; }
.wwc-yt .wwc-yt-mark { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #c1f469; position: relative; flex: none; }
.wwc-yt .wwc-yt-mark::after { content: ""; position: absolute; left: 21px; top: 15px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #c1f469; }
.wwc-yt .wwc-yt-title { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: #f4fffb; max-width: 34ch; }
.wwc-yt .wwc-yt-note { margin: 0; font-size: .78rem; font-weight: 300; line-height: 1.5; color: #f4fffb; max-width: 46ch; }
.wwc-yt .wwc-link { color: #f4fffb; }
.wwc-yt .wwc-link:hover { color: #c1f469; }
.wwc-yt .wwc-yt-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .2rem; }
.wwc-yt .wwc-yt-actions .wwc-btn { padding: .85rem 1.1rem; min-height: 42px; box-shadow: none; }
.wwc-yt .wwc-yt-watch { font-size: .74rem; color: #f4fffb; text-decoration: underline; text-underline-offset: .2em; }
.wwc-yt .wwc-yt-watch:hover { color: #c1f469; }
.wwc-yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #000; margin: 1.6rem auto; }
.vlb .wwc-yt-frame { height: 100%; margin: 0; aspect-ratio: auto; }
.wp-block-embed__wrapper .wwc-yt, .wp-block-embed__wrapper .wwc-yt-frame { margin: 0 auto; }

/* ------------------------------------------------------------ phones */
@media (max-width: 640px) {
  .wwc-consent { padding: 8px; }
  .wwc-consent .wwc-card { padding: 1.1rem 1.1rem 1rem; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .wwc-consent .wwc-actions { flex-direction: column; }
  .wwc-consent .wwc-actions .wwc-btn { flex: 0 0 auto; width: 100%; }
  .wwc-yt .wwc-yt-body { padding: .9rem; gap: .45rem; }
  .wwc-yt .wwc-yt-mark { width: 40px; height: 40px; }
  .wwc-yt .wwc-yt-mark::after { left: 16px; top: 11px; border-width: 8px 0 8px 12px; }
  .wwc-yt .wwc-yt-actions { flex-direction: column; width: 100%; }
  .wwc-yt .wwc-yt-actions .wwc-btn { width: 100%; }
}
