/*
Theme Name: Nuty Stylu (Black Gold Custom)
Author: Review Space
Description: Ексклюзивна тема для парфумерного блогу. Без Elementor.
Version: 1.0
Text Domain: nuty-stylu
*/

/* --- ГЛОБАЛЬНІ ЗМІННІ (Наш Стиль) --- */
:root {
    --bg-dark: #050505;       /* Глибокий чорний */
    --bg-card: #121212;       /* Темно-сірий для блоків */
    --gold: #d4af37;          /* Основне золото */
    --gold-hover: #b8860b;    /* Темне золото для наведення */
    --text-main: #f0f0f0;     /* Майже білий текст */
    --text-muted: #aaaaaa;    /* Сірий текст */
    --font-heading: 'Playfair Display', serif; /* Для заголовків */
    --font-body: 'Montserrat', sans-serif;     /* Для тексту */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--gold);
    margin-bottom: 20px;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: #fff;
}

/* Контейнер (щоб контент не розповзався) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ВИПРАВЛЕННЯ КОЛЬОРІВ */
.text-muted {
    color: #cccccc !important; /* Робимо сірий текст світлішим */
}

.blog-post p {
    color: #e0e0e0; /* Колір основного тексту посту */
}

/* На всяк випадок для контенту */
.entry-content, .entry-content p {
    color: #f0f0f0;
}

/* --- HERO SECTION --- */
.hero-section {
    min-height: 85vh; /* Майже на весь екран */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -80px; /* Компенсація відступу хедера, щоб картинка була під меню */
    
    
}

/* Затемнення картинки, щоб текст читався */
/* --- ПОКРАЩЕНА HERO SECTION --- */

/* 1. Робимо картинку темнішою, щоб текст "світився" */
/* --- HERO SECTION (ВИПРАВЛЕНА ПРОЗОРІСТЬ) --- */

/* --- HERO SECTION (CRYSTAL CLEAR) --- */

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Логіка:
       0% - 60%: ПОВНІСТЮ прозоро (видно флакони і боки ідеально)
       80%: Легке затемнення
       100%: Чорний колір (щоб злитися з футером/контентом)
    */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 50%, 
        rgba(0,0,0,0.6) 80%, 
        #050505 100%
    );
    z-index: 1;
}

/* Кнопка на банері (покращуємо читабельність) */
.hero-section .btn-custom-gold {
    background-color: #d4af37;
    color: #000000; /* Чорний текст на золоті читається найкраще */
    font-weight: 700;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); /* Золоте світіння */
}

/* 3. Кнопки теж піднімаємо над фоном */
.hero-section .btn {
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Тінь кнопки */
}

.ls-2 { letter-spacing: 2px; font-size: 0.9rem; }

/* Золота Кнопка */
.btn-custom-gold {
    background-color: #d4af37;
    color: #000;
    font-weight: 600;
    border: 1px solid #d4af37;
    transition: all 0.3s ease;
}

.btn-custom-gold:hover {
    background-color: transparent;
    color: #d4af37;
}

/* Картки категорій */
.border-gold {
    border: 1px solid #333;
    transition: 0.3s;
    background: #111;
}

.border-gold:hover {
    border-color: #d4af37;
    transform: translateY(-5px);
}

/* --- ВИПРАВЛЕННЯ ТЕКСТУ БЛОГУ --- */

/* Робимо опис (excerpt) світлим і читабельним */
.excerpt, 
.excerpt p, 
.entry-content, 
.entry-content p {
    color: #d1d1d1 !important; /* Світле срібло */
    font-weight: 400; /* Трохи жирніший, щоб краще читався */
    line-height: 1.6;
}

/* Робимо заголовок статті золотим при наведенні */
.blog-post h2 a {
    color: #f0f0f0; /* Білий за замовчуванням */
    text-decoration: none;
    transition: 0.3s;
}

.blog-post h2 a:hover {
    color: #d4af37; /* Золотий при наведенні */
}


/* --- КАРТКИ КАТЕГОРІЙ --- */

.cat-card {
    background-color: #121212; /* Темно-сірий фон (світліший за чорний сайт) */
    border: 1px solid #333;    /* Тонка рамка */
    border-radius: 12px;       /* Закруглені кути */
    padding: 30px;             /* Відступи всередині */
    height: 100%;              /* Однакова висота */
    transition: all 0.3s ease; /* Плавна анімація */
}

