:root {
    --primary-font: 'Arial', sans-serif; /* Използвай шрифт, който ти допада */
    --text-color: #333;
    --background-color: #fff;
    --button-text-color: #000;
}



/* КЛЮЧОВО: Премахва всички външни марджини и пейдинги от HTML и BODY */
body, html {
     background-color: var(--background-color);
    font-family: var(--primary-font);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Предотвратява хоризонтално скролиране, ако нещо се разшири */
}


/* ==================================== */
/* 1. СТИЛОВЕ ЗА ХЕДЪРА И ЛОГОТО (НОВИ) ------------------------------------------------------------------------------------------------------------------*/
/* ==================================== */

/* Header (Контейнер на логото) */
.home-header {
    background-color: #fff;
    padding: 10px 0 5px 0;
    justify-content: center; /* Центрира логото хоризонтално */
    align-items: center;
}

/* Стилове за самото изображение на логото */
.home-logo {
    
    max-width: 100%; 
    height: auto;
    width: auto;
    display: block; 
    margin-bottom: 0;
}

/* ==================================== */
/* 2. СТИЛОВЕ ЗА КОНТЕЙНЕРА И СЪДЪРЖАНИЕТО */
/* ==================================== */

/* Общ контейнер за съдържанието */
.container {
    width: 90%;
    max-width: 400px; /* Ограничение за мобилен изглед */
    box-sizing: border-box;
    margin: 0 auto; /* Центрира контейнера хоризонтално */
}


h2.section-title {
    /* Този стил е по-специфичен от само h2 или само .section-title */
    font-size: 2em !important; /* Временно използвайте !important за тестване */
    font-weight: 900;
    margin: 0;
    margin-top: 0px; /* Отстояние от логото */
    margin-bottom: 10px; /* Отстояние от описанието */
    /* ... други стилове ... */
}



.section-title {
    font-size: 2.2em; /* Разумен размер, по-малък от главното заглавие */
    font-weight: bold;
    color: var(--text-color, #333); 
    margin-top: 10px; /* Отстояние от логото */
    margin-bottom: 10px; /* Отстояние от описанието */
    text-align: center; /* Центрираме текста хоризонтално */
    padding: 0 10px; /* Малък хоризонтален отстъп, ако текстът е дълъг */
}

/* Описание на страницата */
.description {
    font-size: 1.4em;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 10px;
    margin-top: 10px;
	font-weight: bold;
}

/* ==================================== */
/* 3. СТИЛОВЕ ЗА БУТОНИТЕ (УНИФИЦИРАНИ) */
/* ==================================== */

/* Групиране на бутоните */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    
    /* КЛЮЧОВО: Ограничаваме максималната ширина на групата бутони */
    max-width: 350px; /* Пример: Задайте максимална ширина, която Ви харесва */
    width: 90%; /* За да се свива на по-малки екрани */
    
    /* Центриране на цялата група бутони в контейнера */
    margin-left: auto;
    margin-right: auto;
}

/* Основен стил на бутона */
.button {
    background-color: var(--button-color);
    color: var(--button-text-color);
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    transition: transform 0.2s, opacity 0.2s;
   
}

/* Ефекти при интеракция */
.button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}


/* Презаписва общия цвят за основния бутон на формуляра за вход */
.primary-button {
    /* Задайте желания цвят тук. Например, зеленото #309e5f, което видяхме в HTML, 
       или друг цвят по Ваш избор. */
    background-color: #69dd63; /* <--- Заменете #1a73e8 с желания от Вас цвят */
}

/* СТИЛОВЕ САМО ЗА ГРУПАТА БУТОНИ НА HOME СТРАНИЦАТА */
.home-nav-group {
    /* Задаваме по-голяма максимална ширина, напр. 90% от контейнера,
       или фиксирана стойност по-голяма от 350px. */
    max-width: 400px; /* Увеличете тази стойност, за да разширите бутоните */
    width: 100%; 
    
    /* Запазваме центрирането */
    margin-left: auto;
    margin-right: auto;
    
    /* Добавяме и долния отстъп, който коригирахме преди */
    margin-bottom: 20px; 
}



