/* ASFIM Custom Klaro Styling - Using Klaro's CSS Variables */

:root {
  /* ASFIM Brand Colors */
  --green1: #C5A572; /* Gold for accept buttons */
  --green2: #b89960; /* Darker gold for hover */
  --green3: #a68850; /* Even darker for active */

  --blue1: #1E3A5F; /* Navy for primary color */
  --blue2: #0f2744; /* Darker navy */
  --blue3: #1a3654; /* Medium navy */

  --dark1: #1E3A5F; /* Navy for headers */
  --dark2: #2a4a6f; /* Lighter navy */
  --dark3: #374b63; /* Even lighter */

  --light1: #ffffff;
  --light2: #e0e0e0;
  --light3: #f8f9fa;

  --white1: #ffffff;
  --white2: #f9fafb;
  --white3: #f0f0f0;

  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size: 15px;
  --border-radius: 14px;
}

/* Modal header customization */
.klaro .cookie-modal .cm-header {
  background: var(--dark1);
  color: var(--white1);
  border-bottom: 2px solid var(--green1);
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
  font-family: 'Playfair Display', serif;
  color: var(--white1);
}

/* Notice banner customization */
.klaro .cookie-notice {
  border-top: 4px solid var(--green1);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
}

.klaro .cookie-notice .cn-body .cn-title,
.klaro .cookie-notice .cn-title {
  font-family: 'Playfair Display', serif;
  color: var(--dark1);
  font-weight: 700;
}

/* Button styling */
.klaro button.cm-btn {
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.klaro button.cm-btn.cm-btn-success,
.klaro .cm-btn-accept-all {
  background: var(--green1);
  border-color: var(--green1);
}

.klaro button.cm-btn.cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover {
  background: var(--green2);
  transform: translateY(-2px);
}

.klaro button.cm-btn.cm-btn-info {
  border: 2px solid var(--light2);
}

.klaro button.cm-btn.cm-btn-info:hover {
  border-color: var(--dark1);
}

/* Links */
.klaro a,
.klaro .cm-link {
  color: var(--green1);
  font-weight: 600;
}

.klaro a:hover,
.klaro .cm-link:hover {
  color: var(--green2);
}

/* Toggle switches */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--green1);
}

.klaro .cm-list-input:checked + .cm-list-label .slider:hover {
  background-color: var(--green2);
}

/* App descriptions */
.klaro .cm-app-title {
  color: var(--dark1);
  font-weight: 600;
}

/* Purpose styling */
.klaro .cm-purpose {
  color: var(--dark1);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

/* Modal backdrop */
.klaro .cookie-modal-backdrop,
.klaro .cm-bg {
  background: rgba(30, 58, 95, 0.75);
}

/* Modal container */
.klaro .cookie-modal .cm-modal {
  border-radius: var(--border-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .klaro .cookie-notice {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .klaro .cookie-modal .cm-modal {
    max-width: 95%;
    margin: 1rem;
  }
}