:root {
  /* ────────── Neutrals ────────── */
  --gray-50:  #ECFAFF;        /* formerly --color-grey-light */
  --gray-800: #333333;        /* formerly --color-grey-dark */
  --white:    #FFFFFF;        /* --color-white */
  --black:    #000000;        /* --color-black */

  /* ──── Primary (Teal) Palette ──── */
  --primary-50:  #C6E7F3;     /* very light */
  --primary-100: #A0DCE5;     /* light */
  --primary-200: #64D3D7;     /* accent */
  --primary-300: #1BC9C7;     /* base */
  --primary-400: #008B94;     /* dark */

  /* ──── Secondary (Blue) Palette ──── */
  --secondary-200: #69D1E5;   /* light */
  --secondary-300: #1784A5;   /* mid */
  --secondary-400: #0F5970;   /* dark */

  /* ────────── Semantic Colors ────────── */
  --bg-page:        var(--primary-50);
  --bg-card:        #E3F8FF;  /* formerly hard-coded */
  --text-default:   var(--gray-800);
  --text-inverted:  var(--white);

  /* ────────── Buttons ────────── */
  /* Primary buttons */
  --btn-primary-bg:        var(--primary-300);
  --btn-primary-hover-bg:  var(--primary-200);
  --btn-primary-text:      var(--white);

  /* Secondary buttons (download/edit) */
  --btn-secondary-bg:        var(--secondary-200);
  --btn-secondary-hover-bg:  var(--primary-300);
  --btn-secondary-text:      #136983; /* original download text */
  --btn-secondary-hover-text: var(--white); /* updated to white */
  
  /* Edit button specific */
  --btn-edit-bg:           var(--primary-200);
  --btn-edit-hover-bg:     var(--primary-300);
  --btn-edit-text:         var(--secondary-400);
  --btn-edit-hover-text:   var(--white);

  /* Like button */
  --btn-like-bg:        transparent;
  --btn-like-text:      #F49DA9;
  --btn-like-hover-bg:  var(--primary-200);
  --btn-like-hover-text: var(--white);

  /* Search elements */
  --search-box-bg:         var(--bg-card);
  --search-box-border:     var(--secondary-300);
  --search-input-text:     var(--secondary-400);
  --search-placeholder:    var(--secondary-300);

  /* ────────── Shadows ────────── */
  --shadow-sm:      0 4px 12px rgba(0,0,0,0.10);
  --shadow-md:      0 8px 20px rgba(0,0,0,0.15);
  --shadow-light:   0 4px 12px rgba(0,0,0,0.05);
  --overlay-white:  rgba(255,255,255,0.20);
  --shadow-focus:   0 0 0 2px rgba(100,211,215,0.25);

  /* Notification colors */
  --notification-success-bg: #4CAF50; /* Standard green */
  --notification-success-text: white;
  --notification-success-border: #388E3C;
  
  --notification-error-bg: #F44336; /* Standard red */
  --notification-error-text: white;
  --notification-error-border: #D32F2F;

  /* Quotes page */
  --quotes-bg: var(--bg-card);
  --quotes-border: var(--secondary-300);
  --quotes-text: var(--secondary-400);
}


/* ─── Blue-Mode Theme Overrides ─── */
html.blue-mode,
body.blue-mode {
  /* page background */
  background: var(--primary-50);
  background: linear-gradient(
    0deg,
    var(--primary-50) 0%,
    var(--primary-100) 100%
  );
}

/* Header */
html.blue-mode .header,
body.blue-mode .header {
  background-color: var(--secondary-400) !important; /* #0F5970 */
}

html.blue-mode .header .logo a,
body.blue-mode .header .logo a,
html.blue-mode .main-nav a,
body.blue-mode .main-nav a {
  color: var(--white) !important;
}

html.blue-mode .main-nav a::after,
body.blue-mode .main-nav a::after {
  background: var(--white) !important;
}

html.blue-mode .main-nav a:hover::after,
html.blue-mode .main-nav a:focus::after,
body.blue-mode .main-nav a:hover::after,
body.blue-mode .main-nav a:focus::after,
html.blue-mode .main-nav li.active a::after,
body.blue-mode .main-nav li.active a::after {
  transform: scaleX(1);
}

