/* ─── Cookie Banner Pro — Frontend ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── CSS Custom Properties (surpassées par le JS via style inline) ── */
.cbp-banner {
    /* Paddings bannière */
    --cbp-pt: 24px;
    --cbp-pr: 24px;
    --cbp-pb: 24px;
    --cbp-pl: 24px;
    /* Paddings boutons */
    --cbp-btn-pt: 12px;
    --cbp-btn-pr: 24px;
    --cbp-btn-pb: 12px;
    --cbp-btn-pl: 24px;
    /* Gaps & marges */
    --cbp-btn-gap: 10px;
    --cbp-body-mb: 16px;
    --cbp-title-mb: 10px;
}

/* ─── Banner ────────────────────────────────────────────────── */
.cbp-banner {
    font-family: inherit;
    position: fixed;
    z-index: 99999;
    padding: var(--cbp-pt) var(--cbp-pr) var(--cbp-pb) var(--cbp-pl);
    max-width: 400px;
    width: calc(100% - 32px);
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}

/* Positions */
.cbp-banner--bottom-right { bottom: 20px; right: 20px; }
.cbp-banner--bottom-left  { bottom: 20px; left: 20px; }
.cbp-banner--top          { top: 0; left: 0; right: 0; max-width: 100%; width: 100%; border-radius: 0 0 16px 16px !important; }
.cbp-banner--bottom       { bottom: 0; left: 0; right: 0; max-width: 100%; width: 100%; border-radius: 16px 16px 0 0 !important; }
.cbp-banner--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 420px;
}

/* Enter/exit */
.cbp-banner--hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.cbp-banner--bottom-right.cbp-banner--hidden,
.cbp-banner--bottom-left.cbp-banner--hidden  { transform: translateY(20px); }
.cbp-banner--top.cbp-banner--hidden          { transform: translateY(-100%); }
.cbp-banner--bottom.cbp-banner--hidden       { transform: translateY(100%); }
.cbp-banner--center.cbp-banner--hidden       { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; }

/* ─── Banner Body ───────────────────────────────────────────── */
.cbp-banner__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    font-size: 15px;
    transition: background .15s, color .15s;
    padding: 0;
    line-height: 1;
}
.cbp-banner__close:hover { background: rgba(0,0,0,.06); color: #374151; }

.cbp-banner__body { margin-bottom: var(--cbp-body-mb); }
.cbp-banner__title { margin: 0 0 var(--cbp-title-mb); line-height: 1.3; }
.cbp-banner__desc  { margin: 0; line-height: 1.55; }

/* ─── Actions ───────────────────────────────────────────────── */
.cbp-banner__actions { display: flex; gap: var(--cbp-btn-gap); flex-wrap: wrap; margin-bottom: 12px; }
.cbp-banner__actions--center  { justify-content: center; }
.cbp-banner__actions--right   { justify-content: flex-end; }

.cbp-banner__btn-accept,
.cbp-banner__btn-reject {
    padding: var(--cbp-btn-pt) var(--cbp-btn-pr) var(--cbp-btn-pb) var(--cbp-btn-pl);
    cursor: pointer;
    transition: filter .15s, transform .1s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .01em;
    flex: 1;
    min-width: 0; /* évite overflow sur petit écran */
}
.cbp-banner__btn-accept:hover { filter: brightness(.9); }
.cbp-banner__btn-reject:hover { filter: brightness(.95); }
.cbp-banner__btn-accept:active,
.cbp-banner__btn-reject:active { transform: scale(.98); }

/* ─── Links ─────────────────────────────────────────────────── */
.cbp-banner__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.cbp-banner__links a { text-decoration: underline; text-underline-offset: 2px; transition: opacity .15s; }
.cbp-banner__links a:hover { opacity: .75; }

/* ─── Floating Icon ─────────────────────────────────────────── */
.cbp-float-btn {
    display: none;
    position: fixed;
    z-index: 99998;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0; /* Le "rembourrage" est la différence entre taille du bouton et taille du SVG */
    border: none;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.cbp-float-btn--visible {
    display: flex;
    animation: cbpFloatIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* Trick: forcer le rejeu de l'animation en passant par la classe --animating */
.cbp-float-btn--animating { animation: none; }
.cbp-float-btn:hover { transform: scale(1.1) !important; }
.cbp-float-btn svg,
.cbp-float-btn img { pointer-events: none; }

.cbp-float-btn--bottom-right { bottom: var(--cbp-float-bottom, 24px); right: var(--cbp-float-side, 24px); }
.cbp-float-btn--bottom-left  { bottom: var(--cbp-float-bottom, 24px); left: var(--cbp-float-side, 24px); }
.cbp-float-btn--top-right    { top: var(--cbp-float-bottom, 24px); right: var(--cbp-float-side, 24px); }
.cbp-float-btn--top-left     { top: var(--cbp-float-bottom, 24px); left: var(--cbp-float-side, 24px); }

@keyframes cbpFloatIn {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Overlay (center modal) ────────────────────────────────── */
.cbp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99998;
    backdrop-filter: blur(2px);
    animation: cbpFadeIn .25s ease;
}
.cbp-overlay--visible { display: block; }
@keyframes cbpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cbp-banner--bottom-right,
    .cbp-banner--bottom-left {
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0 !important;
    }
    .cbp-banner--bottom-right.cbp-banner--hidden,
    .cbp-banner--bottom-left.cbp-banner--hidden { transform: translateY(100%); }
    /* Sur mobile, s'assurer que les boutons ne sont pas écrasés */
    .cbp-banner__actions { flex-direction: column; }
    .cbp-banner__btn-accept,
    .cbp-banner__btn-reject {
        width: 100%;
        flex: none;
        /* Padding horizontal réduit si trop serré sur mobile */
        padding-left: max(16px, var(--cbp-btn-pl));
        padding-right: max(16px, var(--cbp-btn-pr));
    }
    /* Réduire le close icon padding sur mobile pour ne pas couper le titre */
    .cbp-banner__close { top: 10px; right: 10px; }
}

/* ─── Preview panel (inside admin) ──────────────────────────── */
.cbp-banner { /* within preview screen */ }

/* Preview shared classes */
#cbp-live-preview .cbp-banner,
#cbp-live-float-icon .cbp-float-btn {
    /* position comes from inline styles in admin JS */
}