/* css/styles.css */

:root {
    --bg-color: #ffffff;
    --text-color: #2c3e50;
    --secondary-text-color: #6c757d;
    --header-bg: #ffffff;
    --footer-bg: #2c3e50;
    --footer-text: #ffffff;
    --footer-link-color: #1abc9c;
    --nav-bg: #2c3e50;
    --nav-text: #ffffff;
    --nav-hover-text: #1abc9c;
    --nav-shrink-bg: #2c3e50;
    --button-bg: #1abc9c;
    --button-text: #ffffff;
    --button-border: #1abc9c;
    --button-hover-bg: #159a80;
    --button-hover-border: #159a80;
    --btn-secondary-bg: #2c3e50;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #2c3e50;
    --btn-secondary-hover-bg: #1a252f;
    --btn-secondary-hover-border: #1a252f;
    --btn-outline-light-text: #f8f9fa;
    --btn-outline-light-border: #f8f9fa;
    --btn-outline-light-hover-bg: #f8f9fa;
    --btn-outline-light-hover-text: #2c3e50;
    --btn-outline-secondary-text: #6c757d;
    --btn-outline-secondary-border: #6c757d;
    --btn-outline-secondary-hover-bg: #6c757d;
    --btn-outline-secondary-hover-text: #ffffff;
    --divider-color: #2c3e50;
    --divider-light-color: #ffffff;
    --link-color: #1abc9c;
    --link-hover-color: #159a80;
    --section-bg: #ffffff;
    --section-alt-bg: #f8f9fa;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #495057;
    --input-placeholder-color: rgba(73, 80, 87, 0.7);
    --input-focus-border: #86b7fe;
    --input-focus-shadow: rgba(13, 110, 253, 0.25);
    --context-menu-bg: #ffffff;
    --context-menu-border: rgba(0,0,0,.15);
    --context-menu-hover-bg: #f8f9fa;
    --genshin-tier-label-bg: #e9ecef;
    --genshin-tier-border: #dee2e6;
    --genshin-accept-drop-bg: #cfe2ff;
    --genshin-accept-drop-outline: #0d6efd;
    --genshin-pool-border: #6c757d;
    --genshin-rarity5-bg: linear-gradient(135deg,rgba(253,245,175,.6) 0%,rgba(252,229,112,.6) 50%,rgba(248,212,0,.6) 100%);
    --genshin-rarity5-border: rgba(230,195,0,.7);
    --genshin-rarity4-bg: linear-gradient(135deg,rgba(214,191,230,.6) 0%,rgba(188,158,209,.6) 50%,rgba(162,125,189,.6) 100%);
    --genshin-rarity4-border: rgba(140,100,160,.7);
    --character-size: 60px;
    --portfolio-caption-bg: rgba(26, 188, 156, 0.9);
    --portfolio-caption-text: #ffffff;
    --copyright-bg: #1a252f;
    --copyright-text: rgba(255, 255, 255, 0.5);
    --masthead-bg: #ffffff;
    --section-video-bg: rgb(26, 188, 156);
    --section-apps-bg: rgb(13, 202, 240);
    --section-about-bg: var(--section-bg);
    --section-contact-bg: var(--section-alt-bg);
    --social-icon-border: #ffffff;
    --social-icon-color: #ffffff;
    --social-icon-hover-bg: rgba(255, 255, 255, 0.1);
    --social-facebook-hover-color: #1877f2;
    --social-twitter-hover-color: #1da1f2;
    --social-youtube-hover-color: #ff0000;
    --social-discord-hover-color: #7289da;
    --nav-link-active-bg: #1abc9c;
    --nav-link-active-text: #ffffff;
    --nav-link-border-radius: 0.5rem;
    --cube-face-bg: rgba(26, 188, 156, 0.7);
    --cube-border-color: rgba(255, 255, 255, 0.5);
    --cube-size: 50px;
    --star-color: #ffc107;
    --star-border: rgba(0,0,0,0.1);
    --star-size: 30px;
    --download-icon-color: #6c757d;
    --roblox-icon-color: #d83a37;
    --table-bg: #ffffff;
    --table-striped-bg: #f8f9fa;
    --table-hover-bg: #e9ecef;
    --table-border-color: #dee2e6;
    --table-text-color: #212529;
    --table-header-bg: #f8f9fa;
    --table-header-text: #495057;
    --table-highlight-bg: rgba(26, 188, 156, 0.15);
    --table-header-highlight-bg: rgba(26, 188, 156, 0.25);
    --table-row-header-highlight-bg-light: rgba(44, 62, 80, 0.1);
  
    --star-shadow-color: rgba(0, 0, 0, 0.2);
    --star-extrude-dark: #c78100;
    --star-extrude-light: #ffeeaa;
  
    --info-popup-bg: #ffffff;
    --info-popup-border: #cccccc;
    --info-popup-text: #2c3e50;
    --info-popup-label-text: #6c757d;

    --teamcard-size: 40px; 
    --teamcard-depth: 4px; 
    --teamcard-color-1: #6fa8dc; 
    --teamcard-color-2: #a9dfbf; 
    --teamcard-color-3: #f5cba7; 
    --teamcard-color-4: #c3aed6; 
    --teamcard-border: rgba(0,0,0,0.2);
    --teamcard-icon-color: rgba(255,255,255,0.9); 
    --section-genshin-intro-bg: var(--section-bg);
    --section-genshin-teams-bg: #59a9e3; 
    --section-genshin-teams-text: var(--text-color); 
    --section-genshin-teams-heading-text: var(--text-color);
    --section-genshin-teams-divider-line: var(--divider-color);
    --section-genshin-teams-divider-icon: var(--divider-color);

    --section-workout-intro-bg: #27ae60; 
    --section-workout-intro-text: #ffffff;
    --section-workout-intro-divider: #ffffff;
    --section-workout-intro-btn-outline-text: #ffffff;
    --section-workout-intro-btn-outline-border: #ffffff;
    --section-workout-intro-btn-outline-hover-bg: #ffffff;
    --section-workout-intro-btn-outline-hover-text: #27ae60;
  }
  
  body.dark-theme {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --secondary-text-color: #adb5bd;
    --header-bg: #212529;
    --footer-bg: #343a40;
    --footer-text: #f8f9fa;
    --footer-link-color: #20c997;
    --nav-bg: #343a40;
    --nav-text: #f8f9fa;
    --nav-hover-text: #1abc9c;
    --nav-shrink-bg: #343a40;
    --button-bg: #1abc9c;
    --button-text: #ffffff;
    --button-border: #1abc9c;
    --button-hover-bg: #159a80;
    --button-hover-border: #159a80;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #6c757d;
    --btn-secondary-hover-bg: #5a6268;
    --btn-secondary-hover-border: #545b62;
    --btn-outline-light-text: #f8f9fa;
    --btn-outline-light-border: #f8f9fa;
    --btn-outline-light-hover-bg: #f8f9fa;
    --btn-outline-light-hover-text: #343a40;
    --btn-outline-secondary-text: #adb5bd;
    --btn-outline-secondary-border: #6c757d;
    --btn-outline-secondary-hover-bg: #6c757d;
    --btn-outline-secondary-hover-text: #ffffff;
    --divider-color: #6c757d;
    --divider-light-color: #adb5bd;
    --link-color: #20c997;
    --link-hover-color: #1baa80;
    --section-bg: #1a1a1a;
    --section-alt-bg: #212529;
    --card-bg: #2a2a2a;
    --card-border: #444444;
    --input-bg: #343a40;
    --input-border: #555555;
    --input-text: #e0e0e0;
    --input-placeholder-color: rgba(173, 181, 189, 0.7);
    --input-focus-border: #20c997;
    --input-focus-shadow: rgba(32, 201, 151, 0.35);
    --context-menu-bg: #343a40;
    --context-menu-border: #555555;
    --context-menu-hover-bg: #495057;
    --genshin-tier-label-bg: #343a40;
    --genshin-tier-border: #555555;
    --genshin-accept-drop-bg: #495057;
    --genshin-accept-drop-outline: #66aaff;
    --genshin-pool-border: #adb5bd;
    --genshin-rarity5-bg: linear-gradient(135deg,rgba(100,90,30,.6) 0%,rgba(120,100,40,.6) 50%,rgba(140,110,50,.6) 100%);
    --genshin-rarity5-border: rgba(160,130,60,.7);
    --genshin-rarity4-bg: linear-gradient(135deg,rgba(70,50,90,.6) 0%,rgba(90,70,110,.6) 50%,rgba(110,80,130,.6) 100%);
    --genshin-rarity4-border: rgba(120,90,140,.7);
    --portfolio-caption-bg: rgba(248, 249, 250, 0.9);
    --portfolio-caption-text: #212529;
    --copyright-bg: #212529;
    --copyright-text: #adb5bd;
    --masthead-bg: #212529;
    --section-video-bg: #0d412d;
    --section-apps-bg: #065a70;
    --section-about-bg: var(--section-bg);
    --section-contact-bg: var(--section-alt-bg);
    --social-icon-border: #6c757d;
    --social-icon-color: #adb5bd;
    --social-icon-hover-bg: #495057;
    --social-facebook-hover-color: #1877f2;
    --social-twitter-hover-color: #1da1f2;
    --social-youtube-hover-color: #ff0000;
    --social-discord-hover-color: #7289da;
    --nav-link-active-bg: #1abc9c;
    --nav-link-active-text: #ffffff;
    --cube-face-bg: rgba(32, 201, 151, 0.6);
    --cube-border-color: rgba(0, 0, 0, 0.3);
    --star-color: #ffc107;
    --star-border: rgba(255,255,255,0.1);
    --download-icon-color: #adb5bd;
    --roblox-icon-color: #e03e3a;
    --table-bg: #212529;
    --table-striped-bg: #2c3034;
    --table-hover-bg: #32383e;
    --table-border-color: #454d55;
    --table-text-color: #e0e0e0;
    --table-header-bg: #343a40;
    --table-header-text: #f8f9fa;
    --table-highlight-bg: rgba(32, 201, 151, 0.2);
    --table-header-highlight-bg: rgba(32, 201, 151, 0.3);
    --table-row-header-highlight-bg-dark: var(--table-header-highlight-bg);
    
  
    --star-shadow-color: rgba(0, 0, 0, 0.5);
    --star-extrude-dark: #a36a00;
    --star-extrude-light: #fffacd;
  
    --info-popup-bg: #2a2a2a;
    --info-popup-border: #555555;
    --info-popup-text: #e0e0e0;
    --info-popup-label-text: #adb5bd;

    --teamcard-color-1: #4a7a9f; 
    --teamcard-color-2: #6a9a7e; 
    --teamcard-color-3: #b89a80; 
    --teamcard-color-4: #8f7e9e; 
    --teamcard-border: rgba(255,255,255,0.15);
    --teamcard-icon-color: rgba(0,0,0,0.8); 
    --section-genshin-intro-bg: var(--section-bg);
    --section-genshin-teams-bg: #1a2a4f; 
    --section-genshin-teams-text: #cdd6f4; 
    --section-genshin-teams-heading-text: #e0e0e0; 
    --section-genshin-teams-divider-line: #6c757d; 
    --section-genshin-teams-divider-icon: #adb5bd; 

    --section-workout-intro-bg: #14532e; 
    --section-workout-intro-text: #e0e0e0;
    --section-workout-intro-divider: #e0e0e0;
    --section-workout-intro-btn-outline-text: #e0e0e0;
    --section-workout-intro-btn-outline-border: #e0e0e0;
    --section-workout-intro-btn-outline-hover-bg: #e0e0e0;
    --section-workout-intro-btn-outline-hover-text: #1e8449;

    /* --- FIX: Lucky Tools Card Text in Dark Mode --- */
    #luck-intro .card-title {
        color: var(--text-color) !important;
    }

    #luck-intro .card-text {
        color: var(--secondary-text-color) !important;
    }

    /* --- FIX: Zodiac Input Fields in Dark Mode --- */
    #zodiac .form-control,
    #zodiac .form-select {
        background-color: rgba(33, 37, 41, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
    }

    /* CRITICAL FIX: Hide placeholder by default so Floating Label sits correctly */
    #zodiac .form-control::placeholder {
        color: transparent !important;
        opacity: 0 !important;
    }
    
    /* Show placeholder ONLY when input is focused (Label moves up) */
    #zodiac .form-control:focus::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        opacity: 1 !important;
    }
    
    /* Ensure the Label text color is correct */
    #zodiac .form-floating > label {
        color: var(--secondary-text-color) !important;
        background-color: transparent !important;
    }

    #zodiac .form-floating > label::after {
        background-color: transparent !important;
    }

    /* Focus states */
    #zodiac .form-control:focus,
    #zodiac .form-select:focus {
        background-color: rgba(33, 37, 41, 0.95) !important;
        color: #ffffff !important;
        border-color: var(--link-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.25) !important;
    }

    /* --- FIX: Dropdown Options Background in Dark Mode --- */
    select option {
        background-color: #343a40; 
        color: #ffffff;
    }

    /* --- FIX: Nano Banana AI Divider in Dark Mode --- */
    #ai-intro .divider-custom-line {
        background-color: #ffffff !important;
    }
    #ai-intro .divider-custom-icon {
        color: #ffffff !important;
    }
  }


