/* "Try Now" demo  button + full-screen modal styles.
   Deliberately reproduces the WordPress plugin's actual widget styling
   (attentionverify-app/styles.css + index.html) component-for-component 
   same DM Sans/DM Mono fonts, same accent/muted/warn/danger palette, same
   10px/16px radius scale, same status-chip/progress-bar/coupon-box/button
   treatment  so the demo isn't just "similar," it's the same widget,
   just standalone instead of embedded in a WooCommerce product-page
   iframe. Consent/success/fail screens mirror the plugin's light widget
   cards (.perm-screen, .completion-screen); the verification stage
   mirrors the plugin's dark video popup (#avPopup/.popup-inner). */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

#tryNowModal {
  --accent: #1a6b3c;
  --accent-light: #e8f5ee;
  --accent-hover: #155730;
  --warn: #b45309;
  --warn-light: #fef3c7;
  --danger: #991b1b;
  --danger-light: #fef2f2;
  --success: #166534;
  --success-light: #dcfce7;
  --text: #1a1a18;
  --muted: #6b6b65;
  --border: #e4e4e0;
  --white: #ffffff;
  --light: #f0f0ec;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.download-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── "Try Now" campaign banner ── styling for .demo-campaign-banner,
   .demo-campaign-countdown, .demo-countdown-num-emph, .demo-campaign-ended
   etc. now lives in site-announcement.css (loaded on every page), since
   the site-wide announcement modal reuses these exact same classes for
   its own countdown display  one canonical definition, styled with the
   SITE's own design tokens (--green, --gray-*), not this file's
   plugin-matched palette. See site-announcement.css. ─────────────────── */

/* ── Modal shell ───────────────────────────────────── */
#tryNowModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #111110;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
#tryNowModal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.demo-inner {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 95vh;
  overflow-y: auto;
  /* Explicit safety net: setting overflow-y alone computes overflow-x to
     auto too (a CSS quirk, not "visible" as it might look), which is
     exactly what would expose a horizontal scrollbar on this container if
     anything inside it were ever even slightly too wide. Hidden instead 
     nothing here is meant to scroll sideways, only down. */
  overflow-x: hidden;
  background: var(--white);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Verification-stage state  matches the plugin's dark #avPopup/.popup-inner
   exactly (video popup is full-bleed black, everything else is a light card) */
.demo-inner.demo-dark-mode {
  background: #000;
  display: flex;
  flex-direction: column;
  height: 95vh;
  overflow: hidden;
}

.demo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 55; /* above the liveness prompt (40) and buffering overlay (50)  always clickable */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.demo-close:hover {
  background: rgba(0, 0, 0, 0.12);
}
.demo-inner.demo-dark-mode .demo-close {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  /* The status row is the reference element here (the plugin's own popup
     has no visible close button to copy pixel values from)  sized so the
     34px circle sits vertically centered against the row's 44px min-height,
     at the row's own right-edge padding (14px), so it reads as part of
     that row rather than a floating overlay. */
  top: 5px;
}
.demo-inner.demo-dark-mode .demo-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.demo-screen {
  display: none;
  padding: 24px 28px;
}
.demo-screen.active {
  display: block;
  animation: demoFadeIn 0.35s ease both;
}
@keyframes demoFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.demo-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* ── Consent screen  matches .perm-screen--disclaimer ───────────── */
.demo-consent-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.demo-consent-scroll p {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 12px;
}
.demo-consent-scroll p:last-child {
  margin-bottom: 0;
}
.demo-consent-scroll strong {
  color: var(--text);
}

.demo-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#demoSuccessScreen .demo-actions,
#demoFailScreen .demo-actions {
  justify-content: center;
}

.demo-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}
.demo-btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.demo-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.demo-privacy-link {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
}
.demo-privacy-link:hover {
  color: var(--accent);
}

/* ── Verification stage  matches .popup-inner/.popup-status-row/
   .popup-video-wrap/.popup-progress exactly ─────────────────────── */
