/* FOUC Prevention CSS */

/* Hide navigation elements until page is fully loaded */
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-menu,
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-item,
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-arrow {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

/* ENHANCED: Hide navbar icon labels until page is fully loaded - Prevent massive text flash */
body:not(.content-loaded):not(.navbar-loaded) .icon-label,
body:not(.content-loaded):not(.navbar-loaded) .mobile-bottom-nav-item span:not(.cart-count):not(.wishlist-count),
body:not(.content-loaded):not(.navbar-loaded) .icon-with-label .icon-label,
body:not(.content-loaded):not(.navbar-loaded) .navbar-icons .icon-label,
body:not(.content-loaded):not(.navbar-loaded) .navbar-icons span:not(.cart-count):not(.wishlist-count) {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: scale(0) translateY(10px) !important;
    transition: none !important;
}

/* Ensure dropdown menus stay properly positioned during load */
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown {
    position: relative !important;
}

body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
}

/* Show navbar elements after navbar is loaded (faster) OR page is fully loaded */
body.navbar-loaded .nav-dropdown .dropdown-menu,
body.navbar-loaded .nav-dropdown .dropdown-item,
body.navbar-loaded .nav-dropdown .dropdown-arrow,
body.content-loaded .nav-dropdown .dropdown-menu,
body.content-loaded .nav-dropdown .dropdown-item,
body.content-loaded .nav-dropdown .dropdown-arrow {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

body.navbar-loaded .icon-label,
body.navbar-loaded .mobile-bottom-nav-item span:not(.cart-count):not(.wishlist-count),
body.content-loaded .icon-label,
body.content-loaded .mobile-bottom-nav-item span:not(.cart-count):not(.wishlist-count) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Ensure smooth transitions for navbar elements */
body.navbar-loaded .nav-dropdown .dropdown-menu,
body.content-loaded .nav-dropdown .dropdown-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

body.navbar-loaded .icon-label,
body.navbar-loaded .mobile-bottom-nav-item span,
body.content-loaded .icon-label,
body.content-loaded .mobile-bottom-nav-item span {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

/* Prevent layout shift during navbar load */
.icon-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 40px !important;
}

.nav-dropdown {
    position: relative !important;
    display: inline-block !important;
}

/* Hide progress bar elements until page is fully loaded - Prevent layout shift */
body:not(.content-loaded):not(.navbar-loaded) .luxury-progress-container,
body:not(.content-loaded):not(.navbar-loaded) .luxury-order-progress,
body:not(.content-loaded):not(.navbar-loaded) .luxury-progress-step {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease !important;
}

/* Hide hero carousel elements until page is fully loaded - EXCEPT ARROWS ON MOBILE */
#hero-slideshow .carousel-inner,
#hero-slideshow .carousel-indicators {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

/* Show arrows immediately on mobile, hide only on desktop until loaded */
@media (min-width: 769px) {
    #hero-slideshow .carousel-control-prev,
    #hero-slideshow .carousel-control-next {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.5s ease, visibility 0.5s ease !important;
    }
}

/* Hide carousel images and content until loaded */
body:not(.content-loaded) #hero-slideshow .carousel-item img,
body:not(.content-loaded) #hero-slideshow .carousel-caption,
body:not(.content-loaded) #hero-slideshow h1,
body:not(.content-loaded) #hero-slideshow p,
body:not(.content-loaded) #hero-slideshow .eco-btn,
body:not(.content-loaded) #hero-slideshow .btn {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure hero carousel has proper structure during load */
#hero-slideshow {
    position: relative !important;
    overflow: hidden !important;
    min-height: 400px !important;
    background-color: #f8f9fa !important;
}

/* Hide category overlays until page is fully loaded */
.category-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    color: white !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

/* Ensure category cards have proper positioning */
.category-card {
    position: relative !important;
    overflow: hidden !important;
}

/* Show progress bar elements after page loads */
body.content-loaded .luxury-progress-container,
body.content-loaded .luxury-order-progress,
body.content-loaded .luxury-progress-step,
body.navbar-loaded .luxury-progress-container,
body.navbar-loaded .luxury-order-progress,
body.navbar-loaded .luxury-progress-step {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease !important;
}

/* Show all elements after page loads */
body.content-loaded #hero-slideshow .carousel-inner,
body.content-loaded #hero-slideshow .carousel-indicators,
.category-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Show arrows on desktop after loaded */
@media (min-width: 769px) {
    body.content-loaded #hero-slideshow .carousel-control-prev,
    body.content-loaded #hero-slideshow .carousel-control-next {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

body.content-loaded #hero-slideshow .carousel-item img,
body.content-loaded #hero-slideshow .carousel-caption,
body.content-loaded #hero-slideshow h1,
body.content-loaded #hero-slideshow p,
body.content-loaded #hero-slideshow .eco-btn,
body.content-loaded #hero-slideshow .btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide text content until styles are loaded */
body:not(.content-loaded) .category-overlay h3,
body:not(.content-loaded) .category-overlay p,
body:not(.content-loaded) .category-overlay span {
    display: none !important;
}

/* Additional protection for text elements */
body:not(.content-loaded) #categories-showcase h3,
body:not(.content-loaded) #categories-showcase p,
body:not(.content-loaded) #categories-showcase .btn,
body:not(.content-loaded) #categories-showcase .eco-btn {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.content-loaded #categories-showcase h3,
body.content-loaded #categories-showcase p,
body.content-loaded #categories-showcase .btn,
body.content-loaded #categories-showcase .eco-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

/* Prevent text from appearing at top-left during load */
#categories-showcase .category-overlay *,
#hero-slideshow * {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Emergency fallback - ensure hero section shows content after 2 seconds */
@keyframes emergency-show {
    to {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

#hero-slideshow .carousel-inner {
    animation: emergency-show 0.1s ease-in-out 2s forwards;
}

/* Hide mobile overlay until styles have loaded */
body:not(.content-loaded) .mobile-sidebar-overlay,
body:not(.content-loaded) #mobile-sidebar-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Show overlay once loaded */
body.content-loaded .mobile-sidebar-overlay,
body.content-loaded #mobile-sidebar-overlay {
    opacity: 1 !important;
    visibility: visible !important;
} 

/* Enhanced emergency fallback for navbar elements */
@keyframes navbar-emergency-show {
    to {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* Apply emergency animation only to elements that haven't been shown yet */
body:not(.navbar-loaded):not(.content-loaded) .nav-dropdown .dropdown-menu,
body:not(.navbar-loaded):not(.content-loaded) .nav-dropdown .dropdown-item,
body:not(.navbar-loaded):not(.content-loaded) .nav-dropdown .dropdown-arrow,
body:not(.navbar-loaded):not(.content-loaded) .icon-label,
body:not(.navbar-loaded):not(.content-loaded) .mobile-bottom-nav-item span:not(.cart-count):not(.wishlist-count) {
    animation: navbar-emergency-show 0.1s ease-in-out 0.5s forwards;
}



/* Emergency fallback - force icon labels visible after 2 seconds */
@keyframes emergency-icon-reveal {
    to {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: scale(1) !important;
    }
}

body:not(.navbar-loaded):not(.content-loaded) .icon-label,
body:not(.navbar-loaded):not(.content-loaded) .navbar-icons span:not(.cart-count):not(.wishlist-count) {
    animation: emergency-icon-reveal 0.1s ease-in-out 2s forwards;
} 

/* ==========================================================================
   SPECIFIC FOUC PREVENTION - CONSOLIDATED RULES
   ========================================================================== */

/* ==========================================================================
   MACRO SIDEBAR FOUC PREVENTION - REMOVED - MANAGED BY MACRO PANEL JS
   ========================================================================== */

/* Macro sidebar loading states are now managed entirely by cart-macro-panel.js */

/* ==========================================================================
   NAVBAR ICON LABELS FOUC PREVENTION
   ========================================================================== */

/* Hide all navbar icon labels during page load to prevent massive text flash */
body:not(.content-loaded):not(.navbar-loaded) .icon-label,
body:not(.content-loaded):not(.navbar-loaded) .mobile-bottom-nav-item span:not(.cart-count):not(.wishlist-count),
body:not(.content-loaded):not(.navbar-loaded) .icon-with-label .icon-label,
body:not(.content-loaded):not(.navbar-loaded) .navbar-icons .icon-label {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: scale(0) !important;
}

/* Ensure cart and wishlist counts remain visible */
.cart-count,
.wishlist-count {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: opacity 0.3s ease !important;
}

/* ==========================================================================
   DROPDOWN MENU FOUC PREVENTION
   ========================================================================== */

/* Hide all dropdown content during page load */
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-menu,
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-item,
body:not(.content-loaded):not(.navbar-loaded) .nav-dropdown .dropdown-arrow,
body:not(.content-loaded):not(.navbar-loaded) .dropdown-menu,
body:not(.content-loaded):not(.navbar-loaded) .dropdown-item,
body:not(.content-loaded):not(.navbar-loaded) #tools-menu,
body:not(.content-loaded):not(.navbar-loaded) #about-menu,
body:not(.content-loaded):not(.navbar-loaded) #tools-menu .dropdown-item,
body:not(.content-loaded):not(.navbar-loaded) #about-menu .dropdown-item,
body:not(.content-loaded):not(.navbar-loaded) .navbar-nav .dropdown-menu,
body:not(.content-loaded):not(.navbar-loaded) .navbar-nav .dropdown-item {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: scale(0) translateY(-20px) !important;
    transition: none !important;
}

/* ==========================================================================
   REMOVE DROPDOWN HOVER BACKGROUND BOXES
   ========================================================================== */

/* Override Bootstrap dropdown hover backgrounds - Remove white/cream boxes */
.dropdown-menu {
    --bs-dropdown-link-hover-bg: transparent !important;
    --bs-dropdown-link-active-bg: transparent !important;
    --bs-dropdown-link-hover-color: var(--main-gold) !important;
    --bs-dropdown-link-active-color: var(--main-gold) !important;
}

/* Force transparent backgrounds on all dropdown items */
.dropdown-item,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active,
.nav-dropdown .dropdown-item,
.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus,
.nav-dropdown .dropdown-item:active,
#tools-menu .dropdown-item,
#tools-menu .dropdown-item:hover,
#tools-menu .dropdown-item:focus,
#tools-menu .dropdown-item:active,
#about-menu .dropdown-item,
#about-menu .dropdown-item:hover,
#about-menu .dropdown-item:focus,
#about-menu .dropdown-item:active {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Keep text color changes on hover but remove background */
.dropdown-item:hover,
.dropdown-item:focus,
.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus,
#tools-menu .dropdown-item:hover,
#tools-menu .dropdown-item:focus,
#about-menu .dropdown-item:hover,
#about-menu .dropdown-item:focus {
    color: var(--main-gold) !important;
}

/* ==========================================================================
   REMOVE MACROS BUTTON HOVER BOX (DESKTOP ONLY)
   ========================================================================== */

/* Set explicit default colors for navbar icons to prevent black flash */
@media (min-width: 1231px) {
    .navbar-icons,
    .navbar-icons a,
    .navbar-icons button,
    .navbar-icons .icon-with-label,
    .navbar-icons .macro-panel-trigger,
    .navbar-icons .icon-label,
    .navbar-icons span:not(.cart-count):not(.wishlist-count),
    .navbar-icons i {
        color: var(--secondary-color) !important;
        transition: none !important; /* Remove color transitions that cause flash */
    }

    /* Force all child elements to inherit the correct color */
    .navbar-icons *:not(.cart-count):not(.wishlist-count) {
        color: inherit !important;
        transition: none !important;
    }

    /* Disable ALL transitions on navbar elements to prevent flash */
    .navbar-icons,
    .navbar-icons *,
    .navbar-icons a,
    .navbar-icons button,
    .navbar-icons i,
    .navbar-icons span,
    .navbar-icons .icon-label {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    /* Override button hover styles for macro panel trigger - DESKTOP ONLY */
    .macro-panel-trigger:hover,
    .icon-with-label:hover,
    button.macro-panel-trigger:hover,
    button.icon-with-label:hover,
    .navbar-icons .macro-panel-trigger:hover,
    .navbar-icons .icon-with-label:hover {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: var(--main-gold) !important;
        transform: translateY(-2px) !important;
        text-decoration: none !important;
        transition: none !important; /* No transition to prevent flash */
    }

    /* Make sure desktop icons turn gold on hover, not black */
    .navbar-icons .macro-panel-trigger:hover i,
    .navbar-icons .icon-with-label:hover i,
    .macro-panel-trigger:hover i,
    .icon-with-label:hover i {
        color: var(--main-gold) !important;
        transition: none !important;
    }

    /* Make sure desktop text labels also turn gold on hover, not black */
    .navbar-icons .macro-panel-trigger:hover .icon-label,
    .navbar-icons .icon-with-label:hover .icon-label,
    .macro-panel-trigger:hover .icon-label,
    .icon-with-label:hover .icon-label,
    .navbar-icons .macro-panel-trigger:hover span,
    .navbar-icons .icon-with-label:hover span,
    .macro-panel-trigger:hover span,
    .icon-with-label:hover span {
        color: var(--main-gold) !important;
        transition: none !important;
    }

    /* Ultra-specific selectors for ALL navbar elements on hover */
    .navbar-icons a:hover,
    .navbar-icons a:hover *,
    .navbar-icons button:hover,
    .navbar-icons button:hover *,
    .navbar-icons .icon-with-label:hover,
    .navbar-icons .icon-with-label:hover *,
    .navbar-icons .macro-panel-trigger:hover,
    .navbar-icons .macro-panel-trigger:hover * {
        color: var(--main-gold) !important;
        transition: none !important;
    }
}

/* Mobile navigation icon hover fix - prevent black flash */
@media (max-width: 1230px) {
    .navbar-icons,
    .navbar-icons a,
    .navbar-icons button,
    .navbar-icons .icon-with-label,
    .navbar-icons .macro-panel-trigger,
    .navbar-icons .account-icon,
    .navbar-icons .icon-label,
    .navbar-icons span:not(.cart-count):not(.wishlist-count),
    .navbar-icons i {
        color: var(--secondary-color) !important;
        transition: none !important;
    }

    /* Mobile hover states - all turn gold */
    .navbar-icons a:hover,
    .navbar-icons a:hover *,
    .navbar-icons button:hover,
    .navbar-icons button:hover *,
    .navbar-icons .icon-with-label:hover,
    .navbar-icons .icon-with-label:hover *,
    .navbar-icons .account-icon:hover,
    .navbar-icons .account-icon:hover *,
    .navbar-icons .account-icon a:hover,
    .navbar-icons .account-icon a:hover *,
    .account-icon:hover,
    .account-icon:hover *,
    .account-icon a:hover,
    .account-icon a:hover * {
        color: var(--main-gold) !important;
        transition: none !important;
    }
}

/* Force remove all button styling from navbar icon buttons - DESKTOP ONLY */
@media (min-width: 1231px) {
    .navbar-icons button,
    .navbar-icons button:hover,
    .navbar-icons button:focus,
    .navbar-icons button:active {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 0 !important;
        padding: 0.5rem !important;
    }
}

/* MOBILE MACROS TAB FLASH PREVENTION - Very specific selector */
@media (max-width: 1230px) {
    #openMacroPanel.macro-panel-trigger.mobile-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ==========================================================================
   MOBILE MACRO BUTTON RED BOX PREVENTION
   ========================================================================== */

/* Hide mobile macro button completely during page load to prevent red box flash */
body:not(.content-loaded):not(.navbar-loaded) .mobile-bottom-nav .macro-panel-trigger-mobile,
body:not(.content-loaded):not(.navbar-loaded) #openMacroPanelMobile,
body:not(.content-loaded):not(.navbar-loaded) button.macro-panel-trigger-mobile {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: scale(0) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Force remove all button styling from mobile macro button */
.mobile-bottom-nav .macro-panel-trigger-mobile,
#openMacroPanelMobile,
button.macro-panel-trigger-mobile {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400 !important;
}

/* Ultra-specific override for Macros button font to match other nav items */
body .mobile-bottom-nav button#openMacroPanelMobile.mobile-bottom-nav-item.macro-panel-trigger-mobile,
html body .mobile-bottom-nav #openMacroPanelMobile.mobile-bottom-nav-item,
html body button#openMacroPanelMobile.macro-panel-trigger-mobile,
html body #openMacroPanelMobile {
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400 !important;
}

/* Force span text inside macro button */
body .mobile-bottom-nav button#openMacroPanelMobile span,
html body #openMacroPanelMobile span {
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400 !important;
}

/* Nuclear targeting: ALL bottom nav text spans must use consistent font */
html body .mobile-bottom-nav .mobile-bottom-nav-item span,
html body .mobile-bottom-nav-item span,
body .mobile-bottom-nav span:not(.cart-count):not(.wishlist-count),
html body .mobile-bottom-nav span:not(.cart-count):not(.wishlist-count) {
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400 !important;
    font-size: 0.7rem !important;
}

/* Ultra-specific: Target the exact Macros span */
html body .mobile-bottom-nav button#openMacroPanelMobile.macro-panel-trigger-mobile span,
body .mobile-bottom-nav #openMacroPanelMobile span {
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400 !important;
    font-size: 0.7rem !important;
}

/* Force remove hover/focus/active states that could cause red box */
.mobile-bottom-nav .macro-panel-trigger-mobile:hover,
.mobile-bottom-nav .macro-panel-trigger-mobile:focus,
.mobile-bottom-nav .macro-panel-trigger-mobile:active,
#openMacroPanelMobile:hover,
#openMacroPanelMobile:focus,
#openMacroPanelMobile:active,
button.macro-panel-trigger-mobile:hover,
button.macro-panel-trigger-mobile:focus,
button.macro-panel-trigger-mobile:active {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    color: inherit !important;
    transition: none !important;
}

/* Make macro button icon behave like other nav items - turn primary color on hover */
.mobile-bottom-nav .macro-panel-trigger-mobile:hover i,
.mobile-bottom-nav .macro-panel-trigger-mobile:active i,
.mobile-bottom-nav .macro-panel-trigger-mobile:focus i,
#openMacroPanelMobile:hover i,
#openMacroPanelMobile:active i,
#openMacroPanelMobile:focus i {
    color: var(--primary-color) !important;
}

/* Remove custom desktop macro panel hover styles */
.macro-panel-trigger:hover,
.icon-with-label:hover,
button.macro-panel-trigger:hover,
button.icon-with-label:hover,
.navbar-icons .macro-panel-trigger:hover,
.navbar-icons .icon-with-label:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    transform: none !important;
    text-decoration: none !important;
    transition: none !important;
}

/* ==========================================================================
   HIDE OTHER PAGE LOADERS WHEN MACRO PANEL IS ACTIVE - MANAGED BY JS
   ========================================================================== */

/* All loader hiding is now managed by cart-macro-panel.js to avoid positioning issues */

/* ==========================================================================
   PROFILE PAGE LOGO FOUC PREVENTION & SIZING
   ========================================================================== */

/* Hide profile logo completely during page load to prevent size flashing */
body.profile-page:not(.content-loaded):not(.navbar-loaded) .navbar-brand img,
body.profile-page:not(.navbar-loaded) .navbar-brand img,
body.profile-page:not(.navbar-loaded) .navbar-brand img {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transform: scale(0) !important;
    transition: none !important;
}

/* Show profile logo smoothly after page loads */
body.profile-page.content-loaded .navbar-brand img,
body.profile-page.navbar-loaded .navbar-brand img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: scale(1) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

/* Profile logo sizing - mobile (smaller with proper 3.82:1 aspect ratio) */
@media (max-width: 768px) {
    body.profile-page .navbar-brand img {
        height: 28px !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        object-fit: cover !important;
        aspect-ratio: 3.82 / 1 !important;
    }
}

/* Profile logo sizing - desktop (proper 3.82:1 aspect ratio) */
@media (min-width: 769px) {
    body.profile-page .navbar-brand img {
        height: 42px !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        object-fit: cover !important;
        aspect-ratio: 3.82 / 1 !important;
    }
}

/* Force consistent sizing during all loading states */
body.profile-page .navbar-brand img {
    object-fit: cover !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}