@import url('variables.css');

/**
 * IFINSTA Ultra Sleek Header & Topbar Styles
 *
 * Premium aesthetics with:
 * - Smooth micro-animations
 * - Glass morphism effects
 * - Low-friction interactions
 * - Dark/light mode support
 */

/* ==========================================================================
   HEADER & TOPBAR STYLES
   Uses ifinsta-* prefixed variables from variables.css
   ========================================================================== */

/* ==========================================================================
   TOPBAR BASE
   ========================================================================== */

.topbar,
.ifinsta-topbar {
    position: fixed;
    top: 0;
    left: var(--ifinsta-sidebar-width, 260px);
    right: 0;
    height: var(--ifinsta-topbar-height);
    background: var(--ifinsta-topbar-bg);
    border-bottom: 1px solid var(--ifinsta-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ifinsta-space-4);
    z-index: var(--ifinsta-z-sidebar, 400);
    /* Above sidebar - using standardized z-index scale */
    transition: transform var(--ifinsta-transition-base);
    max-width: 100vw;
}

body.no-scroll,
body.ifinsta-no-scroll {
    overflow: hidden;
    touch-action: none;
}

body.profile-prompt-lock,
body.ifinsta-profile-prompt-lock {
    overflow: hidden;
    touch-action: none;
}

@media (max-width: 768px) {
    .topbar,
    .ifinsta-topbar {
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        padding: 0 var(--ifinsta-space-3);
        /* Safe padding 12px */
    }

    .app-nav__items,
.app-nav__items,
.ifinsta-app-nav__items {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--ifinsta-space-3);
    }

    .app-nav__items::-webkit-scrollbar,
    .ifinsta-app-nav__items::-webkit-scrollbar {
        display: none;
    }

    .app-nav__item,
.app-nav__item,
.ifinsta-app-nav__item {
        scroll-snap-align: start;
    }
}

.topbar__left,
.ifinsta-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    flex: 0 0 auto;
    min-width: 0;
    /* Don't grow, don't shrink from base */
}

.topbar__center,
.ifinsta-topbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* Take available middle space */
    min-width: 0;
    padding: 0 var(--ifinsta-space-4);
}

.topbar__right,
.ifinsta-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    flex: 0 0 auto;
    min-width: 0;
    /* Don't grow */
}

@media (max-width: 768px) {
    .ifinsta-language-selector,
    .theme-selector,
.ifinsta-theme-selector {
        display: none !important;
    }

    .topbar__right,
    .ifinsta-topbar__right {
        gap: var(--ifinsta-space-1);
    }
}


.topbar__divider,
.ifinsta-topbar__divider {
    width: 1.5px;
    height: var(--ifinsta-space-8);
    background: var(--ifinsta-border-light);
    margin: 0 var(--ifinsta-space-3);
}

.topbar__title,
.ifinsta-topbar__title {
    font-size: var(--ifinsta-text-base);
    font-weight: 600;
    color: var(--ifinsta-text);
    margin: 0;
    letter-spacing: -0.01em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .store-selector__label,
.ifinsta-store-selector__label {
        max-width: 80px;
    }
}

/* Desktop Sidebar Toggle */
.sidebar-toggle-desktop,
.ifinsta-sidebar-toggle-desktop {
    display: none;
    position: relative;
    width: var(--ifinsta-space-10);
    height: var(--ifinsta-space-10);
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.sidebar-toggle-desktop:hover,
.ifinsta-sidebar-toggle-desktop:hover {
    background: var(--ifinsta-bg-secondary);
    border-color: var(--ifinsta-border-focus);
}

.sidebar-toggle-desktop:focus-visible,
.ifinsta-sidebar-toggle-desktop:focus-visible {
    outline: 2px solid var(--ifinsta-border-focus);
    outline-offset: 2px;
}

/* Mobile Menu Toggle */
.topbar__menu-toggle,
.ifinsta-topbar__menu-toggle {
    display: none;
    position: relative;
    width: calc(var(--ifinsta-space-10) + var(--ifinsta-space-1));
    height: calc(var(--ifinsta-space-10) + var(--ifinsta-space-1));
    background: transparent;
    border: none;
    border-radius: var(--ifinsta-radius-md);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.topbar__menu-toggle:hover,
.ifinsta-topbar__menu-toggle:hover {
    background: var(--ifinsta-bg-secondary);
}

.topbar__menu-toggle:focus-visible,
.ifinsta-topbar__menu-toggle:focus-visible {
    outline: 2px solid var(--ifinsta-border-focus);
    outline-offset: 2px;
}

.topbar__menu-toggle .menu-icon,
.topbar__menu-toggle .ifinsta-menu-icon,
.ifinsta-topbar__menu-toggle .menu-icon,
.ifinsta-topbar__menu-toggle .ifinsta-menu-icon {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.topbar__menu-toggle .menu-icon--hamburger,
.ifinsta-topbar__menu-toggle .menu-icon--hamburger,
.ifinsta-topbar__menu-toggle .ifinsta-menu-icon--hamburger {
    opacity: 1;
}

.topbar__menu-toggle .menu-icon--close,
.ifinsta-topbar__menu-toggle .menu-icon--close,
.ifinsta-topbar__menu-toggle .ifinsta-menu-icon--close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}

.topbar__menu-toggle[aria-expanded="true"] .menu-icon--hamburger,
.ifinsta-topbar__menu-toggle[aria-expanded="true"] .menu-icon--hamburger,
.topbar__menu-toggle[aria-expanded="true"] .ifinsta-menu-icon--hamburger,
.ifinsta-topbar__menu-toggle[aria-expanded="true"] .ifinsta-menu-icon--hamburger {
    opacity: 0;
    transform: rotate(90deg);
}

.topbar__menu-toggle[aria-expanded="true"] .menu-icon--close,
.ifinsta-topbar__menu-toggle[aria-expanded="true"] .menu-icon--close,
.topbar__menu-toggle[aria-expanded="true"] .ifinsta-menu-icon--close,
.ifinsta-topbar__menu-toggle[aria-expanded="true"] .ifinsta-menu-icon--close {
    opacity: 1;
    transform: rotate(0deg);
}

/* Responsive visibility */
@media (max-width: 768px) {
    .sidebar-toggle-desktop,
    .ifinsta-sidebar-toggle-desktop {
        display: flex !important;
    }

    .topbar__menu-toggle,
    .ifinsta-topbar__menu-toggle {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .sidebar-toggle-desktop,
    .ifinsta-sidebar-toggle-desktop {
        display: none !important;
    }

    .topbar__menu-toggle,
    .ifinsta-topbar__menu-toggle {
        display: none !important;
    }
}

/* Action Button Base */
.topbar__action-btn,
.ifinsta-topbar__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    height: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    border: none;
    background: transparent;
    color: var(--ifinsta-text-muted);
    border-radius: var(--ifinsta-radius-md);
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.topbar__action-btn:hover,
.ifinsta-topbar__action-btn:hover {
    background: var(--ifinsta-dropdown-item-hover);
    color: var(--ifinsta-text);
    transform: translateY(-1px);
}

.topbar__action-btn:active,
.ifinsta-topbar__action-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {

    /* Smaller, cleaner mobile buttons - optimized for device viewport */
    .topbar__action-btn,
    .ifinsta-topbar__action-btn,
    .search__trigger,
    .ifinsta-search__trigger,
    .ifinsta-app-nav__link,
    .ifinsta-app-more__toggle,
    .store-selector__toggle,
.store-selector__toggle,
.ifinsta-store-selector__toggle {
        min-width: 36px;
        min-height: 36px;
        padding: var(--ifinsta-space-1-5);
    }

    .topbar__action-btn,
    .ifinsta-topbar__action-btn,
    .search__trigger,
.search__trigger,
.ifinsta-search__trigger {
        border-radius: var(--ifinsta-radius-md);
    }

    .topbar__action-btn svg,
    .ifinsta-topbar__action-btn svg,
    .search__trigger svg,
    .ifinsta-search__trigger svg {
        width: 18px;
        height: 18px;
    }

    .app-nav__link:not(.app-nav__link--with-text):not(.app-nav__link--marketplace),
.ifinsta-app-nav__link:not(.ifinsta-app-nav__link--with-text):not(.ifinsta-app-nav__link--marketplace) {
        width: 36px;
        height: 36px;
    }

    .app-nav__link--marketplace,
    .app-more__toggle,
    .ifinsta-app-nav__link--marketplace,
    .app-more__toggle,
.ifinsta-app-more__toggle {
        width: 36px !important;
        height: 36px !important;
    }

    .app-nav__icon svg,
.ifinsta-app-nav__icon svg {
        width: 18px;
        height: 18px;
    }

    /* Remove unnecessary borders on mobile */
    .store-selector__toggle,
    .ifinsta-store-selector__toggle,
    .language-selector .topbar__action-btn,
    .language-selector .ifinsta-topbar__action-btn,
    .theme-selector .topbar__action-btn,
    .theme-selector .ifinsta-topbar__action-btn,
    .ifinsta-language-selector .topbar__action-btn,
    .ifinsta-language-selector .ifinsta-topbar__action-btn,
    .ifinsta-theme-selector .topbar__action-btn,
    .ifinsta-theme-selector .ifinsta-topbar__action-btn {
        border: none;
        background: transparent;
    }

    /* Smaller text for profile switcher */
    .profile-switcher__name,
    .ifinsta-profile-switcher__name {
        font-size: var(--ifinsta-text-sm);
    }

    .profile-switcher__mode-badge,
    .ifinsta-profile-switcher__mode-badge {
        font-size: var(--ifinsta-text-xs);
        padding: var(--ifinsta-space-0-5) var(--ifinsta-space-1-5);
    }

    /* Smaller avatar */
    .user-menu__avatar,
.ifinsta-user-menu__avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Search Trigger */
/* Search Trigger - Premium "Fake Input" Style */
.search-trigger,
.ifinsta-search-trigger,
.search__trigger,
.ifinsta-search__trigger {
    display: flex;
    align-items: center;
    width: auto;
    min-width: 200px;
    height: 36px;
    gap: var(--ifinsta-space-3);
    padding: 0 var(--ifinsta-space-3);
    background: var(--ifinsta-bg-subtle, var(--ifinsta-bg-secondary));
    border: 1px solid var(--ifinsta-border-light);
    border-radius: var(--ifinsta-radius-full);
    color: var(--ifinsta-text-muted);
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-medium);
    cursor: pointer;
    transition: all var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
    box-shadow: var(--ifinsta-shadow-xs);
}

.search-trigger:hover,
.ifinsta-search-trigger:hover,
.search__trigger:hover,
.ifinsta-search__trigger:hover {
    background: var(--ifinsta-bg-elevated);
    border-color: var(--ifinsta-primary-alpha-30);
    color: var(--ifinsta-text);
    transform: translateY(-1px);
    box-shadow: var(--ifinsta-shadow-sm);
}

.search-trigger:focus-visible,
.ifinsta-search-trigger:focus-visible,
.search__trigger:focus-visible,
.ifinsta-search__trigger:focus-visible {
    background: var(--ifinsta-bg-elevated);
    border-color: var(--ifinsta-primary);
    color: var(--ifinsta-text);
    outline: none;
    box-shadow: 0 0 0 var(--ifinsta-space-0-75) var(--ifinsta-primary-alpha-15);
}

.search-trigger svg,
.ifinsta-search-trigger svg,
.search__trigger svg,
.ifinsta-search__trigger svg {
    width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
    color: var(--ifinsta-text-muted);
    transition: color var(--ifinsta-duration-150);
}

.search-trigger:hover svg,
.ifinsta-search-trigger:hover svg,
.search__trigger:hover svg,
.ifinsta-search__trigger:hover svg {
    color: var(--ifinsta-primary);
}

/* Shortcut Badge (Ctrl+K) */
.search__shortcut,
.ifinsta-search__shortcut,
.search-shortcut,
.ifinsta-search-shortcut {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-0-5);
}

.search__shortcut kbd,
.ifinsta-search__shortcut kbd,
.search-shortcut kbd,
.ifinsta-search-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ifinsta-space-5);
    height: var(--ifinsta-space-5);
    padding: 0 var(--ifinsta-space-1);
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-sm);
    font-family: var(--ifinsta-font-mono);
    font-size: var(--ifinsta-text-xs);
    font-weight: var(--ifinsta-font-bold);
    color: var(--ifinsta-text-muted);
    line-height: 1;
    box-shadow: 0 1px 0 var(--ifinsta-border);
}