html {
    scroll-behavior: smooth;
    height: 100%;
}

body#page-top {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Noto Sans', "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 72px; 
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Noto Sans', "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
}

a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
  .footer, .copyright { flex-shrink: 0; }
  body.dragging-active, body.dragging-tier { user-select: none; }
  
  #mainNav { padding-top: 1rem; padding-bottom: 1rem; background-color: var(--nav-bg) !important; border-bottom: 1px solid transparent; font-family: "Montserrat", sans-serif; font-weight: 700; position: fixed; width: 100%; top: 0; left: 0; z-index: 1050; flex-shrink: 0; transition: padding-top 0.3s, padding-bottom 0.3s, background-color 0.3s, border-color 0.3s; }
  #mainNav.navbar-shrink { padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: var(--nav-shrink-bg) !important; border-bottom: 1px solid var(--divider-color); }
  #mainNav .navbar-brand { color: var(--nav-text) !important; font-size: 1.5rem; }
  #mainNav .navbar-nav .nav-item .nav-link { color: var(--nav-text) !important; font-size: 0.95rem; padding: 0.75rem 1rem; letter-spacing: 0.0625em; border-radius: var(--nav-link-border-radius); transition: color 0.2s ease, background-color 0.2s ease; }
  #mainNav .navbar-nav .nav-item .nav-link:hover { color: var(--nav-hover-text) !important; background-color: rgba(255, 255, 255, 0.1); }
  body.dark-theme #mainNav .navbar-nav .nav-item .nav-link:hover { background-color: rgba(0, 0, 0, 0.1); }
  #mainNav .navbar-nav .nav-item .nav-link.active { color: var(--nav-link-active-text) !important; background-color: var(--nav-link-active-bg) !important; }
  #mainNav .navbar-toggler { font-size: 80%; padding: 0.8rem; background-color: var(--button-bg) !important; color: var(--button-text) !important; border: 1px solid var(--button-border); }
  body.dark-theme #mainNav .navbar-toggler { background-color: var(--button-bg) !important; color: var(--button-text) !important; border-color: var(--button-border); }
  
  .masthead { padding-top: calc(6rem + 72px); padding-bottom: 4rem; background-color: var(--masthead-bg) !important; color: var(--text-color) !important; text-align: center; transition: background-color 0.3s ease, color 0.3s ease; perspective: 1000px; }
  .masthead img { width: 15rem; filter: none; opacity: 1; margin-bottom: 3rem; transition: filter 0.3s ease; }
  body.dark-theme .masthead img { filter: contrast(0.9) brightness(0.9); }
  .masthead .masthead-heading { font-size: 2.75rem; line-height: 2.75rem; margin-bottom: 1.5rem; }
  .masthead .masthead-subheading { font-size: 1.25rem; font-weight: 300; color: var(--secondary-text-color) !important; }
  
  .divider-custom { margin: 2.5rem auto; line-height: 0; text-align: center; width: fit-content; }
  .divider-custom .divider-custom-line { width: 100%; max-width: 7rem; height: 0.25rem; background-color: var(--divider-color) !important; border-radius: 1rem; display: inline-block; vertical-align: middle; transition: background-color 0.3s ease; }
  .divider-custom .divider-custom-icon { color: var(--divider-color) !important; font-size: 2rem; display: inline-block; vertical-align: middle; padding: 0 1rem; transition: color 0.3s ease;}
  .divider-custom.divider-light .divider-custom-line { background-color: var(--divider-light-color) !important; }
  .divider-custom.divider-light .divider-custom-icon { color: var(--divider-light-color) !important; }
  
  .page-section { padding: 6rem 0; background-color: var(--section-bg); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; }
  .page-section-heading { font-size: 2.25rem; line-height: 2rem; margin-bottom: 4rem; color: var(--text-color); text-transform: uppercase; text-align: center; }
  .lead { color: var(--secondary-text-color); }
  
  .page-section#video { background-color: var(--section-video-bg); }
  .page-section#apps { background-color: var(--section-apps-bg); }
  .page-section#about { background-color: var(--section-about-bg); }
  .page-section#zodiac { background-image: url('../assets/img/menu/zodiac-background.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; color: #ffffff !important; }
  .page-section#zodiac h2, .page-section#zodiac .lead, .page-section#zodiac p:not(.lead), .page-section#zodiac .divider-custom .divider-custom-line, .page-section#zodiac .divider-custom .divider-custom-icon, .page-section#zodiac label, .page-section#zodiac .input-group-text, .page-section#zodiac h4 { color: #ffffff !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
  .page-section#zodiac .divider-custom .divider-custom-line { background-color: #ffffff !important; }
  .page-section#zodiac .btn-primary { background-color: rgba(255, 255, 255, 0.8) !important; color: #2c3e50 !important; border-color: #ffffff !important; }
  .page-section#zodiac .btn-primary:hover { background-color: #ffffff !important; color: #1a252f !important; }
  .page-section#zodiac .form-control, .page-section#zodiac .form-select { background-color: rgba(255,255,255,0.9); color: #2c3e50; border-color: #ced4da; }
  .page-section#zodiac .input-group-text { background-color: rgba(233, 236, 239, 0.9); border-color: #ced4da; }
  body.dark-theme .page-section#zodiac { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../assets/img/menu/zodiac-background.webp'); color: #f0f0f0 !important; }
  body.dark-theme .page-section#zodiac h2, body.dark-theme .page-section#zodiac .lead, body.dark-theme .page-section#zodiac p:not(.lead), body.dark-theme .page-section#zodiac .divider-custom .divider-custom-line, body.dark-theme .page-section#zodiac .divider-custom .divider-custom-icon, body.dark-theme .page-section#zodiac label, body.dark-theme .page-section#zodiac .input-group-text, body.dark-theme .page-section#zodiac h4 { color: #f0f0f0 !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
  body.dark-theme .page-section#zodiac .divider-custom .divider-custom-line { background-color: #f0f0f0 !important; }
  body.dark-theme .page-section#zodiac .btn-primary { background-color: rgba(52, 58, 64, 0.8) !important; color: #f8f9fa !important; border-color: #6c757d !important; }
  body.dark-theme .page-section#zodiac .btn-primary:hover { background-color: #495057 !important; color: #ffffff !important; }
  body.dark-theme .page-section#zodiac .form-control, body.dark-theme .page-section#zodiac .form-select { background-color: rgba(73, 80, 87, 0.9); color: #e0e0e0; border-color: #555555; }
  body.dark-theme .page-section#zodiac .input-group-text { background-color: rgba(52, 58, 64, 0.9); border-color: #555555; }
  .page-section#genshin-intro {
    background-color: var(--section-genshin-intro-bg);
}