/* Ефект при наведенні мишкою */
.cat-card:hover {
    background-color: #1a1a1a; /* Стає ще світлішою */
    border-color: #d4af37;     /* Рамка стає золотою */
    transform: translateY(-7px); /* Картка "підлітає" вгору */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Текст всередині карток */
.cat-card h3 {
    color: #d4af37; /* Золотий заголовок */
    margin-bottom: 15px;
}

.cat-card p {
    color: #cccccc; /* Світло-сірий опис (добре читається) */
    font-size: 0.95rem;
    line-height: 1.5;
}



/* --- ЛОГОТИП ВАРІАНТ 1 (VOGUE) --- */
.brand-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;      /* Розмір */
    font-weight: 700;       /* Жирний */
    text-transform: uppercase; /* Тільки великі літери */
    letter-spacing: 4px;    /* Широкі відступи між буквами (ознака люксу) */
    color: #ffffff !important; /* Перше слово біле */
    display: flex;
    align-items: center;
}

.brand-logo .gold-accent {
    color: #d4af37 !important; /* Друге слово золоте */
    margin-left: 5px;          /* Відступ між словами */
}

.brand-logo:hover {
    opacity: 0.8; /* Легкий ефект при наведенні */
}

/* --- СУЧАСНІ ФУНКЦІЇ (MODERN FEATURES) --- */

/* 1. Sticky Header Effect */
.navbar {
    transition: 0.4s all ease;
}

.navbar.scrolled {
    background-color: rgba(5, 5, 5, 0.95) !important; /* Майже чорний, непрозорий */
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    border-bottom: 1px solid #d4af37; /* З'являється золота лінія */
}

/* 2. Кнопка "Вгору" (Back to Top) */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #d4af37; /* Золотий фон */
    color: black;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Кругла */
    font-size: 18px;
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

#backToTop:hover {
    background-color: #fff; /* Біла при наведенні */
    transform: translateY(-5px);
}

/* 3. Оформлення контенту статті */
.entry-content h2, 
.entry-content h3 {
    color: #d4af37;
    font-family: 'Playfair Display', serif;
    margin-top: 40px;
    margin-bottom: 20px;
}

.entry-content ul {
    list-style: none;
    padding-left: 0;
}

.entry-content ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #ccc;
}

.entry-content ul li::before {
    content: "•";
    color: #d4af37;
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -5px;
}


/* --- МОБІЛЬНА АДАПТАЦІЯ (Mobile Fix) --- */
@media (max-width: 768px) {
    /* 1. Робимо шрифт заголовка меншим */
    .hero-section h1 {
        font-size: 2.5rem !important;
        margin-bottom: 20px;
    }

    /* 2. Опис робимо компактнішим */
    .hero-section .lead {
        font-size: 1rem !important;
        padding: 0 10px;
    }

    /* 3. Кнопки ставимо в стовпчик, щоб не злипалися */
    .hero-section .d-flex {
        flex-direction: column; /* Вертикально */
        align-items: center;
        gap: 15px !important;   /* Відступ між кнопками */
    }

    .hero-section .btn {
        width: 100%;       /* Кнопка на всю ширину */
        max-width: 280px;  /* Але не гігантська */
        display: block;
    }
    
    /* 4. Корекція фону, щоб пляшки було видно краще */
    .hero-section {
        background-position: 65% center !important; /* Трохи зсуваємо картинку */
        min-height: 70vh !important; /* Менша висота для телефону */
    }
}

/* --- ВИПРАВЛЕННЯ МОБІЛЬНОГО МЕНЮ (MOBILE MENU FIX) --- */

/* 1. Робимо меню найвищим шаром (щоб кнопка клікалась) */
.navbar {
    z-index: 99999 !important;
    position: relative; /* Або fixed, якщо у вас sticky header */
}

/* 2. Стилізація випадаючого списку */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #050505; /* Чорний фон */
        border-top: 1px solid #333;
        padding: 20px;
        position: absolute; /* Щоб воно випадало поверх контенту */
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    }

    /* Відступи для посилань в меню */
    .navbar-nav .nav-item {
        margin-bottom: 15px;
        text-align: center;
        border-bottom: 1px solid #222;
        padding-bottom: 10px;
    }
    
    .navbar-nav .nav-link {
        font-size: 1.2rem;
        color: #fff !important;
    }
}

/* --- ПРИМУСОВИЙ СТИЛЬ МОБІЛЬНОГО МЕНЮ --- */

/* Піднімаємо кнопку над банером, щоб вона точно натискалася */
.navbar-toggler {
    z-index: 10000; 
    position: relative;
    background-color: rgba(0,0,0,0.5); /* Легкий фон під кнопкою для тесту */
}

/* Стиль відкритого меню */
.navbar-collapse.show {
    display: block !important; /* Примусово показуємо */
    background-color: #000000 !important; /* Чорний фон */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 20px;
    border-bottom: 2px solid #d4af37; /* Золота лінія знизу */
}

