/* Klaro! custom theme — pieseautoas.ro
 *
 * Klaro v0.7 ships a DARK theme by default. We embrace that (it matches the
 * previous Truendo banner's look AND the site's dark surfaces) and just re-color
 * brand accents via Klaro's CSS variables.
 *
 * Brand colors:
 *   - Orange CTA:   #FF6012  (matches "Cauta piese" button)
 *   - Dark surface: #262626  (matches site body text + Truendo's old dark)
 *   - Darker:       #1a1a1a  (modal contrast)
 *   - White text:   #FFFFFF
 *
 * Loaded AFTER klaro.css — overrides win.
 */

/* ============================================================
   THEME — override Klaro's default CSS variables
   ============================================================ */
.klaro {
    /* Brand accents (was green) */
    --green1: #FF6012;
    --green2: #e0530a;
    --green3: #FF6012;

    /* Surfaces (kept dark — same family as Truendo's previous look) */
    --dark1: #262626;       /* primary surface (modal, notice background) */
    --dark2: #1a1a1a;       /* darker (footer, headers) */
    --dark3: #4a4a4a;       /* secondary buttons */

    /* Text on dark surfaces */
    --light1: #ffffff;      /* primary text */
    --light2: #d4d4d4;      /* secondary text */
    --light3: #a0a0a0;      /* tertiary text */

    /* Buttons */
    --button-text-color: #ffffff;
    --border-radius: 2px;
    --border-width: 0;

    /* Notice positioning (already bottom-bar by default; explicit for clarity) */
    --notice-position: fixed;
    --notice-bottom: 0;
    --notice-left: 0;
    --notice-right: 0;
    --notice-top: auto;
    --notice-max-width: 100%;
}

/* ============================================================
   BOTTOM-BAR NOTICE — full-width across all viewports
   ============================================================ */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background: #262626 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35) !important;
    padding: 16px 20px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Force text white inside the bar (Klaro defaults to light1 anyway, but be explicit) */
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2 {
    color: #fff !important;
    margin: 0 !important;
}

/* Description paragraph spacing */
.klaro .cookie-notice .cn-body > p {
    margin: 0 0 12px 0 !important;
}

/* Inline links in the description — brand orange */
.klaro .cookie-notice a,
.klaro .cookie-notice .cn-body a {
    color: #FF6012 !important;
    text-decoration: underline !important;
}

/* ============================================================
   DESKTOP — text on left, buttons grouped on right
   ============================================================ */
@media (min-width: 768px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
        flex: 1 !important;
        margin: 0 !important;
    }
    .klaro .cookie-notice .cn-buttons,
    .klaro .cookie-notice .cn-ok {
        display: flex !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }
}

/* ============================================================
   MOBILE — stack all 3 buttons vertically, full width
   Order: Accepta toate (top) → Refuza → Optiuni (bottom)
   ============================================================ */
