.zp-cookie-banner { position: fixed; z-index: 20001; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; opacity: 0; pointer-events: none; } .zp-cookie-banner.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) !important; } .zp-cookie-trigger { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--zp-panel-2); border: 1px solid var(--zp-stroke); color: var(--zp-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9990; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; opacity: 0; transform: scale(0.8); } .zp-cookie-trigger:hover, .zp-cookie-trigger:focus-visible { transform: scale(1.1); box-shadow: 0 0 15px rgba(var(--zp-accent-rgb), 0.5); background: var(--zp-panel); outline: 2px solid var(--zp-accent); outline-offset: 2px; } .zp-cookie-trigger.is-visible { opacity: 1; transform: scale(1); } .zp-cookie-trigger svg { width: 24px; height: 24px; } .zp-cookie-banner[data-position="bottom_left"] { bottom: var(--space-5); left: var(--space-5); right: auto; max-width: 480px; transform: translateY(20px); } .zp-cookie-banner[data-position="bottom_right"] { bottom: var(--space-5); right: var(--space-5); left: auto; max-width: 480px; transform: translateY(20px); } .zp-cookie-banner[data-position="bottom_full"] { bottom: 0; left: 0; right: 0; max-width: none; border-radius: 0; border-left: none; border-right: none; border-bottom: none; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--container-padding, var(--space-5)); transform: translateY(100%); } .zp-cookie-banner[data-position="bottom_full"] .zp-cookie-content { flex: 1; padding-right: var(--space-5); } .zp-cookie-banner[data-position="bottom_full"] .zp-cookie-actions { flex-shrink: 0; } .zp-cookie-banner[data-position="top_full"] { top: 0; left: 0; right: 0; bottom: auto; max-width: none; border-radius: 0; border-left: none; border-right: none; border-top: none; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--container-padding, var(--space-5)); transform: translateY(-100%); } .zp-cookie-banner[data-position="top_full"] .zp-cookie-content { flex: 1; padding-right: var(--space-5); } .zp-cookie-banner[data-position="top_full"] .zp-cookie-actions { flex-shrink: 0; } .zp-cookie-banner[data-position="center_modal"] { top: 50%; left: 50%; bottom: auto; right: auto; max-width: 500px; width: 90%; transform: translate(-50%, -40%) scale(0.95); } .zp-cookie-banner[data-position="center_modal"].is-visible { transform: translate(-50%, -50%) scale(1) !important; } .zp-cookie-banner[data-position="center_modal"]::before { content: ""; position: fixed; top: -50vh; left: -50vw; right: -50vw; bottom: -50vh; background: rgba(0,0,0,0.7); z-index: -1; backdrop-filter: blur(2px); } .zp-cookie-banner[data-style="neon"] { background: var(--zp-panel-2); border: 1px solid var(--zp-stroke); border-radius: var(--radius-md); box-shadow: var(--shadow-neon); padding: var(--space-5); } .zp-cookie-banner[data-style="neon"] .zp-cookie-title { color: var(--zp-accent); text-shadow: 0 0 10px rgba(var(--zp-accent-rgb), 0.4); } .zp-cookie-banner[data-style="simple"] { background: #fff; color: #111; border: none; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: var(--space-5); } .zp-cookie-banner[data-style="simple"] .zp-cookie-title { color: #000; font-weight: 700; } .zp-cookie-banner[data-style="simple"] .zp-cookie-text { color: #444; } .zp-cookie-banner[data-style="simple"] .zp-btn--primary { background: #000; color: #fff; border: none; } .zp-cookie-banner[data-style="simple"] .zp-btn--ghost { color: #000; border-color: #ddd; } .zp-cookie-banner[data-style="brutal"] { background: #000; border: 2px solid #fff; border-radius: 0; padding: var(--space-5); } .zp-cookie-banner[data-style="brutal"] .zp-cookie-title { font-family: monospace; text-transform: uppercase; color: #fff; } .zp-cookie-banner[data-style="brutal"] .zp-cookie-text { color: #ccc; font-family: monospace; } .zp-cookie-banner[data-style="brutal"] .zp-btn { border-radius: 0; font-family: monospace; text-transform: uppercase; } .zp-cookie-banner[data-style="glass"] { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .zp-cookie-banner[data-style="glass"] .zp-cookie-title { color: #fff; } .zp-cookie-banner[data-style="terminal"] { background: #0c0c0c; border-left: 4px solid var(--zp-accent); padding: var(--space-5); border-radius: 2px; font-family: 'Courier New', monospace; } .zp-cookie-banner[data-style="terminal"] .zp-cookie-title::before { content: "> "; color: var(--zp-accent); } .zp-cookie-banner[data-style="terminal"] .zp-cookie-text { color: #aaa; font-family: monospace; } .zp-cookie-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--zp-bone); margin-bottom: var(--space-2); } .zp-cookie-text { font-size: 0.9rem; color: var(--zp-muted); margin-bottom: var(--space-4); line-height: 1.5; } .zp-cookie-links { margin-top: var(--space-2); margin-bottom: var(--space-4); font-size: 0.8rem; } .zp-cookie-links a { color: var(--zp-muted); text-decoration: underline; margin-right: var(--space-3); transition: color 0.2s; } .zp-cookie-links a:hover { color: var(--zp-accent); } .zp-cookie-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } @media (max-width: 768px) { .zp-cookie-banner[data-position="bottom_full"], .zp-cookie-banner[data-position="top_full"] { flex-direction: column; align-items: flex-start; } .zp-cookie-banner[data-position="bottom_full"] .zp-cookie-content, .zp-cookie-banner[data-position="top_full"] .zp-cookie-content { padding-right: 0; margin-bottom: var(--space-3); } } .zp-cookie-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); z-index: 10000; display: none; align-items: center; justify-content: center; padding: var(--space-4); } .zp-cookie-modal.is-visible { display: flex; } .zp-cookie-settings { background: var(--zp-panel); border: 1px solid var(--zp-stroke); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: var(--space-6); position: relative; box-shadow: var(--shadow-neon); } .zp-cookie-row { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--zp-stroke); } .zp-cookie-row:last-child { border-bottom: none; } .zp-cookie-label { font-weight: 600; color: var(--zp-bone); display: block; margin-bottom: var(--space-1); } .zp-cookie-desc { font-size: 0.85rem; color: var(--zp-muted); max-width: 380px; } .zp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; } .zp-toggle input { opacity: 0; width: 0; height: 0; } .zp-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--zp-stroke-2); transition: .4s; border-radius: 24px; } .zp-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--zp-bone); transition: .4s; border-radius: 50%; } input:checked + .zp-slider { background-color: var(--zp-accent); } input:disabled + .zp-slider { opacity: 0.5; cursor: not-allowed; } input:checked + .zp-slider:before { transform: translateX(20px); background-color: var(--zp-accent-ink); }