/*
Theme Name: Euro Nominies
Description: EMYA 2026 Nominees WordPress Theme
Author: Assistant
Version: 1.0
*/

/* Define brand colors */
:root {
    --color-red: #e3032e;
    --color-purple: #3c388d;
    --color-skin: #f8c5b9;
    --font-primary: 'Inter', sans-serif;
    --sidebar-width: 326.1615px;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    /* Promijenjeno iz sivog u bijelo */
    font-family: var(--font-primary);
    /* Dodajemo 100% širine kako bi obuhvatilo cijeli ekran */
    width: 100%;
    overflow-x: hidden;
    /* Fix text anti-aliasing during transforms */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.artboard {
    /* Uklonjena maximalna granica od 1920px da savršeno pokrije ultrawide monitore */
    width: 100%;
    height: auto;
    /* Visina može zavisiti od sadržaja za sada, maknuli smo ekstremnu 14000px za bolji responsive */
    background-color: transparent;
    /* Nema potrebe da on ima svoju pozadinu kad je body bijel */
    position: relative;
    /* Dodato padding dugme da se ne skroluje unedogled bez potrebe */
    min-height: 100vh;
    overflow-x: hidden;
}

.hero-section {
    width: 100%;
    min-height: 100vh;
    background-image: url('/_external/i.postimg.cc/SK9N2DB3/pozadina123-01.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.plava-kocka {
    /* Tačne dimenzije */
    width: 996.8146px;
    height: 558.7865px;

    /* Rotacija (minus je tu da nagib ide ulijevo) */
    transform: rotate(-1.737deg);

    /* Boja pozadine kontejnera */
    background-color: var(--color-red);

    /* Responzivna zaštita da ne puca na manjim ekranima */
    max-width: 90vw;

    /* Centriranje unutrašnjih elemenata */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.plava-kocka-mobile {
    width: 100%;
    margin: 0;
    padding: 60px 15px 70px 15px; /* Reduced from 80px/90px to compensate for larger logo */
    background-color: var(--color-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transform: none; /* Nema rotacije za mobilnu verziju */
}

.plava-kocka-mobile .hero-titles,
.plava-kocka-mobile .hero-lang-container {
    transform: none !important;
}

.plava-kocka-mobile .hero-logo-img {
    height: clamp(156px, 23.4vh, 290px) !important; /* Increased by 50% (from 104px-195px) */
    width: auto !important;
}

.plava-kocka-mobile .hero-maintitle {
    font-size: clamp(12px, 3.5vw, 16px) !important;
    white-space: normal !important;
    margin-bottom: 20px !important;
}

.plava-kocka-mobile .hero-subtitle {
    font-size: clamp(14px, 4.5vw, 24px) !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: center !important;
}

.plava-kocka-mobile .hero-lang-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 25px !important;
}



.hero-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transform: rotate(1.737deg);
    margin-top: 30px; /* Moved significantly further up */
}

.hero-logo-img {
    height: 215px; /* Increased size by an additional ~10% */
    width: auto;
    object-fit: contain;
    margin-bottom: 5px; /* Space between logo and first title */
}

.hero-maintitle {
    color: #ffffff;
    font-size: 16pt;
    font-weight: 400;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 30px; /* Smanjeno sa 50px da EMYA2026 priđe bliže ali 'diše' */
}

.hero-subtitle {
    color: var(--color-skin);
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    border-top: 1.5px solid var(--color-skin);
    border-bottom: 1.5px solid var(--color-skin);
    padding: 8px 0 4px 0;
    white-space: nowrap;
    letter-spacing: 2px;
}

.hero-subtitle .text-white {
    color: #ffffff;
    margin: 0 12px 0 0;
    font-weight: 400; /* Inter Regular */
}

.hero-lang-container {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    transform: rotate(1.737deg);
    z-index: 5;
}

.lang-box {
    background-color: #ffffff;
    color: #3c388d;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 800;
    width: 180px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lang-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background-color: #f9f9f9;
}

.lang-box.active {
    background-color: var(--color-skin);
    color: #3c388d;
    box-shadow: none;
}

.search-group {
    display: flex;
    align-items: center;
    padding: 0 12px;
    /* Slightly reduced padding */
    gap: 10px;
    height: 100%;
}

.search-group.clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-group.clickable:hover {
    background-color: #f9f9f9;
}

/* Ensure hover background respects the rounded corners of the search container */
.search-group.clickable:nth-child(2) {
    border-radius: 0 0 0 0; /* Middle one stays square */
}

.search-group.clickable:nth-child(5) {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.search-group span {
    color: #333;
    font-size: 13px;
    /* Adjusted font size for smaller height */
    /* Light weight for Inter */
    font-weight: 300;
}

.search-group input {
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #333;
    width: 100%;
    /* Flexible width */
}

.search-group input::placeholder {
    color: #666;
}

.search-icon {
    color: var(--color-red);
    width: 16px;
    height: 16px;
}

.chevron-icon {
    color: var(--color-red);
    margin-left: 5px;
    width: 14px;
    height: 14px;
}

.search-divider {
    width: 1px;
    height: 22px;
    /* Adjusted divider height */
    background-color: var(--color-red);
}

.search-group:first-child {
    flex-grow: 1;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 400px;
    margin-top: 30px; 
    margin-bottom: 20px;
    z-index: 2;
}

.hero-red-block {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68%;
    height: 120px;
    background-color: #2b3990;
    z-index: 1;
}

.red-decoration-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68%;
    height: 99.5361px;
    background-color: #2b3990;
    z-index: 1;
}

.red-decoration-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15%; /* Smaller as per user image */
    height: 99.5361px;
    background-color: #2b3990;
    z-index: 1;
}

.hero-btn {
    background-color: #2b3990;
    /* EMF blue */
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
    width: fit-content;
}

.hero-btn:hover {
    background-color: #1e2866;
}

.second-section {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Remove background color for production */
    background-color: transparent;
    padding: 60px 0;
    /* Padding umjesto rigidne visine sekcije */
}

.third-section {
    width: 100%;
    height: 809.4179px;
    background-image: url('/_external/i.postimg.cc/gk0zqz9t/pozadina123-02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#nominees-list-section .third-section {
    background-image: url('/_external/i.postimg.cc/8PCpBp80/pozadina123-03.png');
}

.ljubicasta-kocka {
    width: 996.8146px;
    height: 558.7865px;
    background-color: var(--color-red);
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transform: rotate(-1.737deg);
}

.ljubicasta-kocka-mobile {
    width: 100%;
    margin: 60px 0 0 0; /* Pushed down by 60px (approx 20% visually) */
    padding: 80px 20px 140px 20px; /* Povećano za 40% prema dolje (sa 80px na 140px) */
    background-color: var(--color-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transform: none; /* Nema rotacije za mobilnu verziju */
}

.ljubicasta-kocka-mobile .banner,
.ljubicasta-kocka-mobile .host-content {
    width: 100% !important; /* Stretch to parent padding edges */
    max-width: 600px; /* Optional cap for very wide mobile screens */
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin-top: 40px !important;
    display: block; /* Use block to allow width: 100% to work correctly */
}

/* Normal sized button on mobile */
.ljubicasta-kocka-mobile .host-view-more {
    width: auto !important;
    padding: 16px 40px !important; /* Slightly larger vertical padding for better tap target */
    display: inline-block !important;
    margin: 40px auto 0 !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    text-align: center;
}

.ljubicasta-kocka-mobile .top-row {
    font-size: clamp(10px, 3.2vw, 15px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100% !important;
}

.ljubicasta-kocka-mobile .bottom-row {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important; /* Keep on one line to ensure flush edges */
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 10px 0 !important;
}

.ljubicasta-kocka-mobile .programme,
.ljubicasta-kocka-mobile .year {
    font-size: clamp(20px, 6vw, 32px) !important;
    margin: 0 !important; /* Remove any desktop margins */
    padding: 0 !important;
}

.ljubicasta-kocka-mobile .host-maintitle {
    font-size: clamp(10px, 3vw, 14px) !important;
    white-space: normal !important;
}

.ljubicasta-kocka-mobile .host-subtitle {
    font-size: clamp(20px, 5.5vw, 32px) !important;
    white-space: normal !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



.ljubicasta-kocka.ravna {
    transform: none;
}

.banner {
    font-family: 'Inter', sans-serif;
    display: inline-block;
    transform: rotate(1.737deg);
}

.top-row {
    font-size: 16pt; /* Povećano na zahtjev korisnika */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: normal; /* Koristimo justify za savršeno poravnanje */
    text-align: justify;
    text-align-last: justify;
    color: #ffffff;
    margin-bottom: 6px;
    width: 100%;
}

.divider {
    height: 2px;
    background-color: #eab79e;
    width: 100%;
}

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 6px 0;
}

.programme {
    font-size: 42px;
    font-weight: 700;
    color: #eab79e;
    margin-right: 40px;
}

.year {
    font-size: 42px;
    font-weight: 400;
    color: #ffffff;
}

.host-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Removing internal gaps to use padding/margins for precision */
    width: 720px; /* Fixed width to control alignment */
    max-width: 95%;
    text-align: center;
    transform: rotate(1.737deg); /* Counter-rotate to stay straight */
}

.host-maintitle {
    color: #ffffff;
    font-size: 11pt;
    font-weight: 400;
    letter-spacing: 5.5px;
    text-transform: uppercase;
    line-height: 1;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--color-skin);
    width: 100%;
    margin-bottom: 0;
}


.host-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-skin);
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--color-skin);
    padding: 10px 0 12px 0;
    letter-spacing: 2px;
    white-space: nowrap;
    width: 100%;
}