/* Responsive: Icon-only on mobile */
@media (max-width: 768px) {

    .search__shortcut,
    .ifinsta-search__shortcut,
    .search-shortcut,
    .ifinsta-search-shortcut {
        display: none;
    }

    .search-trigger,
    .ifinsta-search-trigger,
    .search__trigger,
    .ifinsta-search__trigger {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--ifinsta-radius-full);
        box-shadow: none;
    }

    .search-trigger:hover,
    .ifinsta-search-trigger:hover,
    .search__trigger:hover,
    .ifinsta-search__trigger:hover {
        background: var(--ifinsta-bg-secondary);
        border-color: transparent;
        color: var(--ifinsta-primary);
        transform: none;
        box-shadow: none;
    }
}

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

.visually-hidden,
.ifinsta-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keep skip-link available for keyboard users but never visually persistent */
.skip-link,
.ifinsta-skip-link {
    position: fixed;
    top: -200vh;
    left: var(--ifinsta-space-3);
    transform: none;
    z-index: var(--ifinsta-z-max, 1000);
}

.skip-link:focus,
.skip-link:focus-visible,
.ifinsta-skip-link:focus,
.ifinsta-skip-link:focus-visible {
    top: var(--ifinsta-space-3);
}

/* Hidden attribute support */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   HORIZONTAL APP NAVIGATION
   ========================================================================== */

.app-nav,
.ifinsta-app-nav {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
    margin-right: 0.5rem;
    flex: 1;
    min-width: 0;
    position: relative;
}

.ifinsta-app-nav__items {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
    overflow: hidden;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ifinsta-app-nav__item {
    display: contents;
    /* Allows list items without extra layout impact */
}

.app-nav__link,
.ifinsta-app-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    height: 36px;
    padding: 0 var(--ifinsta-space-3);
    border-radius: var(--ifinsta-radius-full);
    color: var(--ifinsta-text-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: all var(--ifinsta-transition-fast) var(--ifinsta-ease-smooth);
    flex-shrink: 0;
    white-space: nowrap;
}

.ifinsta-app-nav__link:not(.ifinsta-app-nav__link--with-text):not(.ifinsta-app-nav__link--marketplace) {
    width: 36px;
    padding: 0;
}

.app-nav__link:focus-visible,
.ifinsta-app-nav__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ifinsta-space-0-75) var(--ifinsta-primary-alpha-15);
    border-color: var(--ifinsta-primary);
}

.app-nav__icon,
.ifinsta-app-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ifinsta-space-4) + var(--ifinsta-space-0-5));
    height: calc(var(--ifinsta-space-4) + var(--ifinsta-space-0-5));
    flex: 0 0 auto;
}

.app-nav__link--with-text,
.ifinsta-app-nav__link--with-text {
    width: auto;
    min-width: 64px;
    max-width: 140px;
}

.app-nav__text,
.ifinsta-app-nav__text {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    display: none;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav__link--with-text .app-nav__text,
.ifinsta-app-nav__link--with-text .ifinsta-app-nav__text {
    display: block;
}

.app-nav__link:hover,
.ifinsta-app-nav__link:hover {
    background: var(--ifinsta-bg-secondary);
    color: var(--ifinsta-text);
    border-color: var(--ifinsta-border-light);
    transform: translateY(-1px);
}

.app-nav__link--active,
.ifinsta-app-nav__link--active {
    color: var(--ifinsta-primary-600);
    background: var(--ifinsta-primary-alpha-10);
    border-color: var(--ifinsta-primary-alpha-20);
    font-weight: 600;
}

.app-nav__link--active:hover,
.ifinsta-app-nav__link--active:hover {
    background: var(--ifinsta-primary-alpha-15);
    border-color: var(--ifinsta-primary-alpha-30);
    color: var(--ifinsta-primary-700);
}

.app-nav__link--active::after,
.ifinsta-app-nav__link--active::after {
    display: none;
}

/* Standardize Icon-only links (Marketplace & More Toggle) */
.app-nav__link--marketplace,
.app-more__toggle,
.ifinsta-app-nav__link--marketplace,
.ifinsta-app-more__toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin-top: 0 !important;
    background: var(--ifinsta-bg-secondary);
    border: 1px solid var(--ifinsta-border-light);
}