.page-section#genshin-teams-intro {
    background-color: var(--section-genshin-teams-bg);
    color: var(--section-genshin-teams-text); 
}

.page-section#genshin-teams-intro .page-section-heading {
    color: var(--section-genshin-teams-heading-text); 
}

.page-section#genshin-teams-intro .lead {
    color: var(--section-genshin-teams-text); 
    opacity: 0.9; 
}
  .page-section#contact { background-color: var(--section-contact-bg); }
  
  .portfolio .portfolio-item { cursor: pointer; position: relative; display: block; margin-bottom: 3rem; border-radius: 0.5rem; overflow: hidden; }
  .portfolio .portfolio-item .portfolio-item-caption { position: absolute; top: 0; left: 0; transition: all 0.2s ease-in-out; opacity: 0; width: 100%; height: 100%; background-color: var(--portfolio-caption-bg); }
  .portfolio .portfolio-item .portfolio-item-caption:hover { opacity: 1; }
  .portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content { font-size: 1.5rem; color: var(--portfolio-caption-text) !important; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
  .portfolio .portfolio-item img { filter: none; transition: filter 0.3s ease; }
  
  .btn { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; box-shadow: none !important; font-weight: 700; border-radius: 0.375rem; padding: 0.75rem 1.5rem; }
  .btn-xl { padding: 1rem 1.75rem; font-size: 1.25rem; }
  .btn-primary { background-color: var(--button-bg) !important; color: var(--button-text) !important; border: 1px solid var(--button-border) !important; }
  .btn-primary:hover { background-color: var(--button-hover-bg) !important; color: var(--button-text) !important; border-color: var(--button-hover-border) !important; }
  .btn-secondary { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; border: 1px solid var(--btn-secondary-border) !important; }
  .btn-secondary:hover { background-color: var(--btn-secondary-hover-bg) !important; border-color: var(--btn-secondary-hover-border) !important; color: var(--btn-secondary-text) !important; }
  .btn-success { background-color: #198754 !important; color: #fff !important; border-color: #198754 !important; }
  body.dark-theme .btn-success { background-color: #20c997 !important; border-color: #20c997 !important; color: #fff !important; }
  .btn-outline-secondary { color: var(--btn-outline-secondary-text) !important; border-color: var(--btn-outline-secondary-border) !important; background-color: transparent; }
  .btn-outline-secondary:hover, .btn-outline-secondary.active { background-color: var(--btn-outline-secondary-hover-bg) !important; color: var(--btn-outline-secondary-hover-text) !important; border-color: var(--btn-outline-secondary-border) !important; }
  .btn-outline-light { color: var(--btn-outline-light-text) !important; border-color: var(--btn-outline-light-border) !important; background-color: transparent; }
  .btn-outline-light:hover { background-color: var(--btn-outline-light-hover-bg) !important; color: var(--btn-outline-light-hover-text) !important; border-color: var(--btn-outline-light-border) !important; }
  .btn-social { border-radius: 50%; display: inline-flex; width: 3.25rem; height: 3.25rem; font-size: 1.25rem; justify-content: center; align-items: center; border: 1px solid var(--social-icon-border); color: var(--social-icon-color); background-color: transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .footer .btn-social:hover { background-color: var(--social-icon-hover-bg); border-color: var(--social-icon-border); }
  .footer a.facebook:hover { color: var(--social-facebook-hover-color) !important; }
  .footer a.twitter:hover { color: var(--social-twitter-hover-color) !important; }
  .footer a.youtube:hover { color: var(--social-youtube-hover-color) !important; }
  .footer a.discord:hover { color: var(--social-discord-hover-color) !important; }
  
  .form-floating label { font-size: 1rem; color: var(--secondary-text-color); padding: 1rem 0.75rem; }
  .form-floating > .form-control { padding: 1rem 0.75rem; }
  .form-control, .form-select, .input-group-text { background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); border-radius: 0.375rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
  .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-focus-border); box-shadow: 0 0 0 0.25rem var(--input-focus-shadow); }
  label { color: var(--text-color); transition: color 0.3s ease; }
  
  input::placeholder, textarea::placeholder { color: var(--input-placeholder-color); opacity: 1; }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--input-placeholder-color); opacity: 1; }
  input::-moz-placeholder, textarea::-moz-placeholder { color: var(--input-placeholder-color); opacity: 1; }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--input-placeholder-color); opacity: 1; }
  input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: var(--input-placeholder-color); opacity: 1; }
  
  .footer { padding-top: 5rem; padding-bottom: 5rem; background-color: var(--footer-bg); color: var(--footer-text); text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
  .footer h4 { text-transform: uppercase; margin-bottom: 1.5rem; color: var(--footer-text); }
  .footer .lead { color: var(--footer-text); opacity: 0.8; font-size: 1.15rem; font-weight: 400; }
  .footer a { color: var(--footer-link-color); }
  .footer a:hover { color: var(--link-hover-color); }
  .copyright { padding: 1.5rem 0; background-color: var(--copyright-bg); color: var(--copyright-text) !important; transition: background-color 0.3s ease, color 0.3s ease; text-align: center; }
  .copyright small { color: var(--copyright-text) !important; }
  
  .portfolio-modal .modal-dialog { margin: 1rem; max-width: 100vw; }
  .portfolio-modal .modal-content { padding: 4rem 1rem; border: 0; border-radius: 0.5rem; background-color: var(--card-bg); color: var(--text-color); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
  body.dark-theme .portfolio-modal .modal-content { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); }
  .portfolio-modal .modal-header { border-bottom: 1px solid var(--divider-color); padding-bottom: 1.5rem; }
  .portfolio-modal .modal-title { font-size: 2rem; margin-bottom: 0; color: var(--text-color) !important; }
  .portfolio-modal .btn-close { padding: 1rem; margin: -1rem -1rem -1rem auto; filter: none; box-shadow: none; opacity: 0.7; transition: filter 0.3s ease; }
  body.dark-theme .portfolio-modal .btn-close { filter: invert(1) brightness(1.5); }
  .portfolio-modal .modal-body { padding-top: 2rem; }
  
  #genshin-ranker-content .container { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; width: 100%; }
  #tier-controls { padding: 10px 0; margin-bottom: 15px; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--divider-color); }
  #tier-controls label { margin-bottom: 0; margin-right: 5px; white-space: nowrap; }
  #tier-controls input[type="text"],#tier-controls input[type="color"]{padding:.3rem .5rem;border-radius:.25rem;height:calc(1.5em + .6rem + 2px); border: 1px solid var(--input-border);}
  #tier-controls input[type="text"] { width: 150px; }
  #tier-controls input[type="color"] { padding: .1rem; width: 40px; border: 1px solid var(--input-border); background-color: var(--input-bg); }
  #tier-controls input[type="range"] { vertical-align: middle; width: 120px; margin: 0 5px; }
  #character-size-value { font-weight: bold; min-width: 25px; display: inline-block; text-align: right; color: var(--text-color); }
  #pool-controls { margin-top: 10px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-left: 15px; flex-shrink: 0; }
  #pool-controls label { margin-bottom: 0; margin-right: 5px; }
  #scrollable-ranking-container { overflow-y: auto; overflow-x: hidden; flex-grow: 1; padding: 15px; position: relative; border: 1px dashed var(--divider-color); scrollbar-width: thin; scrollbar-color: var(--secondary-text-color) var(--footer-bg); background-color: var(--bg-color); transition: background-color 0.3s ease, border-color 0.3s ease;}
  #scrollable-ranking-container::-webkit-scrollbar { width: 8px; }
  #scrollable-ranking-container::-webkit-scrollbar-track { background: var(--footer-bg); border-radius: 4px; }
  #scrollable-ranking-container::-webkit-scrollbar-thumb { background-color: var(--secondary-text-color); border-radius: 4px; border: 2px solid var(--footer-bg); }
  #ranking-area { padding-top: 10px; margin-bottom: 2rem; }
  #pool-area-header { margin-top: 1rem; text-transform: uppercase; color: var(--text-color); text-align: center;}
  
#mainNav #navbarResponsive ul.navbar-nav > li {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

#mainNav #navbarResponsive ul.navbar-nav.nav-ready > li {
    opacity: 1;
    visibility: visible;
}
#mainNav #navbarResponsive ul.navbar-nav > li:last-child { 
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important; 
}
#mainNav #navbarResponsive ul.navbar-nav > li:has(#theme-toggle-btn) {
    opacity: 1 !important;
    visibility: visible !important;
}
  .rank-tier { border: 2px dashed var(--genshin-tier-border); margin-bottom: 15px; cursor: move; background-color: var(--card-bg); transition: background-color 0.3s ease, border-color 0.3s ease;}
  .rank-tier-label { position: relative; display: flex; align-items: center; padding: 8px 5px; margin: 0; text-align: center; font-size: 1.1rem; font-weight: bold; flex-shrink: 0; border-bottom: 1px solid var(--divider-color); color: var(--text-color); background-color: var(--genshin-tier-label-bg); pointer-events: none; user-select: none; cursor: default; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
  .tier-search-container { position: relative; flex: 0 0 180px; margin-right: 10px; pointer-events: auto; }
  .tier-search-input { width: 100%; padding: .2rem .4rem; font-size: .85em; height: auto; line-height: 1.2; pointer-events: auto; background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); border-radius: .25rem; }
  .search-results-popup { display: none; position: absolute; width: 100%; max-height: 180px; overflow-y: auto; z-index: 100; left: 0; top: 100%; background-color: var(--card-bg); border: 1px solid var(--card-border); border-top: none; box-shadow: 0 4px 8px rgba(0,0,0,.1); border-radius: 0 0 .25rem .25rem; }
  body.dark-theme .search-results-popup { box-shadow: 0 4px 8px rgba(255,255,255,.05); }
  .search-result-item { padding: 5px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--divider-color); color: var(--text-color); }
  .search-result-item:last-child { border-bottom: none; }
  .search-result-item:hover { background-color: var(--button-hover-bg); }
  .search-result-item img { width: 24px; height: 24px; border-radius: 3px; }
  .search-result-item span { font-size: .9em; }
  .tier-name-text { flex-grow: 1; text-align: center; pointer-events: auto; }
  body.dark-theme .rank-tier-label .tier-name-text { color: var(--genshin-tier-label-text-dark, #f8f9fa) !important; }
  .tier-controls-buttons { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; opacity: 1; pointer-events: auto; transition: none; }
  .tier-controls-buttons button { padding: 0.4em 0.7em; font-size: 1em; line-height: 1; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; pointer-events: auto; background: rgba(150,150,150,.7); border: 1px solid var(--button-border); color: var(--button-text); }
  body.dark-theme .tier-controls-buttons button { background: rgba(70,70,70,.7); color: var(--genshin-tier-label-text-dark, #f8f9fa); border-color: var(--button-border); }
  .tier-controls-buttons button i { font-size: 1.1em; }
  .rank-tier-label .tier-name-text[contenteditable=true] { outline: 1px dashed var(--link-color); background-color: var(--input-bg) !important; cursor: text; user-select: text; pointer-events: auto !important; }
  .rank-tier .tier-characters { cursor: default; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; flex-grow: 1; min-height: calc(var(--character-size) + 10px); align-content: flex-start; }
  #scroll-down-button { position: fixed; bottom: 70px; right: 20px; z-index: 1040; display: none; padding: 10px 15px; }
  #scroll-down-button.visible { display: block; }
  .character-container { width: var(--character-size); height: var(--character-size); position: relative; display: inline-block; vertical-align: top; margin: 2px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.1); background-color: var(--card-bg); border: 1px solid var(--card-border); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease, width 0.1s ease, height 0.1s ease; border-radius: 4px;}
  .character-container.rarity-5 { background: var(--genshin-rarity5-bg); border: 1px solid var(--genshin-rarity5-border); }
  .character-container.rarity-4 { background: var(--genshin-rarity4-bg); border: 1px solid var(--genshin-rarity4-border); }
  .character-container.rarity-5 .character-icon, .character-container.rarity-4 .character-icon { background-color: transparent; border: none; }
  .character-container:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.2); }
  body.dark-theme .character-container:hover { box-shadow: 0 3px 6px rgba(255,255,255,0.1); }
  .character-icon { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
  .element-icon { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; z-index: 10; border-radius: 3px; background-color: rgba(255, 255, 255, 0.7); padding: 1px; pointer-events: none; }
  body.dark-theme .element-icon { background-color: rgba(50, 50, 50, 0.7); }
  .character-pool { display: flex; flex-wrap: wrap; gap: 6px; min-height: calc(var(--character-size) + 20px); align-content: flex-start; padding: 10px; position: relative; border: 2px dashed var(--genshin-pool-border); background-color: var(--section-alt-bg); transition: background-color 0.3s ease, border-color 0.3s ease; }
  #genshin-intro-preview .preview-icon { border-color: var(--card-border); background-color: var(--section-alt-bg); filter: none; width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin: 3px; transition: background-color 0.3s ease, border-color 0.3s ease; }
  body.dark-theme #genshin-intro-preview .preview-icon { filter: grayscale(20%) brightness(0.9); border-color: var(--divider-color); background-color: var(--card-bg); }
  #genshin-intro-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 20px; max-height: 150px; overflow: hidden; }
  .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important; opacity: 0.8; cursor: grabbing !important; width: var(--character-size) !important; height: var(--character-size) !important; box-shadow: 0 5px 15px rgba(0,0,0,.3); pointer-events: none; border-radius: 4px; }
  body.dark-theme .gu-mirror { box-shadow: 0 5px 15px rgba(255,255,255,.1); }
  .gu-hide { display: none !important; }
  .gu-unselectable { user-select: none !important; }
  .gu-transit { opacity: .5; background-color: var(--button-hover-bg); border-radius: 4px;}
  .tier-characters.gu-accepts-drop, .character-pool.gu-accepts-drop { background-color: var(--genshin-accept-drop-bg) !important; outline: 1px dashed var(--genshin-accept-drop-outline); }
  .custom-context-menu { position: absolute; z-index: 1060; display: none; min-width: 100px; padding: 5px 0; list-style: none; font-size: .9rem; background-color: var(--context-menu-bg); border: 1px solid var(--context-menu-border); border-radius: .25rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1); transition: background-color 0.3s ease, border-color 0.3s ease; }
  body.dark-theme .custom-context-menu { box-shadow: 0 0.5rem 1rem rgba(255,255,255,.05); }
  .custom-context-menu li { padding: 5px 15px; cursor: pointer; color: var(--text-color); transition: background-color 0.15s ease, color 0.15s ease;}
  .custom-context-menu li:hover { background-color: var(--context-menu-hover-bg); color: var(--text-color); }
  .custom-context-menu li i { margin-right: 8px; }
  #hidden-tier-color-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: -100px; }
  #theme-toggle-btn { background: none; border: none; color: var(--nav-text); font-size: 1.25rem; cursor: pointer; padding: 0.5rem; margin-left: 0.5rem; line-height: 1; transition: color 0.2s ease;}
  #theme-toggle-btn:hover { color: var(--nav-hover-text); }
  #theme-toggle-btn i { display: inline-block; width: 1.25em; text-align: center; }
  #tier-controls .form-label { white-space: nowrap; }
  #tier-controls .form-control,
  #tier-controls .form-select,
  #tier-controls .form-range { flex-shrink: 0; }
  #tier-controls .row > div { display: flex; align-items: center; }
  #tier-controls .form-range { width: 100px !important; }
  #tier-controls hr { margin-top: 0.75rem; margin-bottom: 0.75rem; }
  
  #character-info-popup {
      background-color: var(--info-popup-bg);
      border: 1px solid var(--info-popup-border);
      color: var(--info-popup-text);
      padding: 10px 15px; 
      min-width: 180px;
      z-index: 10001; 
      position: fixed; 
      display: none; 
  }
  #character-info-popup p { margin-bottom: 0.3rem; font-size: 0.9rem; }
  #character-info-popup p strong {
     color: var(--info-popup-label-text);
     display: inline-block;
     min-width: 60px;
  }
  
  .container { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; }
  @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } }
  .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-auto { flex: 0 0 auto; width: auto; } .col-12 { flex: 0 0 auto; width: 100%; }
  @media (min-width: 576px) { .col-sm-auto { flex: 0 0 auto; width: auto; } }
  @media (min-width: 768px) { .col-md-auto { flex: 0 0 auto; width: auto; } .mt-md-0 { margin-top: 0 !important; } }
  @media (min-width: 992px) { .col-lg-auto { flex: 0 0 auto; width: auto; } .mb-lg-0 { margin-bottom: 0 !important; } }
  .g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
  .ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mt-4 { margin-top: 1.5rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .p-3 { padding: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-lg-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; }
  .text-center { text-align: center !important; } .text-uppercase { text-transform: uppercase !important; } .font-weight-light { font-weight: 300 !important; } .rounded { border-radius: 0.375rem !important; } .border { border: 1px solid var(--card-border) !important; }
  .d-flex { display: flex !important; } .align-items-center { align-items: center !important; } .justify-content-center { justify-content: center !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-shrink-0 { flex-shrink: 0 !important; }
  .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-100 { height: 100% !important; } .img-fluid { max-width: 100%; height: auto; }
  .text-danger { color: #dc3545 !important; } .text-muted { color: var(--secondary-text-color) !important; } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: .875em; color: #dc3545; } .form-control.is-invalid ~ .invalid-feedback { display: block; }
  .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  
  .cube-divider-container { width: var(--cube-size); height: var(--cube-size); position: relative; margin: 2.5rem auto; transform-style: preserve-3d; animation: spin-cube 15s infinite linear; }
  .cube-face { position: absolute; width: var(--cube-size); height: var(--cube-size); background-color: var(--cube-face-bg); border: 1px solid var(--cube-border-color); opacity: 0.8; transition: background-color 0.3s ease, border-color 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cube-size) * 0.6); color: var(--text-color); }
  body.dark-theme .cube-face { color: var(--text-color); }
  .cube-face.front  { transform: translateZ(calc(var(--cube-size) / 2)); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face.right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face.top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  @keyframes spin-cube { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }
  
  body.dark-theme .podium-step .face.front::after {
     color: var(--podium-number-color-dark, rgba(255, 255, 255, 0.7));
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  }
  

  .face {
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid var(--podium-border);
      opacity: 0.95;
      background-color: gray; 
      transition: background-color 0.3s ease, border-color 0.3s ease;
      backface-visibility: hidden;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.15);
  }
  
  /* --- Start Team Cards Divider --- */
  .team-divider-container {
    width: calc(var(--teamcard-size) * 3.2); /* Adjusted container width for 4 cards */
    height: calc(var(--teamcard-size) * 1.5); 
    position: relative;
    margin: 2.5rem auto;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation: spin-team-cards 18s infinite linear;
}

.team-card {
    position: absolute;
    width: var(--teamcard-size);
    height: calc(var(--teamcard-size) * 1.3); 
    transform-style: preserve-3d;
    left: 50%;
    top: 50%;
    margin-left: calc(var(--teamcard-size) / -2);
    margin-top: calc(var(--teamcard-size) * 1.3 / -2);
}

/* Positioning the 4 cards within the container */
.team-card.card-1 { transform: translateX(-75%) translateZ(20px) rotateY(-28deg) rotateZ(-12deg); z-index: 4; }
.team-card.card-2 { transform: translateX(-25%) translateZ(5px)  rotateY(-14deg) rotateZ(-5deg);  z-index: 3; }
.team-card.card-3 { transform: translateX(25%)  translateZ(-5px) rotateY(14deg)  rotateZ(5deg);   z-index: 2; }
.team-card.card-4 { transform: translateX(75%)  translateZ(-20px)rotateY(28deg)  rotateZ(12deg);  z-index: 1; }


.team-card .face {
    position: absolute;
    border: 1px solid var(--teamcard-border);
    background-color: grey; 
    opacity: 0.95;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--teamcard-icon-color);
    font-size: calc(var(--teamcard-size) * 0.55); /* Slightly increased icon size */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    left: 50%;
    top: 50%;
}