/* --- СТИЛОВЕ ЗА ЕКРАН "ВХОД/РЕГИСТРАЦИЯ" --------------------------------------------------------------------------------------------------- */

.login-container {
    width: 90%;
    max-width: 400px;
    padding: 20px; 
    box-sizing: border-box;
    text-align: left; 

    /* НОВИ СТИЛОВЕ */
    display: flex; 
    flex-direction: column;
    justify-content: space-between; 
    min-height: 90vh; /* Осигурява разтягане на контейнера */
}

/* Навигация Назад */
.back-navigation {
    position: absolute;
    top: 20px;
    left: 20px;
}

.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 500;
}

.back-link svg {
    margin-right: 5px;
    stroke-width: 2.5; /* По-дебела стрелка */
}

/* Заглавие */
.main-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    margin-top: 60px;
}

/* Форма */
.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.2em;
}

.login-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Важно за padding и width */
    font-size: 1em;
    background-color: #f0f0f0; /* Светлосив цвят */
    /* 2. Може да премахнете рамката, за да изглежда по-чисто */
    border: 1px solid #ccc; 
}

.register-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Важно за padding и width */
    font-size: 1em;
}

/* Бутонът за вход */
.primary-button {
    width: 100%;
    /* Преизползваме стиловете на .button, но му даваме пълна ширина */
    margin-top: 15px;
    
}

.form-options {
    text-align: center;
    margin-top: 40px; /* Увеличен маржин */
    margin-bottom: 40px; /* Добавяме и долен маржин */
}

.forgot-password {
    display: block;
    color: #555;
    text-decoration: none;
    font-size: 1.1em;
    margin-bottom: 20px;
}

.separator {
    color: #aaa;
    margin: 15px 0;
    font-size: 1em;
}

/* Бутон Вход с Google */
.google-login-button {
    background-color: #17cfe0; /* Цвят на Google */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    
}

.google-icon {
    width: 30px;
    height: 30px;
    /* Трябва да добавиш иконата на Google в 'icons/google-icon.svg' */
}

/* Връзка за регистрация (долу) */
.register-link-footer {
    text-align: center;
    margin-top: 10px; /* Това избутва елемента най-надолу при Flexbox */
    font-size: 1.1em;
}

.register-link-footer a {
    color: #309e5f; /* Същият цвят като бутона за вход */
    font-weight: bold;
    text-decoration: none;
}

/* --- СТИЛОВЕ ЗА ЕКРАН "ЗАБРАВЕНА ПАРОЛА" ------------------------------------------------------------------------------------------------------------ */

.password-reset-text {
    text-align: center; /* Центриране на текста с инструкции */
    margin-bottom: 10px; /* Отстояние от формата */
    line-height: 1.5;
    font-size: 1.1em;
}

.input-group input {
    /* Осигурява, че полето заема цялата ширина на родителския елемент (.input-group) */
    width: 100%; 
    
    /* Задава вътрешния отстъп, който контролира височината на полето */
    padding: 12px 15px; /* <-- ТАЗИ СТОЙНОСТ КОНТРОЛИРА ВИСОЧИНАТА */
    
    /* Добавя рамка и заобля ъглите, както е на страницата за вход */
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    
    /* КЛЮЧОВО: Гарантира, че padding-ът не добавя към общата ширина на 100% */
    box-sizing: border-box; 
    transition: border-color 0.3s;
    background-color: #f0f0f0; /* Светлосив цвят */
    /* 2. Може да премахнете рамката, за да изглежда по-чисто */
    border: 1px solid #ccc; 
}

