/* Fiche publique d'une formation : compléments communs à la page classique et aux gabarits.
   Chargé par frontend/course/partial/partial-details-assets.blade.php. */

/* Leçon verrouillée : un titre, pas un lien */
.play-list-item-locked { cursor: default; }
.play-list-item-locked p { margin: 0; }
.curriculum-static-header { cursor: default; box-shadow: none; }
.curriculum-static-header::after { display: none; }
.curriculum-lesson-meta { white-space: nowrap; }

/* Bouton principal : pulsation légère, même sans survol (demande Bao, priorité 4).
   Bornée à 8 cycles (~22 s) puis immobile : attirer l'œil à l'arrivée, sans le solliciter en boucle. */
.course-cta-pulse { animation: course-cta-pulse 2.8s ease-in-out 8; }
@keyframes course-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    45%      { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.07); }
}
.course-cta-pulse:hover,
.course-cta-pulse:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .course-cta-pulse { animation: none; }
}

/* Bloc marketing GrapesJS sous la fiche */
.course-marketing-block { clear: both; }

/* Paiement en un clic, plans d'abonnement, onglets de mode de paiement, en-tête de la modale panier.
   Déplacés depuis course-details.blade.php pour servir aussi les gabarits. */
/* ---- One-click payment ---- */
.one-click-payment-section { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.saved-card-display { display: flex; align-items: center; padding: 16px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; border-radius: 10px; margin-bottom: 16px; }
.card-brand-icon { width: 55px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; color: white; font-weight: bold; font-size: 13px; margin-right: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.card-brand-icon.visa { background: linear-gradient(135deg, #1a1f71 0%, #0d47a1 100%); }
.card-brand-icon.mastercard { background: linear-gradient(135deg, #eb001b 0%, #f79e1b 100%); }
.card-brand-icon.amex { background: linear-gradient(135deg, #006fcf 0%, #00a3e0 100%); }
.card-details { flex: 1; }
.card-number { font-size: 16px; font-weight: 600; color: #2c3e50; letter-spacing: 1px; margin-bottom: 4px; }
.card-expiry { font-size: 13px; color: #6c757d; display: flex; align-items: center; gap: 4px; }
.fast-payment-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #7c5d00; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 8px; }
.one-click-btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; }
.one-click-btn.loading { pointer-events: none; opacity: 0.7; }
.one-click-btn.loading::after { content: ''; width: 16px; height: 16px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spinner 0.6s linear infinite; margin-left: 10px; }
@keyframes spinner { to { transform: rotate(360deg); } }

/* ---- Subscription plans ---- */
.subscription-plan-item { transition: border-color 0.2s, background 0.2s; }
.subscription-plan-item:hover { border-color: #7c4dff !important; }

.modal-header-custom {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color) 100%);
    padding: 16px 20px;
    border-radius: 8px 8px 0 0;
}

/* ---- Payment mode tabs (paid_or_subscription) ---- */
.payment-mode-tabs .nav-link {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--theme-color);
    background: #f5f5f5;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    transition: all 0.15s;
}
.payment-mode-tabs .nav-link.active {
    background: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
}

/* Bandeau d'en-tête de la fiche (image de fond ou dégradé du thème), déplacé depuis course-details.blade.php :
   il sert désormais la page classique et les gabarits. */
/* ---- Header background ---- */
.course-single-page-header { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 400px; }
.main-menu-area { position: relative; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,40,30,0.7) 50%, rgba(0,0,0,0.6) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.course-single-banner-content { position: relative; z-index: 2; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
@media (max-width: 768px) {
    .course-single-page-header { background-attachment: scroll; min-height: 300px; }
    .main-menu-area { background: rgba(0,0,0,0.9); }
}