/**
 * De Biechten Complianz GDPR Cookie Banner Theme Overrides
 *
 * This file overrides Complianz's default banner and modal styles to match
 * the De Biechten brand identity. It targets both newer (.cc-nb-*) and older
 * (#cconsent-*) Complianz selector patterns for compatibility.
 *
 * Uses CSS custom properties defined in variables.css for consistency.
 */

/* ============================================================
   BANNER / BAR CONTAINER
   ============================================================ */

/* Newer version selectors */
.cc-nb-container,
.cc-nb-bar,
.cm__bar {
  background-color: var(--color-green) !important;
  border-top: 3px solid var(--color-gold) !important;
  color: var(--color-cream) !important;
}

/* Older version selectors */
#cconsent-bar {
  background-color: var(--color-green) !important;
  border-top: 3px solid var(--color-gold) !important;
  color: var(--color-cream) !important;
}

/* ============================================================
   BANNER TEXT & LINKS
   ============================================================ */

.cc-nb-text,
.cm__text,
#cconsent-bar p,
#cconsent-bar .cm__content {
  color: var(--color-cream) !important;
  font-family: var(--font-body) !important;
}

.cc-nb-text a,
.cm__text a,
#cconsent-bar a {
  color: var(--color-gold) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.cc-nb-text a:hover,
.cm__text a:hover,
#cconsent-bar a:hover {
  color: #e0a850 !important;
  text-decoration: underline !important;
}

/* ============================================================
   PRIMARY BUTTON (ACCEPT / ACCEPTEER)
   ============================================================ */

/* Newer version selectors */
.cc-nb-button-primary,
.cm__button-primary,
.cc-nb-button[data-type="primary"],
.cm__button[data-type="primary"] {
  background-color: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base) !important;
}

.cc-nb-button-primary:hover,
.cm__button-primary:hover,
.cc-nb-button[data-type="primary"]:hover,
.cm__button[data-type="primary"]:hover {
  background-color: #b07a2e !important;
}

.cc-nb-button-primary:active,
.cm__button-primary:active,
.cc-nb-button[data-type="primary"]:active,
.cm__button[data-type="primary"]:active {
  background-color: #9d6926 !important;
}

/* Older version selectors */
#cconsent-bar .cm__button--primary,
#cconsent-bar .cc-btn-primary {
  background-color: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base) !important;
}

#cconsent-bar .cm__button--primary:hover,
#cconsent-bar .cc-btn-primary:hover {
  background-color: #b07a2e !important;
}

#cconsent-bar .cm__button--primary:active,
#cconsent-bar .cc-btn-primary:active {
  background-color: #9d6926 !important;
}

/* ============================================================
   SECONDARY / DECLINE BUTTON (WEIGEREN)
   ============================================================ */

/* Newer version selectors */
.cc-nb-button-secondary,
.cm__button-secondary,
.cc-nb-button[data-type="secondary"],
.cm__button[data-type="secondary"] {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border: 1.5px solid rgba(245, 239, 224, 0.5) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

.cc-nb-button-secondary:hover,
.cm__button-secondary:hover,
.cc-nb-button[data-type="secondary"]:hover,
.cm__button[data-type="secondary"]:hover {
  background-color: rgba(245, 239, 224, 0.1) !important;
  border-color: rgba(245, 239, 224, 0.8) !important;
}

.cc-nb-button-secondary:active,
.cm__button-secondary:active,
.cc-nb-button[data-type="secondary"]:active,
.cm__button[data-type="secondary"]:active {
  background-color: rgba(245, 239, 224, 0.15) !important;
}

/* Older version selectors */
#cconsent-bar .cm__button--secondary,
#cconsent-bar .cc-btn-secondary,
#cconsent-bar .cm__button--dismiss {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border: 1.5px solid rgba(245, 239, 224, 0.5) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

#cconsent-bar .cm__button--secondary:hover,
#cconsent-bar .cc-btn-secondary:hover,
#cconsent-bar .cm__button--dismiss:hover {
  background-color: rgba(245, 239, 224, 0.1) !important;
  border-color: rgba(245, 239, 224, 0.8) !important;
}