.register-link-footer a {
    /* Други стилове, които имате (цвят, подчертаване) */
    color: var(--primary-color, #007bff);
    text-decoration: none;
    font-weight: bold;

    /* КЛЮЧОВО: Кара линка да започне на нов ред */
    display: block; 

    /* Добавяме малко отстъп отгоре, за да не е залепен за текста */
    margin-top: 5px; 
}

/* --- СТИЛОВЕ ЗА ЕКРАН "СПИСЪК С ЛЕПЕНКИ" ------------------------------------------------------------------------------------------------- */

.list-container {
    min-height: 100vh; 
    padding: 0; 
    width: 100%;
    max-width: 600px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
}

/* 1. Горна лента: Назад и Статистика */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 15px 20px; /* По-малко отстояние отдясно за статистиката */
    
}

.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #555; /* По-мек цвят за връзка */
    font-size: 1em;
    font-weight: 500;
}

.back-link svg {
    margin-right: 5px;
    stroke-width: 2.5;
}

/* 1.1. Статистически блок (3 квадратчета) */
.sticker-stats-bar {
    display: flex;
    gap: 5px; /* Малко разстояние между квадратчетата */
}

.stat-box {
    width: 60px; /* Фиксирана ширина */
    height: 40px; /* Фиксирана височина */
    background-color: var(--stat-color); /* Цвят от inline стила */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333; /* Цвят на текста */
    padding: 5px 0;
}

.stat-number {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1;
    margin-top: 7px;
}

.stat-label {
    font-size: 0.7em;
    font-weight: 600;
    margin-top: 1px;
}

/* 2. Заглавие на секцията */
.section-title {
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    margin: 25px  15px 0;
    color: #333;
}

/* 3. Поле за търсене */
.search-bar {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px;
    
}

#sticker-search-input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px 0 0 8px; /* Заоблен само отляво */
    font-size: 1em;
    background-color: #f0f0f0; /* Светлосив цвят */
    /* 2. Може да премахнете рамката, за да изглежда по-чисто */
    border: 1px solid #ccc; 
    
      
    
}

.search-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 0 8px 8px 0; /* Заоблен само отдясно */
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 42px; /* Уравняваме височината с input полето */
    box-sizing: border-box;
}

/* 4. Списък с лепенки (Grid) */
.stickers-main-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 10px 20px 10px; /* Отстояние отстрани и отдолу */
}

.stickers-grid {
    display: grid;
    /* Две колони с еднаква ширина и малко разстояние между тях */
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    padding: 0 10px;
}

/* НОВ БЛОК: Контейнер за номера и бутона */
.sticker-action-row {
    display: flex; /* <-- ТОВА Е КЛЮЧОВОТО ПРАВИЛО! */
    justify-content: space-between; /* Разполага елементите в двата края */
    align-items: center;
    width: 100%;
    margin-top: 0px;
    gap: 10px;
    font-size: 1.2em;
}

.sticker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    
}

.sticker-image-placeholder {
    width: 100%;
    height: 100px; /* Фиксирана височина за снимката */
    background-color: #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    color: #666;
    overflow: hidden; /* Скрива частите на изображението, ако са по-големи */
}

/* --- СТИЛОВЕ ЗА ФИЛТЪРА (filter-controls) --- */
.filter-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Или space-between, ако искате да разпънете */
    margin: 10px 0; /* Разстояние преди/след грида и търсачката */
    padding: 0 10px; /* Вътрешен отстъп, ако е необходимо */
    margin-left: 20px;
    
}

.filter-controls label {
    font-weight: 600;
    color: #444;
    margin-right: 10px;
    font-size: 14px;
}

#sticker-filter {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    min-width: 150px; /* За да изглежда по-добре */
    -webkit-appearance: none; /* Премахване на стандартния стил на браузъра */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Добавете стил за скриване на елементи */
.sticker-item.hidden {
    display: none !important;
}

    /* СТИЛ ЗА СНИМКИТЕ ВЪТРЕ В ПЛЕЙСХОЛДЪРА В СПИСЪКА ------------------------------------------------------------------------------------------------*/
