/*
 * Styles communs des fenetres de panier, charges sur toutes les pages qui en
 * affichent une (main-layout, show-catalogues, panier_client,
 * seo_product_detail_page, new_view/detail_produit).
 *
 * .card-box : la liste des articles du panier. Definie auparavant a
 * l'identique dans recap_panier, recap_panier_client et
 * new_view/recap_produit_panier.
 * Les paniers de catalogue (catalogue_panier_items, recap_catalogue) gardent
 * leur propre .card-box, ecrite dans leur vue : elle s'applique par-dessus.
 * Restent des ajustements propres a certaines pages, en !important :
 * show-catalogues et panier_client (height 68vh, padding-bottom 75px).
 *
 * Ce fichier est charge par les pages hotes, pas par les vues de panier :
 * celles-ci sont des fragments injectes en AJAX a chaque ouverture.
 */
.card-box {
    height: auto;
    width: 301px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F5F5F5;
    top: 62px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    margin-top: 20px;
    max-height: 68%;
}

/*
 * Boutons Supprimer et Modifier des cartes du panier : meme apparence que les
 * boutons oeil / panier du panier catalogue (recap_catalogue l.3509-3557,
 * show-catalogues l.155) — rond blanc sans bordure, icone fine de 18px,
 * gris fonce au repos, bleue au survol et au clic.
 *
 * Les <img> sont generees par 9 fonctions JS (modal_script, panier_script,
 * voir_panier...) : on les garde et on remplace leur image en CSS (fond +
 * padding egal a la largeur : l'image d'origine sort de la zone visible).
 * Les icones sont les versions bleues ; un filtre les passe en gris au repos.
 *
 * #recap : paniers recap_panier, recap_panier_client, new_view/recap_produit_panier.
 * Le panier "items" du catalogue (#catalogue_recap) n'est pas concerne.
 * Les pages qui masquent le crayon (.partager-svg { opacity: 0 }) le gardent
 * masque sur desktop.
 */
#recap .button-layout .button-close {
    background-color: #fff !important;
    cursor: pointer;
}

#recap .button-layout .corbeil-filter,
#recap .button-layout .partager-svg {
    display: block;
    box-sizing: border-box;
    width: 18px !important;
    height: 18px !important;
    padding-left: 18px;
    margin: 0 auto;
    border-radius: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* #1A7EF5 en niveaux de gris = 113 ; x 0.655 = 74, soit #4A4A4A, la
       couleur des icones du catalogue (Fermes2.svg, Panier_1.svg) */
    filter: grayscale(100%) brightness(65.5%);
}

#recap .button-layout .corbeil-filter {
    background-image: url('/assets/images/icones-vendeurs2/icones-menu/corbeillebleu.svg');
}

#recap .button-layout .partager-svg {
    background-image: url('/assets/recap_produit/icons/Modifier.svg');
}

#recap .button-layout .button-close:hover img,
#recap .button-layout .button-close:active img {
    filter: none;
}

/* Mobile : mobile_responsive.css (l.39) passe ces images a 60% d'opacite ;
   les icones du catalogue (des <span>) n'y sont pas soumises. */
@media screen and (max-width: 500px) {
    #recap .button-layout .corbeil-filter,
    #recap .button-layout .partager-svg {
        opacity: 1;
    }
}