/* Cookie consent — KinPet (LGPD / GDPR) z-index no topo do intervalo para ficar acima de overlays */ /* Modo teste: cookie-consent.js define COOKIE_UI_ENABLED: false + class cc-ui-off no */ html.cc-ui-off #cc-root, html.cc-ui-off #cc-banner, html.cc-ui-off #cc-modal, html.cc-ui-off #cc-overlay, html.cc-ui-off #cc-fab { display: none !important; visibility: hidden !important; pointer-events: none !important; } :root { --cc-z-fab: 2147483640; --cc-z-overlay: 2147483641; --cc-z-modal: 2147483642; --cc-z-banner: 2147483646; --cc-z-toast: 2147483647; } /* Root wrapper: zero footprint in document flow — children are fixed overlays */ #cc-root { position: fixed; inset: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: var(--cc-z-fab); margin: 0; padding: 0; border: 0; } #cc-banner, #cc-banner *, #cc-modal, #cc-modal *, #cc-fab, #cc-fab *, .cc-toast { box-sizing: border-box; } #cc-banner { position: fixed !important; top: auto; left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); left: auto; transform: translateY(30px); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 18px; padding: 20px 22px; width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.12), 0 24px 56px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06); z-index: var(--cc-z-banner); isolation: isolate; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; } #cc-banner.cc-show { opacity: 1 !important; visibility: visible !important; transform: translateY(0); pointer-events: auto !important; z-index: 2147483646 !important; } @media (max-width: 520px) { #cc-banner { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: auto; width: min(480px, calc(100vw - 24px)); max-width: calc(100vw - 24px); border-radius: 18px; } } .cc-banner-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cc-banner-title { font-size: 14.5px; font-weight: 600; color: #111; display: flex; align-items: center; gap: 7px; } .cc-banner-title::before { content: "●"; font-size: 10px; } .cc-banner-desc { font-size: 13px; color: #555; line-height: 1.55; margin-bottom: 16px; } .cc-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; } .cc-btn { border-radius: 50px; padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; transition: background 0.2s, transform 0.1s; white-space: nowrap; } .cc-btn:active { transform: scale(0.97); } .cc-btn-dark { background: #111; color: #fff; border-color: #111; } .cc-btn-dark:hover { background: #333; } .cc-btn-ghost { background: transparent; color: #111; border-color: #ccc; } .cc-btn-ghost:hover { background: #f4f4f4; } .cc-btn-pill { background: #f0f0f0; border: none; border-radius: 20px; padding: 6px 14px; font-size: 12.5px; color: #111; cursor: pointer; font-family: inherit; transition: background 0.2s; } .cc-btn-pill:hover { background: #e2e2e2; } #cc-overlay { position: fixed !important; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: var(--cc-z-overlay); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #cc-overlay.cc-show { opacity: 1; pointer-events: all; } #cc-modal { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -47%); background: #fff; border-radius: 18px; width: min(500px, calc(100vw - 32px)); max-height: min(620px, 90vh); overflow-y: auto; z-index: var(--cc-z-modal); opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 24px 80px rgba(0, 0, 0, 0.28); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #cc-modal.cc-show { opacity: 1; transform: translate(-50%, -50%); pointer-events: all; } #cc-modal::-webkit-scrollbar { width: 5px; } #cc-modal::-webkit-scrollbar-track { background: transparent; } #cc-modal::-webkit-scrollbar-thumb { background: #ddd; border-radius: 5px; } .cc-modal-head { padding: 22px 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cc-modal-title { font-size: 17px; font-weight: 700; color: #111; } .cc-modal-head-btns { display: flex; gap: 8px; flex-shrink: 0; } .cc-modal-desc { padding: 10px 22px 16px; font-size: 13px; color: #666; line-height: 1.55; } .cc-hr { height: 1px; background: #ebebeb; margin: 0 22px; } .cc-cat { padding: 18px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid #f2f2f2; } .cc-cat:last-of-type { border-bottom: none; } .cc-cat-label { font-size: 14.5px; font-weight: 600; color: #111; margin-bottom: 4px; } .cc-cat-desc { font-size: 12.5px; color: #888; line-height: 1.45; } .cc-cat-tags { font-size: 11.5px; color: #aaa; margin-top: 4px; } .cc-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; margin-top: 1px; } .cc-switch input { opacity: 0; width: 0; height: 0; } .cc-slider { position: absolute; inset: 0; background: #ccc; border-radius: 26px; cursor: pointer; transition: background 0.3s; } .cc-slider::before { content: ""; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.3s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .cc-switch input:checked + .cc-slider { background: #111; } .cc-switch input:checked + .cc-slider::before { transform: translateX(20px); } .cc-switch input:disabled + .cc-slider { background: #111; opacity: 0.65; cursor: default; } .cc-modal-foot { padding: 18px 22px; border-top: 1px solid #ebebeb; display: flex; gap: 10px; } #cc-fab { position: fixed !important; top: auto; right: auto; bottom: 20px; left: 20px; background: #111; color: #fff; border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 19px; cursor: pointer; z-index: var(--cc-z-fab); display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: transform 0.2s; font-family: inherit; } #cc-fab:hover { transform: scale(1.12); } #cc-fab.cc-show { display: flex; } html:not(.cc-ui-off) #cc-fab.cc-show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; left: max(20px, env(safe-area-inset-left)) !important; bottom: max(20px, env(safe-area-inset-bottom)) !important; z-index: 2147483647 !important; } .cc-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(10px); background: #111; color: #fff; padding: 11px 22px; border-radius: 50px; font-size: 13.5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; z-index: var(--cc-z-toast); opacity: 0; animation: ccToast 2.8s ease forwards; pointer-events: none; } @keyframes ccToast { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); } } @media (prefers-color-scheme: dark) { #cc-banner { background: rgba(26, 26, 26, 0.96); } #cc-modal { background: #1c1c1c; } .cc-banner-title, .cc-modal-title, .cc-cat-label { color: #f0f0f0; } .cc-banner-desc, .cc-modal-desc, .cc-cat-desc { color: #999; } .cc-cat-tags { color: #666; } .cc-btn-ghost { color: #f0f0f0; border-color: #444; } .cc-btn-ghost:hover { background: #2a2a2a; } .cc-btn-pill { background: #2c2c2c; color: #f0f0f0; } .cc-hr, .cc-cat, .cc-modal-foot { border-color: #2e2e2e !important; } .cc-slider::before { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } }