﻿/* Vypr Instant Access Button — Styles are scoped to plugin classes */
.vypr-access { display: block;
  width: 100%;
  text-align: center;}

.vypr-btn {
  --vypr-grad: linear-gradient(90deg, rgba(117,160,42,1) 0%, rgba(0,153,0,0.8) 100%);
  --vypr-grad-hover: linear-gradient(90deg, rgba(117,160,42,1) 0%, rgba(0,153,0,1) 100%);
  --vypr-disabled-bg: #9bb87a;
  --vypr-disabled-text: #23410b;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 2rem;
  border: none;
  border-radius: 8px;
  background: var(--vypr-grad);
  color: #ffffff;
  font-family: "Zona Pro","ZonaPro","Zona Pro Bold","ZonaPro-Bold", system-ui, sans-serif;
  font-synthesis: none;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: transform .05s ease-in-out, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  box-sizing: border-box;          /* prevents size jump */
  border: 2px solid #75a02a;       /* your color */
}
/* Make sure the button stays content-width (not full width) */
.vypr-access .vypr-btn { display: inline-flex; }

.vypr-btn:hover { background: var(--vypr-grad-hover);border-color: #75a02a; }
.vypr-btn:active { transform: translateY(1px); }
.vypr-btn:focus-visible {
  outline: 3px solid rgba(0,153,0,.35);
  outline-offset: 2px;
}

.vypr-btn[aria-disabled="true"], .vypr-btn:disabled,
.vypr-btn.vypr-btn--disabled {
  background: var(--vypr-disabled-bg) !important;
  color: #e8f3dc !important;
  border-color: #75a02a;
  cursor: not-allowed;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.vypr-label { white-space: nowrap;font-size:18px;font-weight: 700;}

.vypr-count {
  display: inline-flex;
  min-width: 3.2ch; /* fits 0:00 */
  font-family: inherit;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums; /* primary */
  font-feature-settings: "tnum" 1, "lnum" 1;      /* optional fallback */
  padding: .25rem .5rem;
  border-radius: 6px;
  background: rgba(255,255,255,.16);
  color: #fff;
}

.vypr-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Inline icon after label text */
.vypr-label .vypr-icon {
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;        /* space after the text */
  transform: translateY(1px);/* optical alignment */
}
.vypr-label .vypr-icon svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;        /* inherit button text color */
}
/* Fallback image styling when <use> sprite doesn't render (older Safari) */
.vypr-label .vypr-icon-img {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.15em;
  filter: invert(1) brightness(2);
}

@media (max-width: 420px) {
  .vypr-btn { padding: 1rem 1.3rem; }
}

/* Pulse glow when unlocked */
@keyframes vypr-pulse {
  0% {
    box-shadow:
      0 8px 20px rgba(0,0,0,.12),             /* drop */
      0 0 18px 2px rgba(0,153,0,.28),         /* soft constant halo */
      0 0 0 0 rgba(0,153,0,.60);              /* expanding ring */
  }
  70% {
    box-shadow:
      0 8px 20px rgba(0,0,0,.12),
      0 0 18px 2px rgba(0,153,0,.20),
      0 0 0 18px rgba(0,153,0,0);
  }
  100% {
    box-shadow:
      0 8px 20px rgba(0,0,0,.12),
      0 0 18px 2px rgba(0,153,0,.14),
      0 0 0 0 rgba(0,153,0,0);
  }
}
.vypr-btn.vypr-ready { animation: vypr-pulse 1.5s ease-out infinite; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .vypr-btn.vypr-ready { animation: none; }
}

/* Dynamic notice text */
.vypr-notice {
  font-size: 0.95rem;
  line-height: 1.35;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

/* Placement */
.vypr-notice.pos-above { margin-bottom: .65rem; }
.vypr-notice.pos-below { margin-top: .65rem; }

/* States */
.vypr-notice.is-waiting { color: rgba(0,0,0,.68); }
.vypr-notice.is-ready   { color: #75a02a; } /* brand green */

/* Optional dark-mode tweak */
@media (prefers-color-scheme: dark) {
  .vypr-notice.is-waiting { color: rgba(255,255,255,.85); }
}

/* === Notice overrides: bigger, centered, yellow, Zona Pro === */
.vypr-access .vypr-notice {
  font-family: "Zona Pro","ZonaPro","Zona Pro Bold","ZonaPro-Bold", system-ui, sans-serif;
  text-align: center;     /* centered */
  font-size: 1.2rem;      /* larger */
  line-height: 1.5;       /* more readable */
}

/* Colors */
.vypr-access .vypr-notice.is-waiting { color: #f6c90e; } /* yellow */
.vypr-access .vypr-notice.is-ready   { color: #75a02a; } /* your green */

/* (Optional) responsive sizing */
@media (max-width: 480px) {
  .vypr-access .vypr-notice { font-size: 1.1rem; }
}

/* (Optional) dark-mode tweak for the yellow */
@media (prefers-color-scheme: dark) {
  .vypr-access .vypr-notice.is-waiting { color: #ffd658; }
}
