/**
 * Modulo Wishlist – Styles
 * CSS Variables pour customisation facile via le thème.
 */

:root {
    --mw-primary:       #e74c3c;
    --mw-primary-light: #f9e9e7;
    --mw-primary-dark:  #c0392b;
    --mw-text:          #2d3748;
    --mw-muted:         #718096;
    --mw-border:        #e2e8f0;
    --mw-bg:            #ffffff;
    --mw-radius:        8px;
    --mw-radius-sm:     4px;
    --mw-shadow:        0 4px 24px rgba(0,0,0,.12);
    --mw-shadow-sm:     0 2px 8px rgba(0,0,0,.08);
    --mw-font:          inherit;
    --mw-transition:    .18s ease;
    --mw-btn-size:      36px;
}

/* =============================================================================
   1. BOUTON ♥ (archive + fiche produit)
   ============================================================================= */

.mw-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--mw-btn-size);
    height:          var(--mw-btn-size);
    padding:         0;
    background:      var(--mw-bg);
    border:          1.5px solid var(--mw-border);
    border-radius:   50%;
    cursor:          pointer;
    transition:      background var(--mw-transition),
                     border-color var(--mw-transition),
                     transform var(--mw-transition);
    margin:          4px 0;
    line-height:     1;
}

.mw-btn:hover {
    background:    var(--mw-primary-light);
    border-color:  var(--mw-primary);
    transform:     scale(1.1);
}

.mw-btn .mw-heart {
    fill:       var(--mw-border);
    transition: fill var(--mw-transition);
}

.mw-btn:hover .mw-heart,
.mw-btn--active .mw-heart {
    fill: var(--mw-primary);
}

.mw-btn--active {
    background:   var(--mw-primary-light);
    border-color: var(--mw-primary);
}

/* Animation "pop" à l'activation */
@keyframes mw-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.mw-btn--active .mw-heart {
    animation: mw-pop .25s ease;
}

/* =============================================================================
   2. MODALE OVERLAY
   ============================================================================= */

.mw-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, .55);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         999999;
    padding:         16px;
    backdrop-filter: blur(3px);
}

.mw-overlay[hidden] { display: none; }

.mw-modal {
    background:    var(--mw-bg);
    border-radius: var(--mw-radius);
    box-shadow:    var(--mw-shadow);
    width:         100%;
    max-width:     420px;
    position:      relative;
    padding:       28px 24px;
    font-family:   var(--mw-font);
    animation:     mw-modal-in .2s ease;
}