html.blue-mode .main-nav li.active a,
body.blue-mode .main-nav li.active a,
html.blue-mode .login-button,
html.blue-mode .logout-button,
body.blue-mode .login-button,
body.blue-mode .logout-button {
  background: var(--secondary-300) !important; /* #1784A5 */
  color: var(--white) !important;
}


/* Card styling */
.blue-mode .proverb-card {
  background: var(--bg-card);
  box-shadow: 0 4px 12px var(--color-shadow-light);
}

.blue-mode .proverb-card:hover {
  box-shadow: 0 8px 20px var(--color-shadow-medium);
  transform: translateY(-5px);
}

.blue-mode .proverb-category-accent {
  background: #1784a5 !important;
  color: var(--white) !important;
}

/* Button styling */
.blue-mode .like-button {
  background: var(--btn-like-bg);
  color: var(--btn-like-text);
}

.blue-mode .like-button:hover {
  background: var(--btn-like-hover-bg);
  color: var(--btn-like-hover-text);
}

/* Button styling for download and edit buttons, including icons */
.blue-mode .download-button,
.blue-mode .download-button i,
.blue-mode .download-button .fas,
.blue-mode .download-button .fas.fa-download {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text) !important;
  transition: all 0.2s ease;
}

.blue-mode .edit-button,
.blue-mode .edit-button i,
.blue-mode .edit-button .fas,
.blue-mode .edit-button .fas.fa-pen {
  background: var(--btn-edit-bg);
  color: var(--btn-edit-text) !important;
  transition: all 0.2s ease;
}

.blue-mode .download-button:hover,
.blue-mode .download-button:hover i,
.blue-mode .download-button:hover .fas,
.blue-mode .download-button:hover .fas.fa-download,
.blue-mode .download-button:focus,
.blue-mode .download-button:focus i,
.blue-mode .download-button:focus .fas,
.blue-mode .download-button:focus .fas.fa-download {
  background: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text) !important;
}

.blue-mode .edit-button:hover,
.blue-mode .edit-button:hover i,
.blue-mode .edit-button:hover .fas,
.blue-mode .edit-button:hover .fas.fa-pen,
.blue-mode .edit-button:focus,
.blue-mode .edit-button:focus i,
.blue-mode .edit-button:focus .fas,
.blue-mode .edit-button:focus .fas.fa-pen {
  background: var(--btn-edit-hover-bg);
  color: var(--btn-edit-hover-text) !important;
}

/* Search elements */
html.blue-mode .search-box, 
body.blue-mode .search-box,
html.blue-mode form .search-box,
body.blue-mode form .search-box {
  border: 2px solid var(--search-box-border) !important;
  background-color: var(--search-box-bg) !important;
}

html.blue-mode .search-input,
body.blue-mode .search-input,
html.blue-mode form .search-input,
body.blue-mode form .search-input {
  color: var(--search-input-text) !important;
  background-color: var(--search-box-bg) !important;
}

html.blue-mode .search-input::placeholder,
body.blue-mode .search-input::placeholder {
  color: var(--search-placeholder) !important;
}


html.blue-mode .search-form,
body.blue-mode .search-form {
  background-color: transparent !important;
}

html.blue-mode .search-button, 
body.blue-mode .search-button,
html.blue-mode form .search-button,
body.blue-mode form .search-button,
html.blue-mode button.search-button,
body.blue-mode button.search-button {
  background-color: var(--secondary-400) !important;
  color: var(--text-inverted) !important;
  border: none !important;
}

html.blue-mode .search-button:hover,
body.blue-mode .search-button:hover,
html.blue-mode form .search-button:hover,
body.blue-mode form .search-button:hover,
html.blue-mode button.search-button:hover,
body.blue-mode button.search-button:hover {
  background-color: var(--secondary-300) !important;
}

/* Form elements */
.blue-mode input[type="text"],
.blue-mode input[type="email"],
.blue-mode input[type="password"],
.blue-mode textarea,
.blue-mode select {
  border: 1px solid var(--color-hover);
}

.blue-mode input[type="text"]:focus,
.blue-mode input[type="email"]:focus,
.blue-mode input[type="password"]:focus,
.blue-mode textarea:focus,
.blue-mode select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-shadow-focus);
}

/* Section styling */
.blue-mode .section-title {
  color: var(--secondary-400);
}

/* Footer styling */
html.blue-mode footer,
body.blue-mode footer {
  background: 	#0F5970 !important;
  color: var(--white) !important;
}

