/* Import vlastného písma (príklad - nahraď skutočným písmom, ak chceš) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* Globálne CSS premenné - Moderný dizajn pre Frontend */
:root {
    /* Základné CI Farby - modernizované */
    --ci-primary: #2563eb;         /* Moderná modrá */
    --ci-secondary: #64748b;       /* Štýlová sivá */
    --ci-accent: #f59e0b;          /* Teplá oranžová */
    --ci-text-dark: #1e293b;       /* Tmavý text */
    --ci-text-light: #f1f5f9;      /* Svetlý text */
    --ci-background-light: #ffffff;/* Svetlé pozadie */
    --ci-background-dark: #0f172a; /* Tmavé pozadie */
    --ci-border-color: #e2e8f0;    /* Jemné okraje */

    /* Gradient farby pre moderný vzhľad */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-secondary: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

    /* Sémantické farby */
    --primary-color: var(--ci-primary);
    --secondary-color: var(--ci-secondary);
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: var(--ci-accent);
    --info-color: #06b6d4;
    --light-color: var(--ci-background-light);
    --dark-color: var(--ci-text-dark);

    /* Písmo a typografia */
    --font-family-sans-serif: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-headings: 'Montserrat', sans-serif;
    --body-font-size: 1rem;
    --body-line-height: 1.6;
    --heading-font-weight: 600;

    /* Rozmery a efekty */
    --navbar-height: 70px;
    --border-radius-base: 0.5rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --box-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Animácie */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* Moderný dizajn tela stránky */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--navbar-height);
    font-family: var(--font-family-sans-serif);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--ci-text-dark);
    background: var(--gradient-background);
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Hlavný obsah stránky */
main {
    flex-shrink: 0; /* Zabraňuje zmenšovaniu main elementu, ak je pätička fixná */
}

/* Pätička stránky */
.footer {
    /* mt-auto trieda z Bootstrapu (alebo pridaná v Latte) by mala stačiť na posunutie dole */
    margin-top: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--heading-font-weight);
    color: var(--ci-text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Globálne štýly pre odkazy */
a {
    color: var(--ci-primary); /* Všetky odkazy budú mať primárnu CI farbu */
    text-decoration: none; /* Odstránenie podčiarknutia globálne, ak to tak chceš */
}

a:hover {
    color: color-mix(in srgb, var(--ci-primary) 80%, black); /* Mierne stmavenie primárnej farby pri hover */
    text-decoration: underline; /* Podčiarknutie pri hover */
}

/* Mini-košík v navigácii */
.shopping-cart-summary a {
    text-decoration: none;
    color: inherit;
}
.shopping-cart-summary .badge {
    margin-left: 5px;
}

/* Flash správy (notifikácie) */
/* Kontajner pre flash správy je pozicovaný v @layout.latte */
.flash-messages-container .alert {
    min-width: 300px; /* Minimálna šírka pre lepšiu čitateľnosť */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

/* Moderné karty */
.card {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-base);
    transition: var(--transition-base);
    background: var(--ci-background-light);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-xl);
}

/* Špeciálne efekty pre štatistické karty */
.stats-card {
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.stats-card:hover::before {
    left: 100%;
}

.stats-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.product-card {
    border: none;
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-xl);
}

/* Obrázok v produktovej karte */
.product-card .card-img-top {
    width: 100%;
    /* height: 200px; */ /* Nahradené aspect-ratio pre lepšiu responzivitu */
    aspect-ratio: 4 / 3; /* Pomer strán obrázku, uprav podľa potreby (napr. 1/1 pre štvorcové) */
    object-fit: contain; /* Alebo 'cover', podľa toho, čo vyzerá lepšie */
    padding: 0.5rem;
    background-color: var(--ci-background-light); /* Prípadné pozadie pre obrázky s priehľadnosťou */
}

/* Telo produktovej karty - pre názov, cenu, tlačidlá */
.product-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Zabezpečí, že obsah sa roztiahne a tlačidlo bude dole */
    flex-grow: 1;
}
.product-card .card-actions {
    margin-top: 0.75rem; /* Odsadenie pre tlačidlá */
}