@keyframes mw-modal-in {
    from { transform: translateY(12px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.mw-modal__close {
    position:   absolute;
    top:        12px;
    right:      12px;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
    color:      var(--mw-muted);
    line-height: 1;
    border-radius: var(--mw-radius-sm);
    transition: color var(--mw-transition);
}
.mw-modal__close:hover { color: var(--mw-text); }

.mw-modal__title {
    margin:      0 0 16px;
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--mw-text);
}

/* Options de liste */
.mw-modal__options {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  16px;
}

.mw-list-option {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    border:        1.5px solid var(--mw-border);
    border-radius: var(--mw-radius-sm);
    cursor:        pointer;
    transition:    border-color var(--mw-transition), background var(--mw-transition);
}
.mw-list-option:hover { border-color: var(--mw-primary); background: var(--mw-primary-light); }

.mw-list-option input[type="checkbox"] {
    accent-color: var(--mw-primary);
    width:        18px;
    height:       18px;
    flex-shrink:  0;
}

.mw-list-option__name { flex: 1; font-size: .9rem; color: var(--mw-text); }
.mw-list-option__count {
    font-size:   .75rem;
    color:       var(--mw-muted);
    background:  var(--mw-border);
    padding:     2px 6px;
    border-radius: 99px;
}

/* Créer une nouvelle liste */
.mw-modal__new-toggle {
    display:    block;
    width:      100%;
    background: none;
    border:     1.5px dashed var(--mw-border);
    border-radius: var(--mw-radius-sm);
    padding:    10px;
    cursor:     pointer;
    color:      var(--mw-primary);
    font-size:  .9rem;
    font-weight: 500;
    text-align: center;
    transition: border-color var(--mw-transition), background var(--mw-transition);
}
.mw-modal__new-toggle:hover {
    border-color: var(--mw-primary);
    background:   var(--mw-primary-light);
}

.mw-modal__create-form {
    display:    flex;
    gap:        8px;
    margin-top: 10px;
}
.mw-modal__create-form[hidden] { display: none; }

.mw-modal__list-name {
    flex:          1;
    padding:       8px 12px;
    border:        1.5px solid var(--mw-border);
    border-radius: var(--mw-radius-sm);
    font-size:     .9rem;
    outline:       none;
    transition:    border-color var(--mw-transition);
}
.mw-modal__list-name:focus { border-color: var(--mw-primary); }

.mw-modal__create-btn {
    background: var(--mw-primary) !important;
    color:      #fff !important;
    border:     none !important;
    padding:    8px 14px !important;
    border-radius: var(--mw-radius-sm) !important;
    cursor:     pointer !important;
    white-space: nowrap;
}

/* =============================================================================
   3. TOAST NOTIFICATION
   ============================================================================= */

.mw-toast {
    position:      fixed;
    bottom:        24px;
    left:          50%;
    transform:     translateX(-50%);
    background:    #2d3748;
    color:         #fff;
    padding:       12px 20px;
    border-radius: var(--mw-radius);
    font-size:     .9rem;
    z-index:       1000000;
    box-shadow:    var(--mw-shadow);
    white-space:   nowrap;
    animation:     mw-toast-in .2s ease;
}
.mw-toast[hidden] { display: none; }

.mw-toast--success { background: #276749; }
.mw-toast--error   { background: #9b2c2c; }

@keyframes mw-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =============================================================================
   4. WIDGET SIDEBAR
   ============================================================================= */

.mw-widget { font-family: var(--mw-font); }

/* Onglets */
.mw-widget__tabs {
    display:      flex;
    gap:          4px;
    flex-wrap:    wrap;
    margin-bottom: 12px;
}
.mw-widget__tab {
    padding:       4px 10px;
    font-size:     .8rem;
    border:        1.5px solid var(--mw-border);
    border-radius: 99px;
    background:    none;
    cursor:        pointer;
    transition:    all var(--mw-transition);
    color:         var(--mw-muted);
}
.mw-widget__tab:hover,
.mw-widget__tab--active {
    background:    var(--mw-primary);
    border-color:  var(--mw-primary);
    color:         #fff;
}
.mw-widget__count {
    opacity: .75;
    font-size: .75em;
}

/* Liste */
.mw-widget__list { list-style: none; margin: 0; padding: 0; }

.mw-widget__item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 0;
    border-bottom: 1px solid var(--mw-border);
}
.mw-widget__item:last-child { border-bottom: none; }

.mw-widget__thumb { flex-shrink: 0; }
.mw-widget__thumb img {
    width:         52px;
    height:        52px;
    object-fit:    cover;
    border-radius: var(--mw-radius-sm);
    border:        1px solid var(--mw-border);
}
.mw-widget__no-img {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          52px;
    height:         52px;
    background:     var(--mw-primary-light);
    border-radius:  var(--mw-radius-sm);
    font-size:      1.2rem;
    color:          var(--mw-primary);
}

.mw-widget__info { flex: 1; min-width: 0; }
.mw-widget__name {
    display:       block;
    font-size:     .85rem;
    color:         var(--mw-text);
    text-decoration: none;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.mw-widget__name:hover { color: var(--mw-primary); }
.mw-widget__price { font-size: .8rem; color: var(--mw-primary); font-weight: 600; }

.mw-widget__actions {
    display:    flex;
    align-items: center;
    gap:        4px;
    flex-shrink: 0;
}
.mw-widget__atc {
    font-size:     1rem;
    text-decoration: none;
    line-height:   1;
    padding:       4px;
    border-radius: var(--mw-radius-sm);
    transition:    background var(--mw-transition);
}
.mw-widget__atc:hover { background: var(--mw-primary-light); }

.mw-widget__remove {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--mw-muted);
    font-size:  .85rem;
    padding:    4px;
    border-radius: var(--mw-radius-sm);
    line-height: 1;
    transition: color var(--mw-transition);
}
.mw-widget__remove:hover { color: var(--mw-primary); }

.mw-widget__empty {
    color:     var(--mw-muted);
    font-size: .85rem;
    text-align: center;
    padding:   16px 0;
}

.mw-widget__more { text-align: center; font-size: .82rem; margin-top: 8px; }
.mw-widget__see-all { color: var(--mw-primary); text-decoration: none; }

.mw-widget__list-footer { margin-top: 12px; }
.mw-widget__atc-all {
    display:    block;
    width:      100%;
    text-align: center;
    font-size:  .85rem !important;
    background: var(--mw-primary) !important;
    color:      #fff !important;
    border:     none !important;
    padding:    8px !important;
    border-radius: var(--mw-radius-sm) !important;
}

.mw-widget__footer { margin-top: 12px; }
.mw-widget__new-btn {
    display:    block;
    width:      100%;
    background: none;
    border:     1.5px dashed var(--mw-border);
    border-radius: var(--mw-radius-sm);
    padding:    8px;
    cursor:     pointer;
    font-size:  .82rem;
    color:      var(--mw-muted);
    text-align: center;
    transition: all var(--mw-transition);
}
.mw-widget__new-btn:hover {
    border-color: var(--mw-primary);
    color:        var(--mw-primary);
    background:   var(--mw-primary-light);
}

/* =============================================================================
   5. PAGE MON COMPTE – Wishlists
   ============================================================================= */

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.mw-account__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   24px;
}
.mw-account__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}
.mw-account__controls {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}
.mw-account__new {
    background: var(--mw-primary, #e74c3c) !important;
    color:      #fff !important;
    border:     none !important;
    padding:    8px 16px !important;
    border-radius: var(--mw-radius-sm, 6px) !important;
    cursor:     pointer;
    white-space: nowrap;
}
.mw-account__new:hover {
    opacity: .88;
}

/* ── Dropdown sélecteur de liste ─────────────────────────────────────────── */
.mw-list-selector {
    position: relative;
    margin-bottom: 6px;
}

/* ── Dropdown custom (trigger + menu) ───────────────────────────────────── */
.mw-list-selector__dropdown {
    position: relative;
    display:  inline-block;
    max-width: 380px;
    width: 100%;
}
.mw-list-selector__trigger {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 16px;
    background:      var(--mw-primary, #e74c3c);
    color:           #fff;
    border:          none;
    border-radius:   var(--mw-radius, 8px);
    font-size:       .95rem;
    font-weight:     600;
    cursor:          pointer;
    width:           100%;
    text-align:      left;
    transition:      background .15s;
    box-shadow:      0 2px 8px rgba(0,0,0,.1);
    -webkit-appearance: none;
    appearance:      none;
}
.mw-list-selector__trigger:hover {
    background: color-mix(in srgb, var(--mw-primary, #e74c3c) 85%, #000);
}
.mw-list-selector__type-icon { font-size: 1rem; }
.mw-list-selector__name      { flex: 1; }
.mw-list-selector__count {
    font-size:   .8rem;
    font-weight: 400;
    opacity:     .85;
    background:  rgba(255,255,255,.2);
    padding:     2px 8px;
    border-radius: 20px;
}
.mw-list-selector__arrow {
    font-size:  .8rem;
    opacity:    .7;
    transition: transform .2s;
}
.mw-list-selector__dropdown.mw-open .mw-list-selector__arrow {
    transform: rotate(180deg);
}
/* Menu déroulant */
.mw-list-selector__menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    #fff;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: var(--mw-radius, 8px);
    box-shadow:    0 8px 24px rgba(0,0,0,.12);
    z-index:       200;
    list-style:    none;
    margin:        0;
    padding:       6px;
    max-height:    280px;
    overflow-y:    auto;
    animation:     mwFadeIn .12s ease;
}
.mw-list-selector__dropdown.mw-open .mw-list-selector__menu {
    display: block;
}
.mw-list-selector__item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    background .1s;
    color:         #2d3748;
    font-size:     .9rem;
}
.mw-list-selector__item:hover {
    background: var(--mw-primary-light, #f9e9e7);
    color:      var(--mw-primary, #e74c3c);
}
.mw-list-selector__item--active {
    background:  var(--mw-primary-light, #f9e9e7);
    color:       var(--mw-primary, #e74c3c);
    font-weight: 600;
}
.mw-list-selector__item-name { flex: 1; }
.mw-list-selector__item-count {
    font-size:     .78rem;
    color:         #a0aec0;
    background:    #f7fafc;
    border:        1px solid #e2e8f0;
    padding:       1px 7px;
    border-radius: 20px;
    font-weight:   400;
}
.mw-list-selector__item--active .mw-list-selector__item-count {
    background:  var(--mw-primary-light, #f9e9e7);
    border-color: var(--mw-primary, #e74c3c);
    color:        var(--mw-primary, #e74c3c);
}

/* ── Boutons d'action liste (custom — indépendants du thème WP) ──────────── */
.mw-action-btn {
    all:             unset;
    box-sizing:      border-box;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    padding:         7px 13px;
    font-size:       .8rem;
    font-weight:     500;
    line-height:     1;
    white-space:     nowrap;
    cursor:          pointer;
    border-radius:   20px;
    border:          1.5px solid var(--mw-border, #e2e8f0);
    background:      #fff;
    color:           #4a5568;
    text-decoration: none;
    transition:      all .15s;
}
.mw-action-btn:hover,
.mw-action-btn:focus {
    border-color:    var(--mw-primary, #e74c3c);
    color:           var(--mw-primary, #e74c3c);
    background:      var(--mw-primary-light, #f9e9e7);
    text-decoration: none;
    outline:         none;
}
.mw-action-btn--primary {
    background:   var(--mw-primary, #e74c3c);
    border-color: var(--mw-primary, #e74c3c);
    color:        #fff;
    font-weight:  600;
}
.mw-action-btn--primary:hover,
.mw-action-btn--primary:focus {
    filter:      brightness(.88);
    color:       #fff;
    border-color: var(--mw-primary, #e74c3c);
}
.mw-action-btn--danger {
    border-color: #fca5a5;
    color:        #e74c3c;
    background:   #fff;
}
.mw-action-btn--danger:hover,
.mw-action-btn--danger:focus {
    background:   #fff0ef;
    border-color: #e74c3c;
    color:        #e74c3c;
}
.mw-action-btn--disabled {
    opacity:        .45;
    cursor:         not-allowed;
    pointer-events: none;
}
.mw-action-btn--overflow {
    padding:        6px 11px;
    font-size:      1.1rem;
    letter-spacing: .1em;
}
.mw-action-btn--sm {
    padding:   5px 10px;
    font-size: .78rem;
}

/* ── Barre d'actions — ligne scrollable (scroll-snap) ───────────────────── */
.mw-list-panel__actions {
    padding:        10px 0 14px;
    border-bottom:  1px solid var(--mw-border, #e2e8f0);
    margin-bottom:  20px;
}
.mw-list-panel__badges {
    display:       flex;
    align-items:   center;
    gap:           6px;
    flex-wrap:     wrap;
    margin-bottom: 8px;
}
.mw-list-panel__btns {
    display:                  flex;
    flex-wrap:                nowrap;
    gap:                      6px;
    overflow-x:               auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:         x mandatory;
    scroll-padding:           0 6px;
    padding-bottom:           4px;
    /* Masquer la scrollbar sur webkit */
    scrollbar-width:          none;
}
.mw-list-panel__btns::-webkit-scrollbar { display: none; }
.mw-list-panel__btns .mw-action-btn,
.mw-list-panel__btns a.mw-action-btn {
    scroll-snap-align: start;
    flex-shrink:       0;
}

/* ── Bouton d'action (all:unset comme socle) ────────────────────────────── */
.mw-list-panel {
    display: none;
}
.mw-list-panel--active {
    display: block;
}

/* Barre d'outils du panel */
.mw-panel__toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    padding:         12px 0 16px;
    border-bottom:   1px solid var(--mw-border, #e2e8f0);
    margin-bottom:   20px;
}
.mw-panel__toolbar-left,
.mw-panel__toolbar-right {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

/* Grille produits – 3 colonnes fixes, responsive */
.mw-panel__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    margin-bottom:         20px;
}

/* ── Carte produit ───────────────────────────────────────────────────────── */
.mw-product-card {
    display:        flex;
    flex-direction: column;
    background:     #fff;
    border:         1px solid var(--mw-border, #e2e8f0);
    border-radius:  var(--mw-radius, 8px);
    overflow:       hidden;
    transition:     box-shadow .2s, transform .15s;
}
.mw-product-card:hover {
    box-shadow: var(--mw-shadow, 0 4px 12px rgba(0,0,0,.08));
    transform:  translateY(-2px);
}

/* Image pleine largeur — ratio naturel */
.mw-product-card__img {
    display: block;
    width:   100%;
    overflow: hidden;
}
.mw-product-card__img img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .3s;
}
.mw-product-card:hover .mw-product-card__img img {
    transform: scale(1.04);
}
.mw-product-card__no-img {
    width:           100%;
    padding-top:     80%;
    position:        relative;
    background:      var(--mw-primary-light, #f9e9e7);
}
.mw-product-card__no-img::after {
    content:         '♥';
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.5rem;
    color:           var(--mw-primary, #e74c3c);
}

/* Infos */
.mw-product-card__info {
    padding: 10px 12px 6px;
    flex:    1;
}
.mw-product-card__name {
    display:     block;
    font-size:   .9rem;
    font-weight: 600;
    color:       #2d3748;
    text-decoration: none;
    margin-bottom: 4px;
    line-height: 1.3;
}
.mw-product-card__name:hover { color: var(--mw-primary, #e74c3c); }
.mw-product-card__price {
    display:   block;
    font-size: .9rem;
    color:     var(--mw-primary, #e74c3c);
    font-weight: 600;
}
.mw-product-card__oos {
    display:    block;
    font-size:  .75rem;
    color:      #a0aec0;
    margin-top: 2px;
}

/* Actions (panier + supprimer) */
.mw-product-card__actions {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 12px 10px;
    border-top:      1px solid var(--mw-border, #e2e8f0);
}
.mw-product-card__atc {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    width:           34px !important;
    height:          34px !important;
    border-radius:   50% !important;
    border:          2px solid var(--mw-border, #e2e8f0) !important;
    background:      #fff !important;
    font-size:       .9rem;
    padding:         0 !important;
    transition:      border-color .2s, background .2s;
}
.mw-product-card__atc:hover {
    border-color: var(--mw-primary, #e74c3c) !important;
    background:   var(--mw-primary-light, #f9e9e7) !important;
}
.mw-product-card__remove {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    border:          none;
    background:      transparent;
    color:           #a0aec0;
    cursor:          pointer;
    font-size:       .8rem;
    margin-left:     auto;
    transition:      color .2s, background .2s;
}
.mw-product-card__remove:hover {
    color:      #e74c3c;
    background: #fff0ef;
}

/* Footer liste */
.mw-panel__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 0 0;
    border-top:      1px solid var(--mw-border, #e2e8f0);
}
.mw-panel__count {
    font-size: .85rem;
    color:     var(--mw-muted, #718096);
}
.mw-panel__empty {
    padding:   40px 0;
    color:     var(--mw-muted, #718096);
    text-align: center;
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mw-panel__grid {
        grid-template-columns: repeat(var(--mw-cols-tablet, 2), 1fr);
        gap: 12px;
    }
    .mw-account__header { flex-direction: column; align-items: flex-start; }
    .mw-list-card__items { grid-template-columns: repeat(var(--mw-cols-tablet, 2), 1fr); }
    .mw-list-selector__dropdown { min-width: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
    .mw-panel__grid { grid-template-columns: repeat(var(--mw-cols-mobile, 1), 1fr); }
    .mw-panel__toolbar { flex-direction: column; align-items: flex-start; }
    .mw-list-card__items { grid-template-columns: repeat(var(--mw-cols-mobile, 1), 1fr); }
    .mw-list-panel__badges { flex-wrap: wrap; gap: 4px; }
    .mw-list-selector { width: 100%; }
    .mw-list-selector__trigger { width: 100%; justify-content: space-between; }
}

/* ── État vide (aucune liste) ────────────────────────────────────────────── */
.mw-account__empty {
    text-align:  center;
    padding:     60px 20px;
    color:       var(--mw-muted, #718096);
}
.mw-account__empty-icon {
    font-size:     3rem;
    color:         var(--mw-primary, #e74c3c);
    margin-bottom: 12px;
    opacity:       .3;
}

/* ── Formulaire inline "Nouvelle wishlist" ───────────────────────────────── */
.mw-inline-new-form {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    padding:     12px 0;
    margin-bottom: 16px;
    animation:   mwFadeIn .15s ease;
}
.mw-inline-new-form__input {
    flex:        1;
    min-width:   180px;
    padding:     8px 12px !important;
    border:      1.5px solid var(--mw-primary, #e74c3c) !important;
    border-radius: var(--mw-radius, 8px) !important;
    font-size:   .95rem !important;
    outline:     none;
}
.mw-inline-new-form__input:focus {
    box-shadow: 0 0 0 3px rgba(231,76,60,.15);
}
.mw-inline-new-form__cancel {
    background:  transparent !important;
    color:       var(--mw-muted, #718096) !important;
    border-color: var(--mw-border, #e2e8f0) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.1 – Nouvelles fonctionnalités
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Badge compteur sur bouton ♥ ────────────────────────────────────────── */
.mw-btn {
    position: relative;
}
.mw-btn__badge {
    position:    absolute;
    top:         -6px;
    right:       -6px;
    min-width:   18px;
    height:      18px;
    padding:     0 4px;
    background:  var(--mw-primary, #e74c3c);
    color:       #fff;
    font-size:   .65rem;
    font-weight: 700;
    border-radius: 20px;
    display:     flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
    box-shadow:  0 1px 4px rgba(0,0,0,.2);
}

/* Badge dans le menu Mon Compte WC */
.mw-menu-badge {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     18px;
    height:        18px;
    padding:       0 5px;
    background:    var(--mw-primary, #e74c3c);
    color:         #fff;
    font-size:     .7rem;
    font-weight:   700;
    border-radius: 20px;
    margin-left:   4px;
    vertical-align: middle;
}

/* ── Partage social ─────────────────────────────────────────────────────── */
.mw-share-group {
    position: relative;
    display:  inline-block;
}
.mw-share-panel {
    position:      absolute;
    top:           calc(100% + 6px);
    left:          0;
    background:    #fff;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: var(--mw-radius, 8px);
    box-shadow:    0 8px 24px rgba(0,0,0,.12);
    padding:       8px;
    z-index:       200;
    min-width:     220px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.mw-share-btn {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       9px 12px;
    border-radius: 6px;
    border:        none;
    background:    transparent;
    cursor:        pointer;
    font-size:     .9rem;
    color:         #2d3748;
    text-decoration: none;
    transition:    background .12s;
    white-space:   nowrap;
}
.mw-share-btn:hover            { background: #f7f7f7; }
.mw-share-whatsapp:hover       { background: #e8f5e9; color: #25d366; }
.mw-share-facebook:hover       { background: #e3f0fb; color: #1877f2; }
.mw-share-copy:hover           { background: var(--mw-primary-light, #f9e9e7); color: var(--mw-primary, #e74c3c); }
.mw-share-email-list:hover     { background: #fef9e7; color: #f39c12; }

/* ── Notifier un proche ─────────────────────────────────────────────────── */
.mw-notify-form {
    background:    #f8fafc;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: var(--mw-radius, 8px);
    padding:       16px;
    margin-bottom: 16px;
    animation:     mwFadeIn .15s ease;
}
.mw-notify-form__inner h4 {
    margin:        0 0 12px;
    font-size:     .95rem;
    color:         #2d3748;
}
.mw-notify-form__fields {
    display:    flex;
    gap:        8px;
    flex-wrap:  wrap;
    align-items: center;
}
.mw-notify-form__name,
.mw-notify-form__email {
    flex:         1;
    min-width:    160px;
    padding:      8px 12px !important;
    border:       1.5px solid var(--mw-border, #e2e8f0) !important;
    border-radius: 6px !important;
    font-size:    .9rem !important;
}
.mw-notify-form__email:focus,
.mw-notify-form__name:focus {
    border-color: var(--mw-primary, #e74c3c) !important;
    outline: none;
}
.mw-notify-form__send {
    background:  var(--mw-primary, #e74c3c) !important;
    color:       #fff !important;
    border-color: var(--mw-primary, #e74c3c) !important;
}

/* ── Notes personnelles ─────────────────────────────────────────────────── */
.mw-product-note {
    margin-top:  6px;
}
.mw-product-note__add {
    background:  transparent;
    border:      1px dashed var(--mw-border, #e2e8f0);
    border-radius: 4px;
    padding:     3px 8px;
    font-size:   .75rem;
    color:       var(--mw-muted, #718096);
    cursor:      pointer;
    transition:  all .12s;
}
.mw-product-note__add:hover {
    border-color: var(--mw-primary, #e74c3c);
    color:        var(--mw-primary, #e74c3c);
}
.mw-product-note__text {
    font-size:    .8rem;
    color:        var(--mw-muted, #718096);
    font-style:   italic;
    background:   #fffbeb;
    border-left:  3px solid #f6c90e;
    padding:      4px 8px;
    border-radius: 0 4px 4px 0;
    margin:       0;
    cursor:       pointer;
}
.mw-product-note__editor {
    width:        100%;
    font-size:    .85rem !important;
    border:       1.5px solid var(--mw-primary, #e74c3c) !important;
    border-radius: 4px !important;
    padding:      6px 8px !important;
    resize:       vertical;
    min-height:   60px;
    box-sizing:   border-box;
}
.mw-product-note__editor-btns {
    display:  flex;
    gap:      6px;
    margin-top: 4px;
}
.mw-product-note__save {
    font-size:   .78rem !important;
    padding:     3px 10px !important;
    background:  var(--mw-primary, #e74c3c) !important;
    color:       #fff !important;
    border-color: var(--mw-primary, #e74c3c) !important;
}
.mw-product-note__discard {
    font-size:   .78rem !important;
    padding:     3px 10px !important;
    background:  transparent !important;
    color:       var(--mw-muted, #718096) !important;
    border-color: var(--mw-border, #e2e8f0) !important;
}

/* ── Tri / filtre ───────────────────────────────────────────────────────── */
.mw-panel-sort {
    display:      flex;
    align-items:  center;
    gap:          8px;
    margin-bottom: 16px;
}
.mw-panel-sort__label {
    font-size:   .85rem;
    color:       var(--mw-muted, #718096);
    white-space: nowrap;
}
.mw-panel-sort__select {
    padding:       6px 10px;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: 6px;
    font-size:     .85rem;
    background:    #fff;
    cursor:        pointer;
    color:         #2d3748;
}
.mw-panel-sort__select:focus {
    border-color: var(--mw-primary, #e74c3c);
    outline: none;
}

/* ── Alerte stock ───────────────────────────────────────────────────────── */
.mw-product-card--oos .mw-product-card__img {
    opacity: .65;
    filter:  grayscale(30%);
}
.mw-product-card__oos-badge {
    position:    absolute;
    top:         6px;
    left:        6px;
    background:  rgba(0,0,0,.6);
    color:       #fff;
    font-size:   .65rem;
    font-weight: 700;
    padding:     2px 6px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.mw-stock-alert-btn {
    width:         36px;
    height:        36px;
    border-radius: 50% !important;
    border:        1.5px solid var(--mw-border, #e2e8f0) !important;
    background:    #fff !important;
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all .15s;
    padding:       0 !important;
}
.mw-stock-alert-btn:hover {
    border-color: #f39c12 !important;
    background:   #fef9e7 !important;
}
.mw-stock-alert-btn--active {
    border-color: #f39c12 !important;
    background:   #fef9e7 !important;
}

/* ── Animation ──────────────────────────────────────────────────────────── */
@keyframes mwFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive additionnel */
@media (max-width: 480px) {
    .mw-share-panel  { left: auto; right: 0; min-width: 180px; }
    .mw-notify-form__fields { flex-direction: column; }
    .mw-notify-form__name,
    .mw-notify-form__email { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.3 – Mode naissance/mariage, export PDF, limite listes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bouton export PDF — hérite du style button button-small standard ─── */

/* ── Badge type dans le trigger ─────────────────────────────────────────── */
.mw-list-type-icon {
    font-style: normal;
    margin-right: 2px;
}

/* ── Badge date d'événement ─────────────────────────────────────────────── */
.mw-event-date-badge {
    display:       inline-block;
    background:    #eff6ff;
    color:         #1d4ed8;
    font-size:     .75rem;
    padding:       2px 8px;
    border-radius: 99px;
    margin-left:   8px;
    font-weight:   500;
}

/* ── Panneau type de liste ──────────────────────────────────────────────── */
.mw-type-panel {
    background:    #f8fafc;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: var(--mw-radius, 8px);
    padding:       14px 16px;
    margin-bottom: 16px;
}
.mw-type-panel__label {
    font-size:    .78rem;
    font-weight:  600;
    color:        #718096;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
    display:      block;
}
.mw-type-panel__btns {
    display:  flex;
    gap:      6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mw-type-btn {
    padding:       7px 14px;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: 6px;
    background:    #fff;
    font-size:     .82rem;
    cursor:        pointer;
    color:         #4a5568;
    transition:    all .12s;
    font-weight:   500;
}
.mw-type-btn:hover {
    border-color: var(--mw-primary, #e74c3c);
    color:        var(--mw-primary, #e74c3c);
}
.mw-type-btn--active {
    border-color: var(--mw-primary, #e74c3c) !important;
    background:   var(--mw-primary-light, #f9e9e7) !important;
    color:        var(--mw-primary, #e74c3c) !important;
    font-weight:  600;
}
.mw-type-btn--active[data-type="birth"] {
    border-color: #3b82f6 !important;
    background:   #eff6ff !important;
    color:        #1d4ed8 !important;
}
.mw-type-btn--active[data-type="wedding"] {
    border-color: #d97706 !important;
    background:   #fffbeb !important;
    color:        #92400e !important;
}
.mw-type-panel__date {
    display:   flex;
    align-items: center;
    gap:       8px;
    margin-top: 6px;
    animation: mwFadeIn .15s ease;
}
.mw-type-panel__date label {
    font-size:   .8rem;
    color:       #718096;
    white-space: nowrap;
}
.mw-event-date-input {
    border:        1.5px solid var(--mw-border, #e2e8f0) !important;
    border-radius: 6px !important;
    padding:       5px 10px !important;
    font-size:     .85rem !important;
    color:         #2d3748 !important;
}
.mw-event-date-input:focus {
    border-color: var(--mw-primary, #e74c3c) !important;
    outline:      none;
}

/* ── Badge progression liste événement ─────────────────────────────────── */
.mw-event-progress {
    background:    #f8fafc;
    border:        1.5px solid var(--mw-border, #e2e8f0);
    border-radius: 8px;
    padding:       12px 16px;
    margin-bottom: 16px;
}
.mw-event-progress__header {
    display:        flex;
    justify-content: space-between;
    font-size:      .82rem;
    font-weight:    600;
    color:          #2d3748;
    margin-bottom:  8px;
}
.mw-event-progress__bar-wrap {
    height:        8px;
    background:    #e2e8f0;
    border-radius: 4px;
    overflow:      hidden;
    margin-bottom: 4px;
}
.mw-event-progress__bar {
    height:        100%;
    background:    var(--mw-primary, #e74c3c);
    border-radius: 4px;
    transition:    width .3s ease;
}
.mw-event-progress__hint {
    font-size:  .75rem;
    color:      #a0aec0;
    margin:     0;
}

/* ── Message limite listes atteinte ─────────────────────────────────────── */
.mw-limit-notice {
    background:    #fff3cd;
    border:        1.5px solid #ffc107;
    border-radius: 6px;
    padding:       10px 14px;
    font-size:     .85rem;
    color:         #856404;
    margin-bottom: 12px;
    display:       none;
}
.mw-limit-notice.mw-limit-notice--visible {
    display: block;
    animation: mwFadeIn .15s ease;
}