/* Base variables with theme fallback */
:root {
  --dpc-brand: var(--wp--preset--color--primary, #1A73E8);
  --dpc-bg: #101114;
  --dpc-text: #f6f7fb;
  --dpc-muted: #e9ecf4;
  --dpc-border: rgba(255,255,255,0.12);
}

/* Map Klaro theme variables to brand */
:root, .klaro {
  --green1: var(--dpc-brand);
  --green2: var(--dpc-brand);
  --green3: var(--dpc-brand);
  --blue1: var(--dpc-brand);
  --blue2: var(--dpc-brand);
}

/* Remove global radius and set modal radius to 0 */
.klaro { --border-radius: 0 !important; }
/* Layout: modal */
.klaro .cm-modal { max-width: 760px; border-radius: 0 !important; }
.klaro .cm-modal .cm-header { font-weight: 700; }
.klaro .cm-modal .cm-body { color: #2b2b2b; }

/* Layout: bar (Cookiebot-like bottom banner) */
.dpc-layout-bar .klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: none !important; width: 100% !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 24px rgba(0,0,0,0.15) !important;
  border-top: 1px solid var(--dpc-border) !important;
}
.dpc-layout-bar .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 16px 20px !important; }
.dpc-layout-bar .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display:flex; gap:8px; justify-content:flex-end; }

.dpc-layout-bar .klaro .cm-modal {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  max-width: none; width: 100%;
  border-radius: 0 !important;
  box-shadow: 0 -2px 24px rgba(0,0,0,0.15);
  border-top: 1px solid var(--dpc-border);
}
.dpc-layout-bar .klaro .cookie-modal { height: auto !important; }
.dpc-layout-bar .klaro .cookie-modal .cm-bg { display:none !important; }
.dpc-layout-bar .klaro .cookie-modal .cm-modal.cm-klaro {
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
}
.dpc-layout-bar .klaro .cm-modal .cm-content { padding: 16px 20px; }
.dpc-layout-bar .klaro .cm-modal .cm-footer {
  justify-content: flex-end;
  display: flex;
  gap: 8px;
  padding: 0 20px 16px 20px;
}

