/* MERKOO Custom Theme for Klaro */

/* General */
.klaro {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 15px;
}
.klaro button, .klaro a {
    font-family: var(--font-body, 'Inter', sans-serif);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}

/* Notice Banner */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    /* Positioning at the bottom, centered horizontally */
    position: fixed;
    top: auto;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 620px; /* Wider to fit content */
    
    /* Styling from the main modal */
    background-color: var(--bg-accent, #131221);
    color: var(--text-main, #f4f4f6);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 1.5rem; /* Ample padding, creates margin for buttons on mobile */
    z-index: 9999; /* Highest z-index to be on top of everything */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Modal Window */
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: var(--bg-accent, #131221);
    color: var(--text-main, #f4f4f6);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    z-index: 9999; /* Highest z-index */
    /* Centering styles */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.klaro .cookie-modal .cm-bg {
    background: rgba(11, 11, 20, 0.7); /* --bg-color with transparency */
    backdrop-filter: blur(8px);
    z-index: 9998; /* Below the modal, but above site content */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Text and Links */
.klaro p, .klaro strong, .klaro h1, .klaro h2, .klaro ul, .klaro li {
    color: var(--text-main, #f4f4f6);
}
.klaro .cookie-modal .cm-modal .cm-body {
    /* Make the body scrollable, not the whole modal */
    overflow-y: auto;
    padding: 1.25rem; /* ~20px padding */
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    color: var(--text-muted, #a1a1bc);
    margin-bottom: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem; /* Space between "learn more" and buttons */
    justify-content: flex-end;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons {
    display: flex;
    gap: 0.75rem; /* Space between decline and ok buttons */
}
.klaro a, .klaro .cm-link {
    color: var(--accent-primary, #af5398);
    text-decoration: none;
}
.klaro a:hover {
    color: var(--text-main, #f4f4f6);
}

/* Buttons */
.klaro .cm-btn {
    color: var(--text-main, #f4f4f6);
    background-color: var(--accent-secondary, #7e3e7f);
    border-radius: 6px;
    padding: 0.7rem 1.5rem;
    font-weight: 500;
    border: none;
}
.klaro .cm-btn:hover {
    background-color: var(--accent-primary, #af5398);
}
.klaro .cm-btn.cm-btn-success {
    background-color: var(--accent-primary, #af5398);
}
.klaro .cm-btn.cm-btn-success:hover {
    background-color: var(--accent-secondary, #7e3e7f);
}
.klaro .cm-btn.cm-btn-close, .klaro .cm-btn.cm-btn-info {
    background-color: rgba(255, 255, 255, 0.1);
}
.klaro .cm-btn.cm-btn-close:hover, .klaro .cm-btn.cm-btn-info:hover, .klaro .cm-btn.cm-btn-danger:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Decline button should be gray */
.klaro .cm-btn.cm-btn-danger {
    background-color: rgba(255, 255, 255, 0.1);
}

.klaro .cm-btn:disabled {
    opacity: 0.5;
}

/* Modal Header & Footer */
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 1.25rem; /* ~20px padding */
    flex-shrink: 0;
}
.klaro .cookie-modal .cm-modal .cm-header {
    position: relative; /* For positioning the close button */
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.klaro .cookie-modal .cm-modal .cm-footer {
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex;
    gap: 0.75rem; /* Space between buttons */
    justify-content: center;
}
.klaro .cookie-modal .cm-modal .cm-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-right: 2rem; /* Space for close button */
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: var(--text-muted, #a1a1bc);
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    font-size: 0.75em;
    opacity: 0.5;
    margin: 0;
}
.klaro .cookie-modal .cm-modal .hide {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.klaro .cookie-modal .cm-modal .hide:hover {
    opacity: 1;
}
.klaro .cookie-modal .cm-modal .hide svg {
    stroke: var(--text-main, #f4f4f6);
}

/* Toggle Switch */
.klaro .cookie-modal .cm-switch-container {
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 1rem;
    padding-left: 80px;
}
.klaro .cookie-modal .cm-list-label .slider {
    background-color: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.klaro .cookie-modal .cm-list-label .slider::before {
    background-color: var(--text-muted, #a1a1bc);
}
.klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider {
    background-color: var(--accent-primary, #af5398);
    border-color: var(--accent-primary, #af5398);
}
.klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider::before {
    background-color: var(--text-main, #f4f4f6);
}
.klaro .cookie-modal .cm-list-title {
    font-weight: 500;
    color: var(--text-main, #f4f4f6);
}
.klaro .cookie-modal .cm-list-description {
    color: var(--text-muted, #a1a1bc);
    font-size: 0.85em;
}

/* Conflicting default styles were removed. */