/* Carte d'upload photo — MagicKado (front-office, fiche produit) */

.mk-photo-upload-card {
    max-width: 420px;
    background: #fff;
    border: 1px solid #ece9f7;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(124, 58, 237, .08);
    padding: 20px 20px 0;
    margin: 8px 0 16px;
    font-family: inherit;
}

/* --- Bandeau conseils --- */

.mk-upload-tips {
    border-bottom: 1px dashed #e3ddf7;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.mk-tips-label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .25em;
    color: #6d28d9;
    margin: 0 0 14px;
}

.mk-tips-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.mk-tip {
    flex: 1;
    text-align: center;
}

.mk-tip-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
}

.mk-tip.is-good .mk-tip-avatar {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #16a34a;
}
.mk-tip.is-bad .mk-tip-avatar {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #ef4444;
}

.mk-tip-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
}
.mk-tip.is-good .mk-tip-badge { background: #22c55e; }
.mk-tip.is-bad .mk-tip-badge { background: #ef4444; }

.mk-tip-caption {
    font-size: 11px;
    line-height: 1.3;
    color: #52525b;
    margin: 0;
}

/* --- Zone de dépôt --- */

.mk-upload-dropzone {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1px dashed #e3ddf7;
    margin-bottom: 16px;
    transition: background-color .15s ease;
    border-radius: 12px;
}
.mk-upload-dropzone.is-dragover {
    background: #f5f3ff;
}

.mk-upload-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
    transition: transform .1s ease, box-shadow .1s ease;
}
.mk-upload-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, .38);
}
.mk-upload-trigger:active {
    transform: translateY(0);
}

.mk-upload-hint {
    font-size: 12px;
    font-weight: 600;
    color: #3f3f46;
    margin: 10px 0 12px;
}

.mk-format-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #ddd6fe;
    color: #6d28d9;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.mk-format-info-btn:hover {
    background: #f5f3ff;
}

.mk-format-info-panel {
    margin-top: 10px;
    font-size: 12px;
    color: #52525b;
    background: #faf9ff;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: left;
}
.mk-format-info-panel[hidden] {
    display: none;
}

.mk-upload-status {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    min-height: 1.2em;
}

.mk-face-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.mk-face-choices img.mk-face-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
}

/* --- Bandeau confidentialité --- */

.mk-upload-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0 18px;
    font-size: 12px;
    color: #52525b;
    line-height: 1.4;
}
.mk-upload-privacy svg {
    flex-shrink: 0;
    color: #71717a;
    margin-top: 1px;
}
.mk-upload-privacy strong {
    color: #27272a;
}

@media (max-width: 480px) {
    .mk-photo-upload-card {
        max-width: 100%;
        padding: 16px 14px 0;
    }
    .mk-tip-avatar {
        width: 46px;
        height: 46px;
    }
    .mk-tip-caption {
        font-size: 10px;
    }
}

/* ---------- Aperçu IA en direct (page produit) ---------- */

.mk-live-preview {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e5e0f5;
    border-radius: 12px;
    background: #faf9ff;
    text-align: center;
}

.mk-preview-generate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mk-preview-generate:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.mk-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
    color: #6b7280;
}

.mk-preview-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #e5e0f5;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: mk-spin 0.8s linear infinite;
}

@keyframes mk-spin { to { transform: rotate(360deg); } }

.mk-preview-img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.mk-preview-note {
    margin: 10px 0 14px;
    font-size: 12px;
    color: #6b7280;
}