.host-view-more {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%) rotate(1.737deg); /* Counter-rotate to stay straight */
    background-color: var(--color-red);
    color: #ffffff;
    padding: 10px 40px;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    display: inline-block;
}



.host-view-more:hover {
    background-color: #c40228;
}



.text-skin {
    color: var(--color-skin);
}

.text-white {
    color: #ffffff;
    font-weight: 400; /* Regular per hero subtitle white text pattern */
}

.sixth-section {
    width: 100%;
    height: 809.4179px;
    background-image: url('pozadina.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.view-more-btn {
    position: absolute;
    bottom: 283.2963px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-red);
    color: #ffffff;
    width: 180px;
    height: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
    box-shadow: none;
}

.view-more-btn:hover {
    background-color: #c40228;
    transform: translateX(-50%) scale(1.1);
}

.ninth-section {
    width: 100%;
    height: 809.4179px;
    background-image: url('pozadina.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


.fourth-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: transparent;
    padding: 60px 0;
}

.content-container {
    /* 
       Umjesto fiksne širine i ogromnih margina od 516px, stavljamo u postotak (oko 46% širine). 
       Tako će uvijek biti responzivno i zauzimati središnji dio ekrana.
    */
    width: 100%;
    max-width: 890px;
    padding: 0 20px;
    /* Base padding for smaller screens */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* 
   Media Queries za Responzivnost: 
   Sve manje od ekrana laptopa
*/
@media (max-width: 1200px) {
    .content-container {
        max-width: 80%;
    }
}

.header-block {
    margin-bottom: 40px;
}

.purple-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-red);
    margin: 15px 0;
}

