/* =========================================
HEADER.CSS - Пълен стил за навигацията
========================================= */
/* =========================================
   ГЛОБАЛЕН ФИКС ЗА ХОРИЗОНТАЛЕН СКРОЛ
   ========================================= */
html, body {
    max-width: 100vw;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* --- 1. Основна Структура --- */
.site-header {
background-color: #fafafa; /* Цветът на логото */
box-shadow: 0 2px 10px #9370DB; 
position: sticky;
top: 0;
z-index: 1000;
padding: 10px 0;
transition: all 0.3s ease;
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}

/* --- 2. Лого --- */
.logo img {
height: 60px; /* Регулирай спрямо логото */
width: auto;
display: block;
}

/* --- 3. Навигация (Меню) --- */
.nav-menu ul {
display: flex;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}

.nav-menu a {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
color: var(--color-text);
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}

/* Ефект при посочване и активна страница */
.nav-menu a:hover,
.nav-menu a.active {
color: var(--color-primary); /* Тюркоаз */
font: bold;
}

/* Подчертаване при ховър */
.nav-menu a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--color-secondary); /* Лилаво */
transition: width 0.3s;
position: absolute;
bottom: -5px;
left: 0;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
width: 100%;
}

/* --- 4. Количка и Икони --- */
.header-icons {
display: flex;
align-items: center;
}

.cart-link {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}

/* При ховър върху целия линк (цена + икона) */
.cart-link:hover .cart-total-price {
color: var(--color-secondary); /* Лилава цена */
}

.cart-link:hover .shopping-bag-icon {
color: var(--color-secondary); /* Лилава чанта */
transform: scale(1.1); /* Леко увеличаване */
}

/* Цената (Текст) */
/* Фиксира ширината на сумата в хедъра, за да не бута другите елементи */
.cart-total-price {
    display: inline-block;
    min-width: 150px; 
    text-align: right;
    margin-right: 15px;
}

/* =========================================
   ИЗСКАЧАЩО ПРОЗОРЧЕ (ULTRA PREMIUM & MOBILE)
   ========================================= */
.quick-cart-alert {
    position: absolute; 
    top: calc(100% + 15px); 
    right: -10px; /* Леко изнасяне за перфектно подравняване с иконката */
    width: 360px; 
    background: #ffffff; 
    /* Модерна "скандинавска" сянка + много фин контур */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.03); 
    border-radius: 16px; 
    padding: 20px; 
    display: none; 
    z-index: 99999;
    opacity: 0; 
    transform: translateY(-15px) scale(0.95); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quick-cart-alert.show { 
    display: block; 
    opacity: 1; 
    transform: translateY(0) scale(1); 
}

/* Хедър с иконка и текст */
.alert-header-success {
    display: flex; 
    align-items: center; 
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; /* Нежен разделител */
}
.alert-header-success i { 
    font-size: 1.5rem; 
    color: #10b981; /* Елегантно изумрудено зелено */
}
.alert-header-success span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #111827; /* Тъмно, луксозно сиво-черно */
}

/* Съдържание */
.alert-content { 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    padding-top: 15px; 
}

/* Снимка */
.alert-img-wrapper { position: relative; flex-shrink: 0; }
.alert-content img { 
    width: 65px; 
    height: 85px; 
    object-fit: cover; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 1px solid #f9f9f9;
}

/* Оранжева значка за бройка */
.alert-qty-badge {
    position: absolute; 
    top: -8px; 
    right: -8px;
    background: var(--color-accent); /* Свежо, модерно оранжево */
    color: #ffffff;
    font-size: 0.7rem; 
    font-weight: 800;
    width: 24px; 
    height: 24px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
    border: 2px solid #ffffff;
    font-family: sans-serif;
}

/* Текст и цена */
.alert-text { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.alert-text strong { 
    color: #374151; 
    font-size: 1.05rem; 
    font-family: var(--font-heading); 
    line-height: 1.3; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alert-price { 
    color: var(--color-primary); 
    font-weight: 800; 
    font-size: 1.25rem; 
}

/* =========================================
   РЕСПОНСИВ ЗА ТЕЛЕФОН (ПЛУВАЩО ИЗВЕСТИЕ)
   ========================================= */
@media (max-width: 480px) {
    .quick-cart-alert {
        position: fixed; /* Откачаме го от хедъра */
        top: 80px; /* Появява се малко под главното меню */
        right: 15px; 
        left: 15px; 
        width: auto; /* Заема перфектно екрана с отстояние */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
    .alert-header-success span {
        font-size: 1rem;
    }
    .alert-text strong {
        font-size: 0.95rem;
    }
    .alert-price {
        font-size: 1.15rem;
    }
}
/* Обвивка на иконката */
.cart-icon-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

/* SVG Настройки за Торбичката */
.shopping-bag-icon {
color: var(--color-text); /* Основен цвят - Тъмно сиво */
transition: all 0.3s ease;
}

/* Червеното кръгче с бройката */
.cart-count {
position: absolute;
top: -4px;
right: -6px;
background-color: var(--color-accent); /* Керемидено/Оранжево */
color: white;
font-size: 0.7rem;
font-weight: bold;
padding: 0.5px 7px;
border-radius: 50%;
min-width: 16px;
text-align: center;
z-index: 2;
pointer-events: none; /* За да не пречи на клика */
}

/* --- 5. Мобилно Меню (Хамбургер) --- */
.menu-toggle {
display: none; /* Скрито на десктоп */
cursor: pointer;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.bar {
display: block;
width: 100%;
height: 3px;
background-color: var(--color-text);
border-radius: 3px;
transition: all 0.3s ease-in-out;
}

/* Анимация на хамбургера при отваряне */
.menu-toggle.is-active .bar:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}

/* --- 6. Адаптивност (Media Queries) --- */

/* За таблети и телефони */
@media (max-width: 900px) {
.menu-toggle {
display: flex; /* Показваме бутона */
}

.nav-menu {
position: fixed;
left: -100%; /* Скрито извън екрана */
top: 80px; /* Височината на хедъра */
background-color: var(--color-white);
width: 100%;
height: calc(100vh - 80px); /* Цялата височина надолу */
text-align: center;
transition: 0.3s ease-in-out;
box-shadow: 0 10px 10px rgba(0,0,0,0.05);
overflow-y: auto;
}

.nav-menu.active {
left: 0; /* Показване */
}

.nav-menu ul {
flex-direction: column;
padding: 40px 0;
gap: 25px;
}
.nav-menu a {
font-size: 1.3rem; /* По-голям текст за телефон */
}
}

/* За много малки телефони */
@media (max-width: 480px) {
.cart-total-price {
display: none; /* Скриваме цената, оставяме само иконата */
}
.header-container {
padding: 0 10px;
}
}