.app-nav__link--marketplace:hover,
.app-more__toggle:hover,
.ifinsta-app-nav__link--marketplace:hover,
.ifinsta-app-more__toggle:hover {
    background: var(--ifinsta-selector-hover);
    transform: translateY(-1px);
}

/* More Apps Dropdown Styles */
.app-more,
.ifinsta-app-more {
    position: relative;
    margin-right: 0.25rem;
}

.app-more__dropdown,
.ifinsta-app-more__dropdown {
    position: absolute;
    top: calc(100% + var(--ifinsta-space-2-5));
    right: 0;
    width: 260px;
    max-width: min(320px, calc(100vw - var(--ifinsta-space-6)));
    max-height: min(60vh, 420px);
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: 0 20px 50px var(--ifinsta-black-alpha-15), 0 10px 20px var(--ifinsta-black-alpha-10);
    padding: var(--ifinsta-space-3);
    display: none;
    flex-direction: column;
    z-index: var(--ifinsta-z-popover, 500);
    backdrop-filter: blur(12px);
    overflow: auto;
}

.app-more__dropdown.dropdown--open,
.app-more__dropdown.ifinsta-dropdown--open,
.ifinsta-app-more__dropdown.dropdown--open,
.ifinsta-app-more__dropdown.ifinsta-dropdown--open {
    display: flex;
    animation: ifinsta-fade-in-up var(--ifinsta-transition-base);
}

.app-more__item,
.ifinsta-app-more__item {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    border-radius: var(--ifinsta-radius-lg);
    color: var(--ifinsta-text-secondary);
    text-decoration: none;
    transition: var(--ifinsta-transition-fast);
}

.app-more__item:focus-visible,
.ifinsta-app-more__item:focus-visible {
    outline: 2px solid var(--ifinsta-indigo);
    outline-offset: 2px;
}

.app-more__item--active,
.ifinsta-app-more__item--active {
    color: var(--ifinsta-indigo);
    background: var(--ifinsta-accent-light);
}

.app-more__item:hover,
.ifinsta-app-more__item:hover {
    background: var(--ifinsta-bg-secondary);
    color: var(--ifinsta-text);
}

.app-more__item .app-nav__icon svg,
.ifinsta-app-more__item .ifinsta-app-nav__icon svg {
    width: 18px;
    height: 18px;
}

@keyframes ifinsta-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


.ifinsta-app-nav__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75px;
}

/* ==========================================================================
   DASHBOARD SELECTOR - Premium
   ========================================================================== */

.dashboard-selector,
.ifinsta-dashboard-selector {
    position: relative;
}

.dashboard-selector__toggle,
.ifinsta-dashboard-selector__toggle {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2-5);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ifinsta-radius-lg);
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.dashboard-selector__toggle:hover,
.ifinsta-dashboard-selector__toggle:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.dashboard-selector__toggle[aria-expanded="true"],
.ifinsta-dashboard-selector__toggle[aria-expanded="true"] {
    background: var(--ifinsta-dropdown-item-active);
    border-color: var(--ifinsta-indigo);
}

.dashboard-selector__icon,
.ifinsta-dashboard-selector__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ifinsta-space-7);
    height: var(--ifinsta-space-7);
    border-radius: 7px;
    flex-shrink: 0;
}

.dashboard-selector__icon svg,
.ifinsta-dashboard-selector__icon svg {
    width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
}

.dashboard-selector__label,
.ifinsta-dashboard-selector__label {
    font-size: var(--ifinsta-text-sm);
    font-weight: 600;
    color: var(--ifinsta-text);
    letter-spacing: -0.01em;
}

.dashboard-selector__chevron,
.ifinsta-dashboard-selector__chevron {
    color: var(--ifinsta-text-muted);
    transition: transform var(--ifinsta-transition-fast);
}

.dashboard-selector__toggle[aria-expanded="true"] .dashboard-selector__chevron,
.ifinsta-dashboard-selector__toggle[aria-expanded="true"] .dashboard-selector__chevron,
.dashboard-selector__toggle[aria-expanded="true"] .ifinsta-dashboard-selector__chevron,
.ifinsta-dashboard-selector__toggle[aria-expanded="true"] .ifinsta-dashboard-selector__chevron {
    transform: rotate(180deg);
}

/* Dashboard Label (Single Dashboard) */
.dashboard-label,
.ifinsta-dashboard-label {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: 0.5rem;
}

.dashboard-label__icon,
.ifinsta-dashboard-label__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ifinsta-space-7);
    height: var(--ifinsta-space-7);
    background: var(--brand-accent, var(--ifinsta-accent));
    border-radius: 7px;
    color: var(--ifinsta-white);
}

.dashboard-label__text,
.ifinsta-dashboard-label__text {
    font-size: var(--ifinsta-text-sm);
    font-weight: 600;
    color: var(--ifinsta-text);
}

/* ==========================================================================
   DASHBOARD DROPDOWN
   ========================================================================== */

.dashboard-dropdown,
.ifinsta-dashboard-dropdown {
    position: absolute;
    top: calc(100% + var(--ifinsta-space-2));
    left: 0;
    min-width: 280px;
    width: min(640px, calc(100vw - var(--sidebar-width, 260px) - 3rem));
    max-width: calc(100vw - var(--sidebar-width, 260px) - 3rem);
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: var(--ifinsta-dropdown-shadow);

    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--ifinsta-space-2) * -1)) scale(0.96);
    transform-origin: top left;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
}

@media (max-width: 768px) {
    .dashboard-dropdown,
    .ifinsta-dashboard-dropdown {
        position: fixed;
        top: calc(var(--ifinsta-topbar-height) + 0.75rem);
        left: var(--ifinsta-space-3);
        right: var(--ifinsta-space-3);
        width: auto;
        min-width: 0;
        max-width: none;
        transform-origin: top center;
    }
}

.dashboard-dropdown.dropdown--open,
.dashboard-dropdown.ifinsta-dropdown--open,
.ifinsta-dashboard-dropdown.dropdown--open,
.ifinsta-dashboard-dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dashboard-dropdown__header,
.ifinsta-dashboard-dropdown__header {
    padding: var(--ifinsta-space-3);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

.dashboard-dropdown__search,
.ifinsta-dashboard-dropdown__search {
    margin-top: var(--ifinsta-space-3);
    position: relative;
}

.dashboard-dropdown__search-icon,
.ifinsta-dashboard-dropdown__search-icon {
    position: absolute;
    left: var(--ifinsta-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ifinsta-text-muted);
    pointer-events: none;
    width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
}

.dashboard-dropdown__search-input,
.ifinsta-dashboard-dropdown__search-input {
    width: 100%;
    padding: var(--ifinsta-space-2-5) var(--ifinsta-space-3) var(--ifinsta-space-2-5) var(--ifinsta-space-9);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-dropdown-item-hover);
    color: var(--ifinsta-text);
    font-size: 0.8125rem;
    outline: none;
    transition: var(--ifinsta-transition-fast);
}

.dashboard-dropdown__search-input:focus,
.ifinsta-dashboard-dropdown__search-input:focus {
    border-color: var(--ifinsta-indigo);
    box-shadow: 0 0 0 var(--ifinsta-space-0-75) var(--ifinsta-accent-light);
}

.dashboard-dropdown__search-input:focus-visible,
.ifinsta-dashboard-dropdown__search-input:focus-visible {
    border-color: var(--ifinsta-indigo);
    box-shadow: 0 0 0 var(--ifinsta-space-0-75) var(--ifinsta-accent-light);
}

.dashboard-dropdown__search-input::placeholder,
.ifinsta-dashboard-dropdown__search-input::placeholder {
    color: var(--ifinsta-text-muted);
    opacity: 0.85;
}

.dashboard-dropdown__title,
.ifinsta-dashboard-dropdown__title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-dropdown__subtitle,
.ifinsta-dashboard-dropdown__subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--ifinsta-text-muted);
    margin-top: 0.125rem;
}