/* Assign colors */
.team-card.card-1 .face { background-color: var(--teamcard-color-1); }
.team-card.card-2 .face { background-color: var(--teamcard-color-2); }
.team-card.card-3 .face { background-color: var(--teamcard-color-3); }
.team-card.card-4 .face { background-color: var(--teamcard-color-4); }


/* Dimensions and Transforms for card faces */
.team-card .face.front,
.team-card .face.back {
    width: var(--teamcard-size); height: calc(var(--teamcard-size) * 1.3);
    margin-left: calc(var(--teamcard-size) / -2); margin-top: calc(var(--teamcard-size) * 1.3 / -2);
}
.team-card .face.left,
.team-card .face.right {
    width: var(--teamcard-depth); height: calc(var(--teamcard-size) * 1.3);
    margin-left: calc(var(--teamcard-depth) / -2); margin-top: calc(var(--teamcard-size) * 1.3 / -2);
}
.team-card .face.top,
.team-card .face.bottom {
    width: var(--teamcard-size); height: var(--teamcard-depth);
    margin-left: calc(var(--teamcard-size) / -2); margin-top: calc(var(--teamcard-depth) / -2);
}

.team-card .face.front  { transform: translateZ(calc(var(--teamcard-depth) / 2)); }
.team-card .face.back   { transform: rotateY(180deg) translateZ(calc(var(--teamcard-depth) / 2)); }
.team-card .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--teamcard-size) / 2)); }
.team-card .face.right  { transform: rotateY(90deg) translateZ(calc(var(--teamcard-size) / 2)); }
.team-card .face.top    { transform: rotateX(90deg) translateZ(calc(var(--teamcard-size) * 1.3 / 2)); }
.team-card .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--teamcard-size) * 1.3 / 2)); }

