/*
 * PLAYA RESERVAS — Billing Cycle Toggle (v1.0.8)
 * ─────────────────────────────────────────────────────────────────
 * Sprint v1.0.8 P0.5 — Toggle Mensual/Anual con badge -20%.
 *
 * Componente compartido usado en:
 *   - landing index.html (pricing section)
 *   - signup/index.html (paso "Plan")
 *   - admin/billing.html (card upgrade)
 *
 * Prefijo `bcycle-*`. Sin Bootstrap, sin deps.
 * Adaptable al theme (data-bs-theme="dark").
 */

.bcycle-toggle {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  position: relative;
  font-family: inherit;
  user-select: none;
  gap: 0;
}

.bcycle-toggle button {
  background: transparent;
  border: none;
  color: #475569;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease-out;
  position: relative;
  white-space: nowrap;
  font-family: inherit;
}

.bcycle-toggle button:hover:not(.is-active) {
  color: #0f172a;
}

.bcycle-toggle button.is-active {
  background: #ffffff;
  color: #4f46e5;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

.bcycle-toggle button:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.bcycle-toggle .bcycle-badge {
  display: inline-block;
  margin-left: 0.45rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Variants */
.bcycle-toggle--sm button {
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
}
.bcycle-toggle--sm .bcycle-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
}

/* Hide-when-empty: si solo hay monthly disponible (yearly NO config),
   la JS añade .is-monthly-only y el toggle se oculta */
.bcycle-toggle.is-monthly-only {
  display: none;
}

/* Helper inline label (opcional) "Facturación:" */
.bcycle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  margin-right: 0.65rem;
}

/* Price update animation: triggered by JS adding .is-flashing */
[data-bcycle-price] {
  transition: opacity 0.15s, transform 0.15s;
}
[data-bcycle-price].is-flashing {
  animation: bcyclePriceFlash 0.4s ease-out;
}
@keyframes bcyclePriceFlash {
  0%   { opacity: 0.3; transform: translateY(-3px); }
  50%  { opacity: 1;   transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* Discount note inside plan card (small "facturado anual" hint) */
.bcycle-yearly-note {
  display: none;
  font-size: 0.72rem;
  color: #059669;
  font-weight: 600;
  margin-top: 0.25rem;
}
[data-bcycle="yearly"] .bcycle-yearly-note { display: block; }

/* Dark theme */
[data-bs-theme="dark"] .bcycle-toggle {
  background: #1e293b;
  border-color: #334155;
}
[data-bs-theme="dark"] .bcycle-toggle button {
  color: #94a3b8;
}
[data-bs-theme="dark"] .bcycle-toggle button:hover:not(.is-active) {
  color: #f1f5f9;
}
[data-bs-theme="dark"] .bcycle-toggle button.is-active {
  background: #0f172a;
  color: #a5b4fc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .bcycle-label { color: #94a3b8; }

/* Print: hide */
@media print {
  .bcycle-toggle { display: none !important; }
}