/* Tlačidlo "Do košíka" alebo "Detail" v produktovej karte */
.product-card .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.product-card .card-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    /* Obmedzenie na 2 riadky s elipsou */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.1rem * var(--body-line-height) * 2); /* Výška pre 2 riadky na základe veľkosti písma a riadkovania */
    /* Ak je font-size 1.1rem a line-height 1.5 (predpoklad), tak 1.1 * 1.5 * 2 = 3.3rem */
}
/* Cena produktu v karte */
.product-card .product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--ci-primary); /* Použitie CI primárnej farby */
    margin-bottom: 0.5rem;
}


/* Moderné tlačidlá s gradientmi a animáciami */
.btn {
    transition: var(--transition-base);
    border-radius: var(--border-radius-base);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: var(--ci-text-light);
    box-shadow: var(--box-shadow-base);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
    background: var(--gradient-primary);
}

.btn-secondary {
    background: var(--gradient-secondary);
    border: none;
    color: var(--ci-text-light);
    box-shadow: var(--box-shadow-base);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
    background: var(--gradient-secondary);
}

.btn-outline-primary {
    border: 2px solid var(--ci-primary);
    color: var(--ci-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--gradient-primary);
    color: var(--ci-text-light);
    border-color: var(--ci-primary);
}

/* Selektor variantov - príklad pre farby */
.variant-selector-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--ci-border-color);
    margin-right: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.variant-selector-color-swatch:hover {
    transform: scale(1.1);
}
.variant-selector-color-swatch.selected {
    border-width: 2px;
    border-color: var(--ci-text-dark); /* Alebo iná farba pre zvýraznenie */
}

/* Responzívne úpravy pre padding kvôli navbaru, ak sa jeho výška mení */
/* @media (max-width: 991.98px) { /* Bootstrap 'lg' breakpoint */
/*     body { */
/*         padding-top: 56px; /* Príklad, ak je navbar na mobiloch nižší */
/*     } */
/* } */

/* Header Category Dropdown - základné štýly pre submenu */
/* Zabezpečuje, že submenu sa zobrazí napravo od rodičovskej položky */
.navbar-nav .dropdown-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px; /* Zarovnanie s rodičovskou položkou */
    margin-left: 0.1rem; /* Malé odsadenie od rodiča */
    /* display: none; /* Skryté defaultne, JS sa postará o zobrazenie */
}

.navbar-nav .dropdown-menu .dropdown-submenu > .dropdown-menu.show {
    display: block;
}

/* Šípka (caret) pre submenu položky v navigácii */
.navbar-nav .dropdown-menu .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid; /* Šípka doprava */
    transition: transform 0.2s ease-in-out;
}

.navbar-nav .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
    /* display: block; */ /* Ak by sme chceli hover namiesto kliku, ale klik je lepší pre dotyk */
    background-color: var(--ci-background-light);  /* Prípadne zmena pozadia pri hover */
}


/* Otočenie šípky, keď je submenu otvorené (ak by sme toggle-ovali triedu na rodičovi) */
/* .navbar-nav .dropdown-menu .dropdown-submenu:hover > .dropdown-item.dropdown-toggle::after,
.navbar-nav .dropdown-menu .dropdown-submenu > .dropdown-item.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
} */

/* Footer styling */
.footer { /* Hlavný kontajner pätičky */
    background-color: var(--ci-background-light) !important; /* Zaistenie farby pozadia */
}
.footer h5 {
    margin-bottom: 1rem;
    font-weight: 500; /* Mierne tučnejšie nadpisy v pätičke */
    color: var(--ci-text-dark);
}
.footer .list-unstyled li:not(:last-child) { /* Pridá odsadenie len ak to nie je posledná položka */
    margin-bottom: 0.5rem;
}
.footer .footer-link:hover { /* Použité pre odkazy v pätičke */
    color: var(--ci-primary) !important;
    text-decoration: underline !important;
}

