/* ==========================================================
   Klaro - Primaria Municipiului Campulung
   Custom styling peste layout-ul nativ Klaro
   Tema light / grey / navy
   ========================================================== */

:root {
    --klaro-bg: #f4f6f8;
    --klaro-bg-light: #ffffff;
    --klaro-bg-hover: #eaf1f7;

    --klaro-border: #d5dde5;

    --klaro-text: #243444;
    --klaro-text-muted: #5f6d79;

    --klaro-navy: #16324f;
    --klaro-navy-hover: #10263d;

    --klaro-blue: #3976a8;
    --klaro-blue-hover: #2f6694;

    --klaro-active: #3976a8;
    --klaro-active-required: #16324f;
    --klaro-active-partial: #6d91b0;
    --klaro-switch-off: #aeb9c3;

    --klaro-radius: 4px;
}


/* ==========================================================
   GENERAL
   ========================================================== */

.klaro,
.klaro * {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
}


/* Klaro peste header / meniu */

.klaro .cookie-modal,
.klaro .cm-modal,
.klaro .cm-bg {
    z-index: 999999 !important;
}

.klaro .cookie-notice {
    z-index: 999998 !important;
}


/* ==========================================================
   MODAL
   ========================================================== */

.klaro .cookie-modal {
    background: rgba(22, 50, 79, 0.38) !important;
}

