:root{
    /* NOZIARI.SK PALETA */
    --blue-dark: #0a1f44;
    --blue-light: #1a3a7a;
    --gold: #ffb400;
    --gold-hover: #ffa000;

    --bg: #f5f5f5;
    --card: #ffffff;
    --text: #222;
    --muted: #555;

    --shadow: 0 10px 30px rgba(0,0,0,0.18);
    --shadow-soft: 0 8px 20px rgba(0,0,0,0.12);
}

/* ==========================
   DARK MODE (via body.dark)
========================== */
body.dark,
html.dark{
    --bg: #0b1020;
    --card: #12172c;
    --text: #e8ecff;
    --muted: #b7bdd5;
    --shadow: 0 10px 30px rgba(0,0,0,0.5);
    --shadow-soft: 0 8px 20px rgba(0,0,0,0.35);
}

/* GLOBAL */
body{
    background: var(--bg);
    color: var(--text);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 80px;
    overflow-x: hidden;
}

/* NAVBAR */
.navbar{
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

/* DARK MODE NAVBAR */
body.dark .navbar,
html.dark .navbar{
    background: rgba(18,23,44,0.65) !important;
}

/* NAVBAR BUTTONS */
.navbar .btn{
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    transition: transform .3s ease, box-shadow .3s ease;
}
.navbar .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.navbar-brand{
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--blue-dark);
    text-shadow: 2px 2px 12px rgba(0,0,0,0.3);
}
.navbar-brand:hover{
    color: var(--blue-light);
}

/* DARK MODE BRAND */
body.dark .navbar-brand,
html.dark .navbar-brand{
    color: var(--gold);
    text-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}

/* HERO */
.hero{
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
    color: #fff;
    padding: 140px 20px 80px 20px;
    text-align: center;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: var(--shadow);
}
.hero h1{
    font-size: 2.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.4);
}
.hero p{
    font-size: 1.3rem;
    opacity: 0.9;
}

/* CARDS */
.card{
    background: var(--card);
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* PRODUCT IMAGES */
.product-img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: var(--shadow-soft);
    transition: transform .3s ease;
}
.product-img:hover{ transform: scale(1.03); }

.thumb-img{
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
}
.thumb-img.active{
    border-color: var(--gold);
}

/* LOGO */
.logo-img{
    height: 60px;
    width: auto;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 5px;
}

/* LIST GROUP */
.list-group-item{
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: transparent;
}
body.dark .list-group-item,
html.dark .list-group-item{
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    color: #e8ecff !important;
    background: transparent !important;
}

.list-group-item strong{
    width: 120px;
    display: inline-block;
}

/* BUTTONS */
.btn-primary{
    background: var(--gold);
    border: none;
    color: #fff;
}
.btn-primary:hover{
    background: var(--gold-hover);
}
.btn-dark{
    background: var(--blue-dark);
    border: none;
}
.btn-dark:hover{
    background: var(--blue-light);
}
.btn-outline-secondary{
    color: var(--text);
    border-color: rgba(0,0,0,0.15);
}

/* DARK MODE BUTTONS */
body.dark .btn-outline-secondary,
html.dark .btn-outline-secondary{
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* LIKE */
.like-btn{
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
}

/* CONTACT */
.alert-contact{
    background: rgba(255,255,255,0.75);
    border-left: 5px solid var(--gold);
    padding: 15px;
    box-shadow: var(--shadow-soft);
}
body.dark .alert-contact,
html.dark .alert-contact{
    background: rgba(18,23,44,0.65) !important;
}

/* FOOTER */
.footer{
    background: var(--blue-dark);
    color: #ccc;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 40px;
}
body.dark .footer,
html.dark .footer{
    background: #0b1020;
}

/* RESPONSIVE */
@media (max-width: 768px){
    body{ padding-top: 70px; }
    .hero{
        padding: 100px 15px 60px 15px;
    }
    .hero h1{ font-size: 2rem; }
    .hero p{ font-size: 1rem; }
    .product-img{ height: 320px; }
    .thumb-img{ height: 90px; }
    .d-flex.gap-2.mb-3{ flex-direction: column; }
    .product-img{ height: 280px; }
    .list-group-item strong{ width: 100px; }
    .col-md-6{ padding-left: 15px; padding-right: 15px; }
    .btn-lg{
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
}

/* PRICE */
.price {
    color: var(--gold);
    font-weight: 800;
}
/* DARK MODE - TEXTY V KARTÁCH */
body.dark .card,
html.dark .card{
    background: var(--card) !important;
    color: var(--text) !important;
}

body.dark .card-title,
html.dark .card-title{
    color: var(--text) !important;
}

body.dark .card-text,
html.dark .card-text{
    color: var(--muted) !important;
}

body.dark .text-muted,
html.dark .text-muted{
    color: #b7bdd5 !important;
}
body.dark .card .btn-dark{
    background: var(--blue-dark) !important;
    color: #fff !important;
}