.footer .bi { /* Ikony sociálnych sietí */
    transition: color 0.2s ease-in-out;
}
.footer .bi:hover {
    color: var(--ci-primary) !important;
}

/* Štýly pre formulár newsletteru v pätičke */
.footer .input-group .form-control-sm, /* Zabezpečí konzistentnú výšku s tlačidlom */
.footer .input-group .btn-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* Štýly pre právne texty (napr. VOP, Ochrana osobných údajov) */
.legal-text h2 {
    border-bottom: 1px solid var(--ci-border-color);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem; /* Pridaný horný margin pre lepšie oddelenie */
    margin-bottom: 1rem; /* Upravený spodný margin */
}
.legal-text p, .legal-text li {
    line-height: 1.7; /* Mierne zväčšené riadkovanie pre lepšiu čitateľnosť */
    text-align: justify; /* Zarovnanie do bloku pre právne texty */
}

/* Vyhľadávací formulár v navigácii */
.search-form-wrapper .input-group {
    position: relative; /* Potrebné pre absolútne poziciovanie clear buttonu vnútri */
}
.search-input {
    /* Prípadne pridať padding-right, aby text nešiel pod clear button, ak je tlačidlo vnútri inputu */
     padding-right: 2.5rem;  
}
/* Tlačidlo na vymazanie textu vo vyhľadávacom poli */
.search-clear-button {
    /* Štýly sú už nastavené v JS, ale tu ich môžeš prepísať alebo doplniť */
    /* napr. pre jemnejší vzhľad pri hover */
    cursor: pointer;
}
.search-clear-button:hover {
    color: #212529; /* Tmavšia farba pri hover */
}

/* Breadcrumbs - Omrvinky */
.breadcrumb { /* Hlavný kontajner omrviniek */
    background-color: transparent; /* Odstránime predvolené pozadie, ak by tam bolo */
    padding: 0.75rem 0; /* Upravíme padding, ak je potrebné */
    margin-bottom: 1.5rem; /* Odsadenie od obsahu pod nimi */
    font-size: 0.9rem; /* Mierne menšie písmo */
}
.breadcrumb-item { /* Jednotlivá položka v omrvinkách */
    display: flex; /* Pre lepšie zarovnanie ikonky a textu */
    align-items: center;
}
.breadcrumb-item a { /* Odkaz v omrvinkách */
    color: var(--ci-secondary); /* Použitie CI sekundárnej farby */
    /* text-decoration: none;  Už je globálne pre 'a' */
    transition: color 0.2s ease-in-out;
}
.breadcrumb-item a:hover {
    color: var(--ci-primary); /* Použitie CI primárnej farby pri hover */
    /* text-decoration: underline; Už je globálne pre 'a:hover' */
}
.breadcrumb-item.active {
    color: var(--ci-text-dark); /* Aktuálna položka */
    font-weight: 500; /* Mierne tučnejšie */
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ci-secondary); /* Farba oddeľovača */
    /* Môžeš zmeniť aj samotný oddeľovač, ak chceš, napr. '>' */
    /* content: ">" !important; */
}

/* Blok s podkategóriami na stránke kategórie */
.subcategories-block {
    /* bg-light, border, rounded, p-3 sú už z Bootstrapu */
}

.subcategories-block h5 {
    font-size: 1.1rem; /* Mierne menší nadpis pre podkategórie */
    color: var(--ci-text-dark);
}

.subcategories-block .list-unstyled {
    /* Prípadné ďalšie úpravy zoznamu */
}

.subcategory-link {
    color: var(--ci-secondary); /* Použijeme sekundárnu farbu pre odkazy na podkategórie */
}
.subcategory-link:hover {
    color: var(--ci-primary); /* Primárna farba pri hover */
}

/* Responzívne utility */
@media (max-width: 768px) {
    .stats-card:hover {
        transform: none; /* Zakážeme hover efekty na mobile pre lepšiu UX */
    }

    .card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--ci-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --ci-primary: #0000ff;
        --ci-text-dark: #000000;
        --ci-background-light: #ffffff;
    }
}