.dashboard-dropdown__list,
.ifinsta-dashboard-dropdown__list {
    padding: var(--ifinsta-space-3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ifinsta-space-2);
    max-height: 360px;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .dashboard-dropdown__list,
    .ifinsta-dashboard-dropdown__list {
        grid-template-columns: 1fr;
        max-height: calc(100vh - var(--ifinsta-topbar-height) - 220px);
    }
}

.dashboard-dropdown__item,
.ifinsta-dashboard-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-3);
    text-decoration: none;
    border-radius: var(--ifinsta-radius-lg);
    border: 1px solid transparent;
    transition: var(--ifinsta-transition-fast);
}

.dashboard-dropdown__item:hover,
.ifinsta-dashboard-dropdown__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
    border-color: var(--ifinsta-dropdown-border);
}

.dashboard-dropdown__item:focus-visible,
.ifinsta-dashboard-dropdown__item:focus-visible {
    outline: none;
    border-color: var(--ifinsta-indigo);
    box-shadow: 0 0 0 var(--ifinsta-space-0-75) var(--ifinsta-accent-light);
}

.dashboard-dropdown__item--active,
.ifinsta-dashboard-dropdown__item--active {
    background: var(--ifinsta-dropdown-item-active);
    border-color: var(--ifinsta-indigo);
}

.dashboard-dropdown__item-icon,
.ifinsta-dashboard-dropdown__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    height: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    background: var(--ifinsta-dropdown-item-hover);
    border-radius: 9px;
    color: var(--ifinsta-text-muted);
    flex-shrink: 0;
    transition: var(--ifinsta-transition-fast);
}

.ifinsta-dashboard-dropdown__item-icon svg {
    width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
}

.dashboard-dropdown__item:hover .dashboard-dropdown__item-icon,
.dashboard-dropdown__item-icon--active,
.ifinsta-dashboard-dropdown__item:hover .dashboard-dropdown__item-icon,
.ifinsta-dashboard-dropdown__item-icon--active,
.dashboard-dropdown__item:hover .ifinsta-dashboard-dropdown__item-icon,
.ifinsta-dashboard-dropdown__item:hover .ifinsta-dashboard-dropdown__item-icon,
.dashboard-dropdown__item-icon--active,
.ifinsta-dashboard-dropdown__item-icon--active {
    background: var(--brand-accent, var(--ifinsta-accent));
    color: var(--ifinsta-white);
}

.dashboard-dropdown__item-content,
.ifinsta-dashboard-dropdown__item-content {
    flex: 1;
    min-width: 0;
}

.dashboard-dropdown__item-name,
.ifinsta-dashboard-dropdown__item-name {
    display: block;
    font-size: var(--ifinsta-text-sm);
    font-weight: 550;
    color: var(--ifinsta-text);
}

.dashboard-dropdown__item-desc,
.ifinsta-dashboard-dropdown__item-desc {
    display: -webkit-box;
    font-size: 0.75rem;
    color: var(--ifinsta-text-muted);
    margin-top: 0.125rem;
    line-height: 1.3;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-dropdown__check,
.ifinsta-dashboard-dropdown__check {
    color: var(--ifinsta-indigo);
    flex-shrink: 0;
    margin-left: auto;
    width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
}

.dashboard-dropdown__empty,
.ifinsta-dashboard-dropdown__empty {
    padding: var(--ifinsta-space-4);
    color: var(--ifinsta-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

/* ==========================================================================
   STORE SELECTOR
   ========================================================================== */

.store-selector,
.ifinsta-store-selector {
    position: relative;
}

.ifinsta-store-selector__toggle {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: 0.375rem 0.75rem;
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-full);
    cursor: pointer;
    transition: all var(--ifinsta-transition-fast) var(--ifinsta-ease-smooth);
    font-size: 0.8125rem;
    color: var(--ifinsta-text);
    box-shadow: var(--ifinsta-shadow-xs);
}

.store-selector__toggle:hover,
.ifinsta-store-selector__toggle:hover {
    background: var(--ifinsta-bg-secondary);
    border-color: var(--ifinsta-border-focus);
    transform: translateY(-1px);
    box-shadow: var(--ifinsta-shadow-sm);
}

.store-selector__toggle:active,
.ifinsta-store-selector__toggle:active {
    transform: translateY(0);
}

.store-selector__icon,
.ifinsta-store-selector__icon {
    color: var(--ifinsta-text-muted);
}

.ifinsta-store-selector__label {
    font-weight: 500;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-selector__chevron,
.ifinsta-store-selector__chevron {
    color: var(--ifinsta-text-muted);
    transition: transform var(--ifinsta-transition-fast);
}

/* Store Dropdown */
.store-dropdown,
.ifinsta-store-dropdown {
    position: absolute;
    top: calc(100% + var(--ifinsta-space-1-5));
    right: 0;
    min-width: 200px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-lg);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--ifinsta-space-1-5) * -1)) scale(0.96);
    transform-origin: top right;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
}

.store-dropdown.dropdown--open,
.store-dropdown.ifinsta-dropdown--open,
.ifinsta-store-dropdown.dropdown--open,
.ifinsta-store-dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.store-dropdown__header,
.ifinsta-store-dropdown__header {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

.store-dropdown__title,
.ifinsta-store-dropdown__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.store-dropdown__list,
.ifinsta-store-dropdown__list {
    padding: 0.375rem;
    max-height: 240px;
    overflow-y: auto;
}

.store-dropdown__item,
.ifinsta-store-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    text-decoration: none;
    color: var(--ifinsta-text);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--ifinsta-radius-md);
    transition: var(--ifinsta-transition-fast);
}

.store-dropdown__item:hover,
.ifinsta-store-dropdown__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.store-dropdown__item--active,
.ifinsta-store-dropdown__item--active {
    background: var(--ifinsta-dropdown-item-active);
    color: var(--ifinsta-indigo);
}

.store-dropdown__loading,
.store-dropdown__empty,
.store-dropdown__error,
.ifinsta-store-dropdown__loading,
.ifinsta-store-dropdown__empty,
.ifinsta-store-dropdown__error {
    padding: var(--ifinsta-space-6);
    text-align: center;
    color: var(--ifinsta-text-muted);
    font-size: 0.8125rem;
}

.ifinsta-store-dropdown__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
}

.store-dropdown__check,
.ifinsta-store-dropdown__check {
    color: var(--ifinsta-indigo);
    flex-shrink: 0;
    margin-left: auto;
}

/* Store item name with merchant indicator */
.store-dropdown__item-name,
.ifinsta-store-dropdown__item-name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.store-dropdown__item-merchant,
.ifinsta-store-dropdown__item-merchant {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--ifinsta-text-muted);
    opacity: 0.8;
}

/* ==========================================================================
   THEME SELECTOR DROPDOWN
   ========================================================================== */

.ifinsta-theme-selector {
    position: relative;
}

/* Override button dimensions for theme selector (wider to fit chevron) */
.ifinsta-theme-selector .ifinsta-topbar__action-btn {
    width: auto;
    min-width: 36px;
    padding: 0 var(--ifinsta-space-3);
    gap: var(--ifinsta-space-2);
}

/* Theme Icons in Button - Control visibility via JavaScript */
.theme-icon,
.ifinsta-theme-icon {
    transition: var(--ifinsta-transition-fast);
}

.theme-icon--light,
.theme-icon--dark,
.theme-icon--auto,
.theme-icon--light,
.theme-icon--dark,
.theme-icon--auto,
.ifinsta-theme-icon--light,
.ifinsta-theme-icon--dark,
.ifinsta-theme-icon--auto {
    display: none;
}

.theme__chevron,
.ifinsta-theme__chevron {
    color: var(--ifinsta-text-muted);
    transition: transform var(--ifinsta-transition-fast);
}

.topbar__action-btn[aria-expanded="true"] .theme__chevron,
.ifinsta-topbar__action-btn[aria-expanded="true"] .theme__chevron,
.topbar__action-btn[aria-expanded="true"] .ifinsta-theme__chevron,
.ifinsta-topbar__action-btn[aria-expanded="true"] .ifinsta-theme__chevron {
    transform: rotate(180deg);
}

/* Theme Dropdown - Following Language Dropdown Pattern */
.theme__dropdown,
.ifinsta-theme__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-lg);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ifinsta-space-1-5))) scale(0.96);
    transform-origin: top right;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
}