/* Icon inside the front face */
.team-card .face.front::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif; /* Added fallbacks */
    font-weight: 900; 
    content: "\f0c0"; /* fa-users icon */
    display: inline-block; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal; /* Ensure normal style */
    font-variant: normal; /* Ensure normal variant */
    text-rendering: auto; /* Browser default */
}


@keyframes spin-team-cards {
    from { transform: rotateX(-10deg) rotateY(0deg); }
    to   { transform: rotateX(-10deg) rotateY(360deg); }
}

/* --- End Team Cards Divider --- */
  
  .star-divider-container {
    width: calc(var(--star-size) * 1.8);
    height: calc(var(--star-size) * 1.8);
    position: relative;
    margin: 2.5rem auto;
    perspective: 800px;
    transform-style: preserve-3d;
    animation: spin-star-3d 20s infinite linear;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
    animation-name: spin-star-3d;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  
  .star-divider-container > svg,
  .star-divider-container > i.fa-star {
      font-size: calc(var(--star-size) * 1.7);
      color: var(--star-color);
      transition: color 0.3s ease, text-shadow 0.3s ease;
      line-height: 1;
      background: none;
      border: none;
      margin: 0;
      padding: 0;
      fill: currentColor;
      text-shadow:
       1px 1px 3px var(--star-shadow-color, rgba(0, 0, 0, 0.4)),
       0px 1px 0px var(--star-extrude-dark, #c78100),
       0px 2px 0px var(--star-extrude-dark, #c78100),
       0px 3px 0px var(--star-extrude-dark, #c78100),
       0px -1px 0px var(--star-extrude-light, #ffeeaa);
  }
  
  .star-divider,
  .star-divider::before,
  .star-divider::after,
  .star-divider-container::before,
  .star-divider-container::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
  }
  
  
  @keyframes spin-star-3d {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(-15deg) rotateY(20deg) rotateZ(90deg);
    }
    50% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
    }
    75% {
        transform: rotateX(15deg) rotateY(-20deg) rotateZ(270deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
    }
  }
  
  .zodiac-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; margin-left: 4px; object-fit: contain; }
  
  .download-divider-container { width: 60px; height: 60px; margin: 2.5rem auto; display: flex; justify-content: center; align-items: center; }
  .download-divider-container i { font-size: 3rem; color: var(--download-icon-color); transition: color 0.3s ease; }
  
  .roblox-divider-container { width: 60px; height: 60px; margin: 2.5rem auto; display: flex; justify-content: center; align-items: center; }
  .roblox-divider-container i { font-size: 3rem; color: var(--roblox-icon-color); transition: color 0.3s ease; }
  
  .divider-custom { margin: 2.5rem auto; line-height: 0; text-align: center; width: fit-content; }
  
  .table {
      --bs-table-color: var(--table-text-color);
      --bs-table-bg: var(--table-bg);
      --bs-table-border-color: var(--table-border-color);
      --bs-table-striped-color: var(--table-text-color);
      --bs-table-striped-bg: var(--table-striped-bg);
      --bs-table-active-color: var(--table-text-color);
      --bs-table-active-bg: var(--table-hover-bg);
      --bs-table-hover-color: var(--table-text-color);
      --bs-table-hover-bg: transparent;
      width: 100%;
      margin-bottom: 1rem;
      color: var(--bs-table-color);
      vertical-align: top;
      border-color: var(--bs-table-border-color);
      border-collapse: collapse;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }



.table th,
.table td {
    color: var(--table-text-color); 
    border: 1px solid var(--table-border-color);
    position: relative;
    z-index: 2;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.5rem;
    white-space: nowrap; 
}
  .table thead th {
      color: var(--table-header-text);
      background-color: var(--table-header-bg) !important;
      border-color: var(--table-border-color);
      position: sticky; top: 0;
      z-index: 5; 
  }


  .table tbody th[scope="row"] {
       background-color: var(--table-header-bg) !important;
       color: var(--table-header-text);
       position: sticky; left: 0;
       z-index: 5;
  }
  .table thead th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15 !important; 
    background-color: var(--table-header-bg) !important; 
}  
.table-striped > tbody > tr:nth-of-type(odd) > td { 
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    background-color: var(--bs-table-accent-bg); 
    color: var(--bs-table-striped-color);
  }
  .table td.highlight-cell-hover {
      outline: 2px solid var(--link-color);
      outline-offset: -2px;
      z-index: 4; 
  }
  
  .table thead th,
  .table tbody th[scope="row"] {
      transition: background-color 0.1s ease-out, color 0.1s ease-out;
  }
  
  .table th.highlight-col-header,
  .table th.highlight-row-header {
       background-color: var(--table-header-highlight-bg) !important;
  }
  
  .table thead th.highlight-col-header {
      z-index: 11; 
  }
  .table tbody th.highlight-row-header {
      z-index: 6; 
  }
  .table thead th:first-child.highlight-col-header,
  .table thead th:first-child.highlight-row-header { 
      z-index: 16 !important; 
      background-color: var(--table-header-highlight-bg) !important;
  }
  
  :root .table th.highlight-col-header { background-color: #e9ecef !important; color: #000 !important; }
:root .table th.highlight-row-header { background-color: #dee2e6 !important; color: #000 !important; }
:root .table thead th:first-child.highlight-col-header { background-color: #e9ecef !important; color: #000 !important; z-index: 16 !important; }
body.dark-theme .table th.highlight-col-header { background-color: var(--table-header-highlight-bg) !important; color: var(--table-header-text) !important; }
body.dark-theme .table th.highlight-row-header { background-color: var(--table-row-header-highlight-bg-dark) !important; color: var(--table-header-text) !important; }
body.dark-theme .table thead th:first-child.highlight-col-header { background-color: var(--table-header-highlight-bg) !important; color: var(--table-header-text) !important; z-index: 16 !important; }
  
  body.dark-theme .modal-content {
      background-color: var(--card-bg);
      color: var(--text-color);
      border: 1px solid var(--card-border);
  }
  body.dark-theme .modal-header {
      border-bottom-color: var(--divider-color);
  }
  body.dark-theme .modal-footer {
      border-top-color: var(--divider-color);
  }
  body.dark-theme .modal-title {
      color: var(--text-color);
  }
  body.dark-theme .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
  }
  body.dark-theme .modal-body .form-control {
      background-color: var(--input-bg);
      color: var(--input-text);
      border-color: var(--input-border);
  }
  body.dark-theme .modal-body .form-control::placeholder {
      color: var(--input-placeholder-color);
      opacity: 1;
  }
   body.dark-theme .modal-body .form-control:focus {
      background-color: var(--input-bg);
      color: var(--input-text);
      border-color: var(--input-focus-border);
      box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
  }
  body.dark-theme .modal-body .invalid-feedback {
      color: #f17c7c;
  }
  body.dark-theme .modal-body .form-control.is-invalid {
      border-color: #f17c7c;
  }
   body.dark-theme .modal-body .form-control.is-invalid:focus {
      box-shadow: 0 0 0 0.25rem rgba(241, 124, 124, 0.5);
  }
.page-section#about .divider-custom-line { background-color: var(--divider-color) !important; }
.page-section#about .divider-custom-icon { color: var(--divider-color) !important; }
.page-section#about .btn-social.btn-outline-light {
    border-color: var(--divider-color);
    color: var(--divider-color);
}
.page-section#about .btn-social.btn-outline-light:hover {
    background-color: var(--divider-color);
    color: var(--bg-color); /* This will be white on light theme, dark on dark theme */
}

body:not(.dark-theme) #about a.facebook:hover { color: var(--social-facebook-hover-color) !important; }
body:not(.dark-theme) #about a.twitter:hover { color: var(--social-twitter-hover-color) !important; }
body:not(.dark-theme) #about a.youtube:hover { color: var(--social-youtube-hover-color) !important; }
body:not(.dark-theme) #about a.discord:hover { color: var(--social-discord-hover-color) !important; }

.page-section#workout-intro {
    background-color: var(--section-workout-intro-bg);
    color: var(--section-workout-intro-text);
}