html.blue-mode footer a,
body.blue-mode footer a,
html.blue-mode footer .footer-brand span,
body.blue-mode footer .footer-brand span,
html.blue-mode footer h3,
body.blue-mode footer h3,
html.blue-mode footer .contact-item,
body.blue-mode footer .contact-item,
html.blue-mode footer .copyright,
body.blue-mode footer .copyright,
html.blue-mode footer .footer-tagline,
body.blue-mode footer .footer-tagline {
  color: var(--white) !important;
}

html.blue-mode .footer-section h3::after,
body.blue-mode .footer-section h3::after {
  color: var(--white) !important;
  background-color: var(--white) !important;
}

html.blue-mode footer .contact-item i,
body.blue-mode footer .contact-item i,
html.blue-mode footer .footer-brand i,
body.blue-mode footer .footer-brand i,
html.blue-mode footer .social-links a,
body.blue-mode footer .social-links a {
  color: var(--white) !important;
}

html.blue-mode footer .social-links a:hover,
body.blue-mode footer .social-links a:hover {
  background: var(--color-light) !important;
  color: var(--color-dark) !important;
}

/* Notification styling */
.blue-mode .notification.success {
  background-color: var(--notification-success-bg);
  color: var(--notification-success-text);
  border: 1px solid var(--notification-success-border);
  opacity: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.blue-mode .notification.error {
  background-color: var(--notification-error-bg);
  color: var(--notification-error-text);
  border: 1px solid var(--notification-error-border);
  opacity: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Category navigation */
.blue-mode .category-nav-item.active {
  background-color: var(--secondary-400);
}

.blue-mode .category-nav-item:hover {
  background-color: var(--primary-200);
}

/* Quotes styling */
.blue-mode .quote-card {
  background: var(--quotes-bg);
  border-left: 4px solid var(--primary-400);
  box-shadow: var(--shadow-sm);
}

.blue-mode .quotes-container,
.blue-mode .quotes-section {
  background-color: transparent !important;
}

.blue-mode .quotes-page {
  background-color: var(--bg-page) !important;
}

.blue-mode .quote-search-container,
.blue-mode .quote-search-form {
  background-color: transparent !important;
}

.blue-mode .quotes-page h1,
.blue-mode .quotes-section h1 {
  color: var(--secondary-400) !important;
}

.blue-mode .quote-search-box,
.blue-mode form .quote-search-box,
.blue-mode .quotes-page .search-box {
  border: 2px solid var(--search-box-border) !important;
  background-color: var(--search-box-bg) !important;
}

.blue-mode .quote-search-form,
.blue-mode .quotes-page .search-form {
  background-color: var(--search-box-bg) !important;
}

.blue-mode .quote-search-input,
.blue-mode form .quote-search-input,
.blue-mode .quotes-page .search-input {
  color: var(--search-input-text) !important;
  background-color: var(--search-box-bg) !important;
}

.blue-mode .quote-search-input::placeholder,
.blue-mode .quotes-page .search-input::placeholder {
  color: var(--search-placeholder) !important;
}

.blue-mode .quote-text,
.blue-mode .quote-author {
  color: var(--quotes-text) !important;
}

.blue-mode .quote-meta,
.blue-mode .quote-category {
  color: var(--secondary-300) !important;
}

/* Settings page */
.blue-mode .color-bubble.blue {
  background: #1BC9C7;
  border: 2px solid var(--color-light);
}

.blue-mode .color-bubble.blue.active {
  border-color: #1784a5;
}

/* Update for any mode - making sure the blue bubble is #1BC9C7 */
.color-bubble.blue {
  background: #1BC9C7 !important;
  border: 3px solid #64D3D7;
}

.color-bubble.blue.active {
  border-color: #008B94 !important;
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Hero Title Styling */
.blue-mode .hero-title {
  color: var(--secondary-400);
}

/* Category Cards */
.blue-mode .category-card.active {
  background: var(--secondary-300);
  color: var(--text-inverted) !important;
}

.blue-mode .category-card.inactive {
  color: var(--text-inverted) !important;
  border: 1px solid var(--primary-200);
}

.blue-mode .category-card.inactive:hover {
  color: var(--secondary-400);
}

/* Proverb Bubble */
.blue-mode .proverb-card-bubble {
  background: var(--secondary-300);
}

/* Proverb Text Top */
.blue-mode .proverb-text-top {
  color: var(--secondary-400);
}

/* Quote Content */
.blue-mode .quote-content {
  padding: 40px;
  position: relative;
  z-index: 2;
  background: #169c9c94 !important;
  color: white !important;
  overflow: hidden; /* Add this to contain the glass effect */
}

.blue-mode .glass-loop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: glassShine 4s cubic-bezier(.4,0,.2,1) infinite;
  opacity: 0.7;
}

.blue-mode .quote-content::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 120px;
  font-family: Georgia, serif;
  line-height: 1;
  z-index: 1;
  color: rgba(255, 255, 255, 0.2) !important; /* Make quotation mark visible against blue background */
}

.blue-mode .quote-text-featured,
.blue-mode .quote-author-featured,
.blue-mode .quote-card-featured .language-badge,
.blue-mode .quote-card-featured .quote-button,
.blue-mode .quote-card-featured .share-button {
  color: white !important;
}

.blue-mode .quote-card-featured .quote-meta-featured {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.blue-mode .quote-card-featured .language-badge,
.blue-mode .quote-card-featured .quote-button,
.blue-mode .quote-card-featured .share-button {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.blue-mode .quote-card-featured .quote-button:hover,
.blue-mode .quote-card-featured .share-button:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Icon Colors */
html.blue-mode .fas,
body.blue-mode .fas,
html.blue-mode .far,
body.blue-mode .far,
html.blue-mode .fab,
body.blue-mode .fab {
  color: inherit;
}

html.blue-mode footer .fas,
body.blue-mode footer .fas,
html.blue-mode footer .far,
body.blue-mode footer .far,
html.blue-mode footer .fab,
body.blue-mode footer .fab {
  color: var(--white) !important;
}

html.blue-mode .header .fas,
body.blue-mode .header .fas {
  color: var(--color-white) !important;
}

html.blue-mode .fas.fa-phone,
body.blue-mode .fas.fa-phone,
html.blue-mode .fas.fa-book-open,
body.blue-mode .fas.fa-book-open,
html.blue-mode .fas.fa-envelope,
body.blue-mode .fas.fa-envelope,
html.blue-mode .fas.fa-clock,
body.blue-mode .fas.fa-clock {
  color: var(--secondary-200) !important;
}

html.blue-mode .download-button .fas,
body.blue-mode .download-button .fas,
html.blue-mode .edit-button .fas,
body.blue-mode .edit-button .fas,
html.blue-mode .fas.fa-download,
body.blue-mode .fas.fa-download,
html.blue-mode .fas.fa-pen,
body.blue-mode .fas.fa-pen,
.blue-mode .proverb-actions-modern .download-button i,
.blue-mode .proverb-actions-modern .edit-button i,
/* Adding more specific selectors to override style.css */
.download-button i.fas.fa-download,
.edit-button i.fas.fa-pen,
html.blue-mode .download-button i.fas.fa-download,
body.blue-mode .download-button i.fas.fa-download,
html.blue-mode .edit-button i.fas.fa-pen,
body.blue-mode .edit-button i.fas.fa-pen {
  color: var(--btn-secondary-text) !important;
}

/* Override the hover styles that might be reverting the color */
.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
.blue-mode .proverb-actions-modern button:focus i.fas.fa-download,
.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen,
html.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
body.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
html.blue-mode .proverb-actions-modern button:focus i.fas.fa-download,
body.blue-mode .proverb-actions-modern button:focus i.fas.fa-download,
html.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
body.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
html.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen,
body.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen {
  color: var(--btn-secondary-hover-text) !important;
}

html.blue-mode .search-button .fas,
body.blue-mode .search-button .fas,
html.blue-mode form .search-button .fas,
body.blue-mode form .search-button .fas,
html.blue-mode button.search-button .fas,
body.blue-mode button.search-button .fas,
html.blue-mode .search-button .fas.fa-search,
body.blue-mode .search-button .fas.fa-search {
  color: var(--white) !important;
}

html.blue-mode .edit-button .fas,
body.blue-mode .edit-button .fas,
html.blue-mode .fas.fa-pen,
body.blue-mode .fas.fa-pen,
.blue-mode .proverb-actions-modern .edit-button i,
html.blue-mode .edit-button i.fas.fa-pen,
body.blue-mode .edit-button i.fas.fa-pen {
  color: var(--btn-edit-text) !important;
}

html.blue-mode .download-button .fas,
body.blue-mode .download-button .fas,
html.blue-mode .fas.fa-download,
body.blue-mode .fas.fa-download,
.blue-mode .proverb-actions-modern .download-button i,
/* Adding more specific selectors to override style.css */
.download-button i.fas.fa-download,
html.blue-mode .download-button i.fas.fa-download,
body.blue-mode .download-button i.fas.fa-download {
  color: var(--btn-secondary-text) !important;
}

.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen,
html.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
body.blue-mode .proverb-actions-modern button:hover i.fas.fa-pen,
html.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen,
body.blue-mode .proverb-actions-modern button:focus i.fas.fa-pen {
  color: var(--btn-edit-hover-text) !important;
}

.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
.blue-mode .proverb-actions-modern button:focus i.fas.fa-download,
html.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
body.blue-mode .proverb-actions-modern button:hover i.fas.fa-download,
html.blue-mode .proverb-actions-modern button:focus i.fas.fa-download,
body.blue-mode .proverb-actions-modern button:focus i.fas.fa-download {
  color: var(--btn-secondary-hover-text) !important;
}

.blue-mode h1 {
  color: var(--primary-400) !important;
}

.blue-mode .total-count {
  color: var(--primary-400) !important;
}

/* Active language button styling */
.blue-mode .language-button.active {
  background-color: var(--primary-400) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary-400);
}

/* Language buttons and icons styling for blue mode */
.blue-mode .language-button,
.blue-mode .language-icon,
.blue-mode .language-flag {
  border-color: var(--secondary-400) !important;
}



.blue-mode .language-button.active {
  background-color: var(--secondary-300);
  border-color: var(--secondary-400);
  color: var(--white);
}

.blue-mode .language-button:hover {
  background-color: var(--primary-200);
  border-color: var(--secondary-400);
}

.blue-mode .language-selection {
  background-color: transparent;
}

/* Search container border in blue mode */
.blue-mode .search-container,
.blue-mode .quote-search-container,
.blue-mode .quotes-page .search-container {
  border: 2px solid var(--secondary-400);
  border-radius: 50px;
  padding: 10px;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

/* Pagination buttons - matching logout button style in blue mode */
.blue-mode .pagination-button,
html.blue-mode .pagination-button,
body.blue-mode .pagination-button {
  background: var(--secondary-300) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-sm) !important;
}

.blue-mode .pagination-button:hover,
html.blue-mode .pagination-button:hover,
body.blue-mode .pagination-button:hover,
.blue-mode .pagination-button:focus,
html.blue-mode .pagination-button:focus,
body.blue-mode .pagination-button:focus {
  background: var(--secondary-400) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.blue-mode .pagination-button i,
html.blue-mode .pagination-button i,
body.blue-mode .pagination-button i {
  color: var(--white) !important;
  margin: 0 4px !important;
}

/* My Likes page styling in blue mode */
.blue-mode .like-card {
  background: #E3F8FF !important;
  box-shadow: var(--shadow-sm) !important;
  height: 100% !important; /* Ensure consistent card height */
  display: flex !important;
  flex-direction: column !important;
}

.blue-mode .like-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-5px) !important;
}

.blue-mode .spreekwoord-text,
.blue-mode .citaat-text {
  color: var(--secondary-400) !important;
  min-height: 3.4em !important; /* Ensure consistent height for titles */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blue-mode .image-container {
  margin: 0.8rem 0 !important;
  height: 180px !important; /* Fixed height for image containers */
  overflow: hidden !important;
  position: relative !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
}

.blue-mode .spreekwoord-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.3s ease !important;
}

.blue-mode .like-card:hover .spreekwoord-image {
  transform: scale(1.05) !important;
}

.blue-mode .card-content {
  flex: 1 1 auto !important; /* Make card content fill available space */
  display: flex !important;
  flex-direction: column !important;
}

.blue-mode .card-footer {
  background: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid var(--primary-100) !important;
  margin-top: auto !important; /* Push footer to bottom */
}

.blue-mode .like-card[data-item-type="spreekwoord"] .category-accent {
  background: var(--secondary-300) !important;
  color: var(--white) !important;
}

.blue-mode .spreekwoord-betekenis,
.blue-mode .spreekwoord-categorie,
.blue-mode .citaat-auteur,
.blue-mode .citaat-taal {
  color: var(--secondary-400) !important;
  opacity: 0.8 !important;
  min-height: 2.8em !important; /* Consistent height for description */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blue-mode .spreekwoord-betekenis strong,
.blue-mode .spreekwoord-categorie strong,
.blue-mode .citaat-taal strong {
  color: var(--secondary-300) !important;
}

/* Settings page buttons in blue mode */
.blue-mode .settings-button,
html.blue-mode .settings-button,
body.blue-mode .settings-button {
  background-color: var(--secondary-300) !important;
  color: var(--white) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-sm) !important;
}

.blue-mode .settings-button:hover,
html.blue-mode .settings-button:hover,
body.blue-mode .settings-button:hover,
.blue-mode .settings-button:focus,
html.blue-mode .settings-button:focus,
body.blue-mode .settings-button:focus {
  background-color: var(--secondary-400) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.blue-mode .settings-button.upgrade,
html.blue-mode .settings-button.upgrade,
body.blue-mode .settings-button.upgrade {
  background-color: var(--primary-300) !important;
}

.blue-mode .settings-button.upgrade:hover,
html.blue-mode .settings-button.upgrade:hover,
body.blue-mode .settings-button.upgrade:hover {
  background-color: var(--primary-200) !important;
}

.blue-mode .settings-button.downgrade,
html.blue-mode .settings-button.downgrade,
body.blue-mode .settings-button.downgrade {
  background-color: var(--secondary-200) !important;
}

.blue-mode .settings-button.downgrade:hover,
html.blue-mode .settings-button.downgrade:hover,
body.blue-mode .settings-button.downgrade:hover {
  background-color: var(--secondary-300) !important;
}

.blue-mode .settings-button.delete,
html.blue-mode .settings-button.delete,
body.blue-mode .settings-button.delete {
  background-color: #F44336 !important; /* Standard red for danger */
}

.blue-mode .settings-button.delete:hover,
html.blue-mode .settings-button.delete:hover,
body.blue-mode .settings-button.delete:hover {
  background-color: #D32F2F !important; /* Darker red on hover */
}

/* Settings section styling */
.blue-mode .settings-section,
html.blue-mode .settings-section,
body.blue-mode .settings-section {
  background-color: var(--bg-card) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
}

.blue-mode .settings-section h2,
html.blue-mode .settings-section h2,
body.blue-mode .settings-section h2 {
  color: var(--secondary-400) !important;
}

/* Settings form input styling in blue mode */
.blue-mode .settings-form input,
html.blue-mode .settings-form input,
body.blue-mode .settings-form input {
  color: var(--secondary-400) !important;
  font-size: 1rem !important;
  font-family: 'Baloo 2', sans-serif !important;
  border-color: var(--secondary-200) !important;
  background-color: var(--bg-card) !important;
  transition: all 0.3s ease !important;
}

.blue-mode .settings-form input:focus,
html.blue-mode .settings-form input:focus,
body.blue-mode .settings-form input:focus {
  border-color: var(--secondary-300) !important;
  box-shadow: 0 0 0 2px rgba(23, 132, 165, 0.2) !important;
}

/* Color mode bubbles in blue mode */
.blue-mode .color-bubble.blue.active,
html.blue-mode .color-bubble.blue.active,
body.blue-mode .color-bubble.blue.active {
  border-color: var(--secondary-400) !important;
  transform: scale(1.2) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
}

/* Card accent icons in blue mode */
.blue-mode .card-accent i,
html.blue-mode .card-accent i,
body.blue-mode .card-accent i {
  background: var(--secondary-300) !important;
  color: var(--white) !important;
  border: 4px solid var(--bg-card) !important;
  box-shadow: 0 2px 8px rgba(23, 132, 165, 0.15) !important;
}

.blue-mode .card-accent.danger i,
html.blue-mode .card-accent.danger i,
body.blue-mode .card-accent.danger i {
  background: #F44336 !important; /* Standard red for danger */
}

/* Form labels in settings page for blue mode */
.blue-mode .form-group label,
html.blue-mode .form-group label,
body.blue-mode .form-group label,
.blue-mode .settings-form label,
html.blue-mode .settings-form label,
body.blue-mode .settings-form label {
  color: var(--secondary-400) !important;
  font-weight: 500 !important;
  font-family: 'Baloo 2', sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* Profile settings additional styling */
.blue-mode .settings-section.profile-card .settings-form label,
html.blue-mode .settings-section.profile-card .settings-form label,
body.blue-mode .settings-section.profile-card .settings-form label {
  color: var(--secondary-400) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Baloo 2', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Subscription plan details */
.blue-mode .current-plan,
html.blue-mode .current-plan,
body.blue-mode .current-plan {
  background: rgba(27, 201, 199, 0.08) !important;
  border-radius: 8px !important;
}

.blue-mode .current-plan h3,
html.blue-mode .current-plan h3,
body.blue-mode .current-plan h3,
.blue-mode .plan-name,
html.blue-mode .plan-name,
body.blue-mode .plan-name,
.blue-mode .plan-features h4,
html.blue-mode .plan-features h4,
body.blue-mode .plan-features h4 {
  color: var(--secondary-400) !important;
}

.blue-mode .subscription-features li::before,
html.blue-mode .subscription-features li::before,
body.blue-mode .subscription-features li::before {
  color: var(--primary-300) !important;
}

/* Input icons (fa icons inside label) */
.blue-mode .form-group label i,
html.blue-mode .form-group label i,
body.blue-mode .form-group label i,
.blue-mode .settings-form label i,
html.blue-mode .settings-form label i,
body.blue-mode .settings-form label i {
  color: var(--secondary-300) !important;
}

/* Fix for the email icon in settings form */
.blue-mode .settings-form label i.fas.fa-envelope,
html.blue-mode .settings-form label i.fas.fa-envelope,
body.blue-mode .settings-form label i.fas.fa-envelope,
.blue-mode .form-group label i.fas.fa-envelope,
html.blue-mode .form-group label i.fas.fa-envelope,
body.blue-mode .form-group label i.fas.fa-envelope {
  color: var(--secondary-300) !important;
}

/* This higher specificity rule will override the general fa-envelope style */
.blue-mode .settings-form label .fas.fa-envelope,
html.blue-mode .settings-form label .fas.fa-envelope,
body.blue-mode .settings-form label .fas.fa-envelope,
.blue-mode .form-group label .fas.fa-envelope,
html.blue-mode .form-group label .fas.fa-envelope,
body.blue-mode .form-group label .fas.fa-envelope {
  color: var(--secondary-300) !important;
}

/* Blue Mode Styles */
/* Using colors: #69D1E5 (light), #1784A5 (mid), #0F5970 (dark) */

body.blue-mode .subscription-card {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 24px rgba(15, 89, 112, 0.15), 0 1.5px 6px rgba(0,0,0,0.04);
}

body.blue-mode .subscription-card:not(:first-child):hover {
  box-shadow: 0 12px 36px rgba(23, 132, 165, 0.25), 0 2px 8px rgba(0,0,0,0.10);
  transform: translateY(-10px) scale(1.035);
}

body.blue-mode .subscription-card.featured {
  background: linear-gradient(135deg, #f5f7fa 60%, #e0f7fb 100%);
  box-shadow: 0 12px 36px rgba(23, 132, 165, 0.25), 0 4px 12px rgba(0,0,0,0.12);
  border: 1px solid rgba(105, 209, 229, 0.3);
}

body.blue-mode .subscription-header {
  background: linear-gradient(90deg, #1784A5 60%, #0F5970 100%);
}

body.blue-mode .subscription-card:first-child .subscription-header {
  background: linear-gradient(90deg, #69D1E5 0%, #1784A5 100%);
  color: #0F5970;
}

body.blue-mode .subscription-card:first-child .subscription-header h2,
body.blue-mode .subscription-card:first-child .price {
  color: #0F5970;
}

body.blue-mode .subscription-footer {
  background: #f8f9fa;
  border-top: 1px solid #e0f7fb;
}

body.blue-mode .subscription-card:first-child .subscription-footer {
  background: #f0f9fc;
  border-top: 1px solid #e0f7fb;
}

body.blue-mode .features-list li {
  color: #444;
}

body.blue-mode .features-list i {
  color: #1784A5;
  background: rgba(105, 209, 229, 0.15);
}

body.blue-mode .subscription-card:hover .features-list i {
  background: rgba(105, 209, 229, 0.25);
  transform: scale(1.1);
}

body.blue-mode .price,
body.blue-mode .subscription-header h2 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.blue-mode .price span {
  color: rgba(255, 255, 255, 0.8);
}

body.blue-mode .subscription-button {
  background: linear-gradient(90deg, #1784A5 60%, #0F5970 100%);
  box-shadow: 0 4px 16px rgba(23, 132, 165, 0.20);
}

body.blue-mode .subscription-card:first-child .subscription-button {
  background: linear-gradient(90deg, #69D1E5 60%, #1784A5 100%);
  color: #0F5970;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(23, 132, 165, 0.15);
}

body.blue-mode .subscription-button:hover:not(:disabled) {
  background: linear-gradient(90deg, #0F5970 0%, #1784A5 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 89, 112, 0.4);
}

body.blue-mode .subscription-card:first-child .subscription-button:hover:not(:disabled) {
  background: linear-gradient(90deg, #1784A5 0%, #69D1E5 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(23, 132, 165, 0.3);
}

body.blue-mode .subscription-card.featured .subscription-button {
  background: linear-gradient(90deg, #1784A5 30%, #0F5970 100%);
}

body.blue-mode .subscription-card.featured .subscription-button:hover:not(:disabled) {
  background: linear-gradient(90deg, #69D1E5 0%, #1784A5 70%, #0F5970 100%);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(23, 132, 165, 0.5);
}

body.blue-mode .subscription-button.current {
  background: linear-gradient(90deg, #1784A5 60%, #0F5970 100%) !important;
  box-shadow: 0 4px 12px rgba(23, 132, 165, 0.2) !important;
}

body.blue-mode .subscription-button.downgrade {
  background: linear-gradient(90deg, #FF6B6B 60%, #EE5253 100%);
  box-shadow: 0 4px 12px rgba(238, 82, 83, 0.2);
}

body.blue-mode .subscription-button.downgrade:hover:not(:disabled) {
  background: linear-gradient(90deg, #EE5253 0%, #FF6B6B 100%);
  box-shadow: 0 8px 16px rgba(238, 82, 83, 0.3);
}

body.blue-mode .abonnementen-title {
  background: linear-gradient(90deg, #0F5970 0%, #1784A5 50%, #0F5970 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.blue-mode .section-title .lead {
  color: #444;
}

body.blue-mode .subscription-card.featured .subscription-footer::before {
  background: radial-gradient(ellipse at center, rgba(23, 132, 165, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}

body.blue-mode .popular {
  background: linear-gradient(90deg, #1784A5 0%, #69D1E5 100%);
  box-shadow: 0 4px 12px rgba(23, 132, 165, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Additional elements that could be styled in blue mode */
body.blue-mode {
  --primary-color: #1784A5;
  --secondary-color: #0F5970;
  --accent-color: #69D1E5;
}

/* Blue mode color/theme toggle styles */
.color-bubble.blue {
  background: linear-gradient(135deg, #1784A5, #69D1E5);
}

.color-bubble.blue.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1784A5;
}

/* Remove hover effects from subscription card in settings */
html.blue-mode .settings-section.subscription-card,
body.blue-mode .settings-section.subscription-card {
  transition: none !important;
}

html.blue-mode .settings-section.subscription-card:hover,
body.blue-mode .settings-section.subscription-card:hover {
  transform: none !important;
  box-shadow: 0 4px 24px rgba(15, 89, 112, 0.15), 0 1.5px 6px rgba(0,0,0,0.04) !important;
}

/* Also ensure no hover effects on subscription details inside */
html.blue-mode .settings-section.subscription-card .subscription-details,
body.blue-mode .settings-section.subscription-card .subscription-details,
html.blue-mode .settings-section.subscription-card .current-plan,
body.blue-mode .settings-section.subscription-card .current-plan,
html.blue-mode .settings-section.subscription-card .plan-features,
body.blue-mode .settings-section.subscription-card .plan-features,
html.blue-mode .settings-section.subscription-card .subscription-features li,
body.blue-mode .settings-section.subscription-card .subscription-features li {
  transition: none !important;
  transform: none !important;
}

html.blue-mode .settings-section.subscription-card:hover .subscription-features li,
body.blue-mode .settings-section.subscription-card:hover .subscription-features li {
  transform: none !important;
  color: inherit !important;
}