/*
color1: background color
color2: highlight color
color3: subbackground color
color4: button color
color5: animation canvas background color
color6: animation particle link color
color7: animation particle color
*/

/*||||||Purple theme||||||*/
/*:root {
    --color1: #1a1423;
    --color2: #fedf8a;
    --color3: #e9ecef;
    --color4: #3d314a;
    --color5: #151b3c;
    --color6: #F0ECE5;
    --color6: #e5f0ef;
    --color7: #1F509A;
}
*/

/*||||||Blue theme||||||*/
/*:root {
    --color1: #08282f;
    --color2: #fedf8a;
    --color3: #e9ecef;
    --color4: #3d5668;
    --color5: #12131c;
    --color6: #e5f0ef;
    --color7: #1F509A;
}
*/

/*||||||Modern theme||||||*/
/*:root {
    --color1: #219B9D;
    --color2: #FF8000;
    --color3: #e9ecef;
    --color4: #4C1F7A;
    --color5: #151b3c;
    --color6: #F0ECE5;
    --color7: #1F509A;
}*/

/*||||||Modern theme||||||*/
:root {
    /* --color1: #D91656; */
    --color1: #00b313;
    --color2: #FFEB55;
    /* --color2: #1a9fa0; */
    --color2a: #FBF5DD;
    --color3: #e9ecef;
    /* --color4: #041343; */
    /* --color4: #223964; */
    --color4: #141e3f;
    --color4a: #cfcfcf;
    --color4c: #565656;
    
    --color5: #000000; /* minor link color */
    --color6: white; /* majority link color */
    --color7: #cfcfcf; /* particle color */

    --color8: #d2b45b;

    --colorx1: #152f77; /* animation particle link color */
    --colorx2: white; /* animation canvas background color */
    --colorx3: #6a769a; /* animation particle color */

    --colorC: #ef8b00;
    --colorL: #191919; 
    --colorR: #eaeaea;

    --color-processing: #b658ec;
    --color-verifying: #5866ec;
    --color-printing: #4cd060;
    --color-shipped: #ecdd58;
    --color-delivered: #eca758;
    --color-cancelled: #e74c3c;
    --color-online: #464646;
}

:root {
    --font-montserrat: 'Montserrat', sans-serif; /* Similar to Helvetica, more circular */
    --font-courier-new: 'Courier New', monospace; /* used for less formal occations, like dialogue. USED FOR CONVERSATIONAL TEXTS */
    --font-tahoma: 'Tahoma', sans-serif; /* has less space between letters */
    --font-verdana: 'Verdana', sans-serif; /* easily readable, wider spacing between letters than Tahoma, relaxing */
    --font-helvetica: 'Helvetica', 'Arial', sans-serif; /* similar to Arial, slightly more "digitized". DEFAULT FONT */
    --font-garamond: 'Garamond', serif; /* elegant, used for formal occasions. DEFAULT OFFICIAL FONT */
    --font-palatino: 'Palatino', serif; /* test, similar to Garamond, but more readable */
    --font-bookman: 'Bookman', serif; /* test, similar to Garamond, but wider, more readable */
    --font-avant-garde: 'Avant Garde', sans-serif; /* test, similar to Futura */
    --font-sans-serif: sans-serif; /* test */
    --font-monospace: "Lucida Console", Monaco, monospace; /* test */
    --font-cursive: cursive; /* test */
    --font-fantasy: fantasy; /* test */
}

body {
    margin: 0;
    background-color: white;
}

header {
    width: 100%;
    min-width: 75rem; /* 1200px */
    
    position: sticky; /* Keep the top bar fixed */
    top: 0;
    background-color: var(--color4);
    
    z-index: 10000; /* Ensure it's above other elements */
}

.top-bar {
    width: 100%;
    height: 2.5rem; /* 40px */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    font-size: 0.9rem; /* Approx 14.4px on standard screens */
    font-family: var(--font-helvetica);
}