.main-title {
    color: var(--color-red);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 5px 0;
}

.main-title > span,
.main-title > span span {
    color: #000000;
}

.main-title > span.lang-en,
.main-title > span.lang-fr {
    color: var(--color-red);
}

.sub-title {
    color: #000000;
    font-size: 14px;
    font-weight: 800;
    margin: 5px 0;
}

.text-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-block h3 {
    font-size: 13px;
    font-weight: 800;
    color: #000;
    margin-top: 40px;
    /* Povećan razmak iznad */
    margin-bottom: 10px;
    /* Povećan razmak ispod podnaslova */
}

.text-block p {
    font-size: 13px;
    line-height: 1.6;
    color: #000;
    font-weight: 400;
}

.author-signature {
    margin-top: 15px;
    font-weight: 400;
}

.fourth-section-content {
    width: 100%;
    /* Agresivnije povlačenje linkova bliže ljubičastoj liniji (anuliranje donje margine header-bloka) */
    margin-top: -20px;
}

.museum-image-container {
    width: 100%;
    margin-top: 30px;
}

.image-zoom-wrapper {
    width: 100%;
    overflow: hidden;
    display: block;
}

.museum-hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.5s ease;
    /* Smooth zoom transition */
}

.image-zoom-wrapper:hover .museum-hero-image {
    transform: scale(1.05);
    /* Subtle zoom in */
}

