/* Modulo Forms — Frontend CSS v1.3 */

:root {
    --mf-color-primary:   #2c3e50;
    --mf-color-primary-h: #1a252f;
    --mf-color-btn-text:  #ffffff;
    --mf-color-border:    #dddddd;
    --mf-color-bg-form:   #ffffff;
    --mf-color-success:   #27ae60;
    --mf-color-error:     #e74c3c;
    --mf-color-info:      #2980b9;
    --mf-radius:          6px;
}

.mf-form { color: #333; max-width: 680px; }
.mf-form__titre { font-size: 1.4em; margin-bottom: .4em; }
.mf-form__description { margin-bottom: 1.2em; color: #666; }

/* Champs */
.mf-field { margin-bottom: 1rem; }
.mf-field label { display: block; font-weight: 600; font-size: .9em; margin-bottom: .35em; }

.mf-field input[type="text"],
.mf-field input[type="email"],
.mf-field input[type="tel"],
.mf-field input[type="url"],
.mf-field input[type="number"],
.mf-field select,
.mf-field textarea {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--mf-color-border);
    border-radius: var(--mf-radius);
    background: var(--mf-color-bg-form);
    font-size: 1em;
    font-family: inherit;
    color: #333;
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s;
}
.mf-field input:focus,
.mf-field select:focus,
.mf-field textarea:focus {
    outline: none;
    border-color: var(--mf-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-color-primary) 15%, transparent);
}
.mf-field textarea { resize: vertical; min-height: 120px; }
.mf-field input[type="file"] { padding: .4rem .5rem; font-size: .9em; border-style: dashed; }
.mf-field__hint { font-size: .8em; color: #888; margin: .3em 0 0; }

/* Grid 2 colonnes */
.mf-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 580px) { .mf-fields-row { grid-template-columns: 1fr; } }

/* Layout inline (newsletter barre) */
.mf-layout--inline .mf-inline-row { display: flex; gap: .75rem; align-items: flex-end; }
.mf-layout--inline .mf-field--grow { flex: 1; }
.mf-layout--inline .mf-field--grow input { height: 44px; }
.mf-layout--inline .mf-field--submit { flex-shrink: 0; }
@media (max-width: 480px) {
    .mf-layout--inline .mf-inline-row { flex-direction: column; }
    .mf-layout--inline .mf-field--grow { width: 100%; }
}

/* RGPD */
.mf-field--rgpd label {
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: .5em;
    cursor: pointer;
    line-height: 1.5;
}
.mf-field--rgpd input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; }
.mf-field--rgpd a { color: var(--mf-color-primary); text-decoration: underline; }

/* Bouton */
.mf-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .7rem 1.8rem;
    background: var(--mf-color-primary);
    color: var(--mf-color-btn-text);
    border: none;
    border-radius: var(--mf-radius);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .12s;
    line-height: 1;
}
.mf-btn:hover:not(:disabled) { background: var(--mf-color-primary-h); }
.mf-btn:active:not(:disabled) { transform: scale(.97); }
.mf-btn:disabled { opacity: .6; cursor: not-allowed; }

.mf-btn.mf--loading::after {
    content: '';
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: var(--mf-color-btn-text);
    border-radius: 50%;
    animation: mf-spin .65s linear infinite;
}
@keyframes mf-spin { to { transform: rotate(360deg); } }