.left-nav {
    padding: 1.5625rem; /* 25px */
    display: flex;
    align-items: center;
    font-weight: bold;
}

.left-nav a, .header-create-dropdown > a  {
    width: auto;
    border-radius: 0.25rem; /* 4px */
    color: var(--color3);
    text-decoration: none;
    text-align: center;
    padding: 0 1.25rem; /* 20px */
    transition: background-color 0.3s ease;
}

.left-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.header-create-dropdown,
.header-modnverse-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.header-create-dropdown > a:hover,
.header-modnverse-dropdown > a:hover {
     background-color: rgba(255, 255, 255, 0.2); /* Keep hover effect on link */
}

.header-dropdown-menu {
    position: absolute;
    display: none;
    top: 1.75rem; /* 28px */
    left: 50%;
    transform: translateX(-50%);
    width: 8.125rem; /* 130px */
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); /* 8px 16px */
    padding: 0.25rem 0; /* 4px */
    gap: 0.25rem; /* 4px */
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.header-dropdown-menu.show {
    display: flex;
}

.header-dropdown-menu a {
    display: block;
    width: 90%;
    justify-self: center;
    padding: 0.375rem 0; /* 6px */
    color: var(--color4);
    text-decoration: none;
    cursor: default;
}

.header-dropdown-menu a:hover {
    background-color: #f0f0f0;
}

.right-nav {
    position: absolute;
    right: 0;
    padding: 1.5625rem; /* 25px */
    gap: 1.25rem; /* 20px */
    display: flex;
    align-items: center;
}

.right-nav a {
    background-color: #347adb;
    color: white;
    padding: 0.1875rem 0.9375rem; /* 3px 15px */
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px */
    opacity: 1;
    transition: background-color 0.3s ease;
}

.right-nav a:hover {
    background-color: hsl(215, 70%, 68%);
}

.right-nav span {
    max-width: 31.25rem; /* 500px */
    overflow: clip;
    color: white;
}

/* --- Progress Bar --- */
.progress-steps-container {
    position: relative;
    background-color: #fff;
    border-bottom: 0.0625rem solid var(--color4a);

    padding: 1.5rem 1rem;

    z-index: 0;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 50rem; /* 800px */
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.125rem; /* 2px */
    background-color: var(--color4a);
    transform: translateY(-50%);
    z-index: 1;
}

.progress-steps li {
    flex: 1;
    text-align: center;
    color: var(--color4a);
    font-family: var(--font-helvetica);
    font-weight: bold;
    font-size: 0.875rem; /* 14px */
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

.progress-steps li span {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    border-radius: 50%;
    background-color: #fff;
    border: 0.125rem solid var(--color4a); /* 2px */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem; /* 16px */
    transition: background-color 0.3s, border-color 0.3s;
}

/* Active and Completed States */
.progress-steps li.completed {
    color: var(--color4);
}

.progress-steps li.completed span {
    background-color: var(--color2);
    border-color: var(--color2);
    color: var(--color4);
}

.progress-steps li.active {
    color: var(--color4);
}

.progress-steps li.active span {
    background-color: var(--color1);
    border-color: var(--color1);
    color: var(--color4);
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    padding: 0.625rem; /* 10px */
    cursor: pointer;
    z-index: 1001;
}

.hamburger-box {
    width: 1.875rem; /* 30px */
    height: 1.5rem; /* 24px */
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 100%;
    height: 0.1875rem; /* 3px */
    background-color: var(--color3);
    border-radius: 0.125rem; /* 2px */
    position: absolute;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%)
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    left: 0;
}

.hamburger-inner::before {
    top: -0.5rem; /* -8px */
}

.hamburger-inner:after {
    top: 0.5rem; /* 8px */
}

.hamburger-manue.is-active .hamburger-inner::before {
    transform: translateY(0.5rem) rotate(45deg); /* 8px */
}

