/* =====================================================================
 * Fichier : assets/css/components/cookies.css
 * Projet  : Brennholz Shop24
 * Rôle    : Bannière de consentement cookies + fenêtre de réglages.
 *           Composant : includes/cookies_banner.php
 * ===================================================================== */

.cookie-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2500;
    max-width: 1180px; margin: 0 auto; background: #fff; box-shadow: 0 25px 70px rgba(20, 30, 40, .28);
    border-top: 4px solid transparent; border-image: var(--hfk-grad-fire-h) 1;
    transform: translateY(140%); transition: transform .6s var(--hfk-ease);
}
.cookie-banner.is-visible { transform: none; }
.cookie-banner-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; padding: 1.4rem 1.6rem; }
.cookie-banner-icon { width: 60px; height: 60px; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: var(--hfk-grad-fire); animation: hfk-float 3.2s ease-in-out infinite; }
.cookie-banner-text h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.cookie-banner-text p { font-size: .88rem; line-height: 1.6; margin: 0; color: var(--hfk-muted); }
.cookie-banner-text a { font-weight: 600; }
.cookie-banner-actions { display: flex; flex-direction: column; gap: .5rem; min-width: 220px; }
.cookie-banner-actions .btn { width: 100%; padding: .7rem 1rem; }
.cookie-link-btn { border: 0; background: none; color: var(--hfk-charcoal); font-weight: 600; font-size: .88rem; padding: .35rem; text-decoration: underline; text-underline-offset: 3px; }
.cookie-link-btn:hover { color: var(--hfk-flame-dark); }

/* Fenêtre de réglages */
.cookie-modal { position: fixed; inset: 0; z-index: 2550; display: grid; place-items: center; padding: 1rem; background: rgba(15, 20, 25, .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.cookie-modal[hidden] { display: none; }
.cookie-modal.is-visible { opacity: 1; }
.cookie-modal-dialog { width: min(640px, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; background: #fff; box-shadow: var(--hfk-shadow-lg); transform: translateY(24px) scale(.97); transition: transform .45s var(--hfk-ease); }
.cookie-modal.is-visible .cookie-modal-dialog { transform: none; }
.cookie-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--hfk-border); }
.cookie-modal-head h2 { font-size: 1.2rem; margin: 0; }
.cookie-modal-head h2 i { color: var(--hfk-flame); margin-right: .4rem; }
.cookie-modal-body { padding: 1.3rem 1.4rem; overflow-y: auto; font-size: .92rem; }
.cookie-modal-body > p { color: var(--hfk-muted); }
.cookie-cat { padding: 1rem 1.1rem; margin-top: .8rem; background: var(--hfk-cream); border-left: 3px solid var(--hfk-flame); }
.cookie-cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cookie-cat h3 { font-size: 1rem; margin: 0 0 .25rem; }
.cookie-cat h3 i { color: var(--hfk-flame); margin-right: .35rem; }
.cookie-cat p { margin: 0; font-size: .85rem; color: var(--hfk-muted); }
.cookie-always { flex-shrink: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hfk-forest-dark); padding: .3rem .6rem; background: #E8F6EC; }
.cookie-modal-foot { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem 1.4rem; border-top: 1px solid var(--hfk-border); }
.cookie-modal-foot .btn { padding: .65rem 1.1rem; }

/* Interrupteur */
.cookie-switch { position: relative; flex-shrink: 0; width: 52px; height: 28px; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cookie-switch-slider { position: absolute; inset: 0; background: #D5DADF; border-radius: 28px; transition: background .3s; }
.cookie-switch-slider::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .35s var(--hfk-ease-bounce); }
.cookie-switch input:checked + .cookie-switch-slider { background: var(--hfk-forest); }
.cookie-switch input:checked + .cookie-switch-slider::before { transform: translateX(24px); }
.cookie-switch input:focus-visible + .cookie-switch-slider { outline: 3px solid var(--hfk-amber); outline-offset: 2px; }

@media (max-width: 991.98px) {
    .cookie-banner-inner { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; }
    .cookie-banner-icon { display: none; }
    .cookie-banner-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .cookie-banner-actions .btn { flex: 1 1 180px; width: auto; }
    .cookie-link-btn { flex: 1 1 100%; }
}
@media (max-width: 575.98px) {
    .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; }
    .cookie-banner-text p { font-size: .82rem; }
    .cookie-modal-foot .btn { flex: 1 1 100%; }
}