/* --- THEME VARIABLES --- */
    :root {
      --color-bg: #f0f3f4; /* Light mode background */
      --color-text: #1c1c1c; /* Light mode main text */
      --color-accent: #4e8397; /* Accent color - kept yours */
      --color-secondary: #e6e9ea; /* Slightly lighter secondary for subtle contrast */
      --color-light-text: #000000; /* Light mode text for darker elements */
      --color-card-bg: #ffffff; /* Explicit card background in light mode */
      --color-shadow: rgba(0,0,0,0.1); /* Default shadow */
      --color-hover-shadow: rgba(0,0,0,0.2); /* Stronger shadow on hover */
      --scrollbar-track-color: #f1f1f1; /* Light scrollbar track */
      --scrollbar-thumb-color: #888; /* Light scrollbar thumb */
      --scrollbar-thumb-hover-color: #555; /* Light scrollbar thumb hover */
    }

    [data-theme="dark"] {
      --color-bg: #1c1c1c; /* Dark mode background */
      --color-text: #ffffff; /* Dark mode main text */
      --color-accent: #4e8397; /* Accent color - kept yours */
      --color-secondary: #2a2a2a; /* Dark mode secondary background */
      --color-light-text: #ffffff; /* Dark mode text for lighter elements */
      --color-card-bg: #333333; /* Dark mode card background */
      --color-shadow: rgba(0,0,0,0.4); /* Dark mode shadow */
      --color-hover-shadow: rgba(0,0,0,0.6); /* Darker shadow on hover */
      --scrollbar-track-color: #333; /* Dark scrollbar track */
      --scrollbar-thumb-color: #666; /* Dark scrollbar thumb */
      --scrollbar-thumb-hover-color: #888; /* Dark scrollbar thumb hover */
    }

    /* --- BASE STYLES --- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', sans-serif; /* Default body font */
    }

    /* TYPOGRAPHY: New font for headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700; /* Montserrat bold */
    }

    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
      /* Add padding-bottom to prevent content from being hidden by the fixed bottom nav */
      padding-bottom: 60px; /* Adjust based on your bottom nav height */
      overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* --- SPLASH SCREEN STYLES --- */
    #splashScreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column; /* Stack logo and progress bar vertically */
      justify-content: center;
      align-items: center;
      background-color: transparent; /* Main splash screen background transparent */
      z-index: 2000; /* Ensure it's on top of everything */
      transition: opacity 0.5s ease-out; /* Smooth fade out */
    }

    #splashScreen .splash-logo {
      font-size: 3rem; /* Larger font size for splash logo */
      font-weight: bold;
      color: var(--color-accent);
      animation: pulse 1.5s infinite alternate; /* Simple pulse animation */
      margin-bottom: 20px; /* Space between logo and progress bar */
    }

    @keyframes pulse {
      from { transform: scale(1); opacity: 1; }
      to { transform: scale(1.05); opacity: 0.9; }
    }

    /* Progress bar specific styles */
    #loadingProgressBar {
      width: 0%; /* Initial width for the progress bar */
      max-width: 200px; /* Max width for the bar to keep it centered and not too wide */
      height: 6px;
      background-color: var(--color-accent); /* Accent color for the bar */
      border-radius: 3px;
      transition: width 2s linear; /* Smooth linear transition over 2 seconds */
      box-shadow: 0 0 5px rgba(78, 131, 151, 0.5); /* Subtle glow */
    }

    /* Styles for content hidden until splash disappears */
    .hidden-until-splash {
      opacity: 0;
      visibility: hidden;
      /* Delay visibility hidden transition to happen AFTER fade out */
      transition: opacity 0.8s ease-in, visibility 0s 0.8s;
    }

    .show-after-splash {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.8s ease-in;
    }


    /* --- FIXED HEADER WRAPPER --- */
    .main-header-wrapper {
      position: sticky;
      top: 0;
      z-index: 1000; /* Ensures it stays on top */
      background-color: var(--color-bg); /* Ensure wrapper has background */
    }

    /* --- HEADER & NAVIGATION --- */
    header {
      background-color: #1c1c1c;
      color: #fff;
      padding: 1rem;
      /* Ensure header adapts its padding and background */
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-top: -10px; /* Adjust as needed */
      /* By default, desktop behavior */
    }

    /* Mobile specific top-bar: center logo, hide desktop nav */
    @media (max-width: 767px) {
      .top-bar {
        flex-direction: column; /* Stack logo and potentially hidden nav */
        align-items: center; /* Center logo horizontally */
      }
      .top-bar .logo {
        text-align: center; /* Ensure logo text is centered */
        width: 100%; /* Take full width to center */
      }
      /* Hide the desktop nav on mobile */
      header nav {
        display: none;
      }
    }

    /* ANIMATION: Logo Entrance */
    .logo a {
      font-size: 1.8rem;
      font-weight: bold;
      color: var(--color-accent);
      opacity: 0;
      transform: scale(0.9);
      animation: logoEntrance 0.8s ease-out forwards 0.2s; /* 0.2s delay */
      text-decoration: none;
    }

    @keyframes logoEntrance {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Desktop nav (visible only on larger screens) */
    header nav { /* Specific selector to differentiate from offcanvas nav */
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;
      padding: 0.5rem 0;
    }

    header nav a {
      color: #ccc;
      text-decoration: none;
      font-weight: 500;
      white-space: nowrap;
      transition: color 0.3s;
    }

    header nav a:hover {
      color: var(--color-accent);
    }

    /* --- CATEGORIES SECTION WITH SCROLLBAR --- */
    .categories {
      background-color: var(--color-secondary);
      padding: 0.5rem 1rem;
      overflow-x: auto; /* Enables horizontal scrolling */
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;
      /* Hide on mobile, it will be in the offcanvas */
      display: none; /* Hidden by default */
    }

    @media (min-width: 768px) {
      .categories {
        display: flex; /* Show on desktop */
      }
    }

    /* CUSTOM SCROLLBAR STYLES FOR WEBKIT BROWSERS (Chrome, Safari, Android) */
    .categories::-webkit-scrollbar {
        height: 6px; /* Height of the horizontal scrollbar */
    }

    .categories::-webkit-scrollbar-track {
        background: var(--scrollbar-track-color); /* Color of the scrollbar track */
        border-radius: 3px; /* Rounded corners for the track */
    }

    .categories::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb-color); /* Color of the scrollbar thumb */
        border-radius: 3px; /* Rounded corners for the thumb */
    }

    .categories::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover-color); /* Color of the scrollbar thumb on hover */
    }

    /* ANIMATION: Categories Link Hover - Underline Slide */
    .categories a {
      text-decoration: none;
      color: #1c1c1c;
      font-weight: 500;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      background-color: #eaeaea;
      white-space: nowrap;
      transition: background-color 0.3s;
    }

    /* Dark mode category button background */
    [data-theme="dark"] .categories a {
      background-color: #444;
      color: #eee;
    }

    .categories a:hover {
      background-color: var(--color-accent);
      color: white; /* Text color on hover for contrast */
    }

    /* --- UTILITY BAR (Search, Auth, Theme Toggle) --- */
    .utility-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      background-color: var(--color-bg);
      border-bottom: 1px solid var(--color-secondary); /* Subtle separator */
      /* Hide on mobile, it will be in the offcanvas */
      display: none; /* Hidden by default */
    }

    @media (min-width: 768px) {
      .utility-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        display: flex; /* Show on desktop */
      }
      .search-bar {
        margin-bottom: 0;
        flex-grow: 1;
        margin-right: 1rem;
      }
      .search-bar input {
        margin-top: 0;
      }
      .theme-toggle {
        margin-top: 0;
      }
    }

    /* DESIGN: Search Bar Styling */
    .search-bar input {
      padding: 0.5rem 1.2rem; /* Increased padding */
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 25px; /* More rounded */
      margin-top: 10px;
      box-sizing: border-box;
      background-color: var(--color-card-bg); /* Matches card background */
      color: var(--color-text);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); /* Subtle inner inner shadow */
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    [data-theme="dark"] .search-bar input {
      border-color: #555;
    }

    .search-bar input:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 3px rgba(78, 131, 151, 0.2); /* Accent focus ring */
    }

    .theme-toggle {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    /* Auth Dropdown Specific Styles */
    .auth-links {
      position: relative;
    }

    .auth-links a {
      margin-left: 1rem;
      text-decoration: none;
      color: var(--color-light-text);
      font-weight: 500;
      transition: color 0.3s;
    }

    .auth-links .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: var(--color-card-bg); /* Use card background for consistency */
      border: 1px solid #ccc;
      padding: 0.5rem 0;
      border-radius: 0.25rem;
      box-shadow: 0 2px 5px var(--color-shadow); /* Dynamic shadow */
      z-index: 10;
      min-width: 150px; /* Ensure enough width */
    }

    [data-theme="dark"] .auth-links .dropdown-menu {
        border-color: #555;
    }
    [data-theme="dark"] .auth-links .dropdown-menu a {
        color: #fff;
    }
    [data-theme="dark"] .auth-links .dropdown-menu a:hover {
        background-color: #555;
    }

    .auth-links.show .dropdown-menu {
      display: block;
    }

    .auth-links .dropdown-menu a {
      display: block;
      padding: 0.5rem 1rem;
      color: var(--color-text); /* Dropdown item text adapts to theme */
      text-decoration: none;
      transition: background-color 0.2s;
    }
    .auth-links .dropdown-menu a:hover {
        background-color: var(--color-secondary); /* Hover background for dropdown items */
    }

    .theme-switcher {
      cursor: pointer;
      font-size: 1.2rem;
      margin-left: 1rem;
      color: var(--color-light-text);
    }

    /* --- ANIMATED TEXT (MARQUEE) --- */
    .animated-text-container {
      background-color: var(--color-accent);
      color: white;
      padding: 5px 0;
      overflow: hidden;
      white-space: nowrap;
      margin-bottom: 10px;
    }

    .animated-text {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 15s linear infinite;
    }

    @keyframes marquee {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-100%, 0); }
    }

    /* --- HERO SECTION (CAROUSEL) --- */
    /* ANIMATION: Hero Section Entrance */
    .hero {
      background-color: var(--color-secondary);
      padding: 0;
      text-align: center;
      /* opacity, transform, animation removed from here as they are managed by .hidden-until-splash / .show-after-splash */
    }

    .carousel-item img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        filter: brightness(0.7);
    }

    .carousel-caption {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        padding: 10px 20px;
        color: white;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        max-width: 600px;
        text-align: center;
    }

    .carousel-caption h5,
    .carousel-caption p {
        color: white;
    }

    .hero .container {
        padding: 0;
        max-width: 100%;
    }

    /* --- MAIN CONTENT LAYOUT --- */
    /* DESIGN: Main Content Section Background - Adjusted */
    main {
        background-color: var(--color-bg); /* Ensure main content area adapts */
        padding-top: 2rem; /* Add padding to main for spacing */
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    /* The .featured-section class has been removed as per request */

    .grid {
      display: grid;
      gap: 1.5rem;
    }

    .grid-3 {
      grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
      .grid-2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 992px) {
      .grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* --- CARD STYLES --- */
    .card {
      background-color: var(--color-card-bg); /* Dynamic card background */
      border-radius: 8px;
      box-shadow: 0 1px 4px var(--color-shadow); /* Dynamic shadow */
      overflow: hidden;
      transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s, color 0.3s; /* Smooth transitions */
      display: flex;
      flex-direction: column;
    }

    /* ANIMATION: Enhanced Card Hover Effect */
    .card:hover {
      transform: translateY(-8px); /* Lift higher */
      box-shadow: 0 8px 16px var(--color-hover-shadow); /* More prominent shadow */
    }

    /* --- IMAGE LOADING PLACEHOLDER IN CARDS --- */
    .image-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 75%; /* Aspect ratio (e.g., 4:3 for a common image) */
      overflow: hidden;
      flex-shrink: 0;
    }

    .image-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensure image covers the area */
      opacity: 0; /* Initially hidden */
      transition: opacity 0.5s ease-in; /* Smooth fade in for image */
    }

    .image-wrapper img.show-image {
      opacity: 1;
    }

    .image-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-secondary); /* Placeholder background */
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-text);
      font-size: 0.9rem;
      opacity: 1; /* Initially visible */
      transition: opacity 0.5s ease-out; /* Smooth fade out for placeholder */
    }

    .image-placeholder::after {
      content: "Chargement..."; /* Text for the placeholder */
      animation: pulse 1.5s infinite alternate; /* Re-use pulse animation for placeholder */
    }

    /* Adjustments for horizontal cards on medium+ screens */
    @media (min-width: 576px) {
        .card {
            flex-direction: row;
            min-height: 150px;
        }
        .card .image-wrapper { /* Apply flex-shrink here */
            width: 35%; /* Match the width of the image in horizontal layout */
            max-width: 150px; /* Limits the max width of the image */
            height: 100%; /* Take full height of the card body */
            padding-bottom: 0; /* Reset padding-bottom for fixed height */
            flex-shrink: 0; /* Important for horizontal cards */
        }
    }


    .card-body {
      padding: 1rem;
      flex-grow: 1;
    }

    .card-body h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    .card-body p {
      color: #666;
    }

    [data-theme="dark"] .card-body p {
        color: #bbb;
    }
    [data-theme="dark"] .card-body h3 {
        color: #ffffff;
    }

    main .container h2 {
        color: var(--color-light-text);
    }
    main .container p {
        color: var(--color-light-text);
    }
    [data-theme="dark"] main .container p {
        color: #bbb;
    }

    /* --- FOOTER --- */
    footer {
      background-color: #1c1c1c;
      color: #aaa;
      text-align: center;
      padding: 1.5rem; /* Slightly more padding */
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    /* DESIGN: Footer Social Icons */
    .social-icons {
        display: flex;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .social-icons a {
        color: #fff; /* White icons */
        font-size: 1.5rem;
        transition: color 0.3s;
    }

    .social-icons a:hover {
        color: var(--color-accent); /* Accent color on hover */
    }

    /* --- SCROLL TO TOP BUTTON --- */
    #scrollTopBtn {
      display: none; /* Hidden by default */
      position: fixed; /* Fixed position */
      bottom: 20px; /* Space from bottom */
      right: 20px; /* Space from right */
      z-index: 99; /* Higher than content, lower than sticky header */
      font-size: 24px; /* Icon size */
      background-color: var(--color-accent); /* Accent color */
      color: white; /* White icon */
      border: none; /* No border */
      border-radius: 50%; /* Circular button */
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, transform 0.2s, opacity 0.3s;
      opacity: 0.8;
    }

    #scrollTopBtn:hover {
      background-color: #3d6a7d; /* Darker accent on hover */
      transform: translateY(-2px);
      opacity: 1;
    }

    /* --- MOBILE BOTTOM NAVIGATION BAR --- */
    .bottom-nav-mobile {
      display: none; /* Hidden by default on larger screens */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--color-card-bg); /* Adapts to theme */
      box-shadow: 0 -2px 10px var(--color-shadow); /* Shadow above the bar */
      padding: 5px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 55px; /* Fixed height for the bar */
      z-index: 1000; /* Ensure it's above other content */
      border-top-left-radius: 10px; /* Rounded corners */
      border-top-right-radius: 10px;
    }

    [data-theme="dark"] .bottom-nav-mobile {
        border-top: 1px solid #444; /* Subtle border in dark mode */
    }

    .bottom-nav-mobile .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: var(--color-text); /* Adapts to theme */
      font-size: 0.75rem; /* Smaller text for mobile */
      font-weight: 500;
      padding: 5px 10px;
      border-radius: 8px; /* Slightly rounded items */
      transition: background-color 0.3s, color 0.3s;
    }

    .bottom-nav-mobile .nav-item i {
      font-size: 1.5rem; /* Icon size */
      margin-bottom: 3px; /* Space between icon and text */
      color: var(--color-accent); /* Accent color for icons */
    }

    .bottom-nav-mobile .nav-item span {
      white-space: nowrap; /* Prevent text wrapping */
    }

    .bottom-nav-mobile .nav-item:hover {
      background-color: var(--color-secondary); /* Background on hover */
      color: var(--color-accent); /* Keep accent color for text on hover too */
    }

    /* Show the bottom nav only on screens smaller than 768px */
    @media (max-width: 767px) {
      .bottom-nav-mobile {
        display: flex;
      }
      body {
        padding-bottom: 60px; /* Keep padding when bottom nav is visible */
      }
    }
    /* Hide the bottom nav on screens wider than 767px */
    @media (min-width: 768px) {
      .bottom-nav-mobile {
        display: none;
      }
      body {
        padding-bottom: 0; /* Remove padding when bottom nav is hidden */
      }
    }

    /* --- OFFCANVAS MOBILE MENU --- */
    .offcanvas-header {
      background-color: var(--color-secondary);
      color: var(--color-text);
      border-bottom: 1px solid var(--color-shadow);
      padding: 1rem;
    }
    .offcanvas-header .offcanvas-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: var(--color-light-text);
    }
    .offcanvas-body {
      background-color: var(--color-bg);
      color: var(--color-text);
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Offcanvas Search Bar */
    .offcanvas-body .search-bar input {
      margin-top: 0; /* Override default search bar margin */
    }

    /* Offcanvas Auth Links */
    .offcanvas-body .auth-links {
      margin-left: 0; /* Reset margin from original */
      text-align: center;
      position: static; /* Remove absolute positioning */
    }
    .offcanvas-body .auth-links .dropdown-menu {
        position: static; /* Make dropdown flow naturally */
        width: 100%;
        box-shadow: none; /* No shadow needed inside offcanvas */
        border: none; /* No border needed */
        background-color: transparent; /* Transparent background */
    }
    .offcanvas-body .auth-links .dropdown-menu a {
        padding-left: 2rem; /* Indent dropdown items */
    }

    /* Offcanvas Navigation Links */
    .offcanvas-body .offcanvas-nav-links {
      list-style: none; /* Remove bullet points */
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .offcanvas-body .offcanvas-nav-links a {
      display: block;
      padding: 0.5rem 0;
      text-decoration: none;
      color: var(--color-text);
      font-weight: 600;
      transition: color 0.2s, background-color 0.2s;
      border-radius: 4px;
    }

    .offcanvas-body .offcanvas-nav-links a:hover {
      color: var(--color-accent);
      background-color: var(--color-secondary);
    }

    /* Offcanvas Categories */
    .offcanvas-body .categories-in-menu {
      display: flex;
      flex-wrap: wrap; /* Allow wrapping */
      gap: 0.5rem; /* Smaller gap for mobile categories */
      padding: 0; /* Remove category padding */
      background-color: transparent; /* No background here */
    }
    .offcanvas-body .categories-in-menu a {
      padding: 0.4rem 0.7rem; /* Slightly smaller pills */
      font-size: 0.9rem;
      border-radius: 15px; /* More rounded pills */
    }

    /* Offcanvas Theme Toggle */
    .offcanvas-body .theme-toggle {
      justify-content: center; /* Center the toggle buttons */
      margin-top: 1.5rem;
    }

    /* General dark mode adjustments for offcanvas elements */
    [data-theme="dark"] .offcanvas-header {
      background-color: #2a2a2a;
      border-bottom-color: #444;
    }
    [data-theme="dark"] .offcanvas-header .offcanvas-title {
      color: #ffffff;
    }
    [data-theme="dark"] .offcanvas-body {
      background-color: #1c1c1c;
      color: #ffffff;
    }
    [data-theme="dark"] .offcanvas-body .offcanvas-nav-links a {
      color: #ffffff;
    }
    [data-theme="dark"] .offcanvas-body .offcanvas-nav-links a:hover {
      background-color: #2a2a2a;
      color: var(--color-accent);
    }
    [data-theme="dark"] .offcanvas-body .categories-in-menu a {
      background-color: #444;
      color: #eee;
    }
    [data-theme="dark"] .offcanvas-body .categories-in-menu a:hover {
      background-color: var(--color-accent);
      color: white;
    }

    /* MODAL STYLES */
    .modal-content {
      background-color: var(--color-card-bg);
      color: var(--color-text);
      border-radius: 8px;
    }

    .modal-header {
      border-bottom-color: var(--color-secondary);
    }

    .modal-title {
      color: var(--color-light-text);
      font-family: 'Montserrat', sans-serif;
    }

    .modal-body .form-label {
      color: var(--color-text);
    }

    .modal-body .form-control {
      background-color: var(--color-bg);
      color: var(--color-text);
      border-color: var(--color-secondary);
    }

    .modal-body .form-control:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 0.25rem rgba(78, 131, 151, 0.25);
    }

    .modal-footer {
      border-top-color: var(--color-secondary);
    }

    /* Dark mode specific for modals */
    [data-theme="dark"] .modal-content {
      background-color: #333333;
    }
    [data-theme="dark"] .modal-header {
      border-bottom-color: #444;
    }
    [data-theme="dark"] .modal-title {
      color: #ffffff;
    }
    [data-theme="dark"] .modal-body .form-label {
      color: #ffffff;
    }
    [data-theme="dark"] .modal-body .form-control {
      background-color: #2a2a2a;
      color: #ffffff;
      border-color: #555;
    }
    [data-theme="dark"] .modal-footer {
      border-top-color: #444;
    }

    /* Email Verification Modal Specific Styles */
    .code-input-group {
        display: flex;
        justify-content: center; /* Center the input boxes */
        gap: 10px; /* Space between boxes */
        margin-bottom: 1.5rem;
    }

    .code-input-group input[type="text"] {
        width: 45px; /* Fixed width for each box */
        height: 50px; /* Fixed height */
        text-align: center;
        font-size: 1.5rem; /* Larger font for digits */
        font-weight: bold;
        border: 1px solid var(--color-secondary);
        border-radius: 5px;
        background-color: var(--color-bg);
        color: var(--color-text);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .code-input-group input[type="text"]:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(78, 131, 151, 0.2);
    }

    /* Dark mode for code inputs */
    [data-theme="dark"] .code-input-group input[type="text"] {
        background-color: #2a2a2a;
        color: #ffffff;
        border-color: #555;
    }
    /* Styles for messages in modals */
    .modal-body .alert {
      margin-bottom: 1rem;
      padding: 0.75rem 1.25rem;
      border-radius: 0.25rem;
      font-size: 0.9rem;
    }