/* ============================================================ WILHELMSSON LABS COOKIE CONSENT CSS Inkludera detta i pa alla sajter. Eller lanken: ============================================================ */ /* Overlay */ .wl-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9998; backdrop-filter: blur(2px); } /* Banner (nedre) */ .wl-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #0c0c10; border-top: 1px solid #1f2937; z-index: 9999; padding: 1.5rem; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5); } .wl-banner__inner { max-width: 900px; margin: 0 auto; } .wl-banner__title { font-family: Inter, system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: #e5e7eb; margin-bottom: 0.4rem; } .wl-banner__text { font-family: Inter, system-ui, sans-serif; font-size: 0.875rem; color: #9ca3af; line-height: 1.5; margin-bottom: 0.75rem; } .wl-banner__links { margin-bottom: 1rem; } .wl-link { font-family: Inter, system-ui, sans-serif; font-size: 0.8rem; color: #dc2626; text-decoration: none; margin-right: 1rem; } .wl-link:hover { text-decoration: underline; } .wl-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Knappar */ .wl-btn { font-family: Inter, system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 4px; cursor: pointer; border: none; transition: opacity 0.15s; white-space: nowrap; } .wl-btn:hover { opacity: 0.85; } .wl-btn:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; } .wl-btn--primary { background: #dc2626; color: #ffffff; } .wl-btn--outline { background: transparent; color: #e5e7eb; border: 1px solid #374151; } .wl-btn--outline:hover { background: rgba(255, 255, 255, 0.05); opacity: 1; } /* Installningsvyn (modal) */ .wl-settings { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; } .wl-settings__box { background: #0c0c10; border: 1px solid #1f2937; border-radius: 8px; padding: 2rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); } .wl-settings__close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: 1px solid #374151; color: #9ca3af; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; font-family: Inter, system-ui, sans-serif; } .wl-settings__close:hover { color: #e5e7eb; border-color: #6b7280; } .wl-settings__title { font-family: Inter, system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; color: #e5e7eb; margin-bottom: 1.5rem; } /* Cookie-kategori */ .wl-category { border-bottom: 1px solid #1f2937; padding: 1rem 0; } .wl-category:last-of-type { border-bottom: none; } .wl-category__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; } .wl-category__name { font-family: Inter, system-ui, sans-serif; font-size: 0.9rem; font-weight: 600; color: #e5e7eb; } .wl-category__desc { font-family: Inter, system-ui, sans-serif; font-size: 0.8rem; color: #6b7280; line-height: 1.5; padding-left: 0; } .wl-badge { font-family: Inter, system-ui, sans-serif; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 3px; background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); } /* Toggle switch */ .wl-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .wl-toggle input { opacity: 0; width: 0; height: 0; } .wl-toggle__slider { position: absolute; cursor: pointer; inset: 0; background: #374151; border-radius: 22px; transition: 0.2s; } .wl-toggle__slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #9ca3af; border-radius: 50%; transition: 0.2s; } .wl-toggle input:checked + .wl-toggle__slider { background: rgba(220, 38, 38, 0.5); } .wl-toggle input:checked + .wl-toggle__slider:before { transform: translateX(18px); background: #dc2626; } .wl-toggle input:focus-visible + .wl-toggle__slider { outline: 2px solid #dc2626; outline-offset: 2px; } /* Knappar i installningsvy */ .wl-settings__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } .wl-settings__links { margin-top: 1rem; display: flex; gap: 1rem; } /* Responsiv */ @media (max-width: 480px) { .wl-banner { padding: 1rem; } .wl-banner__actions { flex-direction: column; } .wl-btn { width: 100%; text-align: center; } .wl-settings__box { padding: 1.25rem; } .wl-settings__actions { flex-direction: column; } }