.sticker-card .sticker-img {
    width: 100%;
    height: 100%;
    /* 🔴 КОРЕКЦИЯ: Това е ключът за показване на ЦЯЛАТА снимка */
    object-fit: contain; 
    /* 💡 contain: Скалира снимката, за да се побере изцяло в контейнера, без да я изрязва. */
    /* Ако искаш да запълни целия контейнер, дори и с изрязване, използвай 'cover'. */
}

/* 💡 Добави височина на контейнера, за да има място за снимката */
/* Това гарантира, че контейнерът поддържа 
   съотношение 1:1 (квадрат) независимо от ширината. 
*/
.sticker-image-placeholder {
    /* Важно: Позициониране за да може снимката да седи върху padding-а */
    position: relative; 
    width: 100%;
    
    /* 🚨 КОРЕКЦИЯ: Намаляваме височината на 60% от ширината. 
       (100% - 40% = 60% за по-нисък контейнер) */
    padding-top: 30%; 
    
    overflow: hidden; /* Скрива излишните части на снимката, ако има такива */
    border-radius: 8px; 
}

.sticker-image-placeholder .sticker-img {
    /* Позиционира снимката абсолютно спрямо контейнера */
    position: absolute;
    
    /* 🚨 КОРЕКЦИЯ: Добавяме отстъп от 5% от всяка страна */
    top: 5%;    
    left: 5%;   
    
    /* 🚨 КОРЕКЦИЯ: Намаляваме ширината и височината на 90% 
       (5% отляво + 5% отдясно = 10% празно, остават 90% за снимката) 
    */
    width: 90%; 
    height: 90%;
    
    /* Снимката се побира изцяло в 90% пространството, запазвайки аспекта си. */
    object-fit: contain; 
    
    /* Добавяме леко заобляне на ъглите и на самата снимка за по-добър вид */
    border-radius: 4px; 
}

/* СТИЛ ЗА ГОЛЯМАТА СНИМКА В ДЕТАЙЛИТЕ --------------------------------------------------------------------------------*/
#large-image-placeholder {
    width: 100%;
    height: 250px; /* 💡 Задай по-голяма фиксирана височина */
    overflow: hidden;
}

.detail-img {
    width: 100%;
    height: 100%;
    /* 🔴 КОРЕКЦИЯ: Използваме 'contain', за да видим ЦЯЛАТА снимка */
    object-fit: contain; 
    /* 💡 object-fit: cover; се използва, ако предпочиташ да запълниш цялата височина, 
       дори ако се наложи да се изреже част отстрани. */
}

/* Стилове за номера */
.sticker-number {
    font-size: 1em; /* Малко увеличаваме размера на номера */
    font-weight: 700;
    color: #444;
    margin: 0; /* Премахваме предишния долен маржин */
    /* Даваме му малко място, но го оставяме да се свие */
    flex-shrink: 1; 
}

/* Стилове за бутона */
.open-button {
    /* Намаляваме широчината и запазваме място за номера */
    width: 65%; /* Намалена ширина */
    max-width: 100px; /* Може да добавим максимална ширина за контрол */
    padding: 6px 0; /* Малко по-малък padding, за да е по-компактен */
    background-color: #95ccbe;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    flex-grow: 1; /* Позволява му да заеме останалото място */
}

.open-button:hover {
    background-color: #7ab8a7;
}

/* 5. Долна навигация (Tab Bar) - Запазваме стиловете от преди */
/* ... */

/* --- СТИЛОВЕ ЗА ЕКРАН "ДЕТАЙЛИ НА ЛЕПЕНКАТА" ------------------------------------------------------------------------ */

