/* ========================================
   STEP 5 - CHANNEL SELECTION
   Styles pour la page de selection des canaux marketing
   Source: design system _step8-config.css
   ======================================== */

/* Asset Card Modern */
.asset-card-modern {
    position: relative;
    /* Utilise --theme-card-bg directement plutot que --bg-card car ce dernier
       reste fige a #ffffff au niveau :root (bug d'heritage CSS variables :
       --theme-card-bg n'est defini que sur body.theme-*). Resultat : en dark
       on a maintenant un fond bordeaux/marine semi-transparent au lieu d'un
       fond blanc dur qui detonnait avec le theme. */
    background: var(--theme-card-bg, #ffffff);
    border: 2px solid transparent;
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
}

.asset-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 48, 128, 0.15);
    border-color: var(--color-primary);
}

.asset-card-modern.active {
    background: linear-gradient(135deg, rgba(0, 48, 128, 0.03), rgba(57, 191, 239, 0.03));
    border-color: var(--color-primary);
}

.asset-card-badge {
    font-size: 0.65rem;
}

.asset-card-modern .asset-card-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
    /* --theme-text-primary resout #ffffff en dark et #1a1a1a en light. Le
       fond de la card etant maintenant lui-meme thematique (via
       --theme-card-bg sur .asset-card-modern), pas besoin d'override
       supplementaire pour .active. */
    --bs-heading-color: var(--theme-text-primary, #1a1a1a);
    color: var(--theme-text-primary, #1a1a1a);
}

.asset-card-modern .text-secondary {
    color: var(--text-secondary, #6b6f80) !important;
}

/* Asset Icon Wrappers */
.asset-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.asset-icon-linkedin { background: linear-gradient(135deg, #0077B5, #00A0DC); }
.asset-icon-google { background: linear-gradient(135deg, #4285F4, #34A853); }
.asset-icon-bing { background: linear-gradient(135deg, #008373, #00A884); }
.asset-icon-facebook { background: linear-gradient(135deg, #1877F2, #4267B2); }
.asset-icon-instagram { background: linear-gradient(135deg, #E1306C, #FD1D1D, #F77737); }
.asset-icon-iab { background: linear-gradient(135deg, #6C63FF, #4A90E2); }
.asset-icon-mail { background: linear-gradient(135deg, #EA4335, #FBBC04); }
.asset-icon-sms { background: linear-gradient(135deg, #25D366, #128C7E); }
.asset-icon-article { background: linear-gradient(135deg, #FF6B6B, #FFE66D); }
.asset-icon-courrier { background: linear-gradient(135deg, #8E44AD, #9B59B6); }

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    transition: background 0.3s;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch.active {
    background: var(--color-primary);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active::after {
    transform: translateX(24px);
}

/* Task #88 : toggle verrouillé (ex: Instagram qui exige une image côté API Meta).
   Visuellement ON, mais non-interactif pour l'utilisateur. */
.toggle-switch.locked {
    cursor: not-allowed;
    opacity: 0.75;
    filter: saturate(0.85);
}

.image-required-badge {
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: help;
}

.image-required-hint {
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #6b6f80);
}

.image-required-hint i {
    color: var(--bs-warning, #f59e0b);
    margin-right: 0.25rem;
}

/* Stepper Control (variations +/-) */
.stepper-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.stepper-control-inactive {
    opacity: 0.3;
    pointer-events: none;
}

.asset-card-modern .stepper-btn {
    width: 32px;
    height: 32px;
    /* --border-color n'existe pas (typo), on prend --color-primary pour avoir
       un cercle toujours visible quel que soit le thème et l'etat de la card
       (selectionnee bordeaux/marine ou non selectionnee fond blanc). Fond
       transparent + icone en color-primary -> toujours visible. */
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.asset-card-modern .stepper-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.stepper-value {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
    color: var(--color-primary);
}

/* Image Style Select */
.image-style-select {
    margin-top: 0.5rem;
}

/*
 * Task #120 : bloc "Generer des images" (toggle + badge OBLIGATOIRE + hint + select)
 * grise et non-cliquable tant que la card canal n'est pas activee.
 * Le badge "OBLIGATOIRE" et le toggle pre-actif reapparaissent naturellement
 * quand l'utilisateur active la card via le toggle principal.
 */
.asset-card-modern:not(.active) .channel-image-config {
    opacity: 0.4;
    pointer-events: none;
}

/* Estimation Card */
.estimation-card {
    background: linear-gradient(135deg, rgba(0, 48, 128, 0.05), rgba(57, 191, 239, 0.05));
    border: 2px solid var(--color-primary);
}

.estimation-icon-circle {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.estimation-badge {
    font-size: 0.75rem;
}

/* ========================================
   MODAL "SOURCE DES CONTACTS"
   Affichée quand un canal CFI (sms/email/postal_mail) est activé.
   Design source : design system /campaign_generation/step5_select_light.html
   ======================================== */

/* Petit badge icone du modal-header (à gauche du titre) */
.form-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bs-primary, #003080) 0%, var(--bs-info, #0d6efd) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Card horizontale "source de contact" : icone gauche + texte centre + chevron droite */
.contact-source-card {
    background: #fff;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.contact-source-card-active {
    background: rgba(0, 48, 128, 0.08);
    border-color: var(--bs-primary, #003080);
}

.contact-source-card-active:hover,
.contact-source-card-active:focus {
    background: rgba(0, 48, 128, 0.12);
    box-shadow: 0 4px 12px rgba(0, 48, 128, 0.15);
    transform: translateY(-2px);
    outline: none;
}

.contact-source-card-disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.contact-source-card-disabled:hover {
    /* pas de hover effect pour les disabled */
    background: #fff;
    box-shadow: none;
    transform: none;
}

/* Icone décorative à gauche de chaque card (64x64, fond translucide) */
.contact-source-icon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}