.hamburger-menu.is-active .hamburger-inner::after {
    transform: translateY(-0.5rem) rotate(-45deg); /* -8px */
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 3.75rem; /* 60px */
    left: 0;
    width: 100%;
    background-color: var(--color4);
    padding: 1.25rem; /* 20px */
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    z-index: 999;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

.mobile-nav.is-active {
    display: flex;
    transform: translateX(0);
}

.mobile-nav a,
.mobile-nav .mobile-nav-user,
.mobile-nav .mobile-nav-dropdown-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 0.875rem 0.375rem; /* 14px 6px */
    color: var(--color3);
    text-decoration: none;
    font-family: var(--font-helvetica);;
    font-size: 1.125rem; /* 18px */
    text-align: left;
}

.mobile-nav a:last-child {
    border-bottom: none;
}

.mobile-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mobile-nav hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0.9375rem 0; /* 15px */
    width: 100%;
}

.mobile-nav-dropdown {
    width: 100%;
}

.mobile-nav-dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-nav-dropdown-toggle span {
    display: inline-block;
    transition: transform 0.2s;
}

.mobile-nav-dropdown-toggle.open span {
    transform: rotate(90deg);
}

.mobile-nav-dropdown-menu {
    display: none;
    padding-left: 1.25rem; /* 20px */
}

.mobile-nav-dropdown-menu.show {
    display: block;
}


.login-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.login-modal-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.login-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #888;
}

#login-modal-content {
    padding: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    header {
        min-width: auto;
    }

    .top-bar {
        flex-direction: row;
        height: auto;
    }

    .right-nav {
        padding: 0.75rem; /* 12px */
        position: relative;
    }

    .right-nav span {
        max-width: 12.5rem; /* 200px */
    }

    .hamburger-menu {
        display: block;
    }

    .mobile-nav {
        top: 2.625rem; /* 42px */
        height: calc(100vh - 2.625rem);
    }

    .left-nav {
        display: none; /* Hide navigation on small screens */
    }

    .progress-steps-container {
        padding: 1rem;
    }

    .progress-steps li {
        /* font-size: 0.75rem; */
        /* Allow text to wrap if needed */
        word-break: break-word;
        line-height: 1.2;
    }

    .progress-steps li span {
        width: 1.75rem; /* 28px */
        height: 1.75rem; /* 28px */
        font-size: 0.875rem; /* 14px */
    }

    .login-modal-container {
        margin-top: 3rem;
        max-width: 98vw;
        width: 98vw;
        min-width: 0;
        border-radius: 0.75rem;
        padding: 0;
    }

    #login-modal-content {
        padding: 1rem 0.5rem;
    }

    .login-modal-close-btn {
        top: 0.5rem;
        right: 0.75rem;
        font-size: 2rem;
    }
}

/* --- START: Media Query for 4K / UHD Screens --- */
@media screen and (min-width: 2560px) {
    /* 
      Increase the base font size for larger screens. 
      The default is typically 16px. Setting it to 24px is a 1.5x increase.
      This will scale up all 'rem' units proportionally across the site.
    */
    html {
        font-size: 24px;
    }

    /* No specific overrides needed here because converting sizes to `rem`
       makes them scale automatically with the root font size. */
}

/* Footer Styles */
.site-footer {
    /* position: fixed;  removed so footer scrolls into view */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* z-index: 100; */
    background-color: black;
    opacity: 0.95;
    padding: 0.5rem 0;
    box-sizing: border-box;
    border-top: 1px solid #131313;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color3);
    text-decoration: underline;
}

.footer-separator {
    color: var(--color2);
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Add bottom padding to content to prevent overlap with footer */
/* #content-container {
    padding-bottom: 2rem;
} */

@media (max-width: 768px) {
    .footer-links a {
        font-size: 0.625rem;
    }
    
    .footer-separator {
        font-size: 0.625rem;
    }
}