/**
 * Styles de l'éditeur de pack d'emballage — page panier (v1.4.0).
 *
 * Dépend de tkpkg-frontend.css (chargé en dépendance explicite, cf.
 * tkpkg_enqueue_cart_pack_editor_assets(), tkpkg-frontend.php) pour :
 * - les variables CSS partagées (--tkpkg-bronze, --tkpkg-anthracite…) ;
 * - les classes réutilisées telles quelles pour les vignettes de pack
 *   (.tkpkg-pack-option, .tkpkg-swatch-row, .tkpkg-caption, .tkpkg-pack-modal__select…).
 * Ce fichier n'ajoute QUE ce qui est propre au contexte panier : la barre
 * d'état (pack actuel + boutons Modifier/Retirer/Choisir un pack) et le
 * panneau de choix qui se déplie sous la ligne d'article. Valeurs de
 * couleur dupliquées en repli (ex. #a67c52) au cas peu probable où
 * tkpkg-frontend.css échouerait à charger : jamais de couleur qui dépendrait
 * uniquement d'une variable externe pour rester lisible.
 */

.tkpkg-cart-pack-editor {
    margin-top: 0.65em;
    font-size: 13px;
}

.tkpkg-cart-pack-editor__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em 0.85em;
}

.tkpkg-cart-pack-editor__label {
    color: var( --tkpkg-anthracite, #2c363f );
}

.tkpkg-cart-pack-editor__label strong {
    font-weight: 600;
}

.tkpkg-cart-pack-editor__label--empty {
    color: var( --tkpkg-anthracite-light, #5b6570 );
    font-style: italic;
}

.tkpkg-cart-pack-editor__buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
}

.tkpkg-cart-pack-editor__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    font-size: 0.96em;
    color: var( --tkpkg-bronze, #a67c52 );
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tkpkg-cart-pack-editor__link:hover {
    color: var( --tkpkg-bronze-dark, #8a6640 );
}

.tkpkg-cart-pack-editor__link--remove {
    color: #8b8378;
}

.tkpkg-cart-pack-editor__link--remove:hover {
    color: var( --tkpkg-anthracite, #2c363f );
}

.tkpkg-cart-pack-editor button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* v1.4.1 (retour jp) : la fiche produit encadre ce même panneau (fond
 * --tkpkg-surface + bordure pleine) parce qu'il y respire dans une page
 * large, en simple accent visuel. Dans le tiroir, étroit, ce même encadré
 * touche quasiment les deux bords et se lit comme une boîte dans la boîte
 * plutôt que comme un accent discret — pas neutre. Retiré ici (contexte
 * panier UNIQUEMENT, tkpkg-frontend.css et donc la fiche produit ne sont
 * pas touchés) : plus de fond ni d'encadré fermé, un simple filet de
 * séparation en haut, pour que le panneau se lise comme la suite naturelle
 * de la ligne d'article plutôt que comme un widget encarté. */
.tkpkg-cart-pack-editor__panel {
    margin-top: 0.75em;
    padding: 0.75em 0 0;
    border: none;
    border-top: 1px solid var( --tkpkg-border, #d8d2c9 );
    border-radius: 0;
    background: transparent;
    max-width: 420px;
}

.tkpkg-cart-pack-editor__panel[hidden] {
    display: none;
}

.tkpkg-cart-pack-editor__panel-label {
    margin: 0 0 0.6em;
    font-size: 0.92em;
    font-weight: 600;
    color: var( --tkpkg-anthracite, #2c363f );
}

/* Panneau de panier : une seule colonne (jamais la grille 2 colonnes de la
 * fiche produit) — la carte article est déjà étroite, une rangée de swatch
 * façon échantillonnier (héritée de .tkpkg-swatch-row) reste plus lisible
 * ici qu'une grille à 2 colonnes de cartes complètes. */

/* v1.4.1 (retour jp) : la pastille coche (✓, 16px, tkpkg-frontend.css) reste
 * la même image de marque que la fiche produit — pas un bug de position
 * (elle est bien ancrée au coin de SA vignette, via position:relative sur
 * .tkpkg-pack-option lui-même, quel que soit l'agencement en grille ou en
 * rangée). Mais dans la rangée resserrée du tiroir (moins de gouttière entre
 * vignettes qu'en grille sur la fiche produit), la même pastille en valeur
 * absolue paraît plus imposante et flotter entre les deux options plutôt que
 * clairement "sur" l'une d'elles. Réduite ici, contexte panier uniquement —
 * la fiche produit garde sa taille (16px) inchangée. */
.tkpkg-cart-pack-editor .tkpkg-pack-option--selected::after {
    top: -4px;
    right: -4px;
    width: 13px;
    height: 13px;
    font-size: 8px;
    line-height: 13px;
}

.tkpkg-cart-pack-editor__panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6em 1em;
    margin-top: 0.9em;
}

/* v1.4.3 — `hidden` ne suffit pas ici : la règle display:flex ci-dessus est plus
 * spécifique que le [hidden]{display:none} du navigateur, la barre resterait donc
 * visible malgré l'attribut. On la masque explicitement quand elle porte [hidden],
 * c'est-à-dire quand la sélection courante est « Standard » (aucun pack à ajouter). */
.tkpkg-cart-pack-editor__panel-actions[hidden] {
    display: none;
}

/* v1.4.0 : réutilisait le bouton primaire de la fiche produit tel quel (fond
 * bronze plein, texte blanc), seulement redimensionné en taille "inline".
 * v1.4.1 (retour jp, "neutre comme la fiche produit") : sur la fiche
 * produit ce bouton EST le seul appel à l'action visible à cet endroit, il
 * peut se permettre d'être plein. Dans le tiroir, il serait juste
 * au-dessus du vrai bouton principal du panier ("Commander", anthracite
 * plein) — deux boutons pleins l'un sur l'autre se font concurrence à
 * l'œil. Passé en contour (fond transparent, texte + bordure bronze) : reste
 * clairement cliquable, mais se lit comme une action secondaire dans le
 * tiroir plutôt que comme un second bouton principal. Contexte panier
 * UNIQUEMENT (sélecteur scopé à .tkpkg-cart-pack-editor) — le bouton plein
 * de la fiche produit n'est pas touché. */
.tkpkg-cart-pack-editor .tkpkg-pack-modal__select {
    width: auto;
    flex: 1 1 auto;
    margin-top: 0;
    padding: 0.6em 1.2em;
    font-size: 0.88em;
    background: transparent;
    color: var( --tkpkg-bronze, #a67c52 );
    border: 1.5px solid var( --tkpkg-bronze, #a67c52 );
}

.tkpkg-cart-pack-editor .tkpkg-pack-modal__select:hover {
    background: var( --tkpkg-bronze, #a67c52 );
    color: #ffffff;
}

.tkpkg-cart-pack-editor__decline {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8em;
    font-weight: 600;
    color: #8b8378;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.tkpkg-cart-pack-editor__decline:hover {
    color: var( --tkpkg-anthracite, #2c363f );
}

.tkpkg-cart-pack-editor__error {
    margin: 0.7em 0 0;
    font-size: 0.8em;
    font-weight: 600;
    color: #c93b32;
}

.tkpkg-cart-pack-editor__error[hidden] {
    display: none;
}

@media ( max-width: 480px ) {
    .tkpkg-cart-pack-editor__panel {
        max-width: 100%;
    }
}