/* C:\Users\Yash\Desktop\xvigo-theme-v3\assets\css\unlocker.css */

/* Member/guest visibility rules */
.guest-only {
  display: block;
}

.member .guest-only {
  display: none !important;
}

.member-video {
  display: none;
}

.member .member-video {
  display: block;
}

/* Standalone unlock card */
.xvigo-unlock-card {
  --unlock-red: #e01f2f;
  --unlock-red-dark: #9f1320;
  --unlock-bg: #090a0d;
  --unlock-surface: rgba(14, 16, 20, 0.92);
  --unlock-border: rgba(255, 255, 255, 0.1);
  --unlock-text: #eef0f4;
  --unlock-muted: #98a0af;
  --unlock-ok: #22c55e;
  --unlock-warn: #f59e0b;

  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 18px auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--unlock-border);
  background: linear-gradient(180deg, #0f1116 0%, #0a0c11 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.xvigo-unlock-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #090a0d;
}

.xvigo-unlock-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xvigo-unlock-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  transition: opacity 0.24s ease;
}

.xvigo-unlock-panel {
  position: absolute;
  inset: auto 16px 16px 16px;
  z-index: 3;
  padding: 14px;
  border-radius: 12px;
  background: var(--unlock-surface);
  border: 1px solid var(--unlock-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}

.xvigo-unlock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(224, 31, 47, 0.44);
  background: rgba(224, 31, 47, 0.14);
  color: #f8bec4;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.xvigo-unlock-title {
  margin: 10px 0 4px;
  font-family: var(--f-head, 'Space Grotesk', system-ui, sans-serif);
  font-size: 20px;
  line-height: 1.15;
  color: var(--unlock-text);
}

.xvigo-unlock-copy {
  margin: 0 0 12px;
  color: var(--unlock-muted);
  font-size: 13px;
  line-height: 1.45;
}

.xvigo-unlock-copy strong,
.xvigo-unlock-copy b {
  color: #ffffff;
}

.xvigo-unlock-btn {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--unlock-red) 0%, var(--unlock-red-dark) 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

.xvigo-unlock-btn:hover {
  filter: brightness(1.08);
}

.xvigo-unlock-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.xvigo-unlock-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}

.xvigo-unlock-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.xvigo-unlock-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef2f44 0%, #ff6d7a 100%);
  transition: width 0.2s linear;
}

.xvigo-unlock-progress-text {
  min-width: 36px;
  text-align: right;
  color: #d8dde8;
  font-size: 11px;
  font-weight: 700;
}

.xvigo-unlock-status {
  margin: 9px 0 0;
  font-size: 12px;
  color: #b6bdcb;
}

.xvigo-unlock-card[data-state='failed'] .xvigo-unlock-status {
  color: var(--unlock-warn);
}

.xvigo-unlock-card[data-state='counting'] .xvigo-unlock-status,
.xvigo-unlock-card[data-state='unlocked'] .xvigo-unlock-status {
  color: var(--unlock-ok);
}

.xvigo-unlock-media {
  display: none;
  padding: 14px;
  background: #08090c;
}

.xvigo-unlock-card.is-unlocked .xvigo-unlock-media {
  display: block;
}

.xvigo-unlock-card.is-unlocked .xvigo-unlock-panel {
  position: static;
  margin: 14px;
  inset: auto;
}

.xvigo-unlock-card.is-unlocked .xvigo-unlock-preview::after {
  opacity: 0;
}

.xvigo-unlock-card.is-unlocked .xvigo-unlock-preview {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
}

/* Bunny iframe wrappers */
.xvigo-media-video,
.member-video .xvigo-media-video {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
  aspect-ratio: 16 / 9;
}

.xvigo-media-video iframe,
.xvigo-media-video video,
.member-video .xvigo-media-video iframe,
.member-video .xvigo-media-video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Gallery */
.xvigo-gallery {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xvigo-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: zoom-in;
}

.xvigo-gallery img:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 2px;
}

/* Fullscreen gallery modal */
.xvigo-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.9);
}

.xvigo-gallery-modal[hidden] {
  display: none;
}

.xvigo-gallery-figure {
  margin: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.xvigo-gallery-image {
  max-width: min(96vw, 1400px);
  max-height: 78dvh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  object-fit: contain;
  background: #060709;
}

.xvigo-gallery-caption {
  margin-top: 10px;
  font-size: 12px;
  color: #d0d6e2;
  text-align: center;
}

.xvigo-gallery-close,
.xvigo-gallery-prev,
.xvigo-gallery-next {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(18, 20, 26, 0.92);
  color: #f3f5f8;
  min-height: 40px;
  min-width: 40px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}

.xvigo-gallery-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

body.xvigo-gallery-open {
  overflow: hidden;
  touch-action: none;
}

/* Member direct block helpers */
.member-video .xvigo-member-title {
  margin: 0 0 10px;
  font-family: var(--f-head, 'Space Grotesk', system-ui, sans-serif);
  font-size: 18px;
  color: #eef0f4;
}

/* Mobile safety */
@media (max-width: 720px) {
  .xvigo-unlock-card {
    margin: 14px auto;
    border-radius: 12px;
  }

  .xvigo-unlock-panel {
    inset: auto 10px 10px 10px;
    padding: 12px;
  }

  .xvigo-unlock-title {
    font-size: 18px;
  }

  .xvigo-unlock-copy {
    font-size: 12px;
  }

  .xvigo-unlock-btn {
    min-height: 44px;
    font-size: 13px;
  }

  .xvigo-unlock-card.is-unlocked .xvigo-unlock-panel {
    margin: 10px;
  }

  .xvigo-unlock-media {
    padding: 10px;
  }

  .xvigo-gallery {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .xvigo-gallery-modal {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 10px;
  }

  .xvigo-gallery-image {
    max-width: 96vw;
    max-height: 72dvh;
  }

  .xvigo-gallery-prev,
  .xvigo-gallery-next {
    width: 100%;
    max-width: 220px;
  }
}