/* ==========================================================================
   WMA Cookies — plg_system_wmacookies
   ========================================================================== */

:root {
    --wmc-banner-bg:      #ffffff;
    --wmc-banner-color:   #333333;
    --wmc-overlay-bg:     #ffffff;
    --wmc-accent:         #2e7d32;
    --wmc-accent-hover:   #1b5e20;
    --wmc-radius:         6px;
    --wmc-shadow:         0 4px 24px rgba(0,0,0,.15);
    --wmc-transition:     .25s ease;
    --wmc-z:              99990;
}


/* ==========================================================================
   BANNER
   ========================================================================== */

.wmc-banner {
    background: var(--wmc-banner-bg);
    color:      var(--wmc-banner-color);
    box-shadow: var(--wmc-shadow);
    z-index:    var(--wmc-z);
    display:    none;
}
.wmc-banner.wmc-banner--visible { display: block; }

/* layouts */
.wmc-banner--footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
}

.wmc-banner--box-right,
.wmc-banner--box-left {
    position:      fixed;
    bottom:        1.5rem;
    max-width:     474px;
    width:         calc(100% - 2rem);
    border-radius: var(--wmc-radius);
}
.wmc-banner--box-right { right: 1.5rem; }
.wmc-banner--box-left  { left:  1.5rem; }

.wmc-banner--modal {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    max-width:     520px;
    width:         calc(100% - 2rem);
    border-radius: var(--wmc-radius);
}
.wmc-banner--modal::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    -1;
}

/* inner layout */
.wmc-banner__inner {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    padding:     1rem 1.5rem;
}
.wmc-banner--box-right .wmc-banner__inner,
.wmc-banner--box-left  .wmc-banner__inner,
.wmc-banner--modal     .wmc-banner__inner {
    flex-direction: column;
    align-items:    stretch;
}

.wmc-banner__body   { flex: 1; min-width: 0; }
.wmc-banner__logo   { max-width: 80px; display: block; margin-bottom: .5rem; }
.wmc-banner__text   { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.5; }
.wmc-banner__links  { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }

.wmc-link {
    font-size:       .8rem;
    color:           var(--wmc-banner-color);
    opacity:         .7;
    text-decoration: underline;
}
.wmc-link:hover { opacity: 1; }

.wmc-banner__actions {
    display:        flex;
    gap:            .5rem;
    flex-wrap:      wrap;
    flex-shrink:    0;
    flex-direction: column;
}

@media (min-width: 1280px) {
    .wmc-banner__actions {
        flex-direction: row;
        align-items:    center;
    }
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wmc-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         .45rem 1rem;
    border:          2px solid transparent;
    border-radius:   var(--wmc-radius);
    font-size:       .85rem;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background var(--wmc-transition), color var(--wmc-transition), border-color var(--wmc-transition);
    text-decoration: none;
}
.wmc-btn--primary {
    background:   var(--wmc-accent);
    border-color: var(--wmc-accent);
    color:        #fff;
}
.wmc-btn--primary:hover  { background: var(--wmc-accent-hover); border-color: var(--wmc-accent-hover); }
.wmc-btn--secondary      { background: #6c757d; border-color: #6c757d; color: #fff; }
.wmc-btn--secondary:hover{ background: #5a6268; border-color: #5a6268; }
.wmc-btn--outline        { background: transparent; border-color: var(--wmc-banner-color); color: var(--wmc-banner-color); }
.wmc-btn--outline:hover  { background: rgba(0,0,0,.06); }


/* ==========================================================================
   CUSTOMIZE PANEL
   ========================================================================== */

.wmc-panel {
    position: fixed;
    inset:    0;
    z-index:  calc(var(--wmc-z) + 1);
    display:  flex;
    align-items: stretch;
    justify-content: flex-end;
}
.wmc-panel[hidden] { display: none; }

.wmc-panel__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.45);
    cursor:     pointer;
}

