/* ================================================================
   TS3 visual overrides for Klaro cookie-consent
   Loaded AFTER cookies/assets/css/klaro.css so these selectors win.
   ================================================================ */

.klaro { --font-family: inherit; }

/* ---------- bottom-bar notice ---------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
	background: #ffffff !important;
	border-top: 1px solid #e2e8f0 !important;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
}
.klaro .cookie-notice .cn-body { max-width: 860px; margin: 0 auto; padding: 16px 20px !important; }
.klaro .cookie-notice p { color: #475569 !important; font-size: 13px !important; }
.klaro .cookie-notice a { color: #F06C02 !important; font-weight: 600; }
.klaro .cn-buttons { display: flex !important; gap: 10px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.klaro .cm-btn.cm-btn-success {
	background: #F06C02 !important; border: 1px solid #F06C02 !important; color: #fff !important;
	border-radius: 8px !important; padding: 10px 16px !important; font-weight: 600;
}
.klaro .cm-btn.cm-btn-success:hover { background: #d45d00 !important; border-color: #d45d00 !important; }
.klaro .cm-btn {
	background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important;
	border-radius: 8px !important; padding: 10px 16px !important; font-weight: 600;
}

/* ---------- settings modal ---------- */
.klaro .cookie-modal .cm-modal.cm-klaro {
	background: #ffffff !important; color: #1e293b !important;
	border-radius: 12px !important; max-width: 520px !important;
}
.klaro .cm-header { border-bottom: 1px solid #e2e8f0 !important; }
.klaro .cm-header h1 { color: #1e293b !important; font-size: 18px !important; }

/* X close button in the top-right of the settings modal */
.klaro .cookie-modal .cm-modal .hide,
.klaro .cookie-modal .cm-modal .hide:focus,
.klaro .cookie-modal .cm-modal .hide:focus-visible,
.klaro .cookie-modal .cm-modal .hide:hover {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 4px !important;
}
.klaro .cookie-modal .cm-modal .hide svg {
	stroke: #475569 !important;
}
.klaro .cookie-modal .cm-modal .hide:hover svg {
	stroke: #1e293b !important;
}
.klaro .cm-header p,
.klaro .cm-header .cm-list-description,
.klaro .cm-modal .cm-modal-title + p,
.klaro .cookie-modal-notice p { color: #475569 !important; }
.klaro .cm-body { color: #475569 !important; }
.klaro .cm-list-title { color: #1e293b !important; }
.klaro .cm-list-description { color: #64748b !important; }

/* toggle switch */
.klaro .cm-list-input:checked + .cm-list-label .slider { background-color: #F06C02 !important; }
.klaro .slider { background-color: #e2e8f0 !important; }
.klaro .slider::before { background: #ffffff !important; }

.klaro .cm-footer { border-top: 1px solid #e2e8f0 !important; }

/* mobile: bottom sheet feel */
@media (max-width: 768px) {
	.klaro .cookie-modal .cm-modal.cm-klaro {
		position: fixed !important; bottom: 0 !important; top: auto !important;
		transform: none !important; width: 100% !important;
		border-radius: 16px 16px 0 0 !important; max-height: 90vh !important;
	}
}