/* Пункти меню */
.navbar-collapse.show .nav-link {
    display: block;
    padding: 15px 0;
    font-size: 1.2rem;
    color: #ffffff !important;
    text-align: center;
    border-bottom: 1px solid #333;
}




/* ================================================= */
/* === РОЗУМНЕ МЕНЮ: DESKTOP + MOBILE (FINAL) === */
/* ================================================= */

/* --- ЧАСТИНА 1: ТІЛЬКИ ДЛЯ КОМП'ЮТЕРІВ (Ширше 980px) --- */
@media screen and (min-width: 981px) {
    /* Змушуємо батьківські пункти стояти в рядок */
    li.menu-item-has-children {
        display: inline-block !important; 
        position: relative !important;
    }

    /* Ховаємо випадаюче меню */
    ul.sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        background-color: #000000 !important;
        min-width: 220px;
        z-index: 99999;
        padding: 10px 0;
        border: 1px solid #d4af37;
    }

    /* Показуємо при наведенні */
    li.menu-item-has-children:hover > ul.sub-menu {
        display: block !important;
    }
}



/* --- ЧАСТИНА 2: МОБІЛЬНЕ МЕНЮ (JS ACCORDION) --- */
@media screen and (max-width: 991px) {
    
    /* 1. Налаштування контейнера */
    ul.navbar-nav, li.menu-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Стиль головних пунктів */
    li.menu-item > a {
        display: block !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #222;
        color: #fff !important;
        font-size: 16px;
        position: relative; /* Щоб позиціонувати стрілочку */
    }

    /* 3. Додаємо стрілочку до пунктів, що мають підменю (Marki ▼) */
    li.menu-item-has-children > a::after {
        content: '▼';
        font-size: 10px;
        color: #d4af37; /* Золота стрілка */
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s;
    }

    /* Якщо меню відкрите - перевертаємо стрілочку */
    li.menu-item-has-children.open-mobile > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* 4. ГОЛОВНЕ: Ховаємо підменю за замовчуванням! */
    ul.sub-menu {
        display: none !important; /* СХОВАНО */
        background-color: #111 !important;
        padding: 0 !important;
        border-left: 3px solid #d4af37; /* Лінія збоку */
    }

    /* 5. Показуємо ТІЛЬКИ коли додано клас .open-mobile (через JS) */
    li.menu-item-has-children.open-mobile > ul.sub-menu {
        display: block !important; /* ПОКАЗАНО */
    }

    /* Стиль підпунктів */
    ul.sub-menu li a {
        padding-left: 30px !important;
        color: #bbb !important;
        font-size: 14px;
        border-bottom: 1px solid #1a1a1a;
    }
}


/* Контейнер підписки */
.custom-subscribe-wrapper {
    background: #000; /* Чорний фон */
    border: 1px solid #D4AF37; /* Золота рамка */
    padding: 30px;
    text-align: center;
    max-width: 500px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); /* Легке золоте світіння */
}

/* Поле вводу */
.sub-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background: #1a1a1a;
    border: 1px solid #444;
    color: #fff;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box; /* Щоб padding не ламав ширину */
}

.sub-input:focus {
    border-color: #D4AF37;
    outline: none;
}

/* Кнопка */
.sub-btn {
    background: #D4AF37;
    color: #000;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
}

.sub-btn:hover {
    background: #fff; /* Біла кнопка при наведенні */
    color: #000;
}

/* Дрібний текст знизу */
.sub-footer {
    font-size: 12px;
    color: #888;
    margin-top: 15px;
    letter-spacing: 0.5px;
}