/* Messages */
.mf-message { margin-top: .85rem; padding: .7rem 1rem; border-radius: var(--mf-radius); font-size: .95em; display: none; }
.mf-message--success { display: block; background: #eafaf1; border: 1px solid #a9dfbf; color: #1e6b3c; }
.mf-message--error   { display: block; background: #fdf2f1; border: 1px solid #f1948a; color: #922b21; }

/* Notices */
.mf-notice { padding: .7rem 1rem; background: #f9f9f9; border-left: 4px solid #ddd; border-radius: 0 var(--mf-radius) var(--mf-radius) 0; font-size: .95em; color: #666; margin-bottom: 1rem; }
.mf-notice--info { border-left-color: var(--mf-color-info); background: #eaf4fb; color: #154360; }
.mf-notice strong { font-weight: 700; }

/* Séparateur */
.mf-separator { border: none; border-top: 1px solid var(--mf-color-border); margin: 2rem 0; }

/* Tableau SAV */
.mf-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9em; }
.mf-table th, .mf-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--mf-color-border); }
.mf-table thead th { background: #f5f5f5; font-weight: 700; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: #555; }
.mf-table tbody tr:hover { background: #fafafa; }

/* Badges */
.mf-badge { display: inline-block; padding: .2em .65em; border-radius: 20px; font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mf-badge--nouveau  { background: #fef9e7; color: #9a7d0a; }
.mf-badge--en_cours { background: #eaf4fb; color: #1a5276; }
.mf-badge--resolu   { background: #eafaf1; color: #1e6b3c; }
.mf-badge--archive  { background: #f2f3f4; color: #555; }

/* ── Dossier SAV : tableau récapitulatif ───────────────────────────────────── */
.mf-wf-tag {
    display: inline-block;
    padding: .2em .6em;
    border: 1px solid currentColor;
    border-radius: 20px;
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
}

.mf-progress-bar {
    height: 4px;
    background: #eee;
    border-radius: 4px;
    margin-top: 5px;
    overflow: hidden;
    width: 100%;
    max-width: 140px;
}
.mf-progress-bar__fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}

.mf-step-label { font-size: .85em; color: #444; }
.mf-btn--small { padding: .35rem .9rem; font-size: .85em; }

/* ── Lien retour ───────────────────────────────────────────────────────────── */
.mf-back-link {
    display: inline-block;
    color: var(--mf-color-primary);
    text-decoration: none;
    font-size: .9em;
    margin-bottom: 1.2rem;
    opacity: .8;
    transition: opacity .15s;
}
.mf-back-link:hover { opacity: 1; text-decoration: underline; }

/* ── En-tête dossier ───────────────────────────────────────────────────────── */
.mf-dossier-header {
    border-left: 5px solid var(--mf-color-primary);
    padding: 1rem 1.2rem;
    background: #f9f9f9;
    border-radius: 0 var(--mf-radius) var(--mf-radius) 0;
    margin-bottom: 1.5rem;
}
.mf-dossier-header__top { display: flex; align-items: flex-start; gap: .85rem; }
.mf-dossier-icon { font-size: 1.8em; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.mf-dossier-titre { font-size: 1.15em; margin: 0 0 .3em; }
.mf-dossier-meta { font-size: .82em; color: #888; }

/* ── Note admin ────────────────────────────────────────────────────────────── */
.mf-admin-note {
    background: #fffbf0;
    border: 1px solid #f0d080;
    border-radius: var(--mf-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}
.mf-admin-note__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .85em;
}
.mf-admin-note__icon { font-size: 1.1em; }
.mf-admin-note__date { margin-left: auto; color: #aaa; font-size: .9em; }
.mf-admin-note__body { font-size: .95em; line-height: 1.6; color: #333; }

/* ── Sections dossier ──────────────────────────────────────────────────────── */
.mf-dossier-section {
    background: #fff;
    border: 1px solid var(--mf-color-border);
    border-radius: var(--mf-radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}
.mf-dossier-section h3 {
    margin: 0 0 1rem;
    font-size: .9em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #666;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--mf-color-border);
}
.mf-dossier-message {
    margin: 0;
    padding: .75rem 1rem;
    background: #f9f9f9;
    border-left: 3px solid var(--mf-color-border);
    border-radius: 0 4px 4px 0;
    font-style: normal;
    line-height: 1.6;
    color: #444;
}
.mf-dossier-attachment { margin-top: 1rem; }

/* ── Timeline client (vue détail) ──────────────────────────────────────────── */
.mf-timeline { position: relative; padding-left: 28px; }
.mf-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--mf-color-border);
}

.mf-step {
    position: relative;
    padding: 0 0 1.2rem 1rem;
    opacity: .4;
}
.mf-step--done,
.mf-step--active { opacity: 1; }

.mf-step__dot {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid #ccc;
    z-index: 1;
    transition: background .2s, border-color .2s;
}
.mf-step--done .mf-step__dot {
    background: var(--mf-color-primary);
    border-color: var(--mf-color-primary);
}
.mf-step--active .mf-step__dot {
    width: 16px;
    height: 16px;
    left: -21px;
    top: 3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-color-primary) 20%, transparent);
}

.mf-step__content { display: flex; flex-direction: column; gap: 2px; }
.mf-step__label { font-size: .95em; font-weight: 500; color: #333; }
.mf-step--active .mf-step__label { font-weight: 700; }
.mf-step__date { font-size: .78em; color: #aaa; }

/* Masquer le lien "Dossier SAV" de la navigation Mon Compte — routing only */
.woocommerce-MyAccount-navigation-link--sav-dossier { display: none !important; }

/* === Photos multiples === */
.mf-field--photos .mf-photos-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.mf-photo-input {
    flex: 1 1 180px;
    max-width: 220px;
}
.mf-photo-input input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 2px dashed var(--mf-color-border);
    border-radius: var(--mf-radius);
    background: #fafafa;
    cursor: pointer;
    transition: border-color .2s;
}
.mf-photo-input input[type="file"]:hover {
    border-color: var(--mf-color-primary);
}
.mf-photo-input .mf-photo-label {
    display: block;
    font-size: .75em;
    color: #888;
    text-align: center;
    margin-top: 4px;
}

/* === Formulaire de réponse client === */
.mf-reply-wrapper {
    max-width: 680px;
}
.mf-reply-context {
    background: #f9f9f9;
    padding: 15px;
    border-radius: var(--mf-radius);
    margin-bottom: 20px;
}
.mf-reply-context blockquote {
    background: #fff;
    padding: 10px 15px;
    border-left: 3px solid var(--mf-color-border);
    margin: 10px 0;
    border-radius: 0 var(--mf-radius) var(--mf-radius) 0;
}
.mf-reply-admin-note {
    background: #fffbf0;
    border: 1px solid #f0d080;
    padding: 15px;
    border-radius: var(--mf-radius);
    margin-bottom: 20px;
}
.mf-reply-history {
    margin-bottom: 20px;
}
.mf-reply-history h4 {
    font-size: 1em;
    margin-bottom: 10px;
    color: #555;
}
.mf-reply-item {
    background: #f0f8ff;
    padding: 12px 15px;
    border-radius: var(--mf-radius);
    margin-bottom: 10px;
    border-left: 3px solid var(--mf-color-info);
}
.mf-reply-item small {
    color: #888;
    font-size: .8em;
}
.mf-reply-item p {
    margin: 8px 0 0;
}

/* === Contact Produit dans onglet === */
.mf-contact-produit-wrapper {
    margin: 30px 0;
}
.mf-contact-produit-wrapper h3 {
    margin-bottom: 15px;
}
.mf-contact-produit-tab {
    margin: 0;
}
.mf-contact-produit-tab h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* === SAV — Politique vendeur === */
.mf-sav-politique {
    background: #f9f9f9;
    border: 1px solid var(--mf-color-border);
    border-left: 4px solid var(--mf-color-primary);
    border-radius: var(--mf-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .92em;
    line-height: 1.65;
    color: #444;
}
.mf-sav-politique p:last-child { margin-bottom: 0; }
.mf-sav-politique a { color: var(--mf-color-primary); }

/* === SAV — Message délai dépassé === */
.mf-sav-delay-msg {
    font-size: .84em;
    color: #c0392b;
    margin-top: .35rem;
    padding: .4rem .65rem;
    background: #fdf2f2;
    border-radius: 4px;
    border: 1px solid #f5c6c6;
}

/* === SAV — Commandes expirées dans select === */
#mf-sav-commande option:disabled,
#mf-sav-commande option.mf-order--expired {
    color: #bbb;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   SAV — Carrousel de cartes (sélection du type de demande)
   ═══════════════════════════════════════════════════════════ */

.mf-sav-type-label {
    display: block;
    font-weight: 600;
    margin-bottom: .75rem;
    font-size: .95em;
}

/* Conteneur scroll horizontal sur mobile, grille sur desktop */
.mf-sav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

@media (max-width: 600px) {
    .mf-sav-cards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: .65rem;
        padding-bottom: .5rem;
        /* Masquer scrollbar visuellement */
        scrollbar-width: none;
    }
    .mf-sav-cards::-webkit-scrollbar { display: none; }
}

/* Carte individuelle */
.mf-sav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.1rem .75rem;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: calc(var(--mf-radius, 6px) + 2px);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, box-shadow .18s, transform .12s, background .18s;
    font-family: inherit;
    font-size: .82em;
    font-weight: 500;
    color: #444;
    line-height: 1.3;
    min-width: 0;
    /* CSS variable couleur injectée depuis PHP */
    --card-color: var(--mf-color-primary);
}

@media (max-width: 600px) {
    .mf-sav-card {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 130px;
        min-height: 110px;
    }
}

.mf-sav-card:hover {
    border-color: var(--card-color);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.mf-sav-card:focus-visible {
    outline: 3px solid var(--card-color);
    outline-offset: 2px;
}

/* État sélectionné */
.mf-sav-card.mf-sav-card--selected {
    border-color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 8%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color) 20%, transparent);
    color: var(--card-color);
}

/* Fallback pour navigateurs sans color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .mf-sav-card.mf-sav-card--selected {
        background: #f0f4f8;
    }
}

/* Icône */
.mf-sav-card__icon {
    display: block;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.mf-sav-card__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    transition: stroke .18s;
}

.mf-sav-card--selected .mf-sav-card__icon svg {
    stroke: var(--card-color);
}

/* Label */
.mf-sav-card__label {
    display: block;
    word-break: break-word;
}

/* Indicateur de sélection (coche) */
.mf-sav-card--selected::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: .75em;
    font-weight: 700;
    color: var(--card-color);
}

.mf-sav-card {
    position: relative;
}

/* === SAV — Délai de réponse sous les cartes === */
.mf-sav-delai-reponse {
    margin: .5rem 0 0;
    font-size: .85em;
    color: #27ae60;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .35rem;
    animation: mf-fadein .2s ease;
}

/* === SAV — Message max dossiers atteint === */
.mf-notice--warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--mf-radius);
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    font-size: .9em;
}

@keyframes mf-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}