.mk-preview-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mk-preview-validate {
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.mk-preview-validate:hover { background: #15803d; }

.mk-preview-retry {
    padding: 12px 18px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.mk-preview-retry:disabled { opacity: 0.45; cursor: not-allowed; }

.mk-preview-remaining {
    margin-top: 10px;
    font-size: 12px;
    color: #9ca3af;
}

/* =====================================================================
   Parcours livre en 3 étapes (photo → détails → aperçu) — v0.3.0
   ===================================================================== */

/* Le bouton natif « Ajouter au panier » est remplacé par « Continuer » */
form.cart.mk-flow-active .single_add_to_cart_button { display: none !important; }

.mk-flow { max-width: 460px; margin: 8px 0 16px; position: relative; }

/* Étapes 1 · 2 · 3 — le thème numérote les <ol> (« 1. » orange) : neutralisé ici */
ol.mk-steps {
    list-style: none !important; counter-reset: none; margin: 0 auto 18px; padding: 0 !important;
    display: flex; gap: 8px; font-size: 14px; color: #8b86a3; max-width: 560px;
}
ol.mk-steps > li {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 !important; padding: 10px 8px !important; border-radius: 999px;
    background: #f6f3fb; border: 2px solid transparent; font-weight: 700; line-height: 1.2;
    list-style: none !important; position: relative; transition: background .2s, color .2s, border-color .2s;
}
ol.mk-steps > li::before, ol.mk-steps > li::after { content: none !important; display: none !important; }
ol.mk-steps > li span {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #ddd6ee; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
ol.mk-steps > li.is-active { background: #fff; border-color: #f0638a; color: #e14b76; box-shadow: 0 4px 14px rgba(240, 99, 138, .18); }
ol.mk-steps > li.is-active span { background: #f0638a; }
ol.mk-steps > li.is-done { background: #ecfdf3; color: #15803d; }
ol.mk-steps > li.is-done span { background: #22c55e; }
@media (max-width: 480px) {
    ol.mk-steps { gap: 5px; font-size: 12px; }
    ol.mk-steps > li { flex-direction: column; gap: 4px; padding: 8px 4px !important; border-radius: 16px; }
}

.mk-step[hidden], .mk-modal[hidden] { display: none !important; }

/* --- Détails --- */
.mk-details-card {
    background: #fff; border: 1px dashed #d9cff5; border-radius: 20px;
    box-shadow: 0 4px 24px rgba(124, 58, 237, .08); padding: 18px 18px 8px; margin-bottom: 12px;
}
.mk-photo-chip { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.mk-photo-chip-img {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #ede9fe; background: #f3f0fb;
}
.mk-photo-remove {
    position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%;
    border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; line-height: 1; font-size: 13px;
}
.mk-field { display: block; margin: 0 0 12px; }
.mk-field-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.mk-field select, .mk-field input[type="text"], .mk-field input[type="number"], .mk-field textarea {
    width: 100%; box-sizing: border-box; border: 1px solid #e3ddf7; border-radius: 12px;
    padding: 11px 12px; background: #fff; font-size: 15px;
}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus {
    outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .25);
}
.mk-field-row { display: flex; gap: 10px; }
.mk-field-name { flex: 2; } .mk-field-age { flex: 1; }
.mk-input-wrap { position: relative; display: block; }
.mk-input-wrap input { padding-right: 46px; }
.mk-counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #8b86a3; pointer-events: none; }
/* Dédicace : compteur en bas à droite du champ, aide sous le champ */
.mk-ded-wrap textarea { padding-bottom: 22px; }
.mk-ded-counter { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: #8b86a3; pointer-events: none; }
.mk-ded-counter.is-full { color: #c2410c; font-weight: 700; }
.mk-field-help { display: block; margin-top: 4px; font-size: 12px; color: #8b86a3; font-weight: 400; }
.mk-age-warning { margin: -4px 0 12px; font-size: 13px; color: #b45309; }
.mk-gender-choice { display: flex; gap: 10px; }
.mk-gender-choice label {
    flex: 1; text-align: center; border: 1px solid #e3ddf7; border-radius: 12px; padding: 10px; cursor: pointer; font-size: 14px;
}
.mk-gender-choice label:has(input:checked) { border-color: #7c3aed; background: #f5f3ff; font-weight: 700; }
.mk-gender-choice input { margin-right: 4px; }

.mk-flow .mk-preview-generate {
    width: 100%; border: 0; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700;
    color: #fff; background: #c46bff; cursor: pointer;
}
.mk-flow .mk-preview-generate:disabled { background: #d4d4d8; cursor: not-allowed; }

/* --- Aperçu --- */
.mk-flow .mk-preview-loading {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 10px;
    color: #6d28d9; font-weight: 600; text-align: center;
}
.mk-flow .mk-preview-loading[hidden] { display: none !important; }
/* L'aperçu reste caché pendant la génération, même si le thème lui
   donne un display (grille) : sinon image vide + boutons sous le chargement. */
.mk-preview-result[hidden], .mk-live-preview .mk-preview-result[hidden] { display: none !important; }
.mk-preview-spinner {
    width: 38px; height: 38px; border-radius: 50%; border: 4px solid #ede9fe; border-top-color: #7c3aed;
    animation: mkspin .9s linear infinite;
}
@keyframes mkspin { to { transform: rotate(360deg); } }
.mk-flow .mk-preview-progress {
    display: block; width: 100%; max-width: 260px; height: 8px; border-radius: 999px; background: #ede9fe; overflow: hidden;
}
.mk-flow .mk-preview-progress-bar {
    display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #a78bfa, #7c3aed);
    transition: width .5s ease-out;
}
.mk-flow .mk-preview-loading-hint { font-size: 12px; font-weight: 400; color: #6b7280; max-width: 280px; }

.mk-cover-stage {
    position: relative; display: block; line-height: 0; margin: 0 auto 10px;
    border-radius: 6px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.mk-cover-stage .mk-preview-img { display: block; width: 100%; height: auto; }
.mk-cover-texts { position: absolute; inset: 0; pointer-events: none; }
.mk-cover-text {
    position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden;
    line-height: 1.4; font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}
.mk-flow .mk-preview-note { font-size: 12px; color: #6b6785; margin: 6px 0; }
.mk-flow .mk-preview-remaining { font-size: 12px; color: #8b86a3; margin: 0 0 10px; }
.mk-flow .mk-preview-actions { display: flex; flex-direction: column; gap: 8px; }
.mk-flow .mk-preview-validate {
    border: 0; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; color: #fff; background: #c46bff; cursor: pointer;
}
.mk-flow .mk-preview-retry, .mk-flow .mk-preview-back {
    border: 1px solid #e3ddf7; background: #fff; border-radius: 12px; padding: 10px; font-size: 14px; cursor: pointer;
}
.mk-flow .mk-preview-retry:disabled { opacity: .5; cursor: not-allowed; }
.mk-fallback-note { font-size: 13px; color: #6b6785; background: #faf8ff; border-radius: 10px; padding: 10px 12px; }

/* --- Fenêtre « Petit rappel ! » --- */
.mk-modal {
    position: fixed; inset: 0; z-index: 99999; background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mk-modal-box { background: #fff; border-radius: 14px; max-width: 460px; width: 100%; padding: 22px 24px; }
.mk-modal-box h3 { margin: 0 0 10px; font-size: 22px; }
.mk-modal-box p { margin: 0 0 18px; color: #4b5563; }
.mk-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.mk-modal-actions button { border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.mk-modal-other { background: #ececf1; color: #1f1d33; }
.mk-modal-continue { background: #c46bff; color: #fff; }

/* Miniature de panier = couverture personnalisée */
img.mk-cart-cover { object-fit: cover; border-radius: 4px; }

/* =====================================================================
   v0.6 — conseils illustrés, bouton « Ajuster le visage », cadrage
   ===================================================================== */

.mk-photo-upload-card {
    max-width: 460px;
    border: 1.5px dashed #d8c8fb;
    background: linear-gradient(180deg, #fff 0%, #fff 55%, #fbf8ff 100%);
}
.mk-tip-avatar { width: 64px; height: 64px; border-width: 2.5px; overflow: visible; }
.mk-tip-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mk-tip.is-good .mk-tip-avatar { border-color: #4ade80; }
.mk-tip.is-bad .mk-tip-avatar { border-color: #ef4444; }
.mk-tip-badge {
    top: -5px; right: -5px; width: 22px; height: 22px; line-height: 22px; font-size: 12px;
    box-shadow: 0 0 0 2px #fff;
}
.mk-tip-caption { font-weight: 600; color: #27272a; }
.mk-upload-trigger { background: linear-gradient(135deg, #a855f7, #7c3aed); font-size: 17px; padding: 17px 20px; }
.mk-upload-trigger svg { width: 22px; height: 22px; }

@media (max-width: 480px) {
    .mk-tip-avatar { width: 52px; height: 52px; }
}

.mk-face-adjust {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: -6px auto 14px; padding: 7px 14px; border-radius: 999px;
    border: 1.5px solid #ddd6fe; background: #fff; color: #6d28d9;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.mk-face-adjust[hidden] { display: none !important; }
.mk-face-adjust:hover { background: #f5f3ff; }
.mk-face-adjust.is-done { border-color: #86efac; color: #15803d; }
.mk-face-adjust.is-done::after { content: "✓"; }

.mk-cropper {
    position: fixed; inset: 0; z-index: 100000; background: rgba(17, 10, 35, .72);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mk-cropper[hidden] { display: none !important; }
body.mk-cropper-open { overflow: hidden; }
.mk-cropper-box {
    background: #fff; border-radius: 20px; width: 100%; max-width: 420px; padding: 20px 20px 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center;
}
.mk-cropper-box h3 { margin: 0 0 4px; font-size: 20px; color: #1f1636; }
.mk-cropper-help { margin: 0 0 12px; font-size: 13px; color: #6b6785; }
.mk-cropper-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px;
    background: #1f1636; touch-action: none; cursor: grab;
}
.mk-cropper-stage:active { cursor: grabbing; }
.mk-cropper-img {
    position: absolute; left: 0; top: 0; max-width: none !important; transform-origin: 0 0;
    user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.mk-cropper-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-cropper-tools { display: flex; align-items: center; gap: 10px; margin: 14px 4px 4px; }
.mk-cropper-tools input[type="range"] { flex: 1; accent-color: #7c3aed; }
.mk-cropper-zoom {
    width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #ddd6fe; background: #fff;
    color: #6d28d9; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
}
.mk-cropper-hint { font-size: 12px; color: #8b86a3; margin: 4px 0 12px; }
.mk-cropper-actions { display: flex; gap: 10px; }
.mk-cropper-actions button { flex: 1; border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer; font-size: 15px; }
.mk-cropper-cancel { border: 1px solid #e3ddf7; background: #fff; color: #3f3f46; }
.mk-cropper-ok { border: 0; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; }

/* Fenêtre « Créez votre compte » (essais gratuits épuisés) */
.mk-gate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(20, 16, 40, .55); padding: 16px; }
.mk-gate-box { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 28px 26px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.mk-gate-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: #8b86a3; cursor: pointer; }
.mk-gate-icon { font-size: 34px; margin-bottom: 6px; }
.mk-gate h3 { margin: 0 0 10px; color: #253869; font-size: 22px; }
.mk-gate p { margin: 0 0 12px; color: #555; font-size: 15px; line-height: 1.5; }
.mk-gate-more { font-size: 13px !important; color: #7c3aed !important; }
.mk-gate-btn { display: block; margin-top: 10px; padding: 13px 16px; border-radius: 999px; border: 2px solid #e3ddf7; color: #253869; font-weight: 700; text-decoration: none; }
.mk-gate-btn:hover { border-color: #c46bff; color: #7c3aed; }
.mk-gate-primary { background: #f0638a; border-color: #f0638a; color: #fff; }
.mk-gate-primary:hover { background: #e14b76; border-color: #e14b76; color: #fff; }

/* Choix des variations (nombre de pièces) en boutons */
form.variations_form table.variations.mk-has-pills { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); margin: 0 !important; }
.mk-var-picker { margin: 0 auto 18px; max-width: 560px; text-align: center; }
.mk-var-title { margin: 0 0 10px; color: #253869; font-weight: 800; font-size: 16px; }
.mk-var-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-var-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 12px 6px; border: 2px solid #f1e2d6; border-radius: 16px; background: #fff; color: #253869; cursor: pointer; font: inherit; line-height: 1.2; text-transform: none !important; letter-spacing: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mk-var-pill:hover { border-color: #f0638a; transform: translateY(-1px); }
.mk-var-pill.is-active { border-color: #d81b60; background: #fff1f5; box-shadow: 0 6px 16px rgba(216, 27, 96, .15); }
.mk-var-name { font-weight: 800; font-size: 16px; }
.mk-var-price { font-weight: 700; font-size: 14px; color: #8f4e00; }
.mk-var-pill.is-active .mk-var-price { color: #b0124a; }
/* Le prix est déjà écrit sur chaque bouton : pas de doublon dessous */
form.variations_form.mk-has-picker .single_variation .woocommerce-variation-price { display: none; }
@media (max-width: 400px) {
    .mk-var-name { font-size: 14px; }
    .mk-var-price { font-size: 13px; }
}