/* Повідомлення про статус */
.ns-sub-message {
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
    border: 1px solid;
}
.ns-success { color: #D4AF37; border-color: #D4AF37; }
.ns-warning { color: #fff; border-color: #fff; }
.ns-error { color: #ff4d4d; border-color: #ff4d4d; }



/* Якщо форма всередині хедера - робимо її компактною */
header .custom-subscribe-wrapper {
    background: transparent; /* Прозорий фон */
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 10px;
}
header .sub-input {
    width: 60%; /* Поле коротше */
    display: inline-block;
}
header .sub-btn {
    width: 35%; /* Кнопка збоку */
    display: inline-block;
}





/* --- Стилізація форми підписки СПЕЦІАЛЬНО ДЛЯ ХЕДЕРА --- */

/* 1. Позиціонування контейнера в хедері */
.header-subscribe-container {
    display: flex;
    justify-content: flex-end; /* Притискаємо вправо */
    margin-top: 10px;
    margin-right: 20px;
}

/* 2. Скидаємо стилі стандартної обгортки (щоб не було чорного блоку на пів екрану) */
.header-subscribe-container .custom-subscribe-wrapper {
    background: transparent !important; /* Прозорий фон */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important; /* Дозволяємо розтягуватись як треба */
}

/* 3. Робимо форму в один рядок (Flexbox) і додаємо золоту рамку */
.header-subscribe-container form {
    display: flex;
    align-items: center;
    border: 1px solid #D4AF37; /* Спільна рамка */
    border-radius: 4px;
    background: #000; /* Фон всередині рамки */
}

/* 4. Поле вводу (Input) */
.header-subscribe-container .sub-input {
    margin-bottom: 0 !important; /* Прибираємо відступ знизу, який є в стандартному коді */
    border: none !important; /* Прибираємо рамку самого інпуту */
    background: transparent !important;
    color: #fff;
    width: 200px; /* Компактна ширина */
    padding: 8px 15px;
    text-align: left; /* Текст зліва, а не по центру */
}

/* 5. Кнопка (Button) */
.header-subscribe-container .sub-btn {
    width: auto !important; /* Кнопка не на всю ширину */
    margin: 0 !important;
    border: none !important;
    border-left: 1px solid #D4AF37 !important; /* Роздільник між полем і кнопкою */
    padding: 8px 15px;
    background: #D4AF37;
    color: #000;
    font-size: 13px;
    height: 100%; /* На всю висоту форми */
}

.header-subscribe-container .sub-btn:hover {
    background: #fff;
    color: #000;
}

/* 6. Текст знизу (Zero spam...) */
.header-subscribe-container .sub-footer {
    text-align: right !important; /* Вирівнювання тексту вправо */
    margin-top: 5px !important;
    color: #bbb;
    font-size: 10px;
}



/* Приховати форму підписки на екранах менше 1024px (планшети і телефони) */
@media screen and (max-width: 1024px) {
    .header-subscribe-container {
        display: none !important;
    }
}


/* --- КОД ДЛЯ ПРИХОВУВАННЯ НА МОБІЛЬНОМУ --- */
@media screen and (max-width: 1200px) {
    .header-subscribe-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* --- Стиль форми ТІЛЬКИ для мобільного (внизу сторінки) --- */
.mobile-subscribe-container {
    background-color: #000;
    border-top: 1px solid #D4AF37; /* Золота лінія зверху */
    border-bottom: 1px solid #D4AF37;
    padding: 30px 20px;
    text-align: center;
    margin-top: 20px;
}

/* Скидаємо стилі, які ми писали для хедера */
.mobile-subscribe-container .custom-subscribe-wrapper {
    display: block !important; /* Робимо блоком, а не флексом */
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.mobile-subscribe-container form {
    display: flex;
    flex-direction: column; /* Елементи один під одним */
    gap: 10px; /* Відстань між полем і кнопкою */
}

/* Поле вводу на всю ширину */
.mobile-subscribe-container .sub-input {
    width: 100% !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    padding: 15px !important; /* Великі відступи для зручності пальця */
    font-size: 16px !important; /* Більший шрифт */
    color: #fff !important;
    text-align: center;
    border-radius: 4px;
}

/* Кнопка на всю ширину */
.mobile-subscribe-container .sub-btn {
    width: 100% !important;
    background: #D4AF37 !important;
    color: #000 !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: bold;
    border: none !important;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Текст про спам */
.mobile-subscribe-container .sub-footer {
    display: block !important;
    margin-top: 15px !important;
    color: #888;
    font-size: 12px;
}




/* ================================================================ */
/* ВИПРАВЛЕНИЙ СТИЛЬ (ЗВЕРТАННЯ ПО КЛАСУ .ns-input) */
/* ================================================================ */

/* 1. Головна рамка */
html body .ns-contact-wrapper {
    background-color: #000000 !important;
    border: 1px solid #D4AF37 !important;
    padding: 40px;
    max-width: 600px;
    margin: 40px auto;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 2. Текстові підписи (Label) */
html body .ns-contact-wrapper label {
    color: #D4AF37 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    display: block !important;
    margin-bottom: 8px !important;
}

/* 3. ПОЛЯ ВВОДУ (Використовуємо спільний клас .ns-input) */
/* Це набагато надійніше, ніж перераховувати імена */
html body .ns-contact-wrapper .ns-input {
    background-color: #111111 !important; /* Темний фон */
    border: 1px solid #444 !important;    /* Темна рамка */
    color: #ffffff !important;            /* Білий текст */
    padding: 15px !important;
    width: 100% !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    min-height: 50px; /* Мінімальна висота для зручності */
}

/* Висота для текстового поля повідомлення */
html body .ns-contact-wrapper textarea.ns-input {
    min-height: 150px !important;
}

/* 4. Ефект при кліку (Фокус) */
html body .ns-contact-wrapper .ns-input:focus {
    border-color: #D4AF37 !important;
    background-color: #000000 !important;
}

/* 5. ХАК ПРОТИ БІЛОГО ФОНУ (Автозаповнення) */
html body .ns-contact-wrapper .ns-input:-webkit-autofill,
html body .ns-contact-wrapper .ns-input:-webkit-autofill:hover, 
html body .ns-contact-wrapper .ns-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #111111 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 6. Кнопка */
html body .ns-contact-wrapper .ns-btn {
    background-color: #D4AF37 !important;
    color: #000000 !important;
    border: none !important;
    padding: 15px !important;
    width: 100% !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer;
    border-radius: 0 !important;
}

html body .ns-contact-wrapper .ns-btn:hover {
    background-color: #ffffff !important;
}

/* 7. Текст підказки (Placeholder) */
html body .ns-contact-wrapper .ns-input::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}




/* STYL DLA CROSS-SELL (VS BOX) */
.ns-vs-box {
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 40px 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ns-vs-header {
    background: #d4af37;
    color: #000;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.ns-vs-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: relative;
}

.ns-vs-item {
    width: 45%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ns-vs-link {
    text-decoration: none;
    transition: transform 0.2s;
}
.ns-vs-link:hover {
    transform: scale(1.02);
}

.ns-vs-img img {
    width: 80px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

.ns-vs-name {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;
}

.ns-vs-vibe {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
}

/* Центральний кружок VS */
.ns-vs-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 2px solid #d4af37;
    color: #d4af37;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-style: italic;
    z-index: 2;
    font-size: 0.9rem;
}

.ns-vs-btn {
    margin-top: 10px;
    display: inline-block;
    border: 1px solid #444;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.ns-vs-link:hover .ns-vs-btn {
    background: #d4af37;
    color: #000;
    border-color: #d4af37;
}

/* Мобільна адаптація */
@media (max-width: 600px) {
    .ns-vs-img img { width: 60px; }
    .ns-vs-name { font-size: 0.9rem; }
}



/* STYLES FOR RANKING GENERATOR */
.ns-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.ns-rank-item {
    background: #0f0f0f; /* Темний фон картки */
    border: 1px solid #222;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}
.ns-rank-item:hover {
    border-color: #333;
    transform: translateY(-2px);
}

/* Номер місця (#1, #2...) */
.ns-rank-num {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px;
    height: 50px;
    background: #222;
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 10px;
    font-family: 'Playfair Display', serif;
    z-index: 2;
}
/* Кольори медалей */
.rank-gold { background: linear-gradient(135deg, #d4af37, #f3d062); color: #000; box-shadow: 0 0 10px rgba(212,175,55,0.4); }
.rank-silver { background: linear-gradient(135deg, #bdc3c7, #2c3e50); color: #fff; }
.rank-bronze { background: linear-gradient(135deg, #cd7f32, #a05a2c); color: #fff; }

/* Фото */
.ns-rank-img {
    flex: 0 0 120px;
    margin-right: 25px;
    padding-left: 20px; /* Місце для номера */
}
.ns-rank-img img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

/* Контент */
.ns-rank-content {
    flex-grow: 1;
}

.ns-rank-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}
.ns-rank-badge {
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: bold;
}

.ns-rank-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
}
.ns-rank-title a {
    color: #fff;
    text-decoration: none;
}

/* Футер картки (Ціна + Кнопка) */
.ns-rank-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #222;
    padding-top: 15px;
    margin-top: 10px;
}

.ns-rank-price {
    color: #ccc;
    font-size: 0.9rem;
}
.ns-rank-price strong {
    color: #d4af37;
    font-size: 1.1rem;
}

.ns-rank-btn {
    background: #d4af37;
    color: #000;
    text-decoration: none;
    padding: 8px 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: 0.3s;
}
.ns-rank-btn:hover {
    background: #fff;
    color: #000;
}

/* Мобільна адаптація */
@media (max-width: 600px) {
    .ns-rank-item { flex-direction: column; text-align: center; padding: 40px 20px 20px; }
    .ns-rank-img { margin: 0 0 20px 0; padding: 0; width: 100px; }
    .ns-rank-footer { flex-direction: column; gap: 10px; }
    .ns-rank-btn { width: 100%; text-align: center; }
}