/* 
 * Fanatics CMP - Banner & Modal Styles
 */

/* ==========================================================================
   Banner
   ========================================================================== */
#fanatics-cmp-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--white, #ffffff);
    color: var(--text-dark, #2f2f2f);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 999999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
    padding: 24px 0;
}

#fanatics-cmp-banner.is-visible {
    transform: translateY(0);
    visibility: visible;
}

.cmp-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cmp-banner-text {
    flex: 1 1 500px;
}

.cmp-banner-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmp-banner-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-grey, #555555);
}

.cmp-banner-desc a {
    color: var(--primary, #e25822);
    text-decoration: underline;
}

.cmp-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   Modal & Overlay
   ========================================================================== */
#fanatics-cmp-overlay {
    /* Aan het scherm vastgezet, niet aan de pagina.
       Deze laag mat op een telefoon 443 pixels op een scherm van 390, en sleepte
       daarmee de hele afrekenpagina mee: de banner en de vergelijkbalk rekten er
       vervolgens ook naartoe. Oorzaak is de backdrop-filter hieronder, die van
       dit element een houvast maakt voor vast gepositioneerde elementen; `right:0`
       slaat dan niet meer op het scherm maar op een blok dat al te breed is.
       100vw is wél altijd het scherm. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    right: auto;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

#fanatics-cmp-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

#fanatics-cmp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    background: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

#fanatics-cmp-modal.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
}

.cmp-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    border-radius: 12px 12px 0 0;
}

.cmp-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.cmp-btn-close-icon {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 4px;
}

.cmp-btn-close-icon:hover {
    color: #333;
}

.cmp-modal-body {
    padding: 24px;
}

.cmp-modal-intro {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 24px;
}

/* Toggles */
.cmp-category {
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cmp-cat-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.cmp-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.cmp-cat-expand {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--primary, #E25822);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-weight: 500;
    transition: all 0.2s;
}

.cmp-cat-expand svg {
    transition: transform 0.2s;
}

.cmp-cat-expand[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.cmp-cat-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

/* Services list */
.cmp-services-list {
    margin-top: -8px;
    margin-bottom: 12px;
    padding: 0 16px;
    font-size: 0.8rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                margin 0.25s ease;
}

.cmp-services-list.is-open {
    max-height: 600px; /* Genoeg ruimte voor lange lijsten */
    opacity: 1;
}

.cmp-service-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.cmp-service-item:last-child {
    border-bottom: none;
}

.cmp-service-name {
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
}

.cmp-service-vendor {
    font-size: 0.7rem;
    color: #999;
    font-weight: 400;
}

.cmp-service-purpose {
    margin-top: 4px;
    color: #666;
    line-height: 1.4;
}

.cmp-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    border: none;
    outline: none;
}

.cmp-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(226, 88, 34, 0.3);
}

.cmp-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cmp-toggle.active {
    background-color: var(--primary, #e25822);
}

.cmp-toggle.active::after {
    transform: translateX(20px);
}

.cmp-toggle.is-disabled {
    cursor: not-allowed;
    background-color: #8bb38b; /* Groen, maar dan voor "altijd aan" */
    opacity: 0.7;
}
.cmp-toggle.is-disabled::after {
    transform: translateX(20px);
    box-shadow: none;
}
.cmp-toggle-label-always {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #2e7d32;
    margin-right: 8px;
}

.cmp-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.cmp-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
}

.cmp-btn-primary {
    background-color: var(--primary, #e25822);
    color: #fff;
}

.cmp-btn-primary:hover {
    background-color: #c74818;
}

.cmp-btn-secondary {
    background-color: transparent;
    border-color: #ccc;
    color: #333;
}

.cmp-btn-secondary:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.cmp-btn-link {
    background: transparent;
    color: #555;
    text-decoration: underline;
    padding: 10px 8px;
}

.cmp-btn-link:hover {
    color: #111;
}

@media (max-width: 768px) {
    .cmp-banner-actions {
        width: 100%;
        justify-content: stretch;
    }
    .cmp-banner-actions .cmp-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   De banner nam op een telefoon meer dan de halve pagina (PP-05)
   ==========================================================================
   Gemeten op 390 bij 624: de banner was 350 pixels hoog, 56 procent van wat je
   ziet. Op een productpagina dekte hij daarmee de onderste helft van de foto af,
   inclusief de vergrootknop rechtsonder. Die stond er dus wel, maar niemand kon
   hem zien of raken voordat hij een keuze had gemaakt. Dat is de melding "op de
   iPhone zie ik het vergrootglas niet".

   Drie ingrepen, alle drie opmaak. Aan de tekst en aan de keuzes verandert
   niets: weigeren en accepteren blijven even groot, even zwaar en even
   vindbaar, want dat is geen ontwerpkwestie maar een eis.

     - weigeren en accepteren naast elkaar op één rij in plaats van onder
       elkaar. Ze zijn elkaars tegenhanger, dus naast elkaar leest ook beter.
     - "Voorkeuren instellen" eronder over de volle breedte; dat is de derde weg
       en geen gelijkwaardige keuze.
     - de kop een maat kleiner, want op 20 pixels brak hij over twee regels.

   Gemeten na afloop: 350 naar 246 pixels, van 56 naar 39 procent van het
   scherm, en de vergrootknop staat vrij.
   ========================================================================== */
@media (max-width: 768px) {
    .cmp-banner-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cmp-banner-actions .cmp-btn-secondary,
    .cmp-banner-actions .cmp-btn-primary {
        flex: 1 1 0;
        min-width: 0;
    }
    .cmp-banner-actions .cmp-btn-link {
        flex: 1 1 100%;
        order: 1;
    }
    .cmp-banner-title {
        font-size: 17px;
        line-height: 1.25;
    }
    .cmp-modal-footer {
        flex-direction: column;
        gap: 12px;
    }
    .cmp-modal-footer .cmp-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Vastpinnen aan het scherm, niet aan de pagina
   ==========================================================================
   Op een telefoon was de afrekenpagina 443 pixels breed op een scherm van 390,
   en al het uitstekende bleek van de cookiebanner en het voorkeurenvenster te
   komen. De oorzaak is subtiel: deze overlays staan op `position:fixed` met
   `left:0;right:0`, en dat hoort het scherm te zijn. Maar zodra er iets een
   houvast voor vaste elementen aanmaakt (hier de `backdrop-filter` op de laag
   erachter), slaat `right:0` op een blok dat al te breed is. De banner rekt dan
   mee met de pagina, de pagina met de banner, en dat blijft zo hangen.

   `100vw` is per definitie het scherm en kan niet meerekenen met de pagina.
   Daarmee is de lus doorbroken, ongeacht wat er verder op de pagina gebeurt. */
#fanatics-cmp-banner,
#fanatics-cmp-overlay{
    width: 100vw;
    max-width: 100vw;
    right: auto;
    box-sizing: border-box;
}

.cmp-banner-inner{
    max-width: min(1200px, 100vw);
    box-sizing: border-box;
}

.cmp-banner-inner > *{
    max-width: 100%;
    min-width: 0;
}

#fanatics-cmp-modal{
    max-width: min(600px, calc(100vw - 32px));
    box-sizing: border-box;
}

/* De tekening in de kop van de cookiebalk (PR-02). Stond hier een emoji: die
   ziet er op elk apparaat anders uit en hoort niet in klanttekst op deze site.
   Hij staat op de tekstregel, dus met vertical-align in plaats van flex. */
.cmp-banner-ic{
  width:20px;height:20px;display:inline-block;vertical-align:-3px;margin-right:7px;
}