.details-container {
    padding: 0; 
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 1. Горна лента (main-header) - Преизползваме стиловете за back-link и sticker-stats-bar от списъка */
.detail-header {
    /* Осигурява, че заглавната лента е над всичко */
    z-index: 10; 
    background-color: #fff;
}

/* 2. Заглавие на лепенката */
.detail-full-title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px;
    color: #333;
    text-align: left;
}

/* Този селектор е по-силен от обикновен .normal-text */
#detail-full-title .normal-text {
    font-weight: normal; 
}

/* style.css */

/* Този клас прави текста нормален, независимо дали е в h1, h2, или p */
.normal-text {
    font-weight: normal !important; /* <-- ДОБАВЕТЕ !important */
}

/* 3. Динамичен фон и снимка */
.image-background-wrapper {
    /* Фонът изпълва ширината на екрана */
    width: 100%; 
    padding: 20px 0; /* Добавя 20px отгоре и отдолу спрямо контейнера */
    background-color: #f0f0f0; /* Основен цвят, който ще се променя */
    transition: background-color 0.3s ease-in-out;
    margin-bottom: 20px;
}

.large-image-placeholder {
    /* Снимката е центрирана във фона */
    width: 80%; 
    max-width: 300px;
    height: 150px;
    background-color: transparent !important;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: #fff;
    
}

.sticker-image {
    /* Забранява маркирането на изображението като текст */
    -webkit-user-select: none; /* За Safari */
    -moz-user-select: none;    /* За Firefox */
    -ms-user-select: none;     /* За IE/Edge */
    user-select: none;         /* Стандартен синтаксис */
    
    /* Предотвратява кликване/двойно кликване върху елемента */
    pointer-events: auto; /* Обикновено auto е достатъчно, но може да опитате и none за други елементи */
}

.detail-description-text {
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.2;
    color: #444;
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold; 
    
    /* Може да искате да увеличите и малко размера, ако е необходимо */
    /* font-size: 1.1em; */ 
    
}

.detail-additional-info {
    /* Други стилове, ако имате такива */
    
    /* Добавете този ред: */
    text-align: left; 
    padding: 0 20px;
    
    /* Може да добавите и малко отстояние отгоре за по-добра четимост */
    margin-top: 15px; 
}

/* 4. Бутони за статус (3 на един ред) */
.status-buttons-row {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    gap: 10px;
    margin-bottom: 40px;
}

.status-btn {
    flex: 1;
    background-color: var(--btn-color);
    color: #333;
    padding: 10px 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.2s, transform 0.2s;
}

.status-btn:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.btn-label {
    font-size: 1.5em;
    font-weight: 600;
}



/* 5. Бутон за маршрут */
.show-route-btn {
    position: fixed; 
    bottom: 20px; 
    width: 90%; 
    max-width: 560px;
    left: 50%;
    transform: translateX(-50%); 
    background-color: #95ccbe;
    z-index: 1000; 
    padding: 15px 20px;
    border-radius: 8px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
}

.route-icon {
    margin-right: 8px;
}

/* --- СТИЛОВЕ ЗА ЕКРАН "КАРТА С ЛЕПЕНКИ" --------------------------------------------------------------------------------------------- */

.map-container {
    /* Наследяваме flex-direction: column и min-height: 100vh */
    padding: 0;
}

/* Намаляваме горното заглавие, за да не се бърка с основния контейнер */
.map-title {
    margin: 20px 0 10px 0;
}

/* Стилове за зеления надпис/бутон */
.map-location-trigger-text {
    background: none;
    border: none;
    color: #309e5f; /* Зелен цвят */
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 0;
    text-decoration: underline;
}

/* Основна секция за картата */
.map-main-content {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden; /* Важно, за да не се появи скрол */
}

/* Промененият контейнер на картата */
#map-canvas, .map-canvas-placeholder {
    width: 100vw !important;
    height: 80vh; /* Регулирай това според нуждите ти */
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