.page-section#workout-intro .page-section-heading,
.page-section#workout-intro .lead {
    color: var(--section-workout-intro-text);
}

.page-section#workout-intro .divider-custom-line {
    background-color: var(--section-workout-intro-divider) !important;
}

.page-section#workout-intro .divider-custom-icon {
    color: var(--section-workout-intro-divider) !important;
}

.page-section#workout-intro .btn-outline-light { 
    color: var(--section-workout-intro-btn-outline-text) !important;
    border-color: var(--section-workout-intro-btn-outline-border) !important;
}
.page-section#workout-intro .btn-outline-light:hover {
    background-color: var(--section-workout-intro-btn-outline-hover-bg) !important;
    color: var(--section-workout-intro-btn-outline-hover-text) !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: rgba(255, 255, 255, 0.6); 
    opacity: 1; 
}

body.dark-theme input::-webkit-input-placeholder, 
body.dark-theme textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

body.dark-theme input::-moz-placeholder, 
body.dark-theme textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

body.dark-theme input:-ms-input-placeholder, 
body.dark-theme textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

body.dark-theme input::-ms-input-placeholder, 
body.dark-theme textarea::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

body.dark-theme .search-input-sm::placeholder {
    color: rgba(255, 255, 255, 0.7); 
}
body.dark-theme .search-input-sm::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}
body.dark-theme .search-input-sm::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
}
body.dark-theme .search-input-sm:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}
body.dark-theme .search-input-sm::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.workout-page-link {
    /* Default for light theme */
    color: var(--link-color) !important;
    border-color: var(--link-color) !important;
}

