/* ==============================================
   ACB — Button & Popup Builder — Frontend CSS
   ============================================== */

/* ---- Wrapper ---- */
.acb-wrap { display: block; }
.acb-wrap.acb-align-left   { text-align: left; }
.acb-wrap.acb-align-center { text-align: center; }
.acb-wrap.acb-align-right  { text-align: right; }

/* ---- Button ---- */
.acb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.4;
    vertical-align: middle;

    background:      var(--acb-bg,          #000000);
    color:           var(--acb-color,        #ffffff);
    border:          var(--acb-border-w,     1px) solid var(--acb-border, var(--acb-bg, #000000));
    font-family:     var(--acb-font-family,  inherit);
    font-size:       var(--acb-font-size,    14px);
    font-weight:     var(--acb-font-weight,  400);
    letter-spacing:  var(--acb-letter-sp,    0em);
    text-transform:  var(--acb-text-trans,   none);
    padding:         var(--acb-pad-v, 12px)  var(--acb-pad-h, 24px);
    border-radius:   var(--acb-radius,       0px);
    box-shadow:      var(--acb-shadow,       none);
    width:           var(--acb-width,        auto);
    transition:
        background    var(--acb-transition, 250ms) ease,
        color         var(--acb-transition, 250ms) ease,
        border-color  var(--acb-transition, 250ms) ease,
        box-shadow    var(--acb-transition, 250ms) ease;
}
.acb-btn:hover {
    background:   var(--acb-bg-h,    #333333);
    color:        var(--acb-color-h, #ffffff);
    border-color: var(--acb-border-h, var(--acb-bg-h, #333333));
    text-decoration: none;
}
.acb-btn:focus-visible {
    outline: 3px solid var(--acb-bg, #000);
    outline-offset: 3px;
}
.acb-btn-icon {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- Visibility helpers ---- */
@media (max-width: 767px) {
    .acb-hide-mob { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .acb-hide-tab { display: none !important; }
}
@media (min-width: 1024px) {
    .acb-hide-desk { display: none !important; }
}

/* ==============================================
   POPUP
   ============================================== */

.acb-popup-wrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.acb-popup-wrap[hidden] {
    display: none !important;
}
.acb-popup-wrap.acb-popup--visible {
    pointer-events: auto;
}

/* ---- Overlay ---- */
.acb-popup-overlay {
    position: absolute;
    inset: 0;
    background: var(--acb-overlay-bg, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(var(--acb-overlay-blur, 0px));
    -webkit-backdrop-filter: blur(var(--acb-overlay-blur, 0px));
    opacity: 0;
    transition: opacity var(--acb-popup-speed, 300ms) ease;
}
.acb-popup-wrap.acb-popup--visible .acb-popup-overlay {
    opacity: 1;
}

/* ---- Popup box ---- */
.acb-popup {
    position: relative;
    z-index: 1;
    background:    var(--acb-popup-bg,        #ffffff);
    color:         var(--acb-popup-color,     #000000);
    width:         var(--acb-popup-width,     600px);
    max-width:     var(--acb-popup-max-width, 90vw);
    height:        var(--acb-popup-height,    auto);
    border-radius: var(--acb-popup-radius,    0px);
    max-height:    90vh;
    overflow-y:    auto;
    box-shadow:    0 10px 60px rgba(0, 0, 0, 0.18);
    outline:       none;
}

/* ---- Close button ---- */
.acb-popup-close {
    position: absolute;
    top: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: currentColor;
    opacity: 0.55;
    transition: opacity 150ms ease;
    z-index: 2;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}
.acb-popup-close:hover  { opacity: 1; }
.acb-popup-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.acb-popup--topright .acb-popup-close { right: 14px; }
.acb-popup--topleft  .acb-popup-close { left:  14px; }

/* ---- Header / Body / Footer ---- */
.acb-popup-header {
    padding: 22px 50px 0 24px;
}
.acb-popup-title {
    margin: 0;
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.3;
}
.acb-popup-body {
    padding: 20px 24px 24px;
}
.acb-popup-image { margin-bottom: 16px; }
.acb-popup-img   { width: 100%; height: auto; display: block; }
.acb-popup-content { line-height: 1.65; }
.acb-popup-content p:last-child { margin-bottom: 0; }

.acb-popup-footer {
    padding: 0 24px 24px;
}
.acb-popup-footer-btn {
    display: inline-block;
    padding: 10px 24px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
    transition: opacity 180ms ease;
}
.acb-popup-footer-btn:hover { opacity: 0.82; text-decoration: none; }

/* ==============================================
   POSITION VARIANTS
   ============================================== */

/* Bottom */
.acb-popup--bottom {
    align-items: flex-end;
}
.acb-popup--bottom .acb-popup {
    width: 100%;
    max-width: 100%;
    max-height: 65vh;
    border-radius: var(--acb-popup-radius, 0) var(--acb-popup-radius, 0) 0 0;
}

/* Drawer right */
.acb-popup--drawer-right {
    justify-content: flex-end;
}
.acb-popup--drawer-right .acb-popup {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

/* Tooltip — overlay hidden, popup anchored via JS */
.acb-popup--tooltip .acb-popup-overlay { display: none; }
.acb-popup--tooltip .acb-popup {
    position: absolute;
    max-width: var(--acb-popup-max-width, 320px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ==============================================
   ANIMATIONS — @keyframes
   ============================================== */

@keyframes acb-fade-in   { from { opacity: 0; }                         to { opacity: 1; } }
@keyframes acb-fade-out  { from { opacity: 1; }                         to { opacity: 0; } }

@keyframes acb-slide-up-in  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes acb-slide-up-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(28px); } }

@keyframes acb-zoom-in   { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes acb-zoom-out  { from { opacity: 1; transform: scale(1); }    to { opacity: 0; transform: scale(0.86); } }

@keyframes acb-flip-in  { from { opacity: 0; transform: perspective(500px) rotateX(-18deg); } to { opacity: 1; transform: perspective(500px) rotateX(0); } }
@keyframes acb-flip-out { from { opacity: 1; transform: perspective(500px) rotateX(0); }       to { opacity: 0; transform: perspective(500px) rotateX(-18deg); } }

@keyframes acb-bounce-in {
    0%   { opacity: 0; transform: scale(0.72); }
    60%  { opacity: 1; transform: scale(1.05); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}
@keyframes acb-bounce-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.84); } }

@keyframes acb-slide-right-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes acb-slide-right-out { from { transform: translateX(0); }    to { transform: translateX(100%); } }

@keyframes acb-slide-bottom-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes acb-slide-bottom-out { from { transform: translateY(0); }    to { transform: translateY(100%); } }

/* ---- Animation classes applied on .acb-popup ---- */
.acb-anim-fade-in     { animation: acb-fade-in     var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-fade-out    { animation: acb-fade-out    var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-slide-up-in { animation: acb-slide-up-in var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-slide-up-out{ animation: acb-slide-up-out var(--acb-popup-speed, 300ms) ease         forwards; }
.acb-anim-zoom-in     { animation: acb-zoom-in     var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-zoom-out    { animation: acb-zoom-out    var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-flip-in     { animation: acb-flip-in     var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-flip-out    { animation: acb-flip-out    var(--acb-popup-speed, 300ms) ease          forwards; }
.acb-anim-bounce-in   { animation: acb-bounce-in   var(--acb-popup-speed, 300ms) cubic-bezier(.34,1.56,.64,1) forwards; }
.acb-anim-bounce-out  { animation: acb-bounce-out  var(--acb-popup-speed, 300ms) ease          forwards; }

/* ---- Drawer right — remplace l'effet par slide depuis la droite ---- */
.acb-popup--drawer-right [class*="acb-anim-"][class$="-in"]  { animation-name: acb-slide-right-in  !important; }
.acb-popup--drawer-right [class*="acb-anim-"][class$="-out"] { animation-name: acb-slide-right-out !important; }

/* ---- Bottom — remplace l'effet par slide depuis le bas ---- */
.acb-popup--bottom [class*="acb-anim-"][class$="-in"]  { animation-name: acb-slide-bottom-in  !important; }
.acb-popup--bottom [class*="acb-anim-"][class$="-out"] { animation-name: acb-slide-bottom-out !important; }

/* ---- Tooltip — pas d'opacity animation (trop rapide) ---- */
.acb-popup--tooltip .acb-anim-fade-in  { animation-name: acb-zoom-in; }
.acb-popup--tooltip .acb-anim-fade-out { animation-name: acb-zoom-out; }

/* ==============================================
   RESPONSIVE POPUP
   ============================================== */

@media (max-width: 767px) {
    .acb-popup--mob-full .acb-popup {
        width:         100% !important;
        max-width:     100% !important;
        height:        100% !important;
        max-height:    100% !important;
        border-radius: 0   !important;
    }
}