.theme__dropdown.dropdown--open,
.theme__dropdown.ifinsta-dropdown--open,
.ifinsta-theme__dropdown.dropdown--open,
.ifinsta-theme__dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.theme__header,
.ifinsta-theme__header {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

.theme__title,
.ifinsta-theme__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theme__list,
.ifinsta-theme__list {
    padding: 0.375rem;
    max-height: 240px;
    overflow-y: auto;
}

.theme__item,
.ifinsta-theme__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    width: 100%;
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: transparent;
    border: none;
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.theme__item:hover,
.ifinsta-theme__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.theme__item:focus-visible,
.ifinsta-theme__item:focus-visible {
    outline: 2px solid var(--ifinsta-indigo);
    outline-offset: 2px;
}

.theme__item--active,
.ifinsta-theme__item--active {
    background: var(--ifinsta-dropdown-item-active);
    color: var(--ifinsta-indigo);
}

.theme__item-content,
.ifinsta-theme__item-content {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    flex: 1;
    min-width: 0;
}

.theme__item-icon,
.ifinsta-theme__item-icon {
    color: var(--ifinsta-text-muted);
    flex-shrink: 0;
    transition: color var(--ifinsta-transition-fast);
}

.theme__item--active .theme__item-icon,
.ifinsta-theme__item--active .theme__item-icon,
.theme__item--active .ifinsta-theme__item-icon,
.ifinsta-theme__item--active .ifinsta-theme__item-icon {
    color: var(--ifinsta-indigo);
}

.theme__item-name,
.ifinsta-theme__item-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.theme__item-subtitle,
.ifinsta-theme__item-subtitle {
    font-size: 0.6875rem;
    color: var(--ifinsta-text-muted);
    margin-left: 0.25rem;
}

.theme__check,
.ifinsta-theme__check {
    color: var(--ifinsta-indigo);
    flex-shrink: 0;
    margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme__dropdown,
    .ifinsta-theme__dropdown {
        width: 160px;
        right: -var(--ifinsta-space-2);
    }
}

/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

.notifications,
.ifinsta-notifications {
    position: relative;
}

.notifications__badge,
.ifinsta-notifications__badge {
    position: absolute;
    top: var(--ifinsta-space-0-5);
    right: var(--ifinsta-space-0-5);
    min-width: var(--ifinsta-space-4);
    height: var(--ifinsta-space-4);
    padding: 0 var(--ifinsta-space-1);
    background: var(--ifinsta-danger-500);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-white);
    font-size: 0.625rem;
    font-weight: var(--ifinsta-font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--ifinsta-space-0-5) solid var(--ifinsta-topbar-bg);
    animation: ifinsta-notification-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ifinsta-notification-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.notifications__dropdown,
.ifinsta-notifications__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ifinsta-space-2))) scale(0.96);
    transform-origin: top right;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
}

.notifications__dropdown.dropdown--open,
.notifications__dropdown.ifinsta-dropdown--open,
.ifinsta-notifications__dropdown.dropdown--open,
.ifinsta-notifications__dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notifications__header,
.ifinsta-notifications__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
    font-size: var(--ifinsta-text-sm);
    font-weight: 600;
    color: var(--ifinsta-text);
}

.notifications__mark-read,
.ifinsta-notifications__mark-read {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ifinsta-indigo);
    text-decoration: none;
}

.notifications__empty,
.ifinsta-notifications__empty {
    padding: var(--ifinsta-space-4);
    text-align: center;
    color: var(--ifinsta-text-muted);
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

/* ==========================================================================
   USER MENU
   ========================================================================== */

.user-menu,
.ifinsta-user-menu {
    position: relative;
}

.user-menu__toggle,
.ifinsta-user-menu__toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem;
    padding-right: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    /* Pill shape */
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.user-menu__toggle:hover,
.ifinsta-user-menu__toggle:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.user-menu__toggle[aria-expanded="true"],
.ifinsta-user-menu__toggle[aria-expanded="true"] {
    background: var(--ifinsta-dropdown-item-hover);
    border-color: var(--ifinsta-dropdown-border);
}

.ifinsta-user-menu__avatar {
    width: var(--ifinsta-space-8);
    height: var(--ifinsta-space-8);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
    font-weight: var(--ifinsta-font-semibold);
    font-size: var(--ifinsta-text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.ifinsta-user-menu__avatar-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

.user-menu__avatar--lg,
.ifinsta-user-menu__avatar--lg {
    width: var(--ifinsta-space-12);
    height: var(--ifinsta-space-12);
    font-size: 1.125rem;
}

.user-menu__info,
.ifinsta-user-menu__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .user-menu__info,
    .ifinsta-user-menu__info {
        display: none;
    }
}

.user-menu__name,
.ifinsta-user-menu__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ifinsta-text);
}

.user-menu__role,
.ifinsta-user-menu__role {
    font-size: 0.6875rem;
    color: var(--ifinsta-text-muted);
}

.user-menu__chevron,
.ifinsta-user-menu__chevron {
    color: var(--ifinsta-text-muted);
    transition: transform var(--ifinsta-transition-fast);
}

.user-menu__toggle[aria-expanded="true"] .user-menu__chevron,
.ifinsta-user-menu__toggle[aria-expanded="true"] .user-menu__chevron,
.user-menu__toggle[aria-expanded="true"] .ifinsta-user-menu__chevron,
.ifinsta-user-menu__toggle[aria-expanded="true"] .ifinsta-user-menu__chevron {
    transform: rotate(180deg);
}

.user-menu__dropdown,
.ifinsta-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ifinsta-space-2))) scale(0.96);
    transform-origin: top right;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
}

.user-menu__dropdown.dropdown--open,
.user-menu__dropdown.ifinsta-dropdown--open,
.ifinsta-user-menu__dropdown.dropdown--open,
.ifinsta-user-menu__dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-menu__header,
.ifinsta-user-menu__header {
    padding: var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

.user-menu__email,
.ifinsta-user-menu__email {
    font-size: 0.75rem;
    color: var(--ifinsta-text-muted);
    word-break: break-all;
}

.user-menu__divider,
.ifinsta-user-menu__divider {
    height: 1px;
    background: var(--ifinsta-dropdown-border);
    margin: 0.25rem 0;
}

.user-menu__item,
.ifinsta-user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-4);
    color: var(--ifinsta-text);
    font-size: var(--ifinsta-text-sm);
    text-decoration: none;
    transition: var(--ifinsta-transition-fast);
}

.user-menu__item:hover,
.ifinsta-user-menu__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.user-menu__item--danger,
.ifinsta-user-menu__item--danger {
    color: var(--ifinsta-danger-600);
}

.user-menu__item--danger:hover,
.ifinsta-user-menu__item--danger:hover {
    background: var(--ifinsta-danger-50);
}

/* Business Settings Shortcut - Premium Styling */
.user-menu__item--business,
.ifinsta-user-menu__item--business {
    background: var(--ifinsta-success-50);
    border-left: 3px solid var(--ifinsta-success-500);
    margin: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    position: relative;
}

.ifinsta-user-menu__item--business svg:first-child {
    color: var(--ifinsta-success-600);
}

.user-menu__item--business:hover,
.ifinsta-user-menu__item--business:hover {
    background: var(--ifinsta-success-100);
}

.user-menu__item-badge,
.ifinsta-user-menu__item-badge {
    color: var(--ifinsta-warning-500);
    margin-left: auto;
}

/* ==========================================================================
   PROFILE SWITCHER DROPDOWN
   ========================================================================== */

.profile-switcher,
.ifinsta-profile-switcher {
    position: relative;
}

.profile-switcher__dropdown,
.ifinsta-profile-switcher__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-lg);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ifinsta-space-1-5))) scale(0.96);
    transform-origin: top right;
    transition: opacity var(--ifinsta-transition-expand),
        visibility var(--ifinsta-transition-expand),
        transform var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
    display: none;
    /* Hidden by default - override with display:block when open */
}

