/* Klaro overrides — match iTechie v4 design system
   Load AFTER klaro.css so these rules win. */

.klaro {
  font-family: var(--font-body, 'Inter', Arial, sans-serif);
}

/* Bottom notice (first-visit banner) */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: var(--color-navy, #123047);
  color: #eff2f4;
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-md, 0 14px 38px rgba(17, 24, 33, 0.22));
  max-width: 420px;
  margin: 1rem;
  padding: 1.25rem 1.35rem;
  font-size: var(--text-sm, 0.95rem);
  line-height: 1.55;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.klaro .cookie-notice .cn-body {
  padding: 0;
  margin: 0;
}

.klaro .cookie-notice h2,
.klaro .cookie-notice .cn-title {
  font-family: var(--font-display, 'Manrope', 'Inter', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.01em;
}

.klaro .cookie-notice p,
.klaro .cookie-notice .cn-ok {
  color: rgba(239, 242, 244, 0.88);
  margin: 0 0 0.9rem 0;
}

.klaro .cookie-notice .cn-learn-more {
  color: var(--color-accent, #f2a313);
  text-decoration: underline;
}

.klaro .cookie-notice .cn-learn-more:hover {
  color: #ffc04a;
}

/* Buttons — bottom notice */
.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.klaro .cm-btn {
  font-family: var(--font-body, 'Inter', Arial, sans-serif);
  font-weight: 600;
  font-size: var(--text-sm, 0.9rem);
  border-radius: var(--radius-md, 0.625rem);
  padding: 0.65rem 1.1rem;
  border: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  letter-spacing: 0.01em;
}

.klaro .cm-btn:hover {
  transform: translateY(-1px);
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cn-ok,
.klaro .cm-btn-accept-all,
.klaro .cm-btn-accept {
  background: var(--color-accent, #f2a313);
  color: #1a1a1a;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cn-ok:hover,
.klaro .cm-btn-accept-all:hover,
.klaro .cm-btn-accept:hover {
  background: #ffb82e;
}

.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn-decline {
  background: transparent;
  color: rgba(239, 242, 244, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn-decline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.klaro .cm-btn.cm-btn-info {
  background: transparent;
  color: rgba(239, 242, 244, 0.82);
  text-decoration: underline;
  padding: 0.65rem 0.4rem;
}

.klaro .cm-btn.cm-btn-info:hover {
  color: #ffffff;
}

/* Full modal (settings view) */
.klaro .cookie-modal .cm-bg {
  background: rgba(18, 48, 71, 0.72);
  backdrop-filter: blur(6px);
}

.klaro .cookie-modal .cm-modal {
  background: var(--color-bg, #f7f6f2);
  color: var(--color-text, #163042);
  border-radius: var(--radius-xl, 1.5rem);
  box-shadow: var(--shadow-md, 0 14px 38px rgba(17, 24, 33, 0.18));
  max-width: 640px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border, rgba(18, 48, 71, 0.12));
}

.klaro .cookie-modal .cm-header {
  padding: 1.5rem 1.75rem 0.5rem;
  border-bottom: none;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
  font-family: var(--font-display, 'Manrope', 'Inter', sans-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text, #163042);
  letter-spacing: -0.02em;
  margin: 0;
}

.klaro .cookie-modal .cm-body {
  padding: 0.75rem 1.75rem 1rem;
  color: var(--color-text-muted, #5b6873);
  font-size: var(--text-sm, 0.95rem);
  line-height: 1.6;
}

.klaro .cookie-modal .cm-purposes {
  border-top: 1px solid var(--color-border, rgba(18, 48, 71, 0.12));
  padding-top: 1rem;
  margin-top: 1rem;
}

.klaro .cookie-modal .cm-purpose {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border, rgba(18, 48, 71, 0.08));
}

.klaro .cookie-modal .cm-purpose:last-child {
  border-bottom: none;
}

.klaro .cookie-modal .cm-list-title {
  font-family: var(--font-display, 'Manrope', 'Inter', sans-serif);
  font-weight: 700;
  color: var(--color-text, #163042);
  font-size: 1rem;
}

.klaro .cookie-modal .cm-list-description {
  color: var(--color-text-muted, #5b6873);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Toggle switches */
.klaro .cm-switch-container .cm-switch {
  background: #cbd5dd;
  border-radius: var(--radius-full, 999px);
  transition: background-color 180ms ease;
}

.klaro .cm-switch-container .cm-list-input:checked + .cm-switch {
  background: var(--color-primary, #0f7f77);
}

.klaro .cm-switch-container .cm-required .cm-switch {
  background: var(--color-text-muted, #5b6873);
  opacity: 0.5;
}

/* Modal footer / buttons row */
.klaro .cookie-modal .cm-footer {
  background: var(--color-surface-2, rgba(243, 241, 235, 0.85));
  border-top: 1px solid var(--color-border, rgba(18, 48, 71, 0.12));
  padding: 1.1rem 1.75rem;
}

.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.klaro .cookie-modal .cm-btn-accept,
.klaro .cookie-modal .cm-btn-accept-all {
  background: var(--color-primary, #0f7f77);
  color: #ffffff;
}

.klaro .cookie-modal .cm-btn-accept:hover,
.klaro .cookie-modal .cm-btn-accept-all:hover {
  background: var(--color-primary-hover, #0c6660);
}

.klaro .cookie-modal .cm-btn-decline,
.klaro .cookie-modal .cm-btn-success-var {
  background: transparent;
  color: var(--color-text, #163042);
  border: 1px solid var(--color-border, rgba(18, 48, 71, 0.2));
}

.klaro .cookie-modal .cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn-success-var:hover {
  background: var(--color-surface-3, rgba(235, 231, 223, 0.85));
}

.klaro .cookie-modal .cm-powered-by {
  font-size: 0.75rem;
  color: var(--color-text-faint, #7c8790);
  text-align: right;
  padding: 0.5rem 1.75rem 0.75rem;
}

.klaro .cookie-modal .cm-powered-by a {
  color: inherit;
  text-decoration: underline;
}

/* Dark theme */
[data-theme="dark"] .klaro .cookie-modal .cm-modal {
  background: #1a2630;
  color: #eff2f4;
  border-color: rgba(245, 245, 240, 0.10);
}

[data-theme="dark"] .klaro .cookie-modal .cm-header h1,
[data-theme="dark"] .klaro .cookie-modal .cm-list-title {
  color: #ffffff;
}

[data-theme="dark"] .klaro .cookie-modal .cm-body,
[data-theme="dark"] .klaro .cookie-modal .cm-list-description {
  color: #bac3ca;
}

[data-theme="dark"] .klaro .cookie-modal .cm-footer {
  background: #121a22;
  border-top-color: rgba(245, 245, 240, 0.08);
}

[data-theme="dark"] .klaro .cookie-modal .cm-btn-decline,
[data-theme="dark"] .klaro .cookie-modal .cm-btn-success-var {
  color: #eff2f4;
  border-color: rgba(245, 245, 240, 0.18);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: none;
    margin: 0.5rem;
    padding: 1rem 1.1rem;
  }

  .klaro .cookie-modal .cm-modal {
    border-radius: var(--radius-lg, 1rem);
    margin: 0.5rem;
  }

  .klaro .cookie-modal .cm-footer-buttons {
    justify-content: stretch;
  }

  .klaro .cookie-modal .cm-footer-buttons .cm-btn {
    flex: 1 1 auto;
  }
}