/* ==========================================================
   1. ГЛОБАЛЬНА НАВІГАЦІЯ (Острівці)
   ========================================================== */
.island-nav-left {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 7000;
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    height: 46px;
    padding: 0 15px; /* Важливо: 15px відступ для лівого острівця */
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    gap: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.island-nav-container {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    height: 46px;
    padding: 0 12px; /* Важливо: 12px відступ для правого острівця */
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    gap: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.island-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ==========================================================
   2. КНОПКИ ТА ІКОНКИ
   ========================================================== */
.island-button {
    position: relative;
    outline: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.island-button:hover {
    color: var(--light);
    transform: translateY(-2px);
    background: rgba(230, 0, 126, 0.1);
}

.island-user-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
}

.island-user-btn:hover {
    border-color: var(--light);
    transform: scale(1.05);
}

/* Нова текстова кнопка SHOP */
.shop-text-btn {
    width: auto;
    padding: 0 8px;
    font-family: var(--font-H2);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    gap: 5px !important; /* Твій відступ */
    text-decoration: none !important; /* 👈 ОСЬ ЦЕ ПРИБЕРЕ ПІДКРЕСЛЕННЯ */
}

/* ==========================================================
   3. ГАМБУРГЕР
   ========================================================== */
.modern-hamburger {
    height: 40px;
    width: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
.modern-hamburger .checkbox {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    z-index: 5;
}
.modern-hamburger svg { height: 32px; width: 32px; }
.modern-line { transition: 0.5s; stroke-width: 5px; stroke: white; }
.lineTop { stroke-dasharray: 40 40; stroke-dashoffset: 25; }
.lineBottom { stroke-dasharray: 40 40; stroke-dashoffset: 60; }
.lineMid { stroke-dasharray: 40 40; }

.modern-hamburger .checkbox:checked + svg .modern-line { stroke: var(--light); }
.modern-hamburger .checkbox:checked + svg .lineTop { stroke-dashoffset: 0; transform-origin: left; transform: rotateZ(45deg) translate(-5px, -4px); }
.modern-hamburger .checkbox:checked + svg .lineMid { stroke-dashoffset: 40; }
.modern-hamburger .checkbox:checked + svg .lineBottom { stroke-dashoffset: 0; transform-origin: left; transform: rotateZ(-45deg) translate(-5px, 5px); }


/* ==========================================================
   4. ВИПАДАЮЧІ ВІКНА ТА ЇХ ГЕОМЕТРІЯ
   ========================================================== */
.fgo-dropdown-panel, 
.main-sidebar {
    position: fixed !important; /* Жорстка прив'язка до екрану */
    top: 60px !important;       /* Чіткий відступ під острівцями */
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    box-sizing: border-box !important; /* Щоб відступи не ламали ширину */
}

/* Вікно ЛІВОГО острівця (МЕНЮ) */
.main-sidebar {
    left: 0px !important;  /* Починається РІВНО там, де і лівий острівець */
    right: auto !important;
    width: 280px;
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Вікна ПРАВОГО острівця (КОШИК та ПОШУК) */
.mini-cart-dropdown,
#live-search-results {
    right: 0px !important; /* Закінчується РІВНО там, де і правий острівець */
    left: auto !important;
    width: 320px;
    padding: 15px;
}

/* Тригери відкриття */
#sidebar-toggle:checked ~ .main-sidebar,
#cart-toggle-mobile:checked ~ .mini-cart-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
@media (min-width: 769px) {
    #cart-wrapper:hover .mini-cart-dropdown {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
}

.fgo-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}
.fgo-close-btn:hover { color: var(--light); transform: rotate(90deg); }
/* ==========================================================
   5. ВМІСТ МЕНЮ (ХОВЕРИ)
   ========================================================== */
.sidebar-label {
    font-size: 10px;
    color: var(--light);
    margin: 15px 0 8px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin: 15px 0;
}

.sidebar-link {
    font-family: var(--font-H2);
    font-size: 15px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 15px; 
    margin: 0 -15px; /* Щоб лінія ховера була на краю */
    border-left: 3px solid transparent; 
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 3px !important;
    transition: 0.3s;
}

.sidebar-link i { width: 24px; font-size: 16px; opacity: 0.7; transition: 0.3s; }
.sidebar-link:hover i { opacity: 1; color: var(--light); }

.sidebar-link:hover {
    background: rgba(230, 0, 126, 0.08);
    color: var(--light);
    border-left: 3px solid var(--light); 
    transform: translateX(5px);
}

/* ==========================================================
   6. ПОШУК ТА СТАТУС МАГАЗИНУ
   ========================================================== */
.island-search-wrapper {
    display: flex; align-items: center; width: 0;
    overflow: hidden; transition: 0.4s; position: relative;
}
#search-form { width: 100%; margin: 0; display: flex; }
.island-search-input {
    width: 100%; height: 32px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; padding: 0 15px; color: white;
    font-family: var(--font-H4); font-size: 13px; outline: none; opacity: 0; transition: 0.4s;
}
#search-toggle:checked ~ .island-search-wrapper { width: 120px; margin: 0 5px; }
#search-toggle:checked ~ .island-search-wrapper .island-search-input { opacity: 1; }
#live-search-results { opacity: 1 !important; visibility: visible !important; transform: none !important; }

.shop-owner-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 900; padding: 4px 10px;
    border-radius: 12px; text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; transition: 0.3s;
}
.shop-owner-badge.status-active { color: var(--light); border: 1px solid rgba(230, 0, 126, 0.5); background: rgba(230, 0, 126, 0.1); }
.shop-owner-badge.status-active .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--light); box-shadow: 0 0 8px var(--light); }
.shop-owner-badge.status-inactive { color: #FF9900; border: 1px solid rgba(255, 153, 0, 0.5); background: rgba(255, 153, 0, 0.1); }
.shop-owner-badge.status-inactive .dot { width: 6px; height: 6px; border-radius: 50%; background: #FF9900; box-shadow: 0 0 8px #FF9900; }

/* ==========================================================
   7. СВІТІННЯ КОШИКА ТА АКТИВНІ СТАНИ
   ========================================================== */
.cart-badge { display: none !important; }

/* Постійне світіння кошика, коли там є товари */
.has-items-glow {
    color: #E6007E !important;
    filter: drop-shadow(0 0 6px rgba(230, 0, 126, 0.7)) !important;
}

.island-button.nav-active {
    color: #E6007E !important;
    filter: drop-shadow(0 0 5px rgba(230, 0, 126, 0.8));
    transform: translateY(-1px);
}

body.light-theme .has-items-glow,
body.light-theme .island-button.nav-active {
    filter: drop-shadow(0 0 3px rgba(230, 0, 126, 0.4)) !important;
}

.mini-checkout-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 40px; border-radius: 12px;
    background: linear-gradient(45deg, #e6007e, #ff4d9c);
    color: white; font-weight: 800; font-size: 12px;
    text-decoration: none; transition: 0.3s; margin-top: 15px;
}
.mini-checkout-btn:hover { box-shadow: 0 0 15px rgba(230,0,126,0.5); transform: translateY(-2px); }

/* Анімація при додаванні в кошик */
#cart-wrapper { position: relative; z-index: 10; transition: z-index 0.3s; }
#cart-wrapper.cart-boom-active { z-index: 10005 !important; }

.cart-boom-effect {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 120px; height: 120px;
    background: radial-gradient(circle, #E6007E 0%, rgba(230, 0, 126, 0) 70%);
    border-radius: 50%; pointer-events: none; opacity: 0;
}
.run-boom { animation: cart-shrink-in-centered 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes cart-shrink-in-centered {
    0% { transform: translate(-50%, -50%) scale(4); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

#theme-toggle { transition: transform 0.3s; }
#theme-toggle:active { transform: scale(0.8) rotate(15deg); }
/* ==========================================================
   8. ФУТЕР (DESKTOP)
   ========================================================== */
.fg-footer-wrapper {
    background: #050505; 
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 5% 40px; 
    margin-top: 60px; 
    color: #ffffff;
}

.fg-footer-wrapper ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.fg-footer-grid {
    display: grid; 
    /* Тепер у нас 4 колонки замість 5 */
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; 
    gap: 40px; 
    max-width: 1300px; 
    margin: 0 auto;
}

.fg-logo-img { width: 180px; filter: drop-shadow(0 0 10px rgba(230, 0, 126, 0.3)); }

.fg-col-title { 
    font-family: var(--font-H2); 
    font-size: 14px; 
    font-weight: 800; 
    color: #E6007E; 
    margin-bottom: 25px; 
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fg-nav-list a { 
    font-family: var(--font-H4);
    font-size: 13px; 
    color: rgba(255, 255, 255, 0.5); 
    text-decoration: none; 
    transition: 0.3s; 
}
.fg-nav-list a:hover { color: #ffffff; transform: translateX(5px); }

/* Стилі для SVG (всі логотипи в одному контейнері) */
.footer-svg-icon, .footer-svg-shipping {
    filter: brightness(0) invert(1); 
    opacity: 0.8;
    transition: 0.3s;
}

.footer-svg-icon { height: 66px; width: auto; }
.footer-svg-shipping { height: 25px; width: auto; }

.fg-payment-icons { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.fg-footer-bottom {
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    margin: 60px auto 0;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-online { color: #00ff88; }

/* ==========================================================
   9. МОБІЛЬНА АДАПТАЦІЯ
   ========================================================== */
@media (max-width: 768px) {
    .fg-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 10px; }

    /* 1. ВЕЛИКЕ ЛОГО (на всю ширину) */
    .fg-brand-col {
        grid-column: 1 / -1; 
        display: flex; justify-content: center;
        margin-bottom: 20px;
    }
    .fg-logo-img { width: 260px; } 

    /* 2. AZIENDA (Ліва колонка, тягнеться до центру) */
    .fg-footer-grid > div:nth-child(2) {
        grid-column: 1;
        text-align: right; align-items: flex-end;
        padding-right: 20px; display: flex; flex-direction: column;
    }

    /* 3. RESOURCES (Права колонка, тягнеться до центру) */
    .fg-footer-grid > div:nth-child(3) {
        grid-column: 2;
        text-align: left; align-items: flex-start;
        padding-left: 20px; display: flex; flex-direction: column;
    }

    /* 4. PAYMENTS & SHIPPING (На всю ширину по центру під посиланнями) */
    .fg-footer-grid > div:nth-child(4) {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }

    /* Ідеальна плитка 2х2 для 4 логотипів */
    .fg-payment-icons { 
        display: grid;
        grid-template-columns: repeat(2, auto); /* Дві колонки */
        gap: 1px 20px; /* 25px між рядами, 40px між колонками */
        justify-content: center;
        align-items: center;
        margin-top: 15px;
    }
    
    .footer-svg-icon { height: 75px; }
    .footer-svg-shipping { height: 25px; }

    .fg-footer-bottom {
        flex-direction: column; align-items: center; gap: 10px;
        margin-top: 40px;
    }
}