/* Stilovi za tekst ispod slike / Caption and Paragraph styles */
.image-caption {
    font-size: 11px;
    color: #888888;
    /* Svjetlo siva boja prema slici */
    margin-top: 8px;
    /* Mali odmak od same slike */
    line-height: 1.4;
    font-weight: 300;
}

.museum-text-blocks {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Razmak između dva pasusa */
    margin-top: 25px;
    /* Razmak od caption teksta/slike */
}

.museum-text-blocks p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: #666666;
}

.action-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.action-links a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    /* Podebljan tekst po slici */
    transition: opacity 0.2s ease;
}

.action-links a:hover {
    opacity: 0.7;
}

.visit-link {
    color: var(--color-red);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.visit-link svg {
    color: var(--color-red);
}

.youtube-link {
    color: black;
}

.youtube-link span {
    font-size: 14px;
    font-weight: 800;
}

/* Stil za novu Lucide YouTube ikonicu usklađen inline */
.youtube-link svg {
    margin-left: 2px;
}

/* Response for smaller screens for action links */
@media (max-width: 500px) {
    .action-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .action-links a {
        white-space: normal !important;
    }
    
    .visit-link, .youtube-link {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    
    .visit-link, 
    .youtube-link span {
        font-size: 13px !important;
    }
    
    .action-links svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Navigation Sidebar Styles */
.sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: auto;
    max-height: 880.1281px;
    width: var(--sidebar-width);
    background-color: #3c388d;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* Cinematic Fade-In Animation */
@keyframes cinematicFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base state for animated elements */
.cinematic-fade {
    opacity: 0;
}

/* Scroll Reveal States */
.reveal-off {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.reveal-on {
    opacity: 1;
    transform: none;
}

/* Ensure rotated banners and host content retain their rotation when revealed */
.ljubicasta-kocka .banner.reveal-on,
.host-content.reveal-on {
    transform: rotate(1.737deg);
}

/* Delay modifiers for staggered reveals */
.delay-1 {
    transition-delay: 0.05s;
}

.delay-2 {
    transition-delay: 0.1s;
}

.delay-3 {
    transition-delay: 0.15s;
}

/* Trigger animation when body is loaded */
body.loaded .cinematic-fade {
    animation: cinematicFadeIn 0.6s ease-out forwards;
}

/* Rotated animation for titles and search */
@keyframes cinematicFadeInRotated {
    from {
        opacity: 0;
        transform: translateY(20px) rotate(1.737deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(1.737deg);
    }
}

body.loaded .plava-kocka .hero-titles.cinematic-fade,
body.loaded .plava-kocka .hero-lang-container.cinematic-fade,
body.loaded .hero-search-container.cinematic-fade {
    animation: cinematicFadeInRotated 0.6s ease-out forwards;
}

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    transform: translateY(20px);
    background-color: var(--color-red);
    color: white;
    border: none;
    border-radius: 50px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.2s;
    box-shadow: none;
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#back-to-top:hover {
    background-color: #c40228;
    transform: translateY(-3px);
    box-shadow: none;
}

/* Class added when sidebar is hidden */
.sidebar.collapsed {
    transform: translateY(-50%) translateX(100%);
}

.sidebar.force-hide {
    transform: translateY(-50%) translateX(200%) !important;
    opacity: 0;
    pointer-events: none;
}

.sidebar-toggle {
    position: absolute;
    right: 100%;
    top: 90px;
    background-color: var(--color-skin);
    color: #3c388d;
    border: none;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    min-width: 54px;
}

.sidebar.compact .sidebar-toggle {
    top: 50%;
    transform: translateY(-50%);
}

.sidebar-toggle svg {
    transition: transform 0.3s ease;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.sidebar-section {
    padding: 24px 24px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    cursor: pointer;
}

.sidebar-section h2 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0px;
}

.search-container {
    padding: 14px 24px;
}

.search-box {
    position: relative;
    width: 100%;
}

.search-box input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border-radius: 8px;
    border: none;
    font-family: var(--font-primary);
    font-size: 14px;
    outline: none;
    color: #333;
    font-weight: 500;
}

.search-box input::placeholder {
    color: #777;
    font-weight: 400;
}

.search-box .search-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-red);
}

.search-clear-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #777;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.search-clear-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--color-red);
}

/* Scroll indicator wrapper */
.museum-list-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.museum-list-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--color-red));
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: 0 0 4px 4px;
}

.museum-list-wrapper.at-bottom::after {
    opacity: 0;
}

/* Scrollable Museum List */
.museum-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin-bottom: 0;
    max-height: 560px;

    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.museum-list::-webkit-scrollbar {
    width: 4px;
}

.museum-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.museum-item {
    padding: 16px 24px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.museum-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.museum-item.pointer {
    cursor: pointer;
}

.sub-menu {
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hide mobile close button by default (Desktop) */
.mobile-close-sidebar {
    display: none !important;
}

.sub-item {
    font-size: 13px;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 400; /* Consistent base weight */
}

.sub-item.pointer {
    cursor: pointer;
}

.sub-item:hover {
    color: white;
}

.sub-item.active {
    background-color: #fac2b1; /* Light peach/skin color from image */
    color: #3c388d;
    margin: 0 -20px; /* Pull to edges */
    padding: 10px 20px; /* Restore padding vertically and horizontally */
    font-weight: 600; /* Normalized from 700 */
}

.museum-item.active {
    background-color: #fac2b1;
    color: #3c388d;
}

.museum-item .name {
    font-size: 13px;
    font-weight: 400; /* Consistent base weight */
    line-height: 1.4;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.museum-item.active .name {
    font-weight: 600; /* Normalized from 800 */
}

.museum-item .location {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.museum-item.active .location {
    color: var(--color-red);
}

/* Icon at bottom right */
.sidebar-footer {
    position: absolute;
    bottom: 16px;
    right: 20px;
    color: white;
    opacity: 0.8;
    cursor: pointer;
}

.sidebar-footer:hover {
    opacity: 1;
}

/* Board and Jury Section Styles */
.seventh-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.portimao-section {
    margin-top: -60px !important;
    padding-top: 0 !important;
}

.board-group {
    margin-bottom: 60px;
}

.board-title {
    color: var(--color-red);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.member {
    display: flex;
    flex-direction: column;
}

.member-header {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 2px;
}

.member-header strong {
    color: var(--color-red);
    font-weight: 800;
    text-transform: uppercase;
}

.member-header span {
    color: #333;
    font-weight: 400;
}

.member-desc {
    font-size: 12px;
    color: #666;
    font-weight: 300;
    line-height: 1.5;
}

/* Founding Partner Section Styles */
.partner-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.partner-title {
    color: var(--color-purple);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 40px;
    text-transform: uppercase;
    text-align: left;
}

.logo-container {
    width: 100%;
    max-width: 800px;
    /* Increased to accommodate logo grid */
    margin: 0 0 40px -4px;
    /* Pulling slightly left to align with text */
}

.supporting-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.supporting-list p {
    font-size: 13px;
    line-height: 1.4;
    color: #000;
    font-weight: 300;
}

.logo-container img {
    width: 100%;
    height: auto;
    display: block;
}

.partner-subtitle {
    color: var(--color-purple);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: left;
}

/* Response for smaller screens */
@media (max-width: 768px) {
    .partner-section {
        padding: 40px 0;
    }
}

/* Response for smaller screens */
@media (max-width: 768px) {
    .seventh-section {
        padding: 40px 0;
    }
}

/* Additional Links Section Styles */
.additional-links-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0 100px 0;
}

.additional-links-section .partner-title {
    margin-bottom: 40px;
    /* Reduced from 80px */
}

.additional-links-section .partner-title:last-child {
    margin-bottom: 0;
}

/* Mobile Header Styles */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #2b3990; /* Blue header band */
    box-shadow: none;
    pointer-events: auto;
    justify-content: space-between; /* Logo + hamburger s obje strane */
    align-items: center;
    padding: 0 20px;
    z-index: 1100;
}

.mobile-logo,
.mobile-title {
    display: block;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow: none;
}

.mobile-toggle svg {
    display: block;
    color: #ffffff;
    stroke: currentColor;
}
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    pointer-events: auto; /* Re-enable clicks just for the button */
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ffffff; /* Bijele linije hamburgera */
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Dynamic State Classes for JavaScript */
.mobile-header-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hamburger-btn.hamburger-white span {
    background-color: #ffffff;
}

/* Hamburger Active State (Turns into X) */
.hamburger-btn.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg); /* Adjust 10.5px based on the height and gap */
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Mobile Close Arrow inside Sidebar */
/* ======================================================
   MOBILE SIDEBAR OVERHAUL (v3) - CLEAN & SIMPLE
   ====================================================== */
@media (max-width: 992px) {

    .mobile-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1300 !important; /* Higher than sidebar (1200) to keep hamburger visible */
    }

    .artboard {
        padding-top: 0 !important;
    }

    /* Fix for huge word gaps in banner on mobile */
    .top-row {
        font-size: clamp(10px, 2.9vw, 16px) !important;
        letter-spacing: 1.5px !important; /* Spread letters to reduce word gaps */
    }

    /* Fixed mobile sidebar container - FULL SCREEN */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: #3c388d !important;
        z-index: 1200 !important;
        box-shadow: none !important;
        transform: translateX(0) !important; /* Open by default when not collapsed */
        transition: transform 0.3s ease !important;
        
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important;
        padding-top: 80px !important; /* Space for the header/X button */
        padding-bottom: 20px !important;
    }

    .sidebar.collapsed {
        transform: translateX(110%) !important; /* Offscreen when collapsed */
    }

    /* Consolidate scrolling on the main sidebar container */
    .sidebar-content {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Keep lists flowing naturally */
    .museum-list {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    .sub-menu {
        overflow: visible !important;
    }

    /* Background Scroll Lock Class */
    .stop-scroll {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Adjust Back to Top position on mobile */
    #back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        z-index: 10000 !important;
    }


    .hero-search-container {
        width: 90% !important;
        bottom: 279.04px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .hero-actions {
        width: 90% !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 600px) {
    .sidebar {
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
    }

    .view-more-btn {
        width: 180px !important;
        font-size: 12px !important;
    }
}

/* National Correspondents Styles */
.correspondents-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

.correspondents-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: -10px;
    /* Pulling closer to header */
    padding-bottom: 50px;
    /* Added spacing from next section */
}

.correspondents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    transition: max-height 0.5s ease-in-out;
    align-items: start;
}

.correspondent-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(60, 56, 141, 0.1);
}

.correspondent-item:last-child {
    border-bottom: none;
}

/* Restore the border for the last item in the first grid if the section is expanded */
.correspondents-grid.expanded .correspondent-item:last-child {
    border-bottom: 1px solid rgba(60, 56, 141, 0.1);
}

/* On desktop, remove border from the last two items if they form the bottom row */
@media (min-width: 993px) {
    .correspondents-grid:not(.expanded) .correspondent-item:nth-last-child(1),
    .correspondents-grid:not(.expanded) .correspondent-item:nth-last-child(2):nth-child(odd),
    .hidden-correspondents.show .correspondent-item:nth-last-child(1),
    .hidden-correspondents.show .correspondent-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }
}

.correspondent-item .country {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-purple);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.correspondent-item .name {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

.correspondent-item .position {
    font-size: 13px;
    color: #4a4a4a;
    line-height: 1.4;
    font-weight: 300;
}

.hidden-correspondents {
    display: none;
}

.hidden-correspondents.show {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

/* 2-Column layout for desktop */
@media (min-width: 993px) {
    .correspondents-grid,
    .hidden-correspondents.show {
        grid-template-columns: 1fr 1fr;
        column-gap: 80px;
        row-gap: 25px;
    }
}

.view-more-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
    /* Reduced from 20px to move it closer */
}

.correspondents-view-more {
    background: none;
    color: var(--color-purple);
    /* Changed to purple */
    padding: 0;
    border-radius: 0;
    font-family: var(--font-primary);
    font-weight: 800;
    /* Ensured extra bold */
    font-size: 13px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: underline;
}

.correspondents-view-more:hover {
    background: none;
    transform: none;
    opacity: 0.7;
}

/* Award Winners Styles */
.awards-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: -10px;
    padding-bottom: 50px;
}

.award-year-block {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 40px;
    align-items: start;
}

/* 2-Column layout for desktop */
@media (min-width: 993px) {
    .award-year-block {
        grid-template-columns: 1fr 1fr;
        column-gap: 80px;
        row-gap: 0;
    }
    
    .award-year-title {
        grid-column: 1 / -1;
    }
}

.award-year-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-purple);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-purple);
    padding-bottom: 5px;
    display: inline-block;
}

.award-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(60, 56, 141, 0.1);
}

.award-item:last-child {
    border-bottom: none;
}

.award-category {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-purple);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.award-winner {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.award-winner-desc {
    font-size: 13px;
    color: #4a4a4a;
    font-weight: 300;
    margin-top: 2px;
}

.hidden-awards {
    display: none;
    flex-direction: column;
}

.hidden-awards.show {
    display: flex;
}

.awards-view-all {
    background: none;
    color: var(--color-purple);
    padding: 0;
    border-radius: 0;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: underline;
    margin-top: 5px;
}

.awards-view-all:hover {
    opacity: 0.7;
}

/* =====================
   Mobile Box Layout (Blue & Purple)
   ===================== */
@media (max-width: 768px) {
    .third-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-section {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    .hero-section .hero-actions {
        flex-direction: row !important; /* Side by side outside the box */
        width: 90% !important;
        max-width: 100% !important;
        justify-content: space-evenly !important;
        gap: 10px !important;
        margin-top: 40px !important; /* Još bliže plavoj kocki */
        margin-bottom: 30px !important; 
        z-index: 10 !important;
        position: relative !important;
    }

    .hero-section .hero-btn {
        background-color: var(--color-red) !important; /* Red background */
        color: #ffffff !important; /* White text */
        flex: 1 !important; /* Stretch evenly */
        padding: 12px 10px !important;
        font-size: clamp(10px, 2.5vw, 14px) !important; /* Smaller text to fit side-by-side */
        text-align: center !important;
    }


    
    .hero-red-block {
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important; /* Puna sirina ekrana */
        height: 60px !important; /* Ista visina kao navigation bar */
        background-color: #2b3990 !important; /* Blue footer band */
        z-index: 3 !important;
    }

    .red-decoration-left, .red-decoration-right {
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Fixed Search Bar for Mobile */
    .hero-search-container {
        display: none !important;
    }

    .search-group {
        padding: 0 8px !important;
        gap: 8px !important;
    }

    .search-group span, .search-group input {
        font-size: 11px !important;
    }

    .search-icon, .chevron-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .search-divider {
        height: 18px !important;
        margin: 0 4px !important;
    }

}



@media (max-width: 500px) {
    .action-links {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
        flex-wrap: nowrap;
    }
    
    .action-links a {
        white-space: nowrap !important;
    }

    .visit-link, 
    .youtube-link span {
        font-size: 11px !important;
    }
    
    .action-links svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* =======================================================
   ANDROID SPECIFIC FIXES
   Aktivira se samo kada PHP detektuje Android operativni sistem
   ======================================================= */

body.is-android,
body.is-android .artboard {
    overflow-x: hidden !important;
    width: 100% !important;
}

body.is-android .hero-section {
    height: 100dvh !important;
    justify-content: space-between !important;
    padding: 60px 0 40px 0 !important;
}

body.is-android .plava-kocka,
body.is-android .ljubicasta-kocka {
    width: min(996px, 92vw) !important;
    height: auto !important;
    padding: 40px 20px !important;
    flex-shrink: 0 !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    outline: 1px solid transparent !important;
}

body.is-android .hero-titles {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    outline: 1px solid transparent !important;
}

body.is-android .hero-logo-img {
    height: clamp(100px, 15vh, 215px) !important;
    width: auto !important;
}

body.is-android .hero-maintitle {
    white-space: normal !important;
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.4 !important;
}

body.is-android .hero-subtitle {
    white-space: normal !important;
    font-size: clamp(20px, 6.5vw, 38px) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    line-height: 1.4 !important;
}

body.is-android .hero-actions {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

body.is-android .banner {
    width: 100% !important;
    padding: 0 10px !important;
}

body.is-android .programme,
body.is-android .year {
    font-size: clamp(24px, 8vw, 42px) !important;
}

/* Search Bar Dropdown */
.hero-search-container {
    position: relative;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 99999; /* Max z-index */
    display: none; /* Shown via JS */
    max-height: 260px; /* Visually shows ~3 items, indicates scroll */
    overflow-y: auto !important;
    white-space: normal;
    padding-bottom: 10px;
    animation: dropdownSlideIn 0.3s ease-out;
    pointer-events: auto !important;
    touch-action: pan-y;
}

/* Stable Scroll Lock */
body.stop-scroll {
    overflow: hidden !important;
}

html.stop-scroll {
    overflow: hidden !important;
}

.hero-actions.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

@keyframes dropdownSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    padding: 15px 20px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: 1px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 5px;
}

.dropdown-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    text-align: left;
}

.dropdown-item:hover {
    background-color: #fcf1ef;
    border-left-color: var(--color-red);
}

.dropdown-item .museum-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.dropdown-item .museum-location {
    display: block;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
}

/* Custom Scrollbar for dropdown */
.search-results-dropdown::-webkit-scrollbar {
    width: 6px;
}
.search-results-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.search-results-dropdown::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}
.search-results-dropdown::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

@media (max-width: 600px) {
    .hero-lang-container {
        display: flex !important;
        margin-top: 20px !important;
    }
    .lang-box {
        width: 130px !important;
        height: 36px !important;
        font-size: 12px !important;
        border-radius: 18px !important;
    }
}

/* Nominees list styling */
.nominees-list-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px 0 80px 0;
}

.nominees-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.nominee-item {
    display: flex;
    flex-direction: column;
}

.nominee-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-red);
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 2px;
}

.nominee-location {
    font-size: 12px;
    color: #000000;
    font-weight: 300;
    line-height: 1.5;
}

/* Login Overlay Styles */
body.logged-out {
    overflow: hidden !important;
    height: 100vh !important;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('ruze.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.login-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: loginFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-red);
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.login-subtitle {
    font-size: 14px;
    color: #555555;
    margin-bottom: 32px;
    font-weight: 400;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333333;
    letter-spacing: 0.5px;
}

.input-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: #333333;
    background-color: rgba(255, 255, 255, 0.9);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(227, 3, 46, 0.15);
}

.login-error {
    font-size: 13px;
    color: var(--color-red);
    font-weight: 600;
    margin-top: 4px;
    text-align: center;
}

.login-btn {
    width: 100%;
    padding: 16px;
    background-color: var(--color-red);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-btn:hover {
    background-color: #bd0224;
    box-shadow: 0 8px 20px rgba(227, 3, 46, 0.3);
}

.login-btn:active {
    transform: scale(0.98);
}



/* Language Switching */
body[data-lang="en"] .lang-fr { display: none !important; }
body[data-lang="fr"] .lang-en { display: none !important; }