/* ===== HEADER STYLES ===== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    position: relative; /* needed for absolute-positioning mobile controls */
}

/* ===== LOGO ===== */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #2d3748;
    font-size: 24px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.header-logo:hover {
    transform: translateY(-2px);
}

.header-logo img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .header-logo img {
        height: 60px;
    }
}

.header-logo:hover img {
    transform: scale(1.05);
}

.header-logo i {
    font-size: 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== NAVIGATION ===== */
.header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ===== LANGUAGE SWITCHER (DESKTOP) ===== */
.header-lang {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 18px;
    margin-right: 8px;
}

.header-lang .lang-link {
    color: #2d3748;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(99,102,241,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(248,250,252,0.85));
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.header-lang .lang-link:hover {
    transform: translateY(-2px);
    color: #4c51bf;
    box-shadow: 0 12px 30px rgba(76,81,191,0.08);
    background: rgba(102,126,234,0.06);
}

.header-lang .lang-flag {
    width: 18px;
    height: 12px;
    display: inline-block;
    background-size: cover;
    border-radius: 2px;
}

.nav-link {
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

/* Standalone CTA button (no inheritance from .nav-link) */
.post-cta{
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #10b981, #059669);
    color:#fff;
    font-weight:800;
    font-size:16px;
    padding:10px 16px;
    border-radius:14px;
    border:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow: 0 10px 24px rgba(16,185,129,0.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-cta i{ color:#fff; font-size:18px; }
.post-cta:hover{ color:#fff; background: linear-gradient(135deg, #059669, #047857); transform: translateY(-3px); box-shadow:0 16px 36px rgba(16,185,129,0.35); }
.post-cta:focus{ outline:2px solid rgba(16,185,129,0.6); outline-offset:2px; }
@media (max-width:768px){ .post-cta{ padding:9px 12px; font-weight:700; font-size:15px; } }

/* ===== AUTH SECTION ===== */
/* ===== AUTH SECTION ===== */
.header-auth {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px; /* Предотвращение моргания */
}

.auth-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-width: 110px;
    justify-content: center;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.auth-btn:hover::before {
    left: 100%;
}

.auth-btn-outline {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    color: #6366f1;
    border: 2px solid #6366f1;
    backdrop-filter: blur(10px);
}

.auth-btn-outline:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
    border-color: transparent;
}

.auth-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.auth-btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

/* Анимация появления кнопок */
.auth-section {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Иконки в кнопках */
.auth-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.auth-btn:hover i {
    transform: scale(1.1);
}

/* ===== USER MENU ===== */
.user-menu {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2d3748;
}

.user-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    overflow: hidden;
}

.user-name {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    z-index: 1001;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: white;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

.dropdown-menu-items {
    padding: 12px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #4a5568;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.dropdown-item:hover::before {
    left: 100%;
}

.dropdown-item:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    transform: translateX(4px);
}

.dropdown-item.admin:hover {
    background: rgba(255, 102, 0, 0.1);
    color: #ff6600;
}

.dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background: rgba(102, 126, 234, 0.1);
    margin: 8px 0;
}

/* ===== MOBILE MENU TOGGLE ===== */
.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 12px;
    color: #667eea;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: #667eea;
    color: white;
}



/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .header-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .auth-btn span {
        display: none;
    }
    
    .auth-btn {
        padding: 8px 12px;
        min-width: 44px;
        border-radius: 20px;
    }
    
    .auth-section {
        gap: 8px;
    }

    .user-name {
        display: none;
    }

    .header-container {
        padding: 0 16px;
    }

    /* Keep header language switcher visible but compact on mobile
       so it doesn't push the header wider than the viewport. */
    /* Make the language switcher independent from the flow so it won't
       push or widen the header on small screens. Use absolute placement
       near the menu toggle and increase touch target size. */
    /* Place the language switcher near the profile/menu on the right so it
       does not collide with the logo on the left. */
    .header-lang {
        position: absolute;
        top: 50%;
        right: 145px;
        left: auto;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        z-index: 1002;
        pointer-events: auto;
    }

    /* Larger, touch-friendly pill for mobile */
    .header-lang .lang-link {
        color: #111827;
        font-weight: 700;
        padding: 10px 14px;
        border-radius: 14px;
        text-decoration: none;
        border: 1px solid rgba(102,126,234,0.12);
        background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95));
        box-shadow: 0 8px 22px rgba(16,24,40,0.06);
        font-size: 15px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        max-width: 140px; /* allow longer labels but keep within header */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .header-lang .lang-link:hover {
        transform: translateY(-2px);
        color: #4c51bf;
        background: rgba(102,126,234,0.06);
        box-shadow: 0 12px 30px rgba(76,81,191,0.06);
    }

    .header-lang .lang-link:hover {
        background: rgba(102,126,234,0.07);
        color: #4c51bf;
        transform: translateY(-1px);
    }

    /* Very small screens - keep the language switcher near the right/profile area */
    @media (max-width: 420px) {
        .header-lang { right: 145px; left: auto; }
        .header-lang .lang-link { max-width: 88px; font-size: 13px; padding: 8px 10px; }
    }

    /* Hide desktop language dropdown on small screens - we'll use mobileNavSimple instead */
    .desktop-lang { display: none; }
    /* Ensure the desktop language button is fully hidden on mobile */
    .lang-btn { display: none !important; }

    /* Mobile language chooser inside mobileNavSimple: show static links */
    .mobile-lang { display: block; width: 100%; }
    .mobile-lang .mobile-nav-link, .mobile-lang .mobile-lang-static { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; padding: 8px 12px; }
    .mobile-lang .mobile-lang-links { margin-left: 8px; display: flex; gap: 8px; align-items: center; }
    .mobile-lang .mobile-lang-option { display: inline-block; padding: 6px 8px; color: #374151; text-decoration: none; border-radius: 6px; line-height: 1; font-size: 14px; }
    .mobile-lang .mobile-lang-option:hover { background: rgba(102,126,234,0.06); color: #4c51bf; }
    .mobile-lang .lang-sep {
        margin: 0 8px;
        color: #9ca3af;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-size: 14px;
    }
    .mobile-lang .fa-globe { color: #374151; }

    /* Ensure header auth/profile area is anchored to the right so it doesn't overlap
       and leaves consistent space for the language switcher */
    .header-auth {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 1003;
    }

    .dropdown-menu {
        right: -8px;
    }
}

@media (max-width: 480px) {
    .header-logo span {
        display: none;
    }

    .auth-btn {
        padding: 12px;
    }

    .user-btn {
        padding: 8px 12px;
    }

    .header-container {
        height: 70px;
    }

    .dropdown-menu {
        min-width: 200px;
        right: -16px;
    }

    .mobile-nav {
        top: 70px;
    }
}

@media (max-width: 360px) {
    .header-auth {
        gap: 8px;
    }

    .auth-btn {
        padding: 10px;
        font-size: 12px;
    }

    .user-btn {
        padding: 6px 10px;
        gap: 8px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .mobile-user-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .mobile-user-name {
        font-size: 16px;
    }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ===== */
.notification-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.notification {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #667eea;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    margin-bottom: 12px;
    animation: slideInRight 0.3s ease;
    pointer-events: auto;
}

.notification-success {
    border-left-color: #10b981;
    color: #065f46;
}

.notification-error {
    border-left-color: #ef4444;
    color: #991b1b;
}

.notification-warning {
    border-left-color: #f59e0b;
    color: #92400e;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ===== УЛУЧШЕНИЯ ДЛЯ ACCESSIBILITY ===== */
.header-nav .nav-link:focus,
.auth-btn:focus,
.user-btn:focus,
.dropdown-item:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.user-btn[aria-expanded="true"] .fas.fa-chevron-down {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Non-semantic heading styles (used instead of H1/H2/H3) ===== */
.modal-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.footer-heading {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.section-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 2rem 0;
    text-align: center;
}

.view-all-wrapper {
    text-align: center;
    margin-top: 2rem;
}

/* Categories grid (moved from inline in vapemarket.php) */
.categories-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:16px;
    margin:18px 0;
    align-items:start;
}

.cat-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    border-radius:12px;
    background:#fff;
    border:1px solid #eef2f7;
    text-decoration:none;
    color:inherit;
    box-shadow:0 6px 18px rgba(15,23,42,0.04);
    transition:transform .12s ease,box-shadow .12s ease;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(15,23,42,0.08)}

.categories-grid .cat-card:first-child{grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding:20px 22px}

.cat-emoji{font-size:20px;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:10px}
.categories-grid .cat-card:first-child .cat-emoji{font-size:32px;min-width:72px;min-height:72px;background:linear-gradient(180deg,#fff,#fbfbff)}

.cat-name{font-weight:700;font-size:16px;color:#1f2937}

.cat-children{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.cat-child-link{text-decoration:none;color:#374151;font-size:13px;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #eef2f7}
.cat-child-link:hover{background:#eef2ff;color:#374151}

@media(max-width:900px){
    .categories-grid{grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));}
    .categories-grid .cat-card:first-child{grid-column:1 / -1}
}

@media(max-width:600px){
    .categories-grid{overflow:auto;padding-bottom:6px;grid-auto-flow:column;grid-auto-columns: minmax(140px, 1fr)}
    .cat-card{min-width:140px}
}

.cat-children{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.cat-child-link{text-decoration:none;color:#4a5568;font-size:13px;padding:4px 8px;border-radius:8px;background:#f8fafc;border:1px solid #eef2f7}
.cat-child-link:hover{background:#eef2ff;color:#3b49c3}

.section-subtitle {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.no-products-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-top: 8px;
}

/* ===== DESKTOP LANGUAGE DROPDOWN ===== */
.desktop-lang .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(99,102,241,0.06);
    padding: 6px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: #374151;
    font-weight: 700;
}

.desktop-lang .lang-btn i.fas.fa-globe {
    font-size: 16px;
}

.desktop-lang .lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 8px;
    min-width: 120px;
    display: none;
    z-index: 2000;
}

.desktop-lang .lang-dropdown .lang-option {
    display: block;
    padding: 8px 12px;
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
}

.desktop-lang .lang-dropdown .lang-option:hover {
    background: rgba(102,126,234,0.06);
    color: #4c51bf;
}

.desktop-lang.open .lang-dropdown {
    display: block;
}

/* Category icon variants (used on homepage sidebar and panels) */
.cat-icon, .cat-emoji { display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-img { width:20px; height:20px; object-fit:cover; border-radius:8px; display:inline-block; }
.cat-icon-img.large { width:40px; height:40px; border-radius:12px; }
.cat-icon-fa { font-size:20px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-fa.large { font-size:36px; width:64px; height:64px; }
.cat-icon-text { font-size:20px; min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-text.large { font-size:36px; min-width:64px; min-height:64px; }
.cat-icon-svg { width:20px !important; height:20px !important; max-width:20px; max-height:20px; display:inline-block; vertical-align:middle; }
.cat-icon-svg.large { width:40px !important; height:40px !important; max-width:40px; max-height:40px; }

@media (max-width: 600px) {
    .cat-icon-img { width:28px; height:28px; }
    .cat-icon-img.large { width:48px; height:48px; }
    .cat-icon-fa { font-size:16px; }
    .cat-icon-text { font-size:18px; }
    .cat-icon-svg { width:18px !important; height:18px !important; max-width:18px; max-height:18px; }
    .cat-icon-svg.large { width:32px !important; height:32px !important; max-width:32px; max-height:32px; }
}

/* ===== CATEGORIES LAYOUT FIXES ===== */
.categories-layout{
    /* center and match products grid max width */
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    max-width: 1400px; /* match .products-grid container */
    margin: 0 auto; /* center inside page */
    padding: 0 20px; /* align with product grid gutters */
}
.cat-sidebar{
    width: 260px; /* fixed-ish sidebar width */
    box-sizing: border-box;
    padding-right: 8px;
}
.cat-main{
    min-width: 0; /* allow shrinking and prevent child overflow */
    box-sizing: border-box;
}
.cat-list{ margin:0; padding:0; list-style:none; }
.cat-item{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; }
.cat-main-panel{ width:100%; box-sizing:border-box; overflow:hidden; }

@media (max-width: 900px) {
    .categories-layout{ grid-template-columns: 1fr; gap:12px; padding: 0 12px; }
    .cat-sidebar{ width:100%; padding-right:0; }
    .cat-main{ width:100%; }
}