/**
 * SMM Plugin — formulaire universel multi-réseaux (v4.3.0)
 *
 * Affiché sur les fiches produit SMM non-Instagram (Instagram React a son
 * propre bundle CSS). Barre verticale gauche colorée par réseau pour
 * identification visuelle rapide.
 */

.smmp-form-wrapper {
    margin: 16px 0;
    padding: 14px 16px 14px 18px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-left: 6px solid #999;
    border-radius: 4px;
    box-sizing: border-box;
}

.smmp-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
    font-size: 14px;
}

.smmp-form-required {
    color: #c00;
    margin-left: 2px;
}

.smmp-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}

.smmp-form-input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.smmp-form-input:invalid:not(:placeholder-shown) {
    border-color: #c00;
}

.smmp-form-help {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

/* ── Barre verticale gauche colorée par réseau ──────────────── */

.smmp-form-wrapper[data-network="instagram"]  { border-left-color: #e1306c; }
.smmp-form-wrapper[data-network="youtube"]    { border-left-color: #ff0000; }
.smmp-form-wrapper[data-network="tiktok"]     { border-left-color: #000000; }
.smmp-form-wrapper[data-network="facebook"]   { border-left-color: #1877f2; }
.smmp-form-wrapper[data-network="twitter"]    { border-left-color: #1da1f2; }
.smmp-form-wrapper[data-network="snapchat"]   { border-left-color: #fffc00; }
.smmp-form-wrapper[data-network="spotify"]    { border-left-color: #1db954; }
.smmp-form-wrapper[data-network="soundcloud"] { border-left-color: #ff8800; }
.smmp-form-wrapper[data-network="linkedin"]   { border-left-color: #0a66c2; }
.smmp-form-wrapper[data-network="pinterest"]  { border-left-color: #bd081c; }
.smmp-form-wrapper[data-network="twitch"]     { border-left-color: #9146ff; }
.smmp-form-wrapper[data-network="telegram"]   { border-left-color: #0088cc; }
.smmp-form-wrapper[data-network="generic"]    { border-left-color: #999; }

/* Instagram : dégradé rose/violet natif via border-image */
.smmp-form-wrapper[data-network="instagram"] {
    border-left-color: transparent;
    border-image: linear-gradient(180deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) 1;
    border-image-slice: 1;
    /* Fallback couleur unie si border-image non supporté */
    background: linear-gradient(90deg, rgba(225, 48, 108, 0.04) 0%, transparent 40px), #fafafa;
}

/* TikTok : ombre cyan en accent */
.smmp-form-wrapper[data-network="tiktok"] {
    box-shadow: -2px 0 0 0 #25f4ee inset;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 480px) {
    .smmp-form-wrapper {
        padding: 12px;
    }
    .smmp-form-input {
        font-size: 16px; /* évite le zoom auto iOS */
    }
}