@media (max-width: 767px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        padding: 14px 16px 16px 16px !important;
        font-size: 13px !important;
    }
    .klaro .cookie-notice .cn-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .klaro .cookie-notice .cn-buttons,
    .klaro .cookie-notice .cn-ok {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* All button-like elements full width on mobile */
    .klaro .cookie-notice .cm-btn,
    .klaro .cookie-notice .cm-link.cn-learn-more,
    .klaro .cookie-notice .cn-learn-more {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* Reorder via flex so Accepta toate is prominent at top */
    .klaro .cookie-notice .cm-btn.cm-btn-success,
    .klaro .cookie-notice .cn-ok > .cm-btn-success,
    .klaro .cookie-notice .cm-btn-accept-all {
        order: 1 !important;
    }
    .klaro .cookie-notice .cm-btn.cm-btn-decline,
    .klaro .cookie-notice .cm-btn.cm-btn-danger,
    .klaro .cookie-notice .cn-decline {
        order: 2 !important;
    }
    .klaro .cookie-notice .cm-link.cn-learn-more,
    .klaro .cookie-notice .cn-learn-more {
        order: 3 !important;
    }
}

/* ============================================================
   "OPTIUNI" — Klaro renders this as <a class="cm-link cn-learn-more">.
   Make it look like an outlined secondary button rather than text link.
   High specificity needed: Klaro defines .cm-link with priority.
   ============================================================ */
.klaro .cookie-notice .cm-link.cn-learn-more,
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice .cn-buttons .cm-link {
    background: transparent !important;
    color: #FF6012 !important;
    border: 1px solid #FF6012 !important;
    padding: 10px 18px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    line-height: 1.2 !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}
.klaro .cookie-notice .cm-link.cn-learn-more:hover,
.klaro .cookie-notice .cn-learn-more:hover {
    background: #FF6012 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================================
   BUTTONS — base styles (Klaro uses --green for success, --dark for danger)
   ============================================================ */
.klaro .cm-btn {
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border-radius: 2px !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    min-height: 38px !important;
}

/* Primary CTA: Accept all / OK / Save — brand orange */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn-accept-all,
.klaro .cm-btn-accept,
.klaro .cm-btn.cm-btn-success-var {
    background: #FF6012 !important;
    color: #fff !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-btn.cm-btn-success-var:hover {
    background: #e0530a !important;
    color: #fff !important;
}

/* Decline / Danger / Info — dark secondary */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-info {
    background: #4a4a4a !important;
    color: #fff !important;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-info:hover {
    background: #5e5e5e !important;
    color: #fff !important;
}

/* ============================================================
   SETTINGS MODAL — dark theme (matches the bar for consistency)
   Klaro defaults are mostly fine since we override variables;
   these rules tighten brand-specific bits.
   ============================================================ */

/* Backdrop dimmer */
.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Modal card */
.klaro .cookie-modal .cm-modal {
    background: #262626 !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Roboto', Arial, sans-serif !important;
}

/* Header (title + description) */
.klaro .cookie-modal .cm-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #3a3a3a !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
    color: #fff !important;
}
.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-modal p {
    color: #d4d4d4 !important;
}
.klaro .cookie-modal .cm-header a,
.klaro .cookie-modal .cm-modal a {
    color: #FF6012 !important;
    text-decoration: underline !important;
}

/* Body — purpose/service list */
.klaro .cookie-modal .cm-body {
    background: #262626 !important;
    color: #fff !important;
}
.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
    border-bottom: 1px solid #3a3a3a !important;
}
.klaro .cookie-modal .cm-list-title {
    color: #fff !important;
    font-weight: 700 !important;
}
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-content {
    color: #d4d4d4 !important;
}

/* "↓ 1 serviciu" expand links — brand orange */
.klaro .cookie-modal .cm-caret,
.klaro .cookie-modal a.cm-link,
.klaro .cookie-modal .cm-services-toggle,
.klaro .cookie-modal .cm-list-description a {
    color: #FF6012 !important;
    text-decoration: underline !important;
}

/* Toggle switches: orange ON, gray OFF */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background: #FF6012 !important;
}
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider {
    background: #707070 !important;
}
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider {
    background: #707070 !important;
    opacity: 0.6 !important;
}

/* Footer with action buttons */
.klaro .cookie-modal .cm-footer {
    background: #1a1a1a !important;
    border-top: 1px solid #3a3a3a !important;
    padding: 14px 20px !important;
}
.klaro .cookie-modal .cm-footer-buttons {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}

/* Close X button on modal */
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .cookie-modal .hide {
    color: #d4d4d4 !important;
    background: transparent !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-close:hover {
    color: #fff !important;
}

/* ============================================================
   MOBILE modal: full-width, footer buttons stacked
   ============================================================ */
@media (max-width: 767px) {
    .klaro .cookie-modal .cm-modal {
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }
    .klaro .cookie-modal .cm-footer-buttons {
        flex-direction: column !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }
    .klaro .cookie-modal .cm-footer-buttons .cm-btn {
        width: 100% !important;
    }
}

/* ============================================================
   Hide "Powered by Klaro" credit
   ============================================================ */
.klaro .cm-powered-by,
.klaro .cookie-modal .cm-footer-buttons .cm-powered-by,
.klaro .cookie-modal .cm-modal .cm-powered-by {
    display: none !important;
}