/* ============================================================
   BIANCA — Stylesheet
   Mobile-first. Black canvas + crimson neon + glassmorphism.
   ============================================================ */

/* === Base reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

/* Tailwind helpers extras */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

img { display: block; max-width: 100%; }

/* ============================================================
   ATMOSPHERIC BACKGROUND
   ============================================================ */

.bg-vignette {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 26, 26, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 26, 26, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.65) 90%);
}

.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   SCREEN MANAGEMENT
   ============================================================ */

.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen::-webkit-scrollbar { display: none; }
.screen { scrollbar-width: none; }

.screen.active {
  display: flex;
  animation: screenIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ MODAL MODE — popup REAL com chat MUITO visivel atras ============
   .screen.as-modal: backdrop escuro leve (sem blur), conteúdo é card menor
   pra cliente ver chat ao redor + acima + abaixo. */
.screen.as-modal.active {
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);  /* mais leve, chat aparece através */
  /* SEM blur — chat visível nítido atras */
  animation: modalFadeIn 280ms ease-out;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Card interno do modal — menor, mais "popup" mesmo */
.screen.as-modal.active > div:first-child {
  max-width: 360px;
  max-height: 78vh;
  width: calc(100% - 40px);
  margin: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #0a0303 0%, #050202 100%);
  border: 1px solid rgba(255, 26, 26, 0.35);
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.95), 0 0 80px rgba(255, 26, 26, 0.25);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  animation: modalCardIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 0 !important;
}

.screen.as-modal.active > div:first-child::-webkit-scrollbar { display: none; }
.screen.as-modal.active > div:first-child { scrollbar-width: none; }

/* Botão back STICKY no topo do popup — fica visível enquanto cliente rola */
.screen.as-modal.active button[data-back] {
  position: sticky;
  top: 12px;
  left: 12px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Garante que fique alinhado mesmo se layout do parent for flex */
  align-self: flex-start;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes screenIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ============================================================
   GLASS
   ============================================================ */

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-red {
  background: linear-gradient(135deg, rgba(255, 26, 26, 0.13), rgba(255, 26, 26, 0.04) 70%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 26, 26, 0.22);
}

/* ============================================================
   GLOW
   ============================================================ */

.glow-red {
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.3),
    0 0 24px rgba(255, 26, 26, 0.32),
    0 0 48px rgba(255, 26, 26, 0.16);
}

.glow-red-strong {
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.5),
    0 0 32px rgba(255, 26, 26, 0.55),
    0 0 64px rgba(255, 26, 26, 0.28),
    0 0 120px rgba(255, 26, 26, 0.12);
}

.text-glow-red {
  text-shadow:
    0 0 16px rgba(255, 26, 26, 0.55),
    0 0 32px rgba(255, 26, 26, 0.28);
}

/* ============================================================
   CTA PULSE
   ============================================================ */

@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 26, 26, 0.4),
      0 0 24px rgba(255, 26, 26, 0.4),
      0 0 48px rgba(255, 26, 26, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 26, 26, 0.7),
      0 0 40px rgba(255, 26, 26, 0.7),
      0 0 80px rgba(255, 26, 26, 0.35);
    transform: scale(1.012);
  }
}

