/* Bouton "Envoyer à KubiShop" dans la modale Liste de courses */
.kubishop-send { display: inline-flex; align-items: center; gap: .35rem; }
.kubishop-send button[data-action="send-kubishop"] { white-space: normal; }
.kubishop-ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; margin-right: .35rem; }
.kubishop-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid currentColor; font-size: .72rem; font-weight: 700;
    color: #6b7280; cursor: help; position: relative; user-select: none;
}
.kubishop-help-bubble {
    position: absolute; bottom: 135%; right: 0; width: 240px; max-width: 70vw;
    background: #1f2430; color: #fff; padding: .6rem .7rem; border-radius: 10px;
    font-size: .78rem; font-weight: 400; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 50; text-align: left;
}
.kubishop-help:hover .kubishop-help-bubble,
.kubishop-help:focus .kubishop-help-bubble { opacity: 1; visibility: visible; }

/* Desktop : autoriser le pied de modale à passer à la ligne si besoin */
@media (min-width: 561px) {
    .modal-foot { flex-wrap: wrap; }
}

/* Mobile : le pied est en colonne (boutons 100%). On fait cohabiter le bouton et l'aide
   sans déborder (sinon recalcul de layout au 1er tap -> clic raté). */
@media (max-width: 560px) {
    .kubishop-send { display: flex; width: 100%; }
    .kubishop-send button[data-action="send-kubishop"] { width: auto; flex: 1 1 auto; }
    .kubishop-help-bubble { right: auto; left: 0; }
}

/* Empêche le zoom au double/multi-tap sur les boutons (ex. +/- des portions) */
button, a.btn-cta, .btn-primary, .btn-secondary, .btn-ghost, [data-action] {
    touch-action: manipulation;
}

/* --- Modale liste de courses : accessibilité du pied sur mobile --- */
/* Viewport dynamique : tient compte de la barre d'outils du navigateur mobile */
[data-modal="shopping-list"] .modal { max-height: 85dvh; }

@media (max-width: 560px) {
    [data-modal="shopping-list"] .modal { max-height: 90dvh; }

    /* Pied compact : Copier + Imprimer côte à côte, Envoyer pleine largeur dessous */
    [data-modal="shopping-list"] .modal-foot {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    [data-modal="shopping-list"] .modal-foot > button[data-action="copy-list"],
    [data-modal="shopping-list"] .modal-foot > button[data-action="print-list"] {
        flex: 1 1 0; width: auto; min-width: 0;
    }
    [data-modal="shopping-list"] .modal-foot .kubishop-send { flex: 1 1 100%; width: 100%; }
    [data-modal="shopping-list"] .modal-foot .kubishop-send button[data-action="send-kubishop"] {
        width: auto; flex: 1 1 auto;
    }
}