/* Buttons */
.klaro .cm-btn { border-radius: 6px; padding: 10px 16px; font-weight: 600; }
.klaro .cm-footer .cm-btn { margin: 0 0 0 8px; }
.klaro .cm-btn-accept-all { background: var(--dpc-brand); border-color: var(--dpc-brand); color: #fff; }
.klaro .cm-btn-accept-all:hover { filter: brightness(0.92); }
.klaro .cm-btn-decline, .klaro .cm-btn-save { background: transparent; border: 2px solid var(--dpc-brand); color: var(--dpc-brand); }
.klaro .cm-btn-decline:hover, .klaro .cm-btn-save:hover { background: rgba(0,0,0,0.03); }

/* Cookie-notice buttons: brand solid → brand outline on hover (higher specificity) */
.klaro .cookie-notice .cn-body .cm-btn,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-info,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-close {
  background: var(--dpc-brand) !important;
  color: #fff !important;
  border: 2px solid var(--dpc-brand) !important;
}
.klaro .cookie-notice .cn-body .cm-btn:hover,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-close:hover {
  background: #fff !important;
  color: var(--dpc-brand) !important;
  border-color: var(--dpc-brand) !important;
}
/* Explicit success non-container selector */
.klaro .cookie-notice .cm-btn.cm-btn-success { background: var(--dpc-brand) !important; color:#fff !important; border:2px solid var(--dpc-brand) !important; }
.klaro .cookie-notice .cm-btn.cm-btn-success:hover { background:#fff !important; color: var(--dpc-brand) !important; border-color: var(--dpc-brand) !important; }
/* Accept-all explicit fix */
.klaro .cookie-notice .cn-body .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-notice .cn-body .cm-btn-accept-all:hover { 
  background:#fff !important; color: var(--dpc-brand) !important; border-color: var(--dpc-brand) !important; 
}

/* Cookie-modal-notice (notice shown as modal) buttons */
.klaro .cookie-modal-notice .cn-ok .cm-btn,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-success,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-info,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-close {
  background: var(--dpc-brand) !important;
  color: #fff !important;
  border: 2px solid var(--dpc-brand) !important;
}
.klaro .cookie-modal-notice .cn-ok .cm-btn:hover,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-close:hover {
  background: #fff !important;
  color: var(--dpc-brand) !important;
  border-color: var(--dpc-brand) !important;
}
/* Accept-all explicit fix */
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-accept-all:hover { 
  background:#fff !important; color: var(--dpc-brand) !important; border-color: var(--dpc-brand) !important; 
}
/* Explicit success hover for notice-as-modal */
.klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-success:hover { 
  background:#fff !important; color: var(--dpc-brand) !important; border-color: var(--dpc-brand) !important; 
}

/* Button order to mimic Cookiebot: Decline, Save (Allow selection), Accept all */
.klaro .cm-footer { display: flex; }
.klaro .cm-footer .cm-btn-decline { order: 1; }
.klaro .cm-footer .cm-btn-save { order: 2; }
.klaro .cm-footer .cm-btn-accept-all { order: 3; }

/* Theme: light (full white card with dark text) */
.dpc-theme-light .klaro .cookie-modal .cm-modal.cm-klaro { background: #ffffff !important; color: #111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-header { border-bottom-color: #e5e7eb !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-header h1, 
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-header, 
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-header * { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .hide svg { stroke:#111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-body,
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-body * { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-footer,
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-footer * { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal a { color: var(--dpc-brand) !important; }
/* Explicitly set purpose/service colours */
.dpc-theme-light .klaro .cookie-modal .cm-list-title { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-required { color:#6b7280 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-caret a, 
.dpc-theme-light .klaro .cookie-modal .cm-caret span { color: var(--dpc-brand) !important; }
.dpc-theme-light .klaro .cookie-modal .cm-services .cm-content,
.dpc-theme-light .klaro .cookie-modal .cm-services .cm-content * { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal .cm-modal .cm-footer { border-top-color: #e5e7eb !important; }
.dpc-theme-light .klaro .cm-modal .cm-body { color: #222; }
.dpc-theme-light .klaro .cm-btn-decline:hover, .dpc-theme-light .klaro .cm-btn-save:hover { background: rgba(0,0,0,0.05); }
/* Keep primary text white on brand solid */
.dpc-theme-light .klaro .cookie-modal .cm-btn.cm-btn-success, 
.dpc-theme-light .klaro .cm-btn-accept-all { color:#fff !important; }
/* Ensure decline remains visible (outline) */
.dpc-theme-light .klaro .cookie-modal .cm-btn.cm-btn-decline { background: transparent; border: 2px solid var(--dpc-brand); color: var(--dpc-brand) !important; }
.dpc-theme-light .klaro .cookie-modal .cm-btn.cm-btn-decline:hover { background: rgba(0,0,0,0.05); color: var(--dpc-brand) !important; }

/* Light theme for cookie-modal-notice */
.dpc-theme-light .klaro .cookie-modal-notice { background:#fff !important; color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal-notice * { color:#111 !important; }
.dpc-theme-light .klaro .cookie-modal-notice .cn-ok .cm-btn.cm-btn-success { color:#fff !important; }
.dpc-theme-light .klaro .cookie-modal-notice a { color: var(--dpc-brand) !important; }
/* Ensure "Only necessary" (close) remains outline/visible in cookie-modal-notice */
.dpc-theme-light .klaro .cookie-modal-notice .cm-btn.cm-btn-close { background: transparent; border: 2px solid var(--dpc-brand); color: var(--dpc-brand) !important; }
.dpc-theme-light .klaro .cookie-modal-notice .cm-btn.cm-btn-close:hover { background: rgba(0,0,0,0.05); color: var(--dpc-brand) !important; }

/* Ensure "Only necessary" stays visible on hover in light modal */
.dpc-theme-light .klaro .cookie-modal .cm-btn.cm-btn-close { background: transparent; border: 2px solid var(--dpc-brand); color: var(--dpc-brand) !important; }
.dpc-theme-light .klaro .cookie-modal .cm-btn.cm-btn-close:hover { background: rgba(0,0,0,0.05); color: var(--dpc-brand) !important; }

/* Light theme for cookie-notice */
.dpc-theme-light .klaro .cookie-notice:not(.cookie-modal-notice) { background:#fff !important; color:#111 !important; }
.dpc-theme-light .klaro .cookie-notice:not(.cookie-modal-notice) p, .dpc-theme-light .klaro .cookie-notice:not(.cookie-modal-notice) a { color:#111 !important; }
.dpc-theme-light .klaro .cookie-notice:not(.cookie-modal-notice) a { color: var(--dpc-brand) !important; }

/* Dark theme overrides for cookie-notice (match modal dark grey) */
.dpc-theme-dark .klaro .cookie-notice:not(.cookie-modal-notice) { background:#333 !important; color:#fafafa !important; }
.dpc-theme-dark .klaro .cookie-notice:not(.cookie-modal-notice) p, .dpc-theme-dark .klaro .cookie-notice:not(.cookie-modal-notice) a { color:#fafafa !important; }
.dpc-theme-dark .klaro .cookie-notice:not(.cookie-modal-notice) a { color: var(--dpc-brand) !important; }

/* Dark theme for cookie-modal-notice to match modal */
.dpc-theme-dark .klaro .cookie-modal-notice { background:#333 !important; color:#fafafa !important; }
.dpc-theme-dark .klaro .cookie-modal-notice * { color:#fafafa !important; }

/* Theme: dark (keep Klaro defaults, just ensure brand mapping applies) */
.dpc-theme-dark .klaro { /* variables already mapped above */ }

/* Links */
.klaro a { color: var(--dpc-brand); text-decoration: underline; }

/* Accessibility contrasts */
.klaro .cm-modal p, .klaro .cm-modal li { line-height: 1.5; }

/* Floating reopen button */
.dpc-reopen { position:fixed; z-index:2147483646; height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; font-weight:600; font-size:12px; border:2px solid var(--dpc-brand); background:#fff; color:var(--dpc-brand); box-shadow: 0 4px 12px rgba(0,0,0,.12); opacity:.95; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease; }
.dpc-reopen:focus { outline:2px solid var(--dpc-brand); outline-offset:2px; }
.dpc-theme-dark .dpc-reopen { background:#333; color:#fff; border-color: var(--dpc-brand); }
.dpc-reopen__label { max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .25s ease, opacity .2s ease, margin .2s ease; }
.dpc-reopen:hover .dpc-reopen__label, .dpc-reopen:focus .dpc-reopen__label { max-width:180px; opacity:1; margin-left:6px; }
.dpc-reopen__icon { line-height:0; display:inline-flex; align-items:center; justify-content:center; }
.dpc-reopen__icon svg { width:20px; height:20px; }

/* Edge docking + slide-out behavior */
.dpc-edge-right { right:0; border-radius:6px 0 0 6px; transform: translateX(calc(100% - 44px)); }
.dpc-edge-left  { left:0;  border-radius:0 6px 6px 0; transform: translateX(calc(-100% + 44px)); }
.dpc-reopen:hover, .dpc-reopen:focus { transform: translateX(0); }

.dpc-reopen-br { bottom:18px; }
.dpc-reopen-bl { bottom:18px; }
.dpc-reopen-tr { top:18px; }
.dpc-reopen-tl { top:18px; }

/* When bottom bar is selected, avoid overlapping the bar */
.dpc-layout-bar .dpc-reopen-br { bottom: 96px; }
.dpc-layout-bar .dpc-reopen-bl { bottom: 96px; }