.cta-pulse {
  animation: ctaPulse 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* ============================================================
   THUMBNAIL PLACEHOLDER GRADIENTS
   (substituir por <img> da criadora em produção)
   ============================================================ */

.thumb {
  position: relative;
  transition: transform 200ms ease;
}

.thumb:active { transform: scale(0.96); }

.thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

.thumb-1::before { background: linear-gradient(135deg, #4a0a0a, #1a0303 80%); }
.thumb-2::before { background: linear-gradient(135deg, #6b1a3a, #1a0814 80%); }
.thumb-3::before { background: linear-gradient(135deg, #3a0a0a, #0a0202 80%); }
.thumb-4::before { background: linear-gradient(135deg, #5a1430, #0d0307 80%); }
.thumb-5::before { background: linear-gradient(135deg, #7a2020, #1f0606 80%); }
.thumb-6::before { background: linear-gradient(135deg, #4a1428, #15060d 80%); }

/* Subtle inner red glow on thumbs */
.thumb {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 26, 26, 0.15), transparent 60%),
    #150505;
}

/* ============================================================
   CHAT BUBBLES
   ============================================================ */

.msg-row {
  display: flex;
  width: 100%;
  animation: msgIn 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.msg-row.right { justify-content: flex-end; }
.msg-row.left  { justify-content: flex-start; }

.msg-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}

.msg-bubble.from-her {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom-left-radius: 6px;
  color: rgba(255, 255, 255, 0.95);
}

.msg-bubble.from-me {
  background: linear-gradient(135deg, #ff1a1a, #cc0000);
  border-bottom-right-radius: 6px;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 26, 26, 0.3);
}

.msg-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin: 2px 4px 0 4px;
  text-align: right;
}

@keyframes msgIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Typing dots === */
.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: typingDot 1.3s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ============================================================
   SEARCH DOTS (age gate — suspense)
   ============================================================ */

.search-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding-top: 6px;
}

.search-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 0 0 10px rgba(255, 26, 26, 0.85);
  animation: searchDot 1.4s ease-in-out infinite;
}

.search-dots span:nth-child(2) { animation-delay: 0.2s; }
.search-dots span:nth-child(3) { animation-delay: 0.4s; }

.search-dots-sm span {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  background: #fff;
}

@keyframes searchDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0) scale(0.85); }
  30%           { opacity: 1;    transform: translateY(-3px) scale(1); }
}

/* ============================================================
   CUSTOM DROPDOWN (state picker)
   ============================================================ */

.ds-select { position: relative; }

.ds-select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  text-align: left;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.ds-select-trigger:hover {
  border-color: rgba(255, 26, 26, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.ds-select.open .ds-select-trigger {
  border-color: rgba(255, 26, 26, 0.6);
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.3),
    0 0 18px rgba(255, 26, 26, 0.15);
}

.ds-select-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-select-value.placeholder { color: rgba(255, 255, 255, 0.32); }

.ds-select-uf-badge {
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 26, 26, 0.15);
  border: 1px solid rgba(255, 26, 26, 0.35);
  color: #ff4444;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.ds-select-chevron {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
  flex-shrink: 0;
}

.ds-select.open .ds-select-chevron {
  transform: rotate(180deg);
  color: #ff1a1a;
}

.ds-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(40, 8, 8, 0.98), rgba(12, 4, 4, 0.99)),
    #0a0303;
  border: 1px solid rgba(255, 26, 26, 0.32);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(255, 26, 26, 0.22),
    inset 0 1px 0 rgba(255, 26, 26, 0.08);
  overflow: hidden;
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-select.open .ds-select-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ds-select-options-wrap {
  max-height: 248px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.ds-select-options-wrap::-webkit-scrollbar { width: 5px; }
.ds-select-options-wrap::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.ds-select-options-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 26, 26, 0.55), rgba(255, 26, 26, 0.25));
  border-radius: 3px;
}
.ds-select-options-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 26, 26, 0.8), rgba(255, 26, 26, 0.4));
}
.ds-select-options-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 26, 26, 0.45) transparent;
}

.ds-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ds-select-option > span:first-child { flex: 1; }

.ds-select-option .ds-select-uf {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 150ms ease;
}

.ds-select-option:hover,
.ds-select-option.active {
  background: linear-gradient(90deg, rgba(255, 26, 26, 0.18), rgba(255, 26, 26, 0.06));
  color: #fff;
}

.ds-select-option:hover .ds-select-uf,
.ds-select-option.active .ds-select-uf {
  background: rgba(255, 26, 26, 0.2);
  color: #ff6666;
}