.wmc-panel__drawer {
    position:       relative;
    background:     #fff;
    width:          min(420px, 100%);
    display:        flex;
    flex-direction: column;
    box-shadow:     var(--wmc-shadow);
    overflow:       hidden;
    animation:      wmc-slide-in var(--wmc-transition);
}
@keyframes wmc-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.wmc-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid #e9ecef;
    flex-shrink:     0;
}
.wmc-panel__title { margin: 0; font-size: 1rem; font-weight: 700; color: #212529; }
.wmc-panel__close {
    background: none; border: none; font-size: 1.1rem; cursor: pointer;
    color: #6c757d; padding: .25rem .5rem; line-height: 1;
    border-radius: var(--wmc-radius); transition: background var(--wmc-transition);
}
.wmc-panel__close:hover { background: #f1f3f5; color: #212529; }

.wmc-panel__body   { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; }
.wmc-panel__footer {
    padding:     1rem 1.25rem;
    border-top:  1px solid #e9ecef;
    display:     flex;
    gap:         .5rem;
    flex-shrink: 0;
    flex-wrap:   wrap;
}
.wmc-panel__footer .wmc-btn { flex: 1; justify-content: center; }

/* category rows */
.wmc-category {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .85rem 0;
    border-bottom:   1px solid #f1f3f5;
    gap:             1rem;
}
.wmc-category:last-child { border-bottom: none; }
.wmc-category__info      { flex: 1; min-width: 0; }
.wmc-category__name      { display: block; font-weight: 600; font-size: .9rem; color: #212529; }
.wmc-always-active       { font-size: .78rem; font-weight: 600; color: var(--wmc-accent); white-space: nowrap; flex-shrink: 0; }


/* ==========================================================================
   SWITCH TOGGLE
   ========================================================================== */

.wmc-switch {
    position:    relative;
    display:     inline-block;
    width:       48px;
    height:      26px;
    flex-shrink: 0;
    cursor:      pointer;
}
.wmc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.wmc-switch__slider {
    position:         absolute;
    inset:            0;
    background-color: #ced4da;
    border-radius:    26px;
    transition:       background var(--wmc-transition);
}
.wmc-switch__slider::before {
    content:       '';
    position:      absolute;
    height:        20px;
    width:         20px;
    left:          3px;
    bottom:        3px;
    background:    #fff;
    border-radius: 50%;
    box-shadow:    0 1px 3px rgba(0,0,0,.25);
    transition:    transform var(--wmc-transition);
}
.wmc-switch input:checked + .wmc-switch__slider          { background-color: var(--wmc-accent); }
.wmc-switch input:checked + .wmc-switch__slider::before  { transform: translateX(22px); }
.wmc-switch input:focus-visible + .wmc-switch__slider    { outline: 2px solid var(--wmc-accent); outline-offset: 2px; }


/* ==========================================================================
   OVERLAY — logo centrato dentro il ring
   ========================================================================== */

.wmc-overlay {
    position:        fixed;
    inset:           0;
    background:      var(--wmc-overlay-bg);
    z-index:         calc(var(--wmc-z) + 10);
    display:         none;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
}
.wmc-overlay--visible { display: flex; }
.wmc-overlay--fade    { transition: opacity .5s ease; opacity: 0; }

/* contenitore relativo che tiene insieme ring e logo */
.wmc-overlay__ring-wrap {
    position: relative;
    width:    120px;
    height:   120px;
    display:  flex;
    align-items:     center;
    justify-content: center;
}

/* logo sovrapposto al centro del ring */
.wmc-overlay__logo {
    position:   absolute;
    max-width:  64px;
    max-height: 64px;
    object-fit: contain;
    z-index:    2;
    /* piccola ombra per staccarsi dallo sfondo bianco del ring */
    filter: drop-shadow(0 0 4px rgba(255,255,255,.9));
}

/* il ring spinner riempie tutto il wrap */
.wmc-overlay__ring-wrap .wmc-spinner--spinner-ring {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border-width: 5px;
}

/* spinner non-ring: si affiancano al logo nel flex column */
.wmc-overlay__ring-wrap .wmc-spinner--spinner-dots,
.wmc-overlay__ring-wrap .wmc-spinner--spinner-bars,
.wmc-overlay__ring-wrap .wmc-spinner--spinner-pulse {
    position: absolute;
    bottom:   -50px; /* sotto il wrap */
    left:     50%;
    transform: translateX(-50%);
}


/* ==========================================================================
   SPINNERS
   ========================================================================== */

.wmc-spinner--spinner-ring {
    width:        50px;
    height:       50px;
    border:       4px solid rgba(0,0,0,.12);
    border-left-color: #555;
    border-radius: 50%;
    animation:    wmc-spin .8s linear infinite;
}

.wmc-spinner--spinner-dots {
    display:     flex;
    gap:         8px;
    height:      14px;
    align-items: center;
}
.wmc-spinner--spinner-dots::before,
.wmc-spinner--spinner-dots::after {
    content:       '';
    display:       block;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    #555;
    animation:     wmc-pulse 1.2s ease-in-out infinite;
}
.wmc-spinner--spinner-dots::before { animation-delay: -.4s; }
.wmc-spinner--spinner-dots::after  { animation-delay:  .4s; }

.wmc-spinner--spinner-bars {
    display:     flex;
    gap:         5px;
    align-items: flex-end;
    height:      40px;
}
.wmc-spinner--spinner-bars::before,
.wmc-spinner--spinner-bars::after {
    content:       '';
    display:       block;
    width:         8px;
    background:    #555;
    border-radius: 3px;
    animation:     wmc-bars .9s ease-in-out infinite alternate;
}
.wmc-spinner--spinner-bars::before { height: 60%; animation-delay: -.3s; }
.wmc-spinner--spinner-bars::after  { height: 100%; }

.wmc-spinner--spinner-pulse {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    background:    #555;
    animation:     wmc-pulse-scale 1s ease-in-out infinite;
}

@keyframes wmc-spin        { to   { transform: rotate(360deg); } }
@keyframes wmc-pulse       { 0%,100% { transform:scale(.6); opacity:.4; } 50% { transform:scale(1); opacity:1; } }
@keyframes wmc-bars        { from { height: 20%; } to { height: 100%; } }
@keyframes wmc-pulse-scale { 0%,100% { transform:scale(.75); opacity:.5; } 50% { transform:scale(1); opacity:1; } }


/* ==========================================================================
   PLACEHOLDER (contenuto bloccato)
   ========================================================================== */

.wmc-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .75rem;
    min-height:      180px;
    padding:         1.5rem;
    background:      #f8f9fa;
    border:          2px dashed #ced4da;
    border-radius:   var(--wmc-radius);
    text-align:      center;
}
.wmc-placeholder__text { margin: 0; font-size: .88rem; color: #6c757d; }
.wmc-placeholder__btn {
    padding:       .4rem .9rem;
    background:    var(--wmc-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--wmc-radius);
    font-size:     .82rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--wmc-transition);
}
.wmc-placeholder__btn:hover { background: var(--wmc-accent-hover); }


/* ==========================================================================
   LINGUETTA — consent withdrawal tab
   ========================================================================== */

.wmc-linguetta {
    position:      fixed;
    left:          0;
    bottom:        140px;
    z-index:       var(--wmc-z);
    writing-mode:  vertical-rl;
    transform:     rotate(180deg);
    padding:       .65rem .45rem;
    background:    var(--wmc-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--wmc-radius) 0 0 var(--wmc-radius) ;
    font-size:     .72rem;
    font-weight:   600;
    letter-spacing: .03em;
    cursor:        pointer;
    box-shadow:    2px 2px 10px rgba(0,0,0,.18);
    opacity:       0;
    pointer-events: none;
    transition:    opacity var(--wmc-transition), background var(--wmc-transition);
}
.wmc-linguetta--visible {
    opacity:        1;
    pointer-events: auto;
}
.wmc-linguetta:hover { background: var(--wmc-accent-hover); }


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

@media (max-width: 600px) {
    .wmc-banner--footer .wmc-banner__inner { flex-direction: column; align-items: stretch; }
    .wmc-btn { justify-content: center; }
    .wmc-panel__drawer { width: 100%; }
}