/* Original CSS inspired by the public 21st previews. See BUTTON-REFERENCES.md. */
:root {
  --button-radius: 999px;
  --button-ease: cubic-bezier(.22, 1, .36, 1);
}

/* A glass-like edge keeps the WhatsApp identity and a solid, readable surface. */
.btn.btn-whatsapp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--button-radius);
  background: linear-gradient(180deg, #087e46, #066b3b) !important;
  box-shadow: inset 0 1px 0 #ffffff42, inset 0 -2px 0 #003d284d,
    0 8px 22px #002f241f;
  transition: transform 160ms var(--button-ease), box-shadow 200ms ease;
}
.btn.btn-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, #ffffff0d 49%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 620ms var(--button-ease);
}
.btn.btn-whatsapp > span { position: relative; }
.btn.btn-whatsapp > .wa-icon { flex-shrink: 0; }
.btn.btn-whatsapp:focus-visible {
  outline: 3px solid #ec990c;
  outline-offset: 5px;
}
.btn.btn-whatsapp:focus-visible::before { transform: translateX(120%); }
.btn.btn-whatsapp:active {
  transform: scale(.98);
  box-shadow: inset 0 2px 3px #002f2433, 0 3px 10px #002f241a;
}

/* Interactive Hover: an expanding spot, moving label and a persistent arrow.
   All states retain dark text on a light surface; no duplicate screen-reader copy. */
.offer-choice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 18px 12px 36px;
  gap: 16px;
  border-radius: var(--button-radius);
  background: #edf3fc;
  color: #124baa;
  line-height: 1.5;
  text-align: left;
  transition: box-shadow 180ms ease;
}
.offer-choice::before, .offer-choice::after {
  content: "";
  position: absolute;
  left: 19px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
}
.offer-choice::before { z-index: 1; background: currentColor; }
.offer-choice::after {
  z-index: -1;
  background: #d9e8ff;
  transform: scale(0);
  transition: transform 380ms var(--button-ease);
}
.offer-choice > span { transition: transform 240ms var(--button-ease); }
.offer-choice > svg { width: 18px; height: 18px; flex-basis: 18px; }
.offer-choice:focus-visible { outline: 3px solid #ec990c; outline-offset: 5px; }
.offer-choice:focus-visible::after { transform: scale(100); }
.offer-choice:active { box-shadow: inset 0 0 0 2px #124baa; }
.offer-choice:hover { text-decoration: none; }

.cinema .cinema-more {
  padding: 14px 19px;
  min-height: 54px;
  border-radius: var(--button-radius);
  border: 1px solid #ffffff54;
  background: #08142199;
  color: #f3f7fe;
  gap: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.cinema-more > svg { flex: 0 0 20px; transition: transform 220ms var(--button-ease); }
.cinema .cinema-more:focus-visible { background: #17314e; border-color: #d2e6ff; }

@media (hover: hover) and (pointer: fine) {
  .btn.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff52, inset 0 -2px 0 #003d284d,
      0 12px 26px #002f2433;
  }
  .btn.btn-whatsapp:hover::before { transform: translateX(120%); }
  .btn.btn-whatsapp:hover:active { transform: scale(.98); }
  .offer-choice:hover::after { transform: scale(100); }
  .offer-choice:hover > span { transform: translateX(3px); }
  .offer-choice:hover > svg { transform: translateX(3px); }
  .cinema .cinema-more:hover { background: #17314e; border-color: #d2e6ff; }
  .cinema-more:hover > svg { transform: translateY(3px); }
}
@media (max-width: 760px) {
  .cinema .actions { gap: 12px; }
  .cinema .cinema-more { width: 100%; justify-content: center; min-height: 52px; }
  .offer-choice { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-whatsapp, .btn.btn-whatsapp::before, .offer-choice,
  .offer-choice::after, .offer-choice > span, .offer-choice > svg,
  .cinema .cinema-more, .cinema-more > svg { transition: none; }
  .btn.btn-whatsapp::before { display: none; }
  .btn.btn-whatsapp:hover, .btn.btn-whatsapp:active, .btn.btn-whatsapp:hover:active,
  .offer-choice:hover > span, .offer-choice:hover > svg,
  .cinema-more:hover > svg { transform: none; }
}
@media (forced-colors: active) {
  .btn.btn-whatsapp, .offer-choice, .cinema .cinema-more { border: 1px solid ButtonText !important; }
  .btn.btn-whatsapp::before, .offer-choice::after { display: none; }
}