/*
 * PlayPalabras Account Page — Estilos de la página de producto de planes.
 *
 * v1.2.0 (Enfoque 1) — Toggle Mensual/Anual + modernización del botón.
 *
 * Se carga SOLO en las páginas de producto de los planes (Mensual/Anual),
 * detectadas por PPAP_Product_Plans::current_is_plan().
 *
 * Estrategia defensiva: el theme y WC pintan la página de producto con sus
 * propios estilos. Usamos selectores específicos + !important donde pelean.
 * Todo scoped a .single-product (página de producto individual).
 *
 * Paleta: morado #7c5cfc / cyan #0fa87a / beige #f4f1ee.
 */

.single-product {
  --ppt-purple: #7c5cfc;
  --ppt-cyan: #0fa87a;
  --ppt-bg: #f4f1ee;
  --ppt-bg-soft: #faf6f2;
  --ppt-text: #2d2a26;
  --ppt-text-muted: #6b655d;
  --ppt-text-faint: #9e958a;
  --ppt-border: #e0d8cf;
  --ppt-border-strong: #c8bfb4;
  --ppt-success: #0a5c43;
  --ppt-success-bg: rgba(15, 168, 122, 0.12);
}

/* ============================================================
 * TOGGLE Mensual / Anual
 * ============================================================ */
.single-product .ppap-plan-toggle {
  display: inline-flex !important;
  padding: 4px !important;
  background: #fff !important;
  border: 1px solid var(--ppt-border) !important;
  border-radius: 999px !important;
  gap: 4px !important;
  margin: 4px 0 18px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  box-shadow: 0 1px 6px rgba(45, 42, 38, 0.05);
  flex-wrap: wrap;
}
.single-product .ppap-plan-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ppt-text-muted) !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
  line-height: 1.2 !important;
  position: relative;
}
.single-product .ppap-plan-pill:hover {
  color: var(--ppt-text) !important;
  background: var(--ppt-bg) !important;
}
.single-product .ppap-plan-pill.is-active {
  background: linear-gradient(135deg, var(--ppt-purple), var(--ppt-cyan)) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.single-product .ppap-plan-pill.is-active:hover {
  color: #fff !important;
}
.single-product .ppap-plan-pill-label { font-weight: inherit !important; }
.single-product .ppap-plan-pill-price {
  font-size: 12px !important;
  opacity: 0.85 !important;
  font-weight: 600 !important;
}
.single-product .ppap-plan-pill-tag {
  font-size: 10px !important;
  font-weight: 600 !important;
  background: var(--ppt-success-bg) !important;
  color: var(--ppt-success) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em;
}
.single-product .ppap-plan-pill.is-active .ppap-plan-pill-tag {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* ============================================================
 * MODERNIZAR EL BOTÓN DE COMPRA (single_add_to_cart / button)
 * El default de WC/theme suele ser azul. Lo pasamos a morado/cyan.
 * ============================================================ */
.single-product .single_add_to_cart_button,
.single-product form.cart button.button,
.single-product .product .button.alt,
.single-product .wc-forward.button {
  background: linear-gradient(135deg, var(--ppt-purple), var(--ppt-cyan)) !important;
  background-color: var(--ppt-purple) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  box-shadow: 0 4px 20px rgba(124, 92, 252, 0.25) !important;
  transition: transform .15s, box-shadow .2s, filter .2s !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
  height: auto !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product form.cart button.button:hover,
.single-product .product .button.alt:hover,
.single-product .wc-forward.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  color: #fff !important;
  box-shadow: 0 6px 28px rgba(124, 92, 252, 0.32) !important;
}

/* Precio del producto en morado-neutro (no azul WC) */
.single-product .price,
.single-product .price .woocommerce-Price-amount {
  color: var(--ppt-text) !important;
}

/* "Ya tienes este producto en tu carrito" + botón finalizar:
   también lo pasamos a la paleta. */
.single-product .woocommerce-message,
.single-product .wc-forward {
  border-radius: 8px;
}
.single-product .woocommerce-message {
  border-top-color: var(--ppt-cyan) !important;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 480px) {
  .single-product .ppap-plan-toggle {
    width: 100%;
    justify-content: center;
  }
  .single-product .ppap-plan-pill {
    flex: 1 1 auto;
    justify-content: center;
    padding: 9px 12px !important;
  }
  .single-product .single_add_to_cart_button,
  .single-product form.cart button.button {
    width: 100% !important;
  }
}