/** * Cookie Bar & Modal – Override styles * Corregge posizionamento e grafica della cookie bar e della modal preferenze * generata dal plugin bs-cookie-settings (basato su CookieConsent v2). * * Il plugin usa classi sulla : * - .show--consent → mostra la cookie bar (#bs-cookie-bar) * - .show--settings → mostra la modal preferenze (#bs-cookie-modal) */ /* ========================================================= COOKIE BAR (banner in basso) ========================================================= */ /* Nascosta di default (transform dal plugin) */ #bs-cookie-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; background-color: #f8f9fa; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); padding: 1.25rem 0; } /* Contenitore interno Bootstrap-like */ #bs-cookie-bar > div:first-child { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Riga interna */ #bs-cookie-bar #c-inr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } /* Colonna testo */ #bs-cookie-bar #c-inr-i { flex: 1 1 280px; } /* Titolo */ #bs-cookie-bar #c-ttl { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; color: #252122; display: block; } /* Testo descrittivo */ #bs-cookie-bar #c-txt { font-size: 0.875rem; color: #444; line-height: 1.5; } #bs-cookie-bar #c-txt a { color: #5a8a6e; text-decoration: underline; } /* Colonna pulsanti */ #bs-cookie-bar #c-bns { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 auto; min-width: 160px; } /* Pulsanti della cookie bar – reset aggressivo del tema */ #bs-cookie-bar .c-bn { display: block; width: 100%; padding: 0.55rem 1.25rem !important; font-size: 0.875rem !important; font-weight: 600 !important; text-align: center !important; cursor: pointer !important; border-radius: 4px !important; line-height: 1.4 !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; margin: 0 !important; text-decoration: none !important; -webkit-appearance: none; appearance: none; font-family: inherit !important; box-sizing: border-box; } /* Pulsante primario (Accetta) */ #bs-cookie-bar #c-p-bn { background-color: #5a8a6e !important; color: #fff !important; border: 2px solid #5a8a6e !important; } #bs-cookie-bar #c-p-bn:hover, #bs-cookie-bar #c-p-bn:focus { background-color: #4a7a5e !important; border-color: #4a7a5e !important; outline: none; } /* Pulsante secondario (Rifiuta) */ #bs-cookie-bar #c-s-bn { background-color: transparent !important; color: #555 !important; border: 2px solid #aaa !important; } #bs-cookie-bar #c-s-bn:hover, #bs-cookie-bar #c-s-bn:focus { background-color: #eee !important; color: #252122 !important; border-color: #888 !important; outline: none; } /* Pulsante impostazioni (opzionale) */ #bs-cookie-bar #set-s-bn { background-color: transparent !important; color: #5a8a6e !important; border: 2px solid #5a8a6e !important; } #bs-cookie-bar #set-s-bn:hover, #bs-cookie-bar #set-s-bn:focus { background-color: #5a8a6e !important; color: #fff !important; outline: none; } /* ========================================================= MODAL PREFERENZE COOKIE Il plugin aggiunge .show--settings a per aprirla. #bs-cookie-modal ha classe "modal fade" (Bootstrap) ma senza Bootstrap JS la classe .show non viene aggiunta. Gestiamo la visibilità tramite html.show--settings. ========================================================= */ /* Overlay nascosto di default */ #bs-cookie-modal { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 100000 !important; align-items: center !important; justify-content: center !important; background-color: rgba(0, 0, 0, 0.55) !important; overflow: hidden !important; } /* Quando il plugin mostra la modal (aggiunge show--settings a html) */ html.show--settings #bs-cookie-modal { display: flex !important; } /* Blocca lo scroll del body quando la modal è aperta */ html.show--settings { overflow: hidden !important; } html.show--settings body { overflow: hidden !important; } /* Dialog */ #bs-cookie-modal #c-s-in { position: relative !important; width: 100% !important; max-width: 560px !important; max-height: 85vh !important; margin: 1rem auto !important; display: flex !important; flex-direction: column !important; pointer-events: all; transform: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } /* Contenuto modal */ #bs-cookie-modal #s-inr { background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important; display: flex !important; flex-direction: column !important; max-height: 85vh !important; overflow: hidden !important; width: 100% !important; color: #252122 !important; /* reset classe bns-t se presente */ position: static !important; top: auto !important; } /* Header modal */ #bs-cookie-modal #s-hdr { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1rem 1.25rem !important; border-bottom: 1px solid #dee2e6 !important; flex-shrink: 0 !important; background: none !important; } /* Titolo modal */ #bs-cookie-modal #s-ttl { font-size: 1rem !important; font-weight: 700 !important; color: #252122 !important; margin: 0 !important; } /* Pulsante chiudi (X) */ #bs-cookie-modal #s-c-bn { cursor: pointer !important; background: none !important; border: none !important; font-size: 1.5rem !important; color: #666 !important; padding: 0.1rem 0.4rem !important; line-height: 1 !important; border-radius: 4px !important; transition: color 0.2s ease, background-color 0.2s ease; margin: 0 !important; -webkit-appearance: none; appearance: none; font-family: inherit !important; } #bs-cookie-modal #s-c-bn:hover { color: #252122 !important; background-color: #f0f0f0 !important; outline: none; } /* Body scrollabile della modal */ #bs-cookie-modal #s-bl { overflow-y: auto !important; overflow-x: hidden !important; padding: 1rem 1.25rem !important; flex: 1 1 auto !important; -webkit-overflow-scrolling: touch; } /* Footer modal con pulsanti */ #bs-cookie-modal #s-bns { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; align-items: center !important; justify-content: flex-end !important; padding: 0.875rem 1.25rem !important; border-top: 1px solid #dee2e6 !important; flex-shrink: 0 !important; background: none !important; } /* Pulsanti modal preferenze – reset aggressivo */ #bs-cookie-modal .c-bn { display: inline-block !important; padding: 0.5rem 1.25rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; border-radius: 4px !important; line-height: 1.4 !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin: 0 !important; text-decoration: none !important; -webkit-appearance: none; appearance: none; font-family: inherit !important; box-sizing: border-box; } /* Salva (btn-secondary) */ #bs-cookie-modal #s-sv-bn { background-color: #5a8a6e !important; color: #fff !important; border: 2px solid #5a8a6e !important; } #bs-cookie-modal #s-sv-bn:hover, #bs-cookie-modal #s-sv-bn:focus { background-color: #4a7a5e !important; border-color: #4a7a5e !important; outline: none; } /* Accetta tutti (btn-primary) */ #bs-cookie-modal #s-all-bn { background-color: transparent !important; color: #5a8a6e !important; border: 2px solid #5a8a6e !important; } #bs-cookie-modal #s-all-bn:hover, #bs-cookie-modal #s-all-bn:focus { background-color: #5a8a6e !important; color: #fff !important; outline: none; } /* Rifiuta tutto */ #bs-cookie-modal #s-rall-bn { background-color: transparent !important; color: #888 !important; border: 2px solid #aaa !important; } #bs-cookie-modal #s-rall-bn:hover, #bs-cookie-modal #s-rall-bn:focus { background-color: #eee !important; color: #252122 !important; border-color: #888 !important; outline: none; } /* ========================================================= BLOCCHI DENTRO LA MODAL ========================================================= */ /* Blocco categoria con toggle (.b-ex aggiunta dal plugin) */ #bs-cookie-modal .c-bl { padding: 0.5rem 0 !important; margin: 0 0 0.5rem 0 !important; border: none !important; background: none !important; } #bs-cookie-modal .c-bl + .c-bl { border-top: 1px solid #eee !important; padding-top: 0.75rem !important; margin-top: 0 !important; } /* Blocco senza toggle (solo titolo/descrizione, es. intro) */ #bs-cookie-modal .c-bl:not(.b-ex) .title { padding: 0.25rem 0 !important; } #bs-cookie-modal .c-bl:not(.b-ex) .b-tl { font-size: 0.95rem !important; font-weight: 700 !important; color: #252122 !important; display: block !important; cursor: default !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; width: 100% !important; font-family: inherit !important; -webkit-appearance: none; appearance: none; line-height: 1.4 !important; } /* ── Riga con toggle: .title.b-bn è il container flex ── */ /* Il plugin aggiunge d-flex align-items-center position-relative a .b-bn */ #bs-cookie-modal .b-bn { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.75rem !important; padding: 0.5rem !important; background-color: #f8f9fa !important; border-radius: 6px !important; } /* Pulsante titolo (espandi/collassa) – cresce a SINISTRA */ #bs-cookie-modal .b-bn .b-tl { flex: 1 1 auto !important; text-align: left !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #252122 !important; cursor: pointer !important; font-family: inherit !important; -webkit-appearance: none; appearance: none; line-height: 1.4 !important; display: block !important; width: auto !important; position: static !important; } #bs-cookie-modal .b-bn .b-tl:hover { color: #5a8a6e !important; } /* Label toggle – resta a DESTRA */ #bs-cookie-modal .b-tg { flex: 0 0 auto !important; margin-left: auto !important; display: flex !important; align-items: center !important; padding: 0 !important; /* reset plugin: .cc_div * { padding:0 } già ok */ } /* Checkbox toggle a interruttore */ #bs-cookie-modal .c-tgl { width: 2.75em !important; height: 1.5em !important; cursor: pointer !important; border-radius: 2em !important; border: none !important; -webkit-appearance: none; appearance: none; background-color: #ccc !important; flex-shrink: 0 !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; position: relative !important; vertical-align: middle !important; transition: background-color 0.25s ease; box-shadow: none !important; } /* Pallina dello switch */ #bs-cookie-modal .c-tgl::after { content: '' !important; position: absolute !important; top: 0.15em !important; left: 0.15em !important; width: 1.15em !important; height: 1.15em !important; background: #fff !important; border-radius: 50% !important; transition: transform 0.25s ease !important; display: block !important; } #bs-cookie-modal .c-tgl:checked { background-color: #5a8a6e !important; } #bs-cookie-modal .c-tgl:checked::after { transform: translateX(1.25em) !important; } #bs-cookie-modal .c-tgl:disabled { opacity: 0.55 !important; cursor: not-allowed !important; } /* Nascondi span interni del toggle (on-i / off-i) – non necessari */ #bs-cookie-modal .c-tg { display: none !important; } /* Nascondi label testuale duplicata */ #bs-cookie-modal .t-lb { display: none !important; } /* Descrizione blocco (accordion) */ #bs-cookie-modal .p { font-size: 0.85rem !important; color: #555 !important; line-height: 1.5 !important; padding: 0.5rem !important; margin: 0 !important; } /* Tabella cookie */ #bs-cookie-modal #s-bl table { width: 100%; font-size: 0.8rem; color: #555; border-collapse: collapse; margin-top: 0.5rem; } #bs-cookie-modal #s-bl td, #bs-cookie-modal #s-bl th { padding: 0.35rem 0.5rem !important; border-bottom: 1px solid #eee; text-align: left !important; font-size: 0.8rem !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 600px) { /* Cookie bar: pulsanti su riga orizzontale */ #bs-cookie-bar #c-bns { width: 100%; flex-direction: row; flex-wrap: wrap; } #bs-cookie-bar #c-bns .c-bn { flex: 1 1 auto; text-align: center !important; } /* Modal: full screen su mobile */ #bs-cookie-modal #c-s-in { max-width: 100% !important; max-height: 100% !important; height: 100% !important; margin: 0 !important; } #bs-cookie-modal #s-inr { border-radius: 0 !important; max-height: 100% !important; } }