/**
* CookieConsent v3 - Dark Theme
* RentIT.sk
*
* Dark version of the cookie consent bar styling.
* Include this file AFTER the CookieConsent library CSS.
* Requires cc--darkmode class on (set automatically by cookieconsent-config.js).
*
* Usage:
*
*
*
* Requires: --rent-green CSS variable (default: #3aaa35)
* or define it in your :root { --rent-green: #3aaa35; }
*/
/* ===== Cookie Consent - RentIT Dark Theme ===== */
.cc--darkmode #cc-main {
--cc-bg: rgba(18, 18, 22, 0.8);
--cc-primary-color: #e8e8e8;
--cc-secondary-color: #a0a0aa;
--cc-btn-primary-bg: var(--rent-green, #3aaa35);
--cc-btn-primary-color: #fff;
--cc-btn-primary-hover-bg: #2e8a2a;
--cc-btn-secondary-bg: rgba(255, 255, 255, 0.1);
--cc-btn-secondary-color: #e0e0e0;
--cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.18);
--cc-separator-border-color: rgba(255, 255, 255, 0.08);
--cc-toggle-on-bg: var(--rent-green, #3aaa35);
--cc-toggle-off-bg: #4a4a55;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #d0d0d0;
--cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
--cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.07);
--cc-footer-bg: rgba(0, 0, 0, 0.3);
--cc-footer-color: #8a8a95;
--cc-footer-border-color: rgba(255, 255, 255, 0.06);
--cc-overlay-bg: rgba(0, 0, 0, 0.65);
--cc-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cc-modal-border-radius: 0;
--cc-btn-border-radius: 6px;
--cc-font-size: 0.84rem;
}
/* Consent bar - full width with glass effect */
#cc-main .cm,
#cc-main .cm.cm--bar,
#cc-main .cm.cm--bar.cm--inline {
max-width: 100% !important;
width: 100% !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: none !important;
border-top: 1px solid rgba(58, 170, 53, 0.2) !important;
border-radius: 0 !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}
/* Body matches Bootstrap .container responsive widths */
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
max-width: 1320px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 1.1rem 12px !important;
display: flex !important;
align-items: center !important;
gap: 2rem !important;
box-sizing: border-box !important;
}
@media (max-width: 1399.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
max-width: 1140px !important;
}
}
@media (max-width: 1199.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
max-width: 960px !important;
}
}
@media (max-width: 991.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
max-width: 720px !important;
}
}
/* Text container — no extra padding from library */
#cc-main .cm__texts,
#cc-main .cm.cm--bar .cm__texts,
#cc-main .cm.cm--bar.cm--inline .cm__texts {
flex: 1;
min-width: 0;
padding: 0 !important;
margin: 0 !important;
}
#cc-main .cm__title,
#cc-main .cm.cm--bar .cm__title {
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.25rem;
padding: 0 !important;
}
#cc-main .cm__desc,
#cc-main .cm.cm--bar .cm__desc {
font-size: 0.8rem;
line-height: 1.5;
opacity: 0.85;
padding: 0 !important;
margin: 0 !important;
}
/* Override library's combined title+desc horizontal padding */
#cc-main .cm__desc,
#cc-main .cm__title {
padding: 0 !important;
}
/* Button container — always row, never wrap, no max-width limit */
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--bar.cm--inline .cm__btns,
#cc-main .cm--bar.cm--inline .cm__btns {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.5rem !important;
flex-shrink: 0 !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
/* Kill library's margin-top on adjacent buttons and button groups */
#cc-main .cm__btn + .cm__btn,
#cc-main [class*="cm__btn-group"] + [class*="cm__btn-group"] {
margin-top: 0 !important;
margin: 0 !important;
}
/* Button groups — size to content, not 50/50 split */
#cc-main [class*="cm__btn-group"] {
flex: none !important;
gap: 0.5rem !important;
}
/* All buttons — auto width so text fits, no overflow clipping */
.cc--darkmode #cc-main .cm .cm__btn,
.cc--darkmode #cc-main .cm.cm--bar .cm__btn,
.cc--darkmode #cc-main .cm.cm--bar.cm--inline .cm__btn,
#cc-main .cm .cm__btn[data-role],
#cc-main .cm .cm__btn {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
padding: 0.45rem 1.1rem !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: unset !important;
width: auto !important;
min-width: fit-content !important;
max-width: none !important;
flex: 0 0 auto !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
line-height: 1.4 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Primary button (Povoliť všetko / Accept all) — solid green */
#cc-main .cm .cm__btn[data-role="all"] {
background: var(--rent-green, #3aaa35) !important;
color: #fff !important;
border: 1px solid var(--rent-green, #3aaa35) !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover {
background: #2e8a2a !important;
border-color: #2e8a2a !important;
}
/* Secondary button (Odmietnuť všetko / Reject all) — solid green, same as primary */
#cc-main .cm .cm__btn[data-role="necessary"] {
background: var(--rent-green, #3aaa35) !important;
color: #fff !important;
border: 1px solid var(--rent-green, #3aaa35) !important;
}
#cc-main .cm .cm__btn[data-role="necessary"]:hover {
background: #2e8a2a !important;
border-color: #2e8a2a !important;
}
/* Tertiary button (Prispôsobiť / Customize) — ghost outline */
#cc-main .cm .cm__btn[data-role="show"] {
background: transparent !important;
color: rgba(255, 255, 255, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#cc-main .cm .cm__btn[data-role="show"]:hover {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.4) !important;
background: rgba(255, 255, 255, 0.08) !important;
}
/* Mobile responsive */
@media (max-width: 767.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
flex-direction: column !important;
gap: 0.75rem !important;
padding: 1.2rem 1rem !important;
max-width: 100% !important;
}
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--box .cm__btns {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0.4rem !important;
border: none !important;
}
#cc-main .cm__btn-group,
#cc-main .cm .cm__btn-group,
#cc-main .cm.cm--bar .cm__btn-group,
#cc-main .cm [class*="cm__btn-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
flex: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0.4rem !important;
}
.cc--darkmode #cc-main .cm .cm__btn,
#cc-main .cm .cm__btn,
#cc-main .cm.cm--box .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm [class*="cm__btn--"] {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
padding: 0.4rem 0.25rem !important;
font-size: 0.72rem !important;
white-space: nowrap !important;
text-align: center !important;
margin: 0 !important;
border-radius: 6px !important;
}
#cc-main .cm .cm__btn[data-role="all"] {
margin-right: 0 !important;
}
}
/* Preferences modal */
#cc-main .pm {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#cc-main .pm__title {
font-size: 1.1rem;
}
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
font-size: 0.85rem;
}
#cc-main .cc-link {
color: var(--rent-green, #3aaa35);
}
#cc-main .cc-link:hover {
color: #2e8a2a;
}
/* Cookie settings button (floating) */
#cookie-settings-btn {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2a2a2e;
border: 1px solid rgba(58, 170, 53, 0.3);
color: var(--rent-green, #3aaa35);
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
}
#cookie-settings-btn:hover {
opacity: 1;
background: var(--rent-green, #3aaa35);
color: #fff;
transform: scale(1.1);
}