.profile-switcher__dropdown.dropdown--open,
.profile-switcher__dropdown:not([hidden]),
.profile-switcher__dropdown.ifinsta-dropdown--open,
.ifinsta-profile-switcher__dropdown.dropdown--open,
.ifinsta-profile-switcher__dropdown.ifinsta-dropdown--open,
.ifinsta-profile-switcher__dropdown:not([hidden]) {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.profile-switcher__header,
.ifinsta-profile-switcher__header {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

.profile-switcher__header-title,
.ifinsta-profile-switcher__header-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-switcher__form,
.ifinsta-profile-switcher__form {
    margin: 0;
}

.profile-switcher__item,
.ifinsta-profile-switcher__item {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    width: 100%;
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    background: transparent;
    border: none;
    color: var(--ifinsta-text);
    font-size: var(--ifinsta-text-sm);
    text-align: left;
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.profile-switcher__item:hover,
.ifinsta-profile-switcher__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.profile-switcher__item--active,
.ifinsta-profile-switcher__item--active {
    background: var(--ifinsta-dropdown-item-active);
    color: var(--ifinsta-indigo);
}

.profile-switcher__item-icon,
.ifinsta-profile-switcher__item-icon {
    width: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    height: calc(var(--ifinsta-space-8) + var(--ifinsta-space-1));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ifinsta-radius-md);
    flex-shrink: 0;
}

.profile-switcher__item-icon--personal,
.ifinsta-profile-switcher__item-icon--personal {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary-600);
}

.profile-switcher__item-icon--merchant,
.ifinsta-profile-switcher__item-icon--merchant {
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-600);
}

.profile-switcher__merchant-logo,
.ifinsta-profile-switcher__merchant-logo {
    width: var(--ifinsta-space-5);
    height: var(--ifinsta-space-5);
    border-radius: var(--ifinsta-radius-sm);
    object-fit: cover;
}

.profile-switcher__item-info,
.ifinsta-profile-switcher__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.profile-switcher__item-name,
.ifinsta-profile-switcher__item-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-switcher__item-desc,
.profile-switcher__item-role,
.profile-switcher__item-desc,
.profile-switcher__item-role,
.ifinsta-profile-switcher__item-desc,
.ifinsta-profile-switcher__item-role {
    font-size: 0.75rem;
    color: var(--ifinsta-text-muted);
}

.profile-switcher__check,
.ifinsta-profile-switcher__check {
    color: var(--ifinsta-indigo);
    flex-shrink: 0;
}

.profile-switcher__divider,
.ifinsta-profile-switcher__divider {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ifinsta-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

/* ==========================================================================
   LANGUAGE SELECTOR
   ========================================================================== */

.language-selector,
.ifinsta-language-selector {
    position: relative;
}

/* Override button dimensions for language selector (wider to fit text) */
.language-selector .topbar__action-btn,
.language-selector .ifinsta-topbar__action-btn,
.ifinsta-language-selector .topbar__action-btn,
.ifinsta-language-selector .ifinsta-topbar__action-btn {
    width: auto;
    min-width: 36px;
    padding: 0 var(--ifinsta-space-3);
    gap: var(--ifinsta-space-2);
}

.language__code,
.ifinsta-language__code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.language__chevron,
.ifinsta-language__chevron {
    color: var(--ifinsta-text-muted);
    transition: transform var(--ifinsta-transition-fast);
}

.topbar__action-btn[aria-expanded="true"] .language__chevron,
.ifinsta-topbar__action-btn[aria-expanded="true"] .language__chevron,
.topbar__action-btn[aria-expanded="true"] .ifinsta-language__chevron,
.ifinsta-topbar__action-btn[aria-expanded="true"] .ifinsta-language__chevron {
    transform: rotate(180deg);
}

/* Language Dropdown - Following Store Dropdown Pattern */
.language__dropdown,
.ifinsta-language__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--ifinsta-dropdown-bg);
    border: 1px solid var(--ifinsta-dropdown-border);
    border-radius: var(--ifinsta-radius-lg);
    box-shadow: var(--ifinsta-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ifinsta-space-1-5))) scale(0.96);
    transform-origin: top right;
    transition: all var(--ifinsta-transition-expand);
    z-index: var(--ifinsta-z-popover, 500);
    overflow: hidden;
    pointer-events: none;
}

.language__dropdown.dropdown--open,
.language__dropdown.ifinsta-dropdown--open,
.ifinsta-language__dropdown.dropdown--open,
.ifinsta-language__dropdown.ifinsta-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.language__header,
.ifinsta-language__header {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-bottom: 1px solid var(--ifinsta-dropdown-border);
}

.language__title,
.ifinsta-language__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.language__list,
.ifinsta-language__list {
    padding: 0.375rem;
    max-height: 240px;
    overflow-y: auto;
}

.language__form,
.ifinsta-language__form {
    margin: 0;
}

.language__item,
.ifinsta-language__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    width: 100%;
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: transparent;
    border: none;
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--ifinsta-transition-fast);
}

.language__item:hover,
.ifinsta-language__item:hover {
    background: var(--ifinsta-dropdown-item-hover);
}

.ifinsta-language__item:focus-visible {
    outline: 2px solid var(--ifinsta-indigo);
    outline-offset: 2px;
}

.language__item--active,
.ifinsta-language__item--active {
    background: var(--ifinsta-dropdown-item-active);
    color: var(--ifinsta-indigo);
}

.language__flag,
.ifinsta-language__flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ifinsta-space-5);
    height: var(--ifinsta-space-5);
    background: var(--ifinsta-bg-secondary);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ifinsta-text);
    flex-shrink: 0;
}

.language__name,
.ifinsta-language__name {
    flex: 1;
    min-width: 0;
}

.language__check,
.ifinsta-language__check {
    color: var(--ifinsta-indigo);
    flex-shrink: 0;
    margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .language__dropdown,
    .ifinsta-language__dropdown {
        width: 180px;
        right: -var(--ifinsta-space-2);
    }

    .language__code,
    .ifinsta-language__code {
        display: none;
    }
}

/* =========================================================================
   Template-extracted styles (header.html)
   ========================================================================= */

.language__item-content,
.ifinsta-language__item-content {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

/* Search Trigger Button */
.ifinsta-search__trigger {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    background: var(--ifinsta-bg-secondary);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text-muted);
    font-size: var(--ifinsta-text-sm);
    cursor: pointer;
    transition: background-color var(--ifinsta-transition-fast), border-color var(--ifinsta-transition-fast), color var(--ifinsta-transition-fast);
}

.ifinsta-search__trigger:hover {
    background: var(--ifinsta-bg-tertiary);
    border-color: var(--ifinsta-border);
    color: var(--ifinsta-text);
}

.ifinsta-search__trigger:focus-visible {
    outline: 2px solid var(--ifinsta-border-focus);
    outline-offset: 2px;
}

.search__shortcut,
.ifinsta-search__shortcut {
    display: none;
    align-items: center;
    gap: var(--ifinsta-space-1);
}

.ifinsta-search__shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.125rem 0.375rem;
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-sm);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: var(--ifinsta-font-medium);
}

@media (min-width: 768px) {
    .ifinsta-search__shortcut {
        display: flex;
    }
}

@media (max-width: 768px) {
    .ifinsta-search__trigger {
        min-height: 36px;
        min-width: 36px;
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--ifinsta-radius-md);
        box-shadow: none;
        color: var(--ifinsta-text-muted);
        transition: var(--ifinsta-transition-fast);
    }

    .ifinsta-search__trigger:hover {
        background: var(--ifinsta-dropdown-item-hover);
        color: var(--ifinsta-text);
        transform: translateY(-1px);
    }

    .ifinsta-search__trigger:active {
        transform: translateY(0);
    }

    .ifinsta-search__trigger:focus-visible {
        outline: 2px solid var(--ifinsta-border-focus);
        outline-offset: 2px;
    }

    .ifinsta-search__trigger svg {
        width: var(--ifinsta-space-4);
        height: var(--ifinsta-space-4);
    }
}

/* Theme Switcher Icons */
.theme-icon--light,
.theme-icon--dark,
.ifinsta-theme-icon--light,
.ifinsta-theme-icon--dark {
    display: none;
}

/* Light Theme (default) or explicit light */
:root:not([data-theme="dark"]) .ifinsta-theme-icon--light,
:root[data-theme="light"] .ifinsta-theme-icon--light {
    display: block;
}

/* Dark Theme */
:root[data-theme="dark"] .ifinsta-theme-icon--dark {
    display: block;
}

:root[data-theme="dark"] .ifinsta-theme-icon--light {
    display: none;
}