.workout-page-link:hover {
    color: var(--button-text) !important;
    background-color: var(--link-hover-color) !important;
    border-color: var(--link-hover-color) !important;
}

body.dark-theme .workout-page-link {
    /* Override for dark theme */
    color: var(--btn-outline-light-text) !important;
    border-color: var(--btn-outline-light-border) !important;
}

body.dark-theme .workout-page-link:hover {
    color: var(--btn-outline-light-hover-text) !important;
    background-color: var(--btn-outline-light-hover-bg) !important;
    border-color: var(--btn-outline-light-border) !important;
}

.wheel-divider-container {
    width: 60px;
    height: 60px;
    margin: 2.5rem auto;
    perspective: 1000px;
}

.wheel-divider-container i {
    font-size: 3rem;
    color: var(--link-color);
    animation: spin-wheel-icon 8s infinite linear;
    transform-style: preserve-3d;
    display: inline-block;
}

@keyframes spin-wheel-icon {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Dropdown menu color logic for theme */
body:not(.dark-theme) .dropdown-menu {
    background: #fff;
    color: #111;
}
body:not(.dark-theme) .dropdown-menu .dropdown-item {
    color: #111;
}
body:not(.dark-theme) .dropdown-menu .dropdown-item:hover {
    background: #f0f0f0;
}
body.dark-theme .dropdown-menu {
    background: #111;
    color: #fff;
}
body.dark-theme .dropdown-menu .dropdown-item {
    color: #fff;
}
body.dark-theme .dropdown-menu .dropdown-item:hover {
    background: #222;
}

/* Nano Banana AI section theme backgrounds */
body:not(.dark-theme) #ai-intro {
    background: #ffe066;
}
body.dark-theme #ai-intro {
    background: #725d00;
}

body:not(.dark-theme) #wheel-intro{
    background: #ffa600;
}

body.dark-theme #wheel-intro {
    background: #724400;
}

/* --- Cookie Consent Banner --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg, #f8f9fa);
    color: var(--text-color, #212529);
    padding: 15px;
    z-index: 1050; /* High z-index to stay on top */
    border-top: 1px solid var(--card-border, #dee2e6);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: none; /* Hidden by default, shown by JS */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

/* --- Lucky Tools Section Styles --- */

/* Container for the clover icon in the divider */
.page-section#luck-intro .divider-custom-icon {
    color: var(--text-color) !important; /* Ensure visibility in both themes */
}

/* Dice Icon Animation */
.fa-dice {
    transition: transform 0.5s ease-in-out;
}

.card:hover .fa-dice {
    transform: rotate(360deg) scale(1.1);
}

/* Lucky Tools Cards Styling */
#luck-intro .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#luck-intro .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* Dark Theme Overrides for Lucky Tools */
body.dark-theme #luck-intro .card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

/* Ensure icons have appropriate colors in dark/light modes */
body.dark-theme .text-primary {
    color: var(--link-color) !important; /* Use theme green/teal */
}

body.dark-theme .text-secondary {
    color: var(--secondary-text-color) !important;
}

/* Specific style for the 'Arunca Zarurile' button to match theme */
#luck-intro .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