.klaro .cookie-modal .cm-modal {
    background: var(--klaro-bg) !important;
    color: var(--klaro-text) !important;

    border: 1px solid var(--klaro-border) !important;
    border-radius: var(--klaro-radius) !important;

    box-shadow: 0 12px 35px rgba(22, 50, 79, 0.22) !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

.klaro .cookie-modal .cm-header {
    background: var(--klaro-bg) !important;
    border-bottom-color: var(--klaro-border) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
    color: var(--klaro-navy) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

.klaro .cookie-modal .cm-header p {
    color: var(--klaro-text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.klaro .cookie-modal .cm-header a {
    color: var(--klaro-blue) !important;
    text-decoration: none;
}

.klaro .cookie-modal .cm-header a:hover {
    color: var(--klaro-navy) !important;
    text-decoration: underline;
}


/* ==========================================================
   BODY
   ========================================================== */

.klaro .cookie-modal .cm-body {
    background: var(--klaro-bg) !important;
}


/* ==========================================================
   CATEGORII / PURPOSES
   ========================================================== */

.klaro .cookie-modal .cm-purpose {
    background: var(--klaro-bg-light) !important;

    border: 1px solid var(--klaro-border) !important;
    border-radius: var(--klaro-radius) !important;

    margin-bottom: 8px !important;
}

.klaro .cookie-modal .cm-purpose:hover {
    background: var(--klaro-bg-hover) !important;
}

.klaro .cookie-modal .cm-purpose .cm-list-title {
    color: var(--klaro-navy) !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
}

.klaro .cookie-modal .cm-purpose .cm-list-description {
    color: var(--klaro-text-muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
}


/* ==========================================================
   SERVICII
   ========================================================== */

.klaro .cookie-modal .cm-service {
    border-top-color: var(--klaro-border) !important;
}

.klaro .cookie-modal .cm-service .cm-list-title {
    color: var(--klaro-navy) !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
}

.klaro .cookie-modal .cm-service .cm-list-description {
    color: var(--klaro-text-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}


/* ==========================================================
   TEXT GENERAL
   ========================================================== */

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal strong {
    color: var(--klaro-navy) !important;
}

.klaro .cookie-modal p {
    color: var(--klaro-text-muted) !important;
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
}

.klaro .cookie-modal a {
    color: var(--klaro-blue) !important;
}

.klaro .cookie-modal a:hover {
    color: var(--klaro-navy) !important;
}


/* ==========================================================
   SWITCH-URI KLARO
   Nu modificam dimensiunile sau pozitionarea nativa Klaro
   ========================================================== */


/* OFF */

.klaro .cm-list-label .slider {
    background-color: var(--klaro-switch-off) !important;
}


/* ON */

.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--klaro-active) !important;
}


/* REQUIRED */

.klaro .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--klaro-active-required) !important;
}


/* PARTIAL - categorie cu servicii acceptate partial */

.klaro .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
    background-color: var(--klaro-active-partial) !important;
}


/* cercul switch-ului */

.klaro .cm-list-label .slider::before {
    background-color: #ffffff !important;
}


/* switch dezactivat */

.klaro .cm-list-input:disabled + .cm-list-label .slider {
    opacity: 0.65;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.klaro .cookie-modal .cm-footer {
    background: var(--klaro-bg) !important;
    border-top-color: var(--klaro-border) !important;
}


/* ==========================================================
   BUTOANE
   Folosim clasele native Klaro
   ========================================================== */

.klaro .cm-btn {
    border-radius: var(--klaro-radius) !important;
    border: 1px solid transparent !important;

    box-shadow: none !important;

    font-size: 0.72rem !important;
    font-weight: 600 !important;

    cursor: pointer;
}


/* ACCEPT ALL */

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
    background-color: var(--klaro-navy) !important;
    border-color: var(--klaro-navy) !important;
    color: #ffffff !important;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
    background-color: var(--klaro-blue) !important;
    border-color: var(--klaro-blue) !important;
    color: #ffffff !important;
}


/* SAVE PREFERENCES */

.klaro .cm-btn.cm-btn-accept {
    background-color: var(--klaro-blue) !important;
    border-color: var(--klaro-blue) !important;
    color: #ffffff !important;
}

.klaro .cm-btn.cm-btn-accept:hover {
    background-color: var(--klaro-blue-hover) !important;
    border-color: var(--klaro-blue-hover) !important;
}


/* DECLINE */

.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline {
    background-color: #ffffff !important;
    border-color: var(--klaro-navy) !important;
    color: var(--klaro-navy) !important;
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover {
    background-color: var(--klaro-bg-hover) !important;
    border-color: var(--klaro-blue) !important;
    color: var(--klaro-navy) !important;
}


/* ==========================================================
   CLOSE
   ========================================================== */

.klaro .cookie-modal .cm-close {
    color: var(--klaro-text-muted) !important;
}

.klaro .cookie-modal .cm-close:hover {
    color: var(--klaro-navy) !important;
}


/* ==========================================================
   CONSENT NOTICE
   ========================================================== */

.klaro .cookie-notice .cn-body {
    background: var(--klaro-bg) !important;

    border: 1px solid var(--klaro-border) !important;
    border-radius: var(--klaro-radius) !important;

    box-shadow: 0 8px 25px rgba(22, 50, 79, 0.18) !important;
}

.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice h3 {
    color: var(--klaro-navy) !important;
}

.klaro .cookie-notice p {
    color: var(--klaro-text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.klaro .cookie-notice a {
    color: var(--klaro-blue) !important;
    font-size: 0.76rem !important;
}

.klaro .cookie-notice a:hover {
    color: var(--klaro-navy) !important;
}


/* ==========================================================
   CONTEXTUAL CONSENT
   YouTube / Vimeo / Maps / Meteoblue etc.
   ========================================================== */

.klaro .context-notice {
    background: var(--klaro-bg-light) !important;
    color: var(--klaro-text) !important;

    border: 1px solid var(--klaro-border) !important;
    border-radius: var(--klaro-radius) !important;
}

.klaro .context-notice p {
    color: var(--klaro-text-muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
}

.klaro .context-notice .cm-btn {
    background: var(--klaro-blue) !important;
    border-color: var(--klaro-blue) !important;
    color: #ffffff !important;
}

.klaro .context-notice .cm-btn:hover {
    background: var(--klaro-blue-hover) !important;
}

.klaro .context-notice .cm-btn:first-of-type {
    background: var(--klaro-navy) !important;
    border-color: var(--klaro-navy) !important;
    color: #ffffff !important;
}

.klaro .context-notice .cm-btn:first-of-type:hover {
    background: var(--klaro-navy-hover) !important;
}


/* ==========================================================
   SCROLLBAR
   Doar aspect, fara modificarea layout-ului
   ========================================================== */

.klaro .cookie-modal .cm-body::-webkit-scrollbar {
    width: 6px;
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-track {
    background: var(--klaro-bg);
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb {
    background: #aeb9c3;
    border-radius: 3px;
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb:hover {
    background: var(--klaro-blue);
}


/* ==========================================================
   MOBILE
   Doar ajustari vizuale
   Layout-ul ramane cel nativ Klaro
   ========================================================== */

@media (max-width: 768px) {

    .klaro .cm-btn {
        font-size: 0.70rem !important;
    }

    .klaro .cookie-modal .cm-purpose {
        margin-bottom: 6px !important;
    }

    .klaro .cookie-notice p {
        font-size: 0.76rem !important;
    }

    .klaro .cookie-modal .cm-header p {
        font-size: 0.76rem !important;
    }

    .klaro .cookie-modal .cm-service .cm-list-description {
        font-size: 0.70rem !important;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .klaro *,
    .klaro *::before,
    .klaro *::after {
        transition: none !important;
        animation: none !important;
    }
}