.demo-stage-screen {
  padding: 0;
}
.demo-inner.demo-dark-mode .demo-stage-screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.demo-status-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #1a1a18;
  border-bottom: 1px solid #2a2a28;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  /* Reserve room for the close button (34px + its 14px right offset + a
     small gap) so wrapped chips on narrow screens never run under it 
     it only ever competes for space with the first line, since any
     wrapped lines render below, clear of the button. */
  padding-right: 54px;
}
.demo-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all 0.3s;
}
.demo-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d1cb;
  display: inline-block;
  transition: all 0.3s;
}
.demo-chip.active {
  color: var(--accent);
  border-color: #b0d9be;
}
.demo-chip.active .dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.demo-chip.warn {
  color: var(--warn);
  border-color: #fcd34d;
}
.demo-chip.warn .dot {
  background: var(--warn);
}
.demo-chip.fail {
  color: var(--danger);
  border-color: #fca5a5;
}
.demo-chip.fail .dot {
  background: var(--danger);
}

.demo-video-wrap {
  position: relative;
  background: #000;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.demo-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.demo-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.demo-countdown-num {
  font-family: 'DM Mono', monospace;
  font-size: 9rem;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  text-align: center;
}
.demo-countdown-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  min-height: 1.4em;
}

/* Floating "Attention" badge  matches .attention-badge/.ab-dot exactly,
   a separate element from the top status-chip row, positioned over the
   video itself top-right, only shown once playback actually starts. */
.demo-attention-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 11px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
  z-index: 30;
}
.demo-attention-badge.visible {
  opacity: 1;
}
.demo-attention-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d1cb;
  display: inline-block;
  transition: all 0.3s;
}
.demo-attention-badge.valid {
  color: var(--accent);
  border-color: #b0d9be;
}
.demo-attention-badge.valid .dot {
  background: var(--accent);
  animation: demoAbPulse 1.5s infinite;
}
.demo-attention-badge.invalid {
  color: var(--danger);
  border-color: #fca5a5;
}
.demo-attention-badge.invalid .dot {
  background: var(--danger);
}
@keyframes demoAbPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(26, 107, 60, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(26, 107, 60, 0);
  }
}

.demo-liveness-prompt {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 82%;
  background: rgba(17, 17, 16, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 40;
}
.demo-liveness-prompt.show {
  opacity: 1;
  visibility: visible;
}
.demo-liveness-prompt.urgent {
  background: rgba(180, 83, 9, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
  animation: demoLivenessPulse 1s ease-in-out infinite;
}
@keyframes demoLivenessPulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.04);
  }
}

.demo-buffering {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 50;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.demo-buffering.fade-out {
  opacity: 0;
}
.demo-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: demoSpin 0.8s linear infinite;
}
@keyframes demoSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Matches the plugin's #customControls bar exactly  Play/Pause + -10s/-30s
   buttons on the left, time display pushed to the right via flex:1.
   flex-wrap is a safety net (buttons never shrink below legible size, so
   without it the row could force the whole widget wider than its
   container on narrow screens); min-width:0 + ellipsis on the time
   display means IT gives way first if space is ever tight, rather than
   the row overflowing. */
.demo-video-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1a18;
  border-top: 1px solid #2a2a28;
  flex-shrink: 0;
}
.demo-video-controls button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0da;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.demo-video-controls button:hover {
  background: rgba(255, 255, 255, 0.18);
}
.demo-video-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
#demoTimeDisplay {
  flex: 1 1 auto;
  min-width: 60px;
  text-align: right;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-progress {
  padding: 12px 16px;
  background: #111110;
  border-top: 1px solid #2a2a28;
  flex-shrink: 0;
}
.demo-progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.demo-progress-header span:first-child {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
#demoProgressPct {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
}
.demo-progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.demo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

/* ── Success / fail screens  match .completion-screen/.coupon-box
   and the plugin's .fail-banner treatment ────────────────────────── */
