/*
Theme Name: Pizza Dobra Opcja
Theme URI: https://pizzadobraopcja.pl/
Author: Pizza_admin
Description: Motyw WordPress dla pizzerii Pizza Dobra Opcja w Strzelcach Opolskich.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pizza-dobra-opcja
*/

:root {
            --bg-body: #f8f9fa;
            --bg-card: #ffffff;
            --bg-nav: rgba(255, 255, 255, 0.95);
            --bg-alt: #f1f3f5;
            --text-main: #212529;
            --text-muted: #6c757d;
            --border: #e9ecef;
            --primary: #e63946;
            --primary-hover: #d62828;
            --accent: #2a9d8f;
            --shadow: 0 4px 15px rgba(0,0,0,0.05);
            --shadow-hover: 0 8px 25px rgba(0,0,0,0.1);
        }

        [data-theme="dark"] {
            --bg-body: #121212;
            --bg-card: #1e1e1e;
            --bg-nav: rgba(18, 18, 18, 0.95);
            --bg-alt: #181818;
            --text-main: #f8f9fa;
            --text-muted: #a0a0a0;
            --border: #2d2d2d;
            --shadow: 0 4px 15px rgba(0,0,0,0.3);
            --shadow-hover: 0 8px 25px rgba(0,0,0,0.5);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Lato', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h1, h2, h3, h4 { font-family: 'Lato', sans-serif; }

        /* HEADER & NAVBAR */
        header {
            position: fixed; top: 0; left: 0; right: 0;
            background: var(--bg-nav);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            z-index: 1000;
            padding: 12px 0;
        }

        .nav-container {
            max-width: 1200px; margin: 0 auto; padding: 0 20px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            position: relative;
        }

        /* ADRES PO LEWEJ STRONIE */
        .header-address {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
            padding: 9px 20px;
            border-radius: 50px;
            background: #ffffff;
        }

        .header-address i {
            color: #338a6e;
            font-size: 1.1rem;
        }

        .header-address:hover {
            color: var(--primary);
        }

        /* LOGO NA ŚRODKU */
        .logo-area {
            justify-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-img {
            height: 90px;
            width: auto;
            max-width: 180px;
            object-fit: contain;
        }

        /* AKCJE PO PRAWEJ */
        .nav-actions { 
            justify-self: end;
            display: flex; 
            align-items: center; 
            gap: 15px; 
        }

        .theme-toggle {
            background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-main);
            width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 1.1rem; transition: all 0.2s;
        }

        .btn-phone {
            background: #338a6e;
            color: #fff !important;
            text-decoration: none;
            padding: 9px 20px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s, transform 0.2s;
        }
        .btn-phone:hover { background: var(--primary-hover); transform: translateY(-1px); }

        /* HERO SECTION */
        .hero {
            padding: 150px 20px 80px; 
            text-align: center; 
            width: 100%; 
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('https://pizzadobraopcja.pl/img/tlo1.jpg') center/cover no-repeat;
            color: #ffffff !important;
        }

        .hero h1 { font-size: 2.8rem; font-weight: 800; line-height: 1.2; margin-bottom: 15px; text-transform: uppercase; color: #ffffff; }
        .hero p { font-size: 1.15rem; color: #e0e0e0; margin-bottom: 30px; max-width: 800px; }

        .status-pill {
            display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
            border-radius: 30px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
            margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.5);
            color: #fff;
        }

        .status-dot { width: 9px; height: 9px; border-radius: 50%; }
        .status-open .status-dot { background: #2ec4b6; box-shadow: 0 0 8px #2ec4b6; }
        .status-closed .status-dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }

        .hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

        .btn-secondary {
            background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3);
            padding: 11px 24px; border-radius: 50px; text-decoration: none; font-weight: 600;
            display: flex; align-items: center; gap: 8px; backdrop-filter: blur(5px); transition: all 0.2s;
        }
        .btn-secondary:hover { background: rgba(255,255,255,0.2); }

        /* MENU SECTION */
        .menu-container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
        .section-header { text-align: center; margin-bottom: 40px; }
        .section-header h2 { font-size: 2.2rem; text-transform: uppercase; margin-bottom: 8px; }
        .section-header p { color: var(--text-muted); font-weight: 600; }

        .menu-controls { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-bottom: 35px; }

        .search-box {
            position: relative; width: 100%; max-width: 450px;
        }

        .search-box input {
            width: 100%; padding: 12px 20px 12px 45px; border-radius: 50px;
            border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main);
            font-size: 0.95rem; outline: none; transition: border-color 0.2s;
        }
        .search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

        .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
        .tab-btn {
            background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main);
            padding: 8px 18px; border-radius: 30px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
            transition: all 0.2s;
        }
        .tab-btn.active, .tab-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

        .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

        /* GAZETKA PROMOCYJNA: wiele grafik menu sezonowego i ofert */
        .special-menu { margin: 55px auto 20px; max-width: 1120px; }
        .special-menu .section-header { margin-bottom: 24px; }
        .special-menu-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px; }
        .special-menu-image-link { display: block; min-width: 0; padding: 10px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
        .special-menu-image-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
        .special-menu-image { display: block; width: 100%; height: auto; max-height: 1200px; object-fit: contain; margin: 0 auto; border-radius: 4px; }
        @media (max-width: 680px) { .special-menu-gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; } .special-menu-image-link { padding: 6px; } }

        /* KARTA PIZZY */
        .pizza-card {
            background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
            padding: 16px; display: flex; align-items: center; gap: 16px; position: relative;
            box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
        }
        .pizza-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

        /* MINIATURKA ZDJĘCIA PIZZY - UNIWERSALNE ZDJĘCIE DOMYŚLNE */
    .pizza-thumb {
    display: block;
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 0 solid #ffffff;
    background-color: #f1f1f1;
    background-image: url(https://pizzadobraopcja.pl/img/pizza.png);
    background-size: cover;
    background-position: center;
}

        .pizza-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

        .pizza-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .pizza-title { font-size: 1.15rem; font-weight: 700; }
        .badge-spicy { color: var(--primary); margin-left: 5px; }

        .pizza-ingredients { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }

        .pizza-footer-row {
            display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
        }
        .pizza-size { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
        .pizza-price {
            background: rgb(221 221 221 / 95%);
            color: #282828;
            padding: 4px 14px;
            border-radius: 26px;
            font-size: 0.9rem;
            font-weight: 700;
        }

        [data-theme="dark"] .pizza-price {
            background: rgba(255, 255, 255, 0.15);
            color: #f8f9fa;
        }

        /* SEKCJA FACEBOOK (NOWOŚĆ) */
   .facebook-banner {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    background: linear-gradient(rgb(0 0 0 / 38%), rgba(0, 0, 0, 0.65)), url(https://pizzadobraopcja.pl/img/menu_sezonowe.jpg) center / cover no-repeat;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
        
.facebook-banner .logo-img {
    height: 90px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    BACKGROUND: #ffffff00;
    padding: 8px;
    -webkit-filter: invert(1);
    filter: invert(1);
}

        .facebook-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .facebook-content i {
            font-size: 2.5rem;
            color: #1877f2;
        }

        .facebook-text h3 {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }

        .facebook-text p {
    font-size: 19px;
    border-radius: 20px;
    color: white;
    padding: 2px 25px;
}

        .btn-facebook {
            background-color: #1877f2;
            color: #fff !important;
            text-decoration: none;
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s, transform 0.2s;
            white-space: nowrap;
        }

        .btn-facebook:hover {
            background-color: #145dbf;
            transform: translateY(-2px);
        }

        /* LOCATION & HOURS */
        .info-section { background: var(--bg-alt); padding: 60px 20px; border-top: 1px solid var(--border); }
        .info-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

        .info-card { background: var(--bg-card); padding: 25px; border-radius: 12px; border: 1px solid var(--border); }
        .info-card h3 {
            font-size: 1.3rem;
            margin-bottom: 18px;
            color: #338a6e;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #e6e6e691;
            width: auto;
            justify-content: center;
            padding: 10px;
            border-radius: 40px;
        }

        .hours-list { list-style: none; }
        .hours-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
        .hours-list li:last-child { border-bottom: none; }

        .map-box { height: 220px; border-radius: 8px; overflow: hidden; margin-top: 15px; border: 1px solid var(--border); }
        .map-box iframe { width: 100%; height: 100%; border: 0; }

        footer { text-align: center; padding: 25px 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }


.facebook-text p {
    font: 600 28px / 1.3 "JetBrains Mono", monospace;
    letter-spacing: .08em;
    padding: .1em .2em;
}

        @media (max-width: 900px) {
            .nav-container {
                grid-template-columns: 1fr auto;
                gap: 10px;
            }
            .logo-area {
                grid-column: 1 / -1;
                grid-row: 1;
                margin-bottom: 5px;
            }
            .header-address {
                grid-column: 1;
                grid-row: 2;
                font-size: 0.8rem;
            }
            .nav-actions {
                grid-column: 2;
                grid-row: 2;
            }
            .hero { padding-top: 180px; }
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2rem; }
            .logo-img { height: 65px; }
            .btn-phone span { display: none; }
            .facebook-banner { flex-direction: column; text-align: center; }
            .facebook-content { flex-direction: column; }
        }

/* POPRAWKI: zdjęcia pizz i galeria menu sezonowego */
img.pizza-thumb,
.pizza-card img.pizza-thumb {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    flex: 0 0 80px !important;
    background-image: none;
}
.pizza-thumb--placeholder,
.pizza-thumb--broken {
    background-image: url('https://pizzadobraopcja.pl/img/pizza.png') !important;
    background-size: cover !important;
    background-position: center !important;
}
.special-menu-gallery.special-menu-gallery--grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 22px !important;
    width: 100%;
}
.special-menu-gallery .special-menu-image-link {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
}
.special-menu-gallery .special-menu-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 850px;
    object-fit: contain !important;
}
@media (max-width: 680px) {
    .special-menu-gallery.special-menu-gallery--grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}


/* LIGHTBOX: powiększanie zdjęć w tym samym oknie */
.pizza-thumb--image,
.special-menu-image {
    cursor: zoom-in;
}
.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 54px 20px 20px;
    background: rgba(0, 0, 0, .92);
}
.image-lightbox.is-open {
    display: flex;
}
.image-lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, .35);
    cursor: zoom-out;
}
.image-lightbox__close {
    position: absolute;
    top: 10px;
    right: 18px;
    z-index: 1;
    border: 0;
    padding: 4px 12px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
}
.image-lightbox__close:hover,
.image-lightbox__close:focus-visible {
    color: var(--primary, #e63946);
}
@media (max-width: 600px) {
    .image-lightbox { padding: 56px 10px 14px; }
    .image-lightbox__image { max-width: 98vw; max-height: 86vh; }
    .image-lightbox__close { top: 8px; right: 10px; }
}


/* Główne menu obrazkowe zastępujące listę pojedynczych pizz */
.main-menu-gallery { margin: 26px auto 10px; }
.legacy-menu-runtime { display: none !important; }
.menu-images-empty { text-align: center; color: var(--text-muted); padding: 18px; }
.main-menu-gallery .special-menu-image-link { cursor: zoom-in; }