/* CookieConsent Custom Styles - HabitStreak Theme */
/* Overrides for vanilla-cookieconsent by Orest Bida */

:root {
  --cc-bg: #fff;
  --cc-text: #2d4a3e;
  --cc-btn-primary-bg: #2BA06B;
  --cc-btn-primary-text: #fff;
  --cc-btn-primary-hover-bg: #238a5a;
  --cc-btn-secondary-bg: #e8f5e9;
  --cc-btn-secondary-text: #2d4a3e;
  --cc-btn-secondary-hover-bg: #c8e6c9;
  --cc-toggle-bg-off: #919191;
  --cc-toggle-bg-on: #2BA06B;
  --cc-toggle-bg-readonly: #d5dee2;
  --cc-toggle-knob-bg: #fff;
  --cc-toggle-knob-icon-color: #ecf2fa;
  --cc-block-text: #2d4a3e;
  --cc-cookie-category-block-bg: #f0f4f7;
  --cc-cookie-category-block-bg-hover: #e8eef2;
  --cc-section-border: #f1f3f5;
  --cc-cookie-table-border: #e9edf2;
  --cc-overlay-bg: rgba(4, 6, 8, 0.85);
  --cc-webkit-scrollbar-bg: #cfd5db;
  --cc-webkit-scrollbar-bg-hover: #9199a0;
  --cc-link-color: #2BA06B;
}

/* Dark mode support */
.cc--darkmode {
  --cc-bg: #1a1a2e;
  --cc-text: #d8dce6;
  --cc-btn-primary-bg: #2BA06B;
  --cc-btn-primary-text: #fff;
  --cc-btn-primary-hover-bg: #238a5a;
  --cc-btn-secondary-bg: #2d3748;
  --cc-btn-secondary-text: #d8dce6;
  --cc-btn-secondary-hover-bg: #3d4a5c;
  --cc-toggle-bg-off: #667788;
  --cc-toggle-bg-on: #2BA06B;
  --cc-toggle-bg-readonly: #454c5c;
  --cc-toggle-knob-bg: #fff;
  --cc-block-text: #b3bac5;
  --cc-cookie-category-block-bg: #23293a;
  --cc-cookie-category-block-bg-hover: #2d3546;
  --cc-section-border: #292d3e;
  --cc-cookie-table-border: #2b3141;
  --cc-overlay-bg: rgba(4, 6, 8, 0.9);
  --cc-webkit-scrollbar-bg: #3a4252;
  --cc-webkit-scrollbar-bg-hover: #545c6e;
  --cc-link-color: #4fd495;
}

/* Custom button styling */
.cc-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
}

/* Modal styling */
#cc-main .cm {
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

#cc-main .pm {
  border-radius: 12px !important;
}

/* Link styling */
#cc-main a {
  color: var(--cc-link-color);
  text-decoration: underline;
}

#cc-main a:hover {
  text-decoration: none;
}