#demoSuccessScreen {
  text-align: center;
  padding: 40px 32px;
  background: var(--success-light);
}
#demoFailScreen {
  text-align: center;
  padding: 40px 32px;
  background: var(--white);
}
.demo-success-icon,
.demo-fail-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
#demoSuccessScreen .demo-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--success);
  margin-bottom: 8px;
}
#demoFailScreen .demo-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
#demoSuccessScreen .demo-sub {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 28px;
}
#demoFailScreen .demo-sub {
  display: inline-block;
  background: var(--danger-light);
  color: var(--danger);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: var(--radius);
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: 1.5;
}
/* Matches the plugin's lockMsg treatment exactly  the bold red/danger
   bordered box shown once the one allowed retry is also exhausted. */
.demo-retry-note {
  margin: 16px auto 24px;
  padding: 15px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #f87171;
  max-width: 380px;
  line-height: 1.5;
}

.demo-coupon-box {
  background: var(--white);
  border: 2px dashed #86efac;
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 420px;
  text-align: center;
  margin: 0 auto 24px;
}
.demo-coupon-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.demo-coupon-code {
  font-family: 'DM Mono', monospace;
  font-size: 2rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 5px;
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  word-break: break-word;
}
.demo-coupon-instructions {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.demo-coupon-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 16px;
}
.demo-coupon-code.pending {
  color: var(--muted);
  background: var(--light);
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.demo-copy-btn {
  display: none;
  width: 100%;
  justify-content: center;
}
.demo-copy-btn.visible {
  display: inline-flex;
}

/* Matches the plugin's .completion-stats/.cs-item/.cs-val/.cs-label exactly. */
.demo-completion-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.demo-cs-item {
  text-align: center;
}
.demo-cs-val {
  font-family: 'DM Mono', monospace;
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 500;
}
.demo-cs-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

@media (max-width: 420px) {
  .demo-screen {
    padding: 20px 18px;
  }
  #demoSuccessScreen,
  #demoFailScreen {
    padding: 28px 18px;
  }
  .demo-countdown-num {
    font-size: 6rem;
  }
  .demo-coupon-code {
    font-size: 1.3rem;
    letter-spacing: 2px;
    padding: 12px 10px;
  }
  .demo-coupon-box {
    padding: 18px 16px;
  }
  .demo-completion-stats {
    gap: 18px;
  }
  .demo-status-row {
    gap: 4px;
    padding: 8px;
    padding-right: 48px;
    min-height: 40px;
  }
  .demo-chip {
    font-size: 0.62rem;
    padding: 3px 7px;
  }
  .demo-liveness-prompt {
    font-size: 0.74rem;
    padding: 7px 12px;
    bottom: 10px;
  }
  .demo-video-controls {
    padding: 8px 10px;
    gap: 6px;
  }
  .demo-video-controls button {
    padding: 10px 10px;
    font-size: 0.7rem;
    min-height: 40px;
  }
  /* Deterministic rather than relying on flex-wrap's exact trigger point
     (which depends on real glyph widths this can't be measured against
     live)  the time display always sits on its own centered line below
     the buttons at this width, so the buttons row alone (comfortably
     narrow on its own) is what has to fit, not both together. */
  #demoTimeDisplay {
    font-size: 0.68rem;
    flex-basis: 100%;
    min-width: 0;
    text-align: center;
  }
  /* Flush with the row's own reduced 8px edge padding at this width,
     rather than the desktop 14px offset. */
  .demo-inner.demo-dark-mode .demo-close {
    top: 3px;
    right: 8px;
  }
  .demo-inner:not(.demo-dark-mode) .demo-close {
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 480px) {
  .demo-inner {
    max-width: 100%;
    border-radius: 0;
  }
  .demo-inner.demo-dark-mode {
    height: 100vh;
  }
  .demo-inner:not(.demo-dark-mode) {
    max-height: 100vh;
  }
}