/* ------------------------------------------------------------------
   AVLS - Relance panier : pastille + message au survol du panier.
   Les selecteurs cibles appartiennent au theme intertimes (.blockcart),
   avec un repli sur les classes du theme classic.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Trois habillages possibles pour signaler le panier en attente. Le
   choix se fait dans le back-office ; le JS pose la classe adequate.

     badge     pastille rouge portant le nombre, au coin de l'icone
     dot       point rouge discret, le compteur du theme reste en place
     highlight l'icone et son compteur passent en rouge

   Point d'attention propre a ce theme : .cart-products-count EST l'icone
   du panier (pictogramme en :before, compteur centre par-dessus), et tout
   span qu'on y place est etire sur toute sa surface. La pastille s'ancre
   donc sur .inner-wrapper, et chaque propriete de position est remise a
   plat pour ne rien heriter.
   ------------------------------------------------------------------ */

.avlscr-anchor {
    position: relative;
}

/* Socle commun aux deux elements ajoutes. Trois classes pour passer devant
   `.cart-header .cart-products-count span` du theme. */
.blockcart .avlscr-anchor .avlscr-badge,
.blockcart .avlscr-anchor .avlscr-dot,
.cart-preview .avlscr-anchor .avlscr-badge,
.cart-preview .avlscr-anchor .avlscr-dot {
    position: absolute;
    bottom: auto;
    left: auto;
    z-index: 6;
    box-sizing: border-box;
    display: block;
    background: #e02b27;
    color: #fff;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none;
    animation: avlscr-pop .45s cubic-bezier(.2, .9, .3, 1.4) both;
}

/* ---- Variante "badge" : le nombre dans une pastille ---- */

.blockcart .avlscr-anchor .avlscr-badge,
.cart-preview .avlscr-anchor .avlscr-badge {
    top: -9px;
    right: -13px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3);
}

/* Un seul chiffre a l'ecran : le compteur natif s'efface. Sur grand ecran il
   est centre dans l'icone, sur mobile il est lui-meme une pastille. */
@media (min-width: 992px) {
    .blockcart.avlscr-style-badge .cart-header .cart-products-count > span {
        visibility: hidden;
    }
}

@media (max-width: 991px) {
    .blockcart.avlscr-style-badge .cart-header .cart-products-count {
        display: none;
    }
}

/* ---- Variante "dot" : simple point d'alerte ---- */

.blockcart .avlscr-anchor .avlscr-dot,
.cart-preview .avlscr-anchor .avlscr-dot {
    top: -4px;
    right: -7px;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .35);
}

/* Sous 992px, le theme place deja le compteur en pastille dans le coin de
   l'icone. Empiler un point par-dessus donnerait deux marqueurs qui se
   chevauchent : on colore la pastille existante a la place. */
@media (max-width: 991px) {
    .blockcart.avlscr-style-dot .avlscr-anchor .avlscr-dot {
        display: none;
    }

    .blockcart.avlscr-style-dot .cart-header .cart-products-count {
        background: #e02b27;
        color: #fff;
    }
}

/* ---- Variante "highlight" : l'icone passe en rouge ---- */

.blockcart.avlscr-style-highlight .cart-header .cart-products-count,
.blockcart.avlscr-style-highlight .cart-header .cart-products-count > span {
    color: #e02b27;
}

.blockcart.avlscr-style-highlight .cart-header > .inner-wrapper i {
    color: #e02b27;
}

/* ---- Animations ---- */

@keyframes avlscr-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Pulsation trois fois, puis on laisse le visiteur tranquille. */
.blockcart .avlscr-anchor .avlscr-badge--pulse,
.cart-preview .avlscr-anchor .avlscr-badge--pulse {
    animation: avlscr-pop .45s cubic-bezier(.2, .9, .3, 1.4) both,
               avlscr-pulse 2s ease-in-out .6s 3;
}

.blockcart .avlscr-anchor .avlscr-dot--pulse,
.cart-preview .avlscr-anchor .avlscr-dot--pulse {
    animation: avlscr-pop .45s cubic-bezier(.2, .9, .3, 1.4) both,
               avlscr-pulse-dot 2s ease-in-out .6s 3;
}

@keyframes avlscr-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 0 rgba(224, 43, 39, .45); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 8px rgba(224, 43, 39, 0); }
}

@keyframes avlscr-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 0 rgba(224, 43, 39, .5); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 7px rgba(224, 43, 39, 0); }
}

/* ---- Message ---- */

.avlscr-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #fdf3f2;
    border: 1px solid #f3cdcb;
    color: #7a2320;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.avlscr-message__icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.4;
}

.avlscr-message__text {
    flex: 1 1 auto;
}

/* Bulle autonome, utilisee quand le message s'ouvre tout seul au chargement
   (le panneau du theme, lui, n'est visible qu'au survol). */
.avlscr-bubble {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1000;
    width: 290px;
    max-width: calc(100vw - 32px);
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    color: #333;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

.avlscr-bubble--visible {
    opacity: 1;
    transform: translateY(0);
}

.avlscr-bubble::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    transform: rotate(45deg);
}

.avlscr-bubble__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: #e02b27;
}

.avlscr-bubble__cta {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    text-decoration: underline;
}

.avlscr-bubble__close {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 2px 6px;
    border: 0;
    background: none;
    color: #9b9b9b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.avlscr-bubble__close:hover {
    color: #333;
}

@media (prefers-reduced-motion: reduce) {
    .blockcart .avlscr-anchor .avlscr-badge,
    .blockcart .avlscr-anchor .avlscr-badge--pulse,
    .blockcart .avlscr-anchor .avlscr-dot,
    .blockcart .avlscr-anchor .avlscr-dot--pulse,
    .avlscr-bubble {
        animation: none;
        transition: none;
    }
}