.ds-select-option.selected {
  background: linear-gradient(90deg, rgba(255, 26, 26, 0.22), rgba(255, 26, 26, 0.06));
  color: #fff;
  box-shadow: inset 2px 0 0 #ff1a1a;
}

.ds-select-option.selected .ds-select-uf {
  background: #ff1a1a;
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 26, 26, 0.7);
}

/* Disabled state */
.ds-select[data-disabled="true"] .ds-select-trigger {
  cursor: not-allowed;
  opacity: 0.6;
}
.ds-select[data-disabled="true"] .ds-select-trigger:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

/* Loading state — hide chevron, show pulsing dots */
.ds-select[data-loading="true"] .ds-select-chevron { display: none; }
.ds-select[data-loading="true"] .ds-select-loader {
  display: inline-flex;
  align-items: center;
}
.ds-select[data-loading="true"] .ds-select-loader.hidden { display: inline-flex; }
.ds-select-loader { display: none; }

/* Search bar inside panel */
.ds-select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 26, 26, 0.18);
  background: rgba(255, 26, 26, 0.04);
}

.ds-select-search-icon {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.ds-select-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  padding: 4px 0;
  min-width: 0;
}

.ds-select-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Empty / loading / error message inside list */
.ds-select-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  list-style: none;
}

/* ============================================================
   PLAN RADIO STATES
   ============================================================ */

.plan-card { transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1); }

.plan-option input:checked ~ .plan-card {
  background: linear-gradient(135deg, rgba(255, 26, 26, 0.15), rgba(255, 26, 26, 0.04));
  border-color: rgba(255, 26, 26, 0.6);
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.4),
    0 0 28px rgba(255, 26, 26, 0.3),
    0 0 56px rgba(255, 26, 26, 0.12);
  transform: translateY(-1px);
}

.plan-radio { transition: all 200ms ease; }

.plan-option input:checked ~ .plan-card .plan-radio {
  border-color: #ff1a1a;
  background: #ff1a1a;
  box-shadow: 0 0 12px rgba(255, 26, 26, 0.8);
}

.plan-option input:checked ~ .plan-card .plan-radio::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
}

/* ============================================================
   LIVE TOAST
   ============================================================ */

#live-toast {
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(20px);
  opacity: 0;
}

#live-toast.show {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   UTILS
   ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 26, 26, 0.18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

.font-display {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

/* Avoid pull-to-refresh interference on iOS */
html { overscroll-behavior-y: none; }

/* ============================================================
   SEARCH SCREEN — radar + cycling profile
   ============================================================ */

@keyframes radarRing {
  0%   { transform: scale(0.85); opacity: 0; }
  20%  { opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}

.radar-ring {
  animation: radarRing 2.2s ease-out infinite;
}

@keyframes searchAvatarPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.search-avatar { animation: searchAvatarPulse 2.6s ease-in-out infinite; }

@keyframes searchNameFade {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); }
}

#search-name.flash,
#search-distance.flash,
#search-photo.flash {
  animation: searchNameFade 220ms ease-out;
}

/* ============================================================
   MATCH SCREEN — staggered reveal
   ============================================================ */