/* Mobile Responsiveness fixes */
@media (max-width: 768px) {
    .topbar__right,
    .ifinsta-topbar__right {
        gap: var(--ifinsta-space-1);
        max-width: 58vw;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        position: relative;
    }

    .topbar__right::-webkit-scrollbar,
    .ifinsta-topbar__right::-webkit-scrollbar {
        display: none;
    }

    .ifinsta-topbar__right>* {
        flex: 0 0 auto;
        pointer-events: auto;
    }

    .topbar__center,
    .ifinsta-topbar__center {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .ifinsta-topbar__center::-webkit-scrollbar {
        display: none;
    }

    .topbar__right.ifinsta-has-overflow:not(.topbar__right--scrolled),
    .ifinsta-topbar__right.ifinsta-has-overflow:not(.ifinsta-topbar__right--scrolled) {
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    /* Permanent subtle scroll indicator - smaller for mobile */
    .topbar__right.ifinsta-has-overflow:not(.topbar__right--scrolled)::before,
    .ifinsta-topbar__right.ifinsta-has-overflow:not(.ifinsta-topbar__right--scrolled)::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: var(--ifinsta-space-5);
        pointer-events: none;
        z-index: var(--ifinsta-z-base, 1);
    }

    /* Scroll hint animation */
    @keyframes scrollHint {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-var(--ifinsta-space-5));
        }
    }

    .topbar__right.scroll-hint,
    .ifinsta-topbar__right.ifinsta-scroll-hint {
        animation: scrollHint 0.8s ease-in-out 0.5s;
    }

    /* Scroll indicator arrow - smaller for mobile */
    .topbar__right::after,
    .ifinsta-topbar__right::after {
        content: '';
        position: absolute;
        right: var(--ifinsta-space-0-5);
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background: var(--ifinsta-primary);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: 0 1px var(--ifinsta-space-1) rgba(0, 102, 204, 0.4);
    }

    .topbar__right.ifinsta-has-overflow:not(.topbar__right--scrolled)::after,
    .ifinsta-topbar__right.ifinsta-has-overflow:not(.ifinsta-topbar__right--scrolled)::after {
        opacity: 1;
        animation: pulseScrollIndicator 2s ease-in-out infinite;
    }

    @keyframes pulseScrollIndicator {

        0%,
        100% {
            transform: translateY(-50%) scale(1);
        }

        50% {
            transform: translateY(-50%) scale(1.1);
        }
    }

    .topbar__action-btn,
    .search__trigger,
    .ifinsta-topbar__action-btn,
    .ifinsta-search__trigger {
        padding: 0.5rem;
    }

    .store-selector__label,
    .ifinsta-store-selector__label {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    /* Further reduced sizes for small screens */
    .store-selector__label,
    .store-selector__chevron,
    .ifinsta-store-selector__label,
    .ifinsta-store-selector__chevron {
        display: none;
    }

    .store-selector__toggle,
    .ifinsta-store-selector__toggle {
        padding: 0.375rem;
        background: transparent;
        border: none;
    }

    .store-selector__toggle:hover,
    .ifinsta-store-selector__toggle:hover {
        background: var(--ifinsta-dropdown-item-hover);
    }

    .store-selector__icon,
    .ifinsta-store-selector__icon {
        width: var(--ifinsta-space-3-5);
        height: var(--ifinsta-space-3-5);
    }

    /* Compact topbar */
    .topbar,
    .ifinsta-topbar {
        height: var(--ifinsta-space-12);
        min-height: var(--ifinsta-space-12);
    }

    .topbar__right,
    .ifinsta-topbar__right {
        max-height: var(--ifinsta-space-12);
    }

    /* Smaller menu toggle */
    .topbar__menu-toggle,
    .ifinsta-topbar__menu-toggle {
        width: 36px;
        height: 36px;
        padding: 0.25rem;
    }

    .topbar__menu-toggle svg,
    .ifinsta-topbar__menu-toggle svg {
        width: 20px;
        height: 20px;
    }

    /* Hide dividers */
    .topbar__divider,
    .ifinsta-topbar__divider {
        display: none;
    }

    /* Smaller profile switcher */
    .profile-switcher__indicator,
    .ifinsta-profile-switcher__indicator {
        width: var(--ifinsta-space-6);
        height: var(--ifinsta-space-6);
    }

    .profile-switcher__indicator svg,
    .ifinsta-profile-switcher__indicator svg {
        width: var(--ifinsta-space-4);
        height: var(--ifinsta-space-4);
    }

    /* Language code smaller */
    .language__code,
    .ifinsta-language__code {
        font-size: 0.625rem;
    }

    /* App nav icons smaller */
    .app-nav__link,
    .app-nav__link--marketplace,
    .app-more__toggle,
    .app-nav__link,
    .app-nav__link--marketplace,
    .app-more__toggle,
    .ifinsta-app-nav__link,
    .ifinsta-app-nav__link--marketplace,
    .ifinsta-app-more__toggle {
        min-width: 32px;
        height: 32px !important;
        padding: 0.25rem;
    }

    .ifinsta-app-nav__icon svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 360px) {
    .topbar__divider,
    .ifinsta-topbar__divider {
        display: none;
    }
}