/* 3. Ако искаш картата да е точно до долу без празно място */
.map-container-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* Икона за геолокация (върху картата) */
.recenter-location-btn {
    position: absolute;
    bottom: 20px; /* Отстояние от долния край */
    right: 20px; /* Отстояние от десния край */
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Кръгъл фон */
    background-color: #fff;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5; /* Над картата */
}

.recenter-location-btn svg {
    stroke: #309e5f; /* Зелен цвят на иконата */
    stroke-width: 2;
}


/*=====================================================
СТИЛОВЕ ЗА TAB BAR НАВИГАЦИЯ (tab-bar)
Това е навигацията в дъното на екрана (Начало, Списък, Карта)
=====================================================
*/

.tab-bar {
    display: flex;
    justify-content: space-around; /* Равномерно разстояние по подразбиране */
    align-items: center;
    width: 80%;
    max-width: 600px; /* Ограничава ширината на лентата */
    margin: 0 auto; /* Центрира лентата */
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0px; /* Стойност, по-голяма от височината на самия футър */
    left: 0; 
    right: 0; 
    width: 100%;     
    padding: 10px 0; 
    z-index: 1000;
    transform: translateY(0); /* Начална позиция */
    transition: transform 0.3s ease-out;
    
}

/* Скриване: Избутва елемента извън екрана */
.tab-bar.hidden {
    transform: translateY(100%);
}

/* Показване: Връща елемента обратно */
.tab-bar.show {
    transform: translateY(0);
}



/* Ако искаме да добавим **фиксирано** разстояние между тях (например 25px) */
.tab-bar.fixed-spacing {
    justify-content: center;
    gap: 25px; /* <-- Разстояние между линковете */
}

.tab-item {
    text-decoration: none;
    color: #555;
    font-weight: 600;
    padding: 8px 15px; /* Отстъп за по-голяма допирна зона */
    border-radius: 6px;
    transition: color 0.3s, background-color 0.3s;
}

.tab-item:hover {
    color: #007bff;
}

.tab-item.active {
    background-color: var(--tab-color, #007bff); /* Използва inline цвета или син по подразбиране */
    color: #333;
    
}


/* ======================================= */
/* НАЧАЛЕН ЕКРАН (HOME) СТИЛОВЕ --------------------------------------------------------------------------------------------------------------- */ 
/* ======================================= */

/* ======================================= */
/* НАЧАЛЕН ЕКРАН (HOME) СТИЛОВЕ */
/* ======================================= */

/* Основен wrapper за home.html, за да контролираме flexbox */
.home-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 600px; /* Ограничение за по-големи екрани */
    margin: 0 auto; /* Центрира wrapper-а */
    background-color: var(--background-color); /* Фон на страницата */
    box-sizing: border-box;
    padding-bottom: 80px; /* Отстояние за фиксирания бутон за изход */
    position: relative; /* Важно за позиционирането на footer-а */
}

/* 1. Лого в горната част */
.home-header {
    width: 100%;
    padding: 10px 0;
    background-color: #fff; /* Бял фон за лентата на логото */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px; /* Отстояние под лентата */
    box-sizing: border-box; /* За да не излиза padding извън width */
}

.home-logo {
    max-width: 400px; /* Максимална ширина на логото */
    height: auto;
}
/* Ако използваш текстов надпис вместо картинка */
.home-logo-text {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--text-color, #333);
    margin: 0;
}


/* Основно съдържание на страницата (без header и footer) */
.home-main-content {
    flex-grow: 1; /* Позволява на основното съдържание да заема наличното място */
    padding: 0 20px; /* Хоризонтално отстояние на съдържанието */
    box-sizing: border-box;
}

/* ================================== */
/* СТИЛОВЕ ЗА ПРОФИЛНАТА СЕКЦИЯ (HOME) ------------------------------------------------------------------------------------------------------*/
/* ================================== */

/* 1. Общ контейнер за профила */
.user-profile-section {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; 
    align-items: center; /* Центрира снимката и текста */
    padding: 10px 0;
    text-align: center;
}