@keyframes matchReveal {
  0%   { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.screen.active [class*="match-reveal-"] {
  opacity: 0;
  animation: matchReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screen.active .match-reveal-1 { animation-delay: 0.05s; }
.screen.active .match-reveal-2 { animation-delay: 0.35s; }
.screen.active .match-reveal-3 { animation-delay: 0.75s; }
.screen.active .match-reveal-4 { animation-delay: 1.05s; }
.screen.active .match-reveal-5 { animation-delay: 1.35s; }

/* ============================================================
   CHOICE CARDS (escolha de mulheres na tela match)
   ============================================================ */

.choice-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 26, 26, 0.18);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 250ms ease, border-color 200ms ease;
  text-align: left;
  display: block;
  width: 100%;
  padding: 0;
  font-family: inherit;
  color: inherit;
  animation: choiceCardIn 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.choice-card:active { transform: scale(0.97); }
.choice-card:hover {
  border-color: rgba(255, 26, 26, 0.55);
  box-shadow: 0 0 24px rgba(255, 26, 26, 0.25);
}

@keyframes choiceCardIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.choice-card:nth-child(1) { animation-delay: 0.05s; }
.choice-card:nth-child(2) { animation-delay: 0.10s; }
.choice-card:nth-child(3) { animation-delay: 0.15s; }
.choice-card:nth-child(4) { animation-delay: 0.20s; }
.choice-card:nth-child(5) { animation-delay: 0.25s; }
.choice-card:nth-child(6) { animation-delay: 0.30s; }
.choice-card:nth-child(7) { animation-delay: 0.35s; }
.choice-card:nth-child(8) { animation-delay: 0.40s; }

.choice-card-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0808, #0a0303);
}

.choice-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.choice-card-online {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.04em;
}

.choice-card-online span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
  animation: choiceDot 1.6s ease-in-out infinite;
}

@keyframes choiceDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.choice-card-info {
  padding: 9px 11px 12px;
}

.choice-card-name {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.05;
}

.choice-card-distance {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.choice-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 6px;
  line-height: 1.35;
  font-style: italic;
  min-height: 28px;
}

/* ============================================================
   LIVE CHAT — overrides .screen overflow
   ============================================================ */

#screen-livechat.screen {
  overflow: hidden;
}

#screen-livechat .msg-bubble {
  font-size: 14.5px;
  max-width: 100%;
  padding: 10px 14px;
}

#screen-livechat .msg-row > div {
  max-width: 85%;
}

/* Avatar pequeno antes de cada mensagem dela (estilo WhatsApp em grupo) */
#screen-livechat .msg-row.left {
  align-items: flex-start;
  gap: 6px;
}

#screen-livechat .msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
  background: linear-gradient(135deg, #4a0a0a, #1a0303);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 200ms ease;
}

#screen-livechat .msg-avatar:hover,
#livechat-photo:hover,
#match-photo:hover {
  box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.5);
}

#screen-livechat .msg-avatar:active,
#livechat-photo:active,
#match-photo:active {
  transform: scale(0.92);
}

#livechat-photo, #match-photo { cursor: pointer; }

/* ============================================================
   PHOTO LIGHTBOX
   ============================================================ */

#photo-lightbox:not(.hidden) {
  animation: lightboxIn 250ms ease-out;
}