@media (max-width: 480px) {
    .topbar,
    .ifinsta-topbar {
        padding: 0 0.5rem;
    }

    .topbar__center,
    .ifinsta-topbar__center {
        display: flex;
        padding: 0 0.25rem;
    }

    .topbar__right,
    .ifinsta-topbar__right {
        margin-left: auto;
        gap: 0.125rem;
    }

    .topbar__right,
    .ifinsta-topbar__right {
        max-width: 64vw;
    }

    .profile-switcher__mode-badge,
    .profile-switcher__chevron,
    .user-menu__chevron,
    .ifinsta-profile-switcher__mode-badge,
    .ifinsta-profile-switcher__chevron,
    .ifinsta-user-menu__chevron {
        display: none;
    }

    .profile-switcher__toggle,
    .ifinsta-profile-switcher__toggle {
        padding: 0.25rem;
    }

    .app-nav,
    .ifinsta-app-nav {
        width: 100%;
        margin-right: 0;
    }

    .app-nav__items,
    .ifinsta-app-nav__items {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .ifinsta-app-nav__items::-webkit-scrollbar {
        display: none;
    }

    .app-nav__link,
    .app-nav__link--marketplace,
    .app-more__toggle,
    .ifinsta-app-nav__link,
    .ifinsta-app-nav__link--marketplace,
    .ifinsta-app-more__toggle {
        min-width: 36px;
        height: 36px !important;
    }
}

@media (max-width: 380px) {

    /* Ultra-compact for very small screens */
    .topbar__menu-toggle,
    .profile-switcher__toggle,
    .user-menu__toggle,
    .ifinsta-topbar__menu-toggle,
    .ifinsta-profile-switcher__toggle,
    .ifinsta-user-menu__toggle {
        min-width: 32px;
        min-height: 32px;
        padding: 0.25rem;
    }

    .ifinsta-topbar__action-btn,
    .ifinsta-search__trigger {
        min-width: 32px;
        min-height: 32px;
    }

    .topbar__action-btn svg,
    .search__trigger svg,
    .ifinsta-topbar__action-btn svg,
    .ifinsta-search__trigger svg {
        width: 16px;
        height: 16px;
    }

    .profile-switcher__name,
    .ifinsta-profile-switcher__name {
        font-size: 0.75rem;
        max-width: 60px;
    }

    .user-menu__avatar,
    .ifinsta-user-menu__avatar {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    /* Minimal gaps */
    .topbar__right,
    .ifinsta-topbar__right {
        gap: 0.0625rem;
    }

    .ifinsta-topbar__left {
        gap: 0.375rem;
    }
}

/* Mobile reliability: ensure profile switcher is visible and dropdown is usable */
@media (max-width: 768px) {
    .ifinsta-profile-switcher {
        flex: 0 0 auto;
        position: relative;
        z-index: calc(var(--ifinsta-z-popover, 500) + 1);
    }

    .ifinsta-profile-switcher__toggle {
        min-width: 40px;
        min-height: 40px;
        padding: 0.375rem;
    }
}

@media (max-width: 350px) {
    .topbar,
    .ifinsta-topbar {
        padding: 0 0.375rem;
    }

    .ifinsta-topbar__left,
    .topbar__right,
    .ifinsta-topbar__right {
        gap: 0;
    }

    .topbar__right,
    .ifinsta-topbar__right {
        max-width: 68vw;
    }

    .app-nav__link,
    .app-nav__link--marketplace,
    .app-more__toggle,
    .ifinsta-app-nav__link,
    .ifinsta-app-nav__link--marketplace,
    .ifinsta-app-more__toggle {
        min-width: 34px;
        height: 34px !important;
    }
}

/* ==========================================================================
   MOBILE DROPDOWN POSITIONING
   Ensure dropdowns are properly positioned on small screens
   ========================================================================== */
@media (max-width: 480px) {

    /* Fix dropdown positioning on mobile - align to viewport edge if needed */
    .language__dropdown,
    .theme__dropdown,
    .store-dropdown,
    .ifinsta-language__dropdown,
    .ifinsta-theme__dropdown,
    .ifinsta-store-dropdown {
        position: fixed;
        top: 56px;
        /* Fixed position below topbar */
        right: 0.5rem;
        left: auto;
        margin-top: 0;
        max-width: calc(100vw - 1rem);
        z-index: var(--ifinsta-z-popover, 500);
        /* Ensure hidden dropdowns don't block touch */
        pointer-events: none;
    }

    .language__dropdown.dropdown--open,
    .theme__dropdown.dropdown--open,
    .store-dropdown.dropdown--open,
    .language__dropdown.ifinsta-dropdown--open,
    .theme__dropdown.ifinsta-dropdown--open,
    .store-dropdown.ifinsta-dropdown--open,
    .ifinsta-language__dropdown.dropdown--open,
    .ifinsta-theme__dropdown.dropdown--open,
    .ifinsta-store-dropdown.dropdown--open,
    .ifinsta-language__dropdown.ifinsta-dropdown--open,
    .ifinsta-theme__dropdown.ifinsta-dropdown--open,
    .ifinsta-store-dropdown.ifinsta-dropdown--open {
        pointer-events: auto;
    }

    .notifications__dropdown,
    .ifinsta-notifications__dropdown {
        position: fixed;
        top: 56px;
        right: 0.5rem;
        left: auto;
        width: calc(100vw - 1rem);
        max-width: 360px;
        margin-top: 0;
        z-index: var(--ifinsta-z-popover, 500);
        pointer-events: none;
    }

    .notifications__dropdown.dropdown--open,
    .notifications__dropdown.ifinsta-dropdown--open,
    .ifinsta-notifications__dropdown.dropdown--open,
    .ifinsta-notifications__dropdown.ifinsta-dropdown--open {
        pointer-events: auto;
    }

    .user-menu__dropdown,
    .profile-switcher__dropdown,
    .ifinsta-user-menu__dropdown,
    .ifinsta-profile-switcher__dropdown {
        position: fixed;
        top: 56px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
        margin-top: 0;
        z-index: calc(var(--ifinsta-z-popover, 500) + 20);
        pointer-events: none;
    }

    .user-menu__dropdown.dropdown--open,
    .profile-switcher__dropdown.dropdown--open,
    .profile-switcher__dropdown:not([hidden]),
    .user-menu__dropdown.ifinsta-dropdown--open,
    .profile-switcher__dropdown.ifinsta-dropdown--open,
    .ifinsta-user-menu__dropdown.dropdown--open,
    .ifinsta-profile-switcher__dropdown.dropdown--open,
    .ifinsta-profile-switcher__dropdown:not([hidden]),
    .ifinsta-user-menu__dropdown.ifinsta-dropdown--open,
    .ifinsta-profile-switcher__dropdown.ifinsta-dropdown--open,
    .ifinsta-profile-switcher__dropdown:not([hidden]) {
        pointer-events: auto;
    }
}

@media (max-width: 360px) {

    /* Full-width dropdowns on very small screens */
    .language__dropdown,
    .theme__dropdown,
    .store-dropdown,
    .notifications__dropdown,
    .user-menu__dropdown,
    .profile-switcher__dropdown,
    .ifinsta-language__dropdown,
    .ifinsta-theme__dropdown,
    .ifinsta-store-dropdown,
    .ifinsta-notifications__dropdown,
    .ifinsta-user-menu__dropdown,
    .ifinsta-profile-switcher__dropdown {
        right: 0.25rem;
        left: 0.25rem;
        width: auto;
        max-width: none;
    }
}

@media (pointer: coarse) and (max-width: 768px) {

    .topbar__menu-toggle,
    .search__trigger,
    .topbar__action-btn,
    .profile-switcher__toggle,
    .user-menu__toggle,
    .ifinsta-topbar__menu-toggle,
    .ifinsta-search__trigger,
    .ifinsta-topbar__action-btn,
    .ifinsta-profile-switcher__toggle,
    .ifinsta-user-menu__toggle {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .topbar *,
    .topbar *::before,
    .topbar *::after,
    .ifinsta-topbar *,
    .ifinsta-topbar *::before,
    .ifinsta-topbar *::after {
        animation: none !important;
        transition: none !important;
    }
}

.topbar button:disabled,
.topbar [aria-disabled="true"],
.ifinsta-topbar button:disabled,
.ifinsta-topbar [aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================================================
   DESKTOP REDESIGN: GLOBAL SEARCH TRIGGER
   ========================================================================== */
@media (min-width: 769px) {
    .topbar .search,
    .ifinsta-topbar .ifinsta-search {
        position: relative;
    }

    .topbar .search__trigger,
    .ifinsta-topbar .ifinsta-search__trigger {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--ifinsta-space-2);
        min-width: 9.5rem;
        height: 2.5rem;
        padding: 0 var(--ifinsta-space-3);
        border-radius: 999px;
        border: 1px solid var(--ifinsta-border);
        background: var(--ifinsta-bg-elevated);
        color: var(--ifinsta-text-muted);
        box-shadow: none;
        transition: transform var(--ifinsta-duration-200) var(--ifinsta-ease-smooth),
            border-color var(--ifinsta-duration-200) var(--ifinsta-ease-smooth),
            box-shadow var(--ifinsta-duration-200) var(--ifinsta-ease-smooth),
            color var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
    }

    .topbar .search__trigger::before,
    .ifinsta-topbar .ifinsta-search__trigger::before {
        content: "Search";
        font-size: 0.8rem;
        font-weight: var(--ifinsta-font-medium);
        letter-spacing: 0.01em;
        color: var(--ifinsta-text-muted);
        margin-right: 0.2rem;
    }

    .topbar .search__trigger svg,
    .ifinsta-topbar .ifinsta-search__trigger svg {
        width: 0.95rem;
        height: 0.95rem;
        color: var(--ifinsta-primary-600);
    }

    .topbar .search__shortcut,
    .ifinsta-topbar .ifinsta-search__shortcut {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.15rem;
        border-radius: 999px;
        background: var(--ifinsta-white-alpha-50);
        border: 1px solid var(--ifinsta-border-light);
    }

    .topbar .search__shortcut kbd,
    .ifinsta-topbar .ifinsta-search__shortcut kbd {
        min-width: 1.35rem;
        height: 1.2rem;
        padding: 0 0.3rem;
        border-radius: 0.35rem;
        border: 1px solid var(--ifinsta-border);
        background: var(--ifinsta-bg-elevated);
        box-shadow: inset 0 -1px 0 var(--ifinsta-border-light);
        color: var(--ifinsta-text);
        font-size: 0.62rem;
        font-weight: var(--ifinsta-font-semibold);
        letter-spacing: 0.02em;
    }

    .topbar .search__trigger:hover,
    .ifinsta-topbar .ifinsta-search__trigger:hover {
        transform: translateY(-1px);
        border-color: var(--ifinsta-primary-alpha-30);
        color: var(--ifinsta-text);
        box-shadow: none;
    }

    .topbar .search__trigger:hover::before,
    .ifinsta-topbar .ifinsta-search__trigger:hover::before {
        color: var(--ifinsta-text);
    }

    .topbar .search__trigger:focus-visible,
    .ifinsta-topbar .ifinsta-search__trigger:focus-visible {
        outline: none;
        border-color: var(--ifinsta-primary);
        box-shadow: none;
    }

    .topbar .search__trigger[aria-expanded="true"],
    .ifinsta-topbar .ifinsta-search__trigger[aria-expanded="true"] {
        border-color: var(--ifinsta-primary);
        color: var(--ifinsta-text);
        background: var(--ifinsta-bg-elevated);
    }
}