/* 2. Обвиващият елемент около снимката, ако трябва да добавяме рамка/сянка */
.profile-picture-wrapper {
    position: relative; /* Важно, ако решим да добавяме овърлей или иконка в ъгъла */
    margin-bottom: 15px; /* Разстояние между снимката и поздравителния текст */
    /* Можете да добавите и граница или сянка тук, ако искате */
}

/* 3. Стилове за самата IMG снимка */
.profile-img {
    width: 120px; /* Размер на снимката */
    height: 120px;
    border-radius: 50%; /* Прави снимката кръгла */
    object-fit: cover; /* Гарантира, че снимката запълва кръга без деформация */
    border: 3px solid var(--button-color, #eec460); /* Рамка около снимката */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    /* КЛЮЧОВО: Показва, че е кликаема */
    cursor: pointer; 
    transition: opacity 0.2s; 
}

/* Ефект при натискане */
.profile-img:active {
    opacity: 0.8; 
}

/* 4. Поздравителен текст */
.greeting-text-large {
    font-size: 1.6em;
    color: var(--text-color, #333);
    margin: 0px; /* Премахва автоматичните margin-и на <p> */
}

/* 3. Трите бутона за статистика на един ред (същите като преди, но с нови margin) */
.stats-grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px; /* Разстояние под статистиките */
    margin-top: 10px;
}

.stat-card {
    flex: 1;
    padding: 5px 5px;
    border-radius: 8px;
    text-align: center;
   
}

.stat-label {
    font-size: 0.9em;
    color: #555;
    /* КОРЕКЦИЯ: Нулираме горния отстъп */
    margin-top: 0; 
    margin-bottom: 5px; 
    font-weight: 500;
}

.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    /* КОРЕКЦИЯ: Нулираме всички външни отстъпи */
    margin: 0; 
}

/* Цветове за статистическите карти - запазваме ги */
.stat-collected { background-color: #fddf97; }
.stat-wanted { background-color: #c8e4bc; }
.stat-missing { background-color: #f9bd99;  }

.stat-collected .stat-value { color: #000; }
.stat-wanted .stat-value { color: #000; }
.stat-missing .stat-value { color: #000; }




/* 4. Три хоризонтални бутона за навигация (нови) */
.home-nav-group {
    display: flex;
    flex-direction: column; /* Бутоните един под друг */
    gap: 15px; /* Разстояние между бутоните */
    margin-bottom: 0px; /* Отстояние преди долния бутон или footer */
}

.home-nav-btn {
    background-color: #fddf97; /* Цветът, който поиска - светло оранжево */
    color: var(--text-color, #333); /* По-тъмен текст, за да се чете на светъл фон */
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    border: none;
}
.home-nav-btn:hover {
    background-color: #e0c885; /* По-тъмен нюанс при hover */
}


/* 5. Бутон за изход (фиксиран долу) - ревизиран */
/* 🔴 ПРЕМАХНИ: (или пропусни) стиловете за .fixed-bottom-btn */

/* 5. Бутон за изход (вече не е фиксиран) */
.logout-btn {
    /* 🔴 КОРЕКЦИЯ: Презаписваме фона на бутона, но запазваме общия стил на home-nav-btn */
    background-color: #e74c3c; /* Червен цвят за изход */
    color: white;
}
.logout-btn:hover {
    background-color: #c0392b; /* По-тъмен нюанс при hover */
}

/* 6. Copyright надпис */
.home-footer {
    width: 100%;
    padding: 15px 20px;
    text-align: center;
    font-size: 1em;
    color: #888;
    margin-top: auto; /* Залепя footer-а най-отдолу, ако content-а е малко */
    box-sizing: border-box;
    /* За да се вижда, дори ако fixed бутонът го закрива */
    position: absolute; 
    bottom: 0;
    left: 0;
}