@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#lightbox-image {
  animation: lightboxImgIn 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lightboxImgIn {
  from { opacity: 0; transform: scale(0.85); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* ============================================================
   RECORDING INDICATOR (bubble that shows while bot is "recording")
   ============================================================ */

.msg-bubble.recording-msg {
  padding: 8px 12px;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.rec-mic {
  color: #ff1a1a;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 26, 26, 0.6));
  animation: recMicPulse 1s ease-in-out infinite;
}

@keyframes recMicPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.55; }
}

.rec-bars {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  height: 16px;
  min-width: 60px;
}

.rec-bars span {
  display: block;
  width: 2.5px;
  background: #ff1a1a;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(255, 26, 26, 0.5);
  animation: recBar 0.9s ease-in-out infinite;
}

.rec-bars span:nth-child(1) { animation-delay: 0s;    }
.rec-bars span:nth-child(2) { animation-delay: 0.1s;  }
.rec-bars span:nth-child(3) { animation-delay: 0.2s;  }
.rec-bars span:nth-child(4) { animation-delay: 0.3s;  }
.rec-bars span:nth-child(5) { animation-delay: 0.4s;  }
.rec-bars span:nth-child(6) { animation-delay: 0.5s;  }
.rec-bars span:nth-child(7) { animation-delay: 0.6s;  }
.rec-bars span:nth-child(8) { animation-delay: 0.7s;  }

@keyframes recBar {
  0%, 100% { height: 25%; opacity: 0.45; }
  50%      { height: 100%; opacity: 1; }
}

.rec-time {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   SYSTEM MESSAGE (centro, tipo aviso do app)
   ============================================================ */

.msg-row.center {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
  animation: msgIn 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.msg-system {
  /* Single line — não quebra em mobile. Tudo cabe na largura.
     Em telas <380px, fonte menor pra garantir que cabe. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 14px;
  background: rgba(255, 26, 26, 0.08);
  border: 1px solid rgba(255, 26, 26, 0.18);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  max-width: 96%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-system > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.msg-system svg {
  color: rgba(255, 26, 26, 0.85);
  flex-shrink: 0;
}

.msg-system .badge {
  font-style: normal;
  font-weight: 700;
  color: #ff4444;
  letter-spacing: 0.03em;
}

/* Mobile: ainda menor pra caber numa linha mesmo em telas estreitas */
@media (max-width: 420px) {
  .msg-system {
    font-size: 9.5px;
    padding: 5px 10px;
    gap: 5px;
    max-width: 98%;
  }
  .msg-system .badge { letter-spacing: 0.02em; }
}
@media (max-width: 360px) {
  .msg-system {
    font-size: 8.5px;
    padding: 4px 8px;
  }
  .msg-system svg { width: 10px; height: 10px; }
}

/* Tag "modo invisível" no rodapé das msgs do usuário */
.msg-time .anon-tag {
  color: rgba(255, 26, 26, 0.75);
  font-weight: 500;
  font-style: italic;
}

/* Reactions picker (long-press na msg dela mostra emojis) */
.msg-bubble.from-her { position: relative; }
.reaction-picker {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 8px;
  display: flex;
  gap: 4px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 6px;
  backdrop-filter: blur(8px);
  z-index: 50;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.reaction-picker.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.reaction-picker button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 999px;
  transition: transform 0.15s, background 0.15s;
}
.reaction-picker button:hover, .reaction-picker button:active {
  transform: scale(1.3);
  background: rgba(255, 255, 255, 0.08);
}

/* Reaction badge — emoji que aparece colado na msg após reagir */
.reaction-badge {
  position: absolute;
  bottom: -8px;
  right: 4px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  z-index: 5;
  animation: reactionPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reactionPop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Read receipts ✓✓ — cinza (não lida) → azul (lida) */
/* Comportamento WhatsApp: enviada/entregue = cinza, lida = azul */
.msg-checks {
  display: inline-block;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  letter-spacing: -1px;
  margin: 0 1px;
  transition: color 0.4s ease;
}
.msg-checks.read {
  color: #4fc3f7; /* azul WhatsApp */
}

/* ============================================================
   IMAGE MESSAGE BUBBLES (foto que ela manda no chat)
   ============================================================ */

.msg-bubble.chat-image-bubble {
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  overflow: hidden;
  max-width: 220px;
  position: relative;
}

.chat-image-locked-wrapper {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.chat-image {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  border-radius: 10px;
  transition: transform 150ms ease;
}

.chat-image.locked {
  /* sem blur — a foto vem do jeito que está, só com o overlay de texto */
  pointer-events: none;
}

/* Foto TODA PRETA — versão nagging que esconde tudo (cliente fica curioso) */
.chat-image-black-wrapper {
  width: 210px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 26, 26, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(255, 26, 26, 0.04) 0%, transparent 55%),
    #000;
  border-radius: 10px;
  position: relative;
}

.chat-image-lock-overlay-strong {
  background: rgba(0, 0, 0, 0.65);
}

.chat-image-locked-wrapper:hover .chat-image-lock-overlay-strong {
  background: rgba(0, 0, 0, 0.75);
}

/* Vídeo TODO PRETO — formato vertical (TikTok/Reels) com play + duração */
.chat-video-black-wrapper {
  width: 180px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 26, 26, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 26, 26, 0.05) 0%, transparent 50%),
    #000;
  border-radius: 10px;
  position: relative;
}

/* Play button com cadeado sobreposto */
.chat-video-play-with-lock {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 26, 26, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow:
    0 0 0 3px rgba(255, 26, 26, 0.25),
    0 0 20px rgba(255, 26, 26, 0.6);
  animation: lockPulse 2.2s ease-in-out infinite;
}

.chat-video-play-arrow {
  margin-left: 3px; /* compensa o triangulo pra centralizar visualmente */
}

/* Badge de cadeado no canto do play button (overlay) */
.chat-video-lock-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(255, 26, 26, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Duração do vídeo (canto inferior direito, igual WhatsApp) */
.chat-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  z-index: 4;
  pointer-events: none;
}

.chat-image-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 8px;
  text-align: center;
  transition: background 200ms ease;
}

.chat-image-locked-wrapper:hover .chat-image-lock-overlay {
  background: rgba(0, 0, 0, 0.45);
}

.chat-image-locked-wrapper:active { transform: scale(0.97); }

.chat-image-lock-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 26, 26, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow:
    0 0 0 2px rgba(255, 26, 26, 0.25),
    0 0 16px rgba(255, 26, 26, 0.55);
  animation: lockPulse 2.2s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.2),  0 0 14px rgba(255, 26, 26, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 26, 26, 0.35), 0 0 24px rgba(255, 26, 26, 0.8); }
}

.chat-image-lock-title {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 1;
}

.chat-image-lock-subtitle {
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  padding: 0 6px;
}

/* ============================================================
   AUDIO MESSAGE BUBBLES
   ============================================================ */

.msg-bubble.audio-msg {
  padding: 8px 10px;
  min-width: 210px;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 9px;
}

.audio-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff1a1a;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(255, 26, 26, 0.45);
  transition: transform 100ms ease, box-shadow 200ms ease;
  padding: 0;
}

.audio-play-btn:hover { box-shadow: 0 0 18px rgba(255, 26, 26, 0.7); }
.audio-play-btn:active { transform: scale(0.92); }

.audio-waveline {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
  min-width: 90px;
}

.audio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ff1a1a);
  width: 0%;
  box-shadow: 0 0 6px rgba(255, 26, 26, 0.55);
  transition: width 100ms linear;
}

.audio-duration {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ============================================================
   PAYWALL OVERLAY (livechat lock)
   ============================================================ */

#livechat-paywall:not(.hidden) {
  animation: paywallFadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes paywallFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.paywall-card {
  animation: paywallCardIn 550ms cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

@keyframes paywallCardIn {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ============================================================
   DOWNSELL POPUP (oferta secreta R$ 9,90 apos fechar paywall)
   ============================================================ */

#downsell-popup:not(.hidden) {
  animation: downsellBackdropIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes downsellBackdropIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.downsell-card {
  animation: downsellCardIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.5),
    0 25px 70px -15px rgba(0, 0, 0, 0.9),
    0 0 90px -5px rgba(255, 26, 26, 0.6);
}

@keyframes downsellCardIn {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(28px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* ============================================================
   PROFILE PREVIEW MODAL (clique no card antes de conversar)
   ============================================================ */

#profile-modal:not(.hidden) {
  animation: profileModalBackdropIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes profileModalBackdropIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.profile-modal-card.profile-modal-enter {
  animation: profileModalCardIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes profileModalCardIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(24px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Card no modal — glow vermelho mais intenso pra puxar atenção */
.profile-modal-card {
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.2),
    0 25px 60px -15px rgba(0, 0, 0, 0.85),
    0 0 80px -10px rgba(255, 26, 26, 0.35);
}

/* ============================================================
   MATCH POPUP ("X mandou uma mensagem")
   ============================================================ */

#match-popup.match-popup-show {
  animation: matchPopupIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

#match-popup.match-popup-out {
  animation: matchPopupOut 280ms ease-in forwards;
}

@keyframes matchPopupIn {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  60% {
    transform: translateY(4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes matchPopupOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* Badge "te chamou pra conversar" abaixo da descrição do card */
.choice-card-called {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 26, 26, 0.18);
  font-size: 10.5px;
  font-weight: 600;
  color: #ff4a4a;
  letter-spacing: 0.01em;
  animation: choiceCardCalledIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-card-called .called-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 0 0 8px rgba(255, 26, 26, 0.8);
  animation: calledDotPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes choiceCardCalledIn {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes calledDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* Card com mensagem nova fica com glow vermelho leve */
.choice-card.has-called {
  border-color: rgba(255, 26, 26, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.15),
    0 0 25px -8px rgba(255, 26, 26, 0.45);
}

/* ============================================================
   SUCCESS SCREEN — entregavel pos-pagamento (grupos Telegram)
   ============================================================ */

.success-check-pop {
  animation: successCheckPop 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes successCheckPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
  }
  60% {
    transform: scale(1.15) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Card de cada grupo Telegram — hover + tap states */
.telegram-group-card {
  position: relative;
  overflow: hidden;
  transition: border-color 200ms ease, transform 100ms ease, box-shadow 200ms ease;
}

.telegram-group-card:hover {
  border-color: rgba(255, 26, 26, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(255, 26, 26, 0.15),
    0 8px 20px -8px rgba(255, 26, 26, 0.3);
}

.telegram-group-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -100%;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 26, 26, 0.08),
    transparent
  );
  transition: left 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.telegram-group-card:hover::before {
  left: 200%;
}

/* Anima entrada de cada card com stagger */
#telegram-groups .telegram-group-card {
  animation: telegramCardIn 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#telegram-groups .telegram-group-card:nth-child(1) { animation-delay: 0.1s; }
#telegram-groups .telegram-group-card:nth-child(2) { animation-delay: 0.15s; }
#telegram-groups .telegram-group-card:nth-child(3) { animation-delay: 0.2s; }
#telegram-groups .telegram-group-card:nth-child(4) { animation-delay: 0.25s; }
#telegram-groups .telegram-group-card:nth-child(5) { animation-delay: 0.3s; }
#telegram-groups .telegram-group-card:nth-child(6) { animation-delay: 0.35s; }
#telegram-groups .telegram-group-card:nth-child(n+7) { animation-delay: 0.4s; }

@keyframes telegramCardIn {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   LOCKED CTA BAR — substitui o input do chat quando bloqueado
   ============================================================ */

.locked-cta-bar {
  /* display controlado por .hidden (none) vs :not(.hidden) (flex). NÃO pôr
     display:flex aqui — vence o .hidden e a barra fica SEMPRE visível,
     bloqueando o chat pra todo mundo. */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ff1a1a 0%, #c4001f 100%);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 -2px 12px rgba(255, 26, 26, 0.4),
    0 0 30px -5px rgba(255, 26, 26, 0.5);
  animation: lockedCtaPulse 1.8s ease-in-out infinite;
  overflow: hidden;
}

.locked-cta-bar:not(.hidden) {
  display: flex !important;
}

.locked-cta-bar::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -150%;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: lockedCtaShimmer 2.4s ease-in-out infinite;
}

.locked-cta-bar:active {
  transform: scale(0.98);
}

.locked-cta-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.locked-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.locked-cta-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.locked-cta-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 2px;
}

@keyframes lockedCtaPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 -2px 12px rgba(255, 26, 26, 0.4),
      0 0 30px -5px rgba(255, 26, 26, 0.5);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 -2px 16px rgba(255, 26, 26, 0.6),
      0 0 50px -5px rgba(255, 26, 26, 0.85);
  }
}

@keyframes lockedCtaShimmer {
  0%   { left: -150%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}