#cconsent-bar .cm__button--secondary:active,
#cconsent-bar .cc-btn-secondary:active,
#cconsent-bar .cm__button--dismiss:active {
  background-color: rgba(245, 239, 224, 0.15) !important;
}

/* ============================================================
   MODAL STYLES
   ============================================================ */

/* Modal container */
.cc-nb-modal,
.cm__modal,
#cconsent-modal {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Modal header */
.cc-nb-modal-header,
.cm__header,
#cconsent-modal .cm__header {
  background-color: var(--color-green) !important;
  color: var(--color-cream) !important;
  border-bottom: 3px solid var(--color-gold) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 24px !important;
}

.cc-nb-modal-header h1,
.cc-nb-modal-header h2,
.cm__header h1,
.cm__header h2,
#cconsent-modal .cm__header h1,
#cconsent-modal .cm__header h2 {
  color: var(--color-cream) !important;
  font-family: var(--font-body) !important;
  margin: 0 !important;
}

/* Modal close button */
.cc-nb-modal-close,
.cm__close,
#cconsent-modal .cm__close,
#cconsent-modal .cm__close-button {
  color: var(--color-cream) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 24px !important;
  transition: color var(--transition-base) !important;
}

.cc-nb-modal-close:hover,
.cm__close:hover,
#cconsent-modal .cm__close:hover,
#cconsent-modal .cm__close-button:hover {
  color: var(--color-gold) !important;
}

/* ============================================================
   MODAL CONTENT & TOGGLES
   ============================================================ */

/* Modal body text */
.cc-nb-modal-content,
.cm__body,
#cconsent-modal .cm__body {
  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
}

.cc-nb-modal-content p,
.cm__body p,
#cconsent-modal .cm__body p {
  color: var(--color-dark) !important;
}

/* Toggle active state */
.cc-nb-toggle:checked,
.cm__toggle:checked,
.cc-toggle:checked,
#cconsent-modal .cm__toggle:checked {
  background-color: var(--color-green) !important;
}

/* Toggle label */
.cc-nb-toggle-label,
.cm__toggle-label,
.cc-toggle-label,
#cconsent-modal .cm__toggle-label {
  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
}

/* ============================================================
   MODAL BUTTONS
   ============================================================ */

/* Save/Confirm button in modal */
.cc-nb-modal-button-primary,
.cm__footer .cm__button--primary,
#cconsent-modal .cm__button--primary,
#cconsent-modal .cm__footer .cm__button[data-type="primary"] {
  background-color: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base) !important;
}

.cc-nb-modal-button-primary:hover,
.cm__footer .cm__button--primary:hover,
#cconsent-modal .cm__button--primary:hover,
#cconsent-modal .cm__footer .cm__button[data-type="primary"]:hover {
  background-color: #b07a2e !important;
}

/* Modal secondary button */
.cc-nb-modal-button-secondary,
.cm__footer .cm__button--secondary,
#cconsent-modal .cm__button--secondary,
#cconsent-modal .cm__footer .cm__button[data-type="secondary"] {
  background-color: transparent !important;
  color: var(--color-dark) !important;
  border: 1.5px solid var(--color-dark) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

.cc-nb-modal-button-secondary:hover,
.cm__footer .cm__button--secondary:hover,
#cconsent-modal .cm__button--secondary:hover,
#cconsent-modal .cm__footer .cm__button[data-type="secondary"]:hover {
  background-color: var(--color-dark) !important;
  color: var(--color-cream) !important;
}

/* ============================================================
   GENERIC FALLBACK SELECTORS
   ============================================================ */

/* Generic button styling as fallback */
.cm__button,
.cc-nb-button {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-md) !important;
  transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

/* Consent table styling */
.cm__consent-table,
.cc-table {
  background-color: #ffffff !important;
  color: var(--color-dark) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.cm__consent-table th,
.cc-table th {
  background-color: var(--color-green) !important;
  color: var(--color-cream) !important;
  font-weight: 600 !important;
}

.cm__consent-table td,
.cc-table td {
  color: var(--color-dark) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}