#luck-intro .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}

/* GENERAL ICON ANIMATION ON CARD HOVER */
/* This targets both the dice and the wheel for a consistent spin effect */
.card:hover .fa-dice,
.card:hover .fa-dharmachakra {
    transform: rotate(360deg) scale(1.1);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Smooth spin with a little bounce */
}

/* Lucky Tools Cards Styling */
#luck-intro .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#luck-intro .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* --- Fix for Form Floating Labels in Dark Theme --- */
body.dark-theme .form-floating > label {
    background-color: transparent !important; /* Remove white background */
    color: var(--secondary-text-color) !important; /* Ensure text is visible */
}

/* Ensure the pseudo-element (used by some browsers/versions) is also transparent */
body.dark-theme .form-floating > label::after {
    background-color: transparent !important;
}

/* Ensure input text is readable */
body.dark-theme .form-floating > .form-control,
body.dark-theme .form-floating > .form-select {
    color: var(--input-text) !important;
    background-color: var(--input-bg) !important;
}

/* Adjust focus opacity for labels to keep them visible */
body.dark-theme .form-floating > .form-control:focus ~ label,
body.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.dark-theme .form-floating > .form-select ~ label {
    color: var(--secondary-text-color);
    opacity: 0.8;
}

/* --- FIX: Lucky Tools Card Text in Dark Mode --- */
body.dark-theme #luck-intro .card-title {
    color: var(--text-color) !important; /* White in dark mode */
}

body.dark-theme #luck-intro .card-text {
    color: var(--secondary-text-color) !important; /* Light grey in dark mode */
}

body.dark-theme #zodiac .form-control,
body.dark-theme #zodiac .form-select {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent light */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important; /* White text for input value */
}

/* Placeholder color fix */
body.dark-theme #zodiac .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Floating label color fix */
body.dark-theme #zodiac .form-floating > label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus state for inputs */
body.dark-theme #zodiac .form-control:focus,
body.dark-theme #zodiac .form-select:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.25) !important;
}

body.dark-theme #ai-intro .divider-custom-line {
    background-color: #ffffff !important;
}

body.dark-theme #ai-intro .divider-custom-icon {
    color: #ffffff !important;
}

/* --- FIX: Dropdown Options Background in Dark Mode --- */
/* This ensures the list that opens up is dark, not white */
body.dark-theme select option {
    background-color: #343a40; /* Dark grey background */
    color: #ffffff;            /* White text */
}

/* --- FIX: Datepicker Input & Selects Consistency --- */
/* Reinforce dark background for all inputs in the Zodiac section */
body.dark-theme #zodiac .form-control,
body.dark-theme #zodiac .form-select {
    background-color: rgba(33, 37, 41, 0.8) !important; /* Dark semi-transparent bg */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Ensure the datepicker placeholder text is visible */
body.dark-theme #zodiac #datepicker::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix for the focus state to keep it dark */
body.dark-theme #zodiac .form-control:focus,
body.dark-theme #zodiac .form-select:focus {
    background-color: rgba(33, 37, 41, 0.95) !important;
    border-color: var(--link-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.25) !important;
}
/* --- FIX: Global Card Styles for Dark Mode --- */
body.dark-theme .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

body.dark-theme .card-title {
    color: var(--text-color);
}

body.dark-theme .card-text.text-muted {
    color: var(--secondary-text-color) !important;
}
/* --- FIX: Zodiac Page Specifics in Dark Mode --- */
body.dark-theme #zodiac-calculator .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}
/* --- FIX: Zodiac Inputs & Labels (SCOPED CORRECTLY) --- */

/* 1. DEFAULT (LIGHT THEME) STYLES */
#zodiac .form-control,
#zodiac .form-select,
#zodiac-calculator .form-control,
#zodiac-calculator .form-select {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    color: #212529;
}

/* 2. DARK THEME OVERRIDES */
body.dark-theme #zodiac .form-control,
body.dark-theme #zodiac .form-select,
body.dark-theme #zodiac-calculator .form-control,
body.dark-theme #zodiac-calculator .form-select {
    background-color: rgba(33, 37, 41, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Hide placeholder by default (Both Themes) */
#zodiac .form-control::placeholder,
#zodiac-calculator .form-control::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Show placeholder on focus (Light Theme) */
#zodiac .form-control:focus::placeholder,
#zodiac-calculator .form-control:focus::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* Show placeholder on focus (Dark Theme) */
body.dark-theme #zodiac .form-control:focus::placeholder,
body.dark-theme #zodiac-calculator .form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

/* Label Colors (Default/Light) */
#zodiac .form-floating > label,
#zodiac-calculator .form-floating > label {
    color: #6c757d !important;
    background-color: transparent !important;
}

/* Label Colors (Dark Theme) */
body.dark-theme #zodiac .form-floating > label,
body.dark-theme #zodiac-calculator .form-floating > label {
    color: #adb5bd !important;
}

#zodiac .form-floating > label::after,
#zodiac-calculator .form-floating > label::after {
    background-color: transparent !important;
}

/* Focus states (Dark Theme) */
body.dark-theme #zodiac .form-control:focus,
body.dark-theme #zodiac .form-select:focus,
body.dark-theme #zodiac-calculator .form-control:focus,
body.dark-theme #zodiac-calculator .form-select:focus {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #ffffff !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.25) !important;
}

/* --- FIX: jQuery UI Datepicker in Dark Mode --- */

/* 1. The Main Popup Container */
body.dark-theme .ui-datepicker {
    background-color: var(--card-bg) !important; /* Dark Grey */
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

/* 2. The Header (Month/Year navigation area) */
body.dark-theme .ui-datepicker-header {
    background-color: var(--nav-bg) !important; /* Darker Grey */
    border-bottom: 1px solid var(--card-border) !important;
    color: #ffffff !important;
}

/* 3. The Dropdowns (Month/Year Selects) */
body.dark-theme .ui-datepicker-title select {
    background-color: var(--input-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--input-border) !important;
    padding: 2px;
}

/* 4. The Calendar Table Header (Su, Mo, Tu...) */
body.dark-theme .ui-datepicker th {
    color: var(--secondary-text-color) !important;
}

/* 5. The Days (Buttons) */
body.dark-theme .ui-state-default,
body.dark-theme .ui-widget-content .ui-state-default {
    background: var(--input-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
    text-align: center;
}

/* 6. Hover State for Days */
body.dark-theme .ui-state-hover,
body.dark-theme .ui-widget-content .ui-state-hover {
    background: var(--button-bg) !important; /* Teal/Green theme color */
    color: #ffffff !important;
    border-color: var(--button-border) !important;
    cursor: pointer;
}

/* 7. Active/Selected Day */
body.dark-theme .ui-state-active,
body.dark-theme .ui-widget-content .ui-state-active {
    background: var(--link-color) !important;
    color: #ffffff !important;
    border-color: var(--link-color) !important;
    font-weight: bold;
}

/* 8. Previous/Next Icons in Header */
body.dark-theme .ui-icon {
    filter: invert(1); /* Turns black icons to white */
}
body.dark-theme .ui-datepicker-prev-hover,
body.dark-theme .ui-datepicker-next-hover {
    background-color: rgba(255,255,255,0.1) !important;
    border: none !important;
    top: 2px !important; /* Fix jQuery UI hover jumpiness */
    cursor: pointer;
}

/* --- FIX: jQuery UI Datepicker (Light Theme / Default) --- */
.ui-datepicker {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 10000 !important; /* Ensure it stays on top */
}

.ui-datepicker-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #ced4da !important;
    color: #212529 !important;
}

.ui-datepicker-title select {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover {
    background-color: var(--button-bg) !important;
    color: #ffffff !important;
    border-color: var(--button-bg) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background-color: var(--link-color) !important;
    color: #ffffff !important;
    border-color: var(--link-color) !important;
}