/*
 * style.css – STYLOPISY CELÉHO WEBU
 * ============================================================
 * CSS (Cascading Style Sheets) určuje vzhled stránek: barvy,
 * písma, rozložení, velikosti, animace atd.
 *
 * Struktura tohoto souboru:
 *   1) Proměnné (barevná paleta)
 *   2) Základní nastavení (body, reset)
 *   3) Hlavička a navigace
 *   4) Rozvržení stránky
 *   5) Tlačítka
 *   6) Produkty (kartičky, detail)
 *   7) Košík
 *   8) Objednávkový formulář
 *   9) Responsivní design (tablet, mobil)
 * ============================================================
 */

/* ── PROMĚNNÉ ─────────────────────────────────────────── */
:root {
    --yellow:        #ffff96;
    --cyan:          #96efff;
    --primary:       #0891b2;   /* tmavší azurová – tlačítka, odkazy */
    --primary-dark:  #0e6880;   /* hover */
    --primary-light: #e0f7fb;   /* světlé pozadí */
    --accent:        #a07d00;   /* tmavší žlutá – odznaky */
    --accent-light:  #fffde0;   /* světlá žlutá */
    --text:          #1e293b;
    --text-muted:    #64748b;
    --border:        #b2e8f0;   /* azurový lem */
    --bg:            #f7fcfd;   /* velmi světlý azurový nádech */
    --shadow:        rgba(8, 145, 178, 0.12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-size: 20px;
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── HEADER ───────────────────────────────────────────── */
header {
    position: relative;
    background: linear-gradient(130deg, var(--yellow) 42%, var(--cyan) 42%);
    text-align: center;
    padding: 20px;
    font-size: 25px;
    box-shadow: 0 6px 20px var(--shadow);
}

.header-logo { text-decoration: none; color: inherit; }

header h1 {
    margin: 0;
    font-size: 1.8em;
    color: var(--text);
    letter-spacing: 0.05em;
    text-decoration: underline;
    text-underline-offset: 4px;
}

header h2 {
    margin: 0 0 6px 0;
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-muted);
    margin-right: 35%;
}

.cart-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.55);
    border: 2px solid rgba(8,145,178,0.25);
    border-radius: 30px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.72em;
    font-weight: bold;
    transition: background 0.2s, border-color 0.2s;
}

.cart-btn:hover {
    background: rgba(255,255,255,0.85);
    border-color: var(--primary);
}

.cart-icon { font-size: 1.3em; }

.cart-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── ZPĚTNÝ ODKAZ ─────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(130deg, var(--yellow) 40%, var(--cyan) 100%);
    color: var(--text);
    font-size: 0.82em;
    font-weight: bold;
    padding: 7px 16px;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px var(--shadow);
    transition: box-shadow 0.2s, transform 0.15s;
}

.back-link:hover {
    box-shadow: 0 4px 14px var(--shadow);
    transform: translateX(-2px);
}

/* ── MAIN LAYOUT ──────────────────────────────────────── */
main {
    flex: 1;
    display: flex;
    justify-content: center;
}

.content {
    width: min(70%, 900px);
    padding: 30px;
    margin-bottom: 50px;
}

.inner { padding-left: 30px; }
.inner.centered { text-align: center; }

hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, var(--yellow), var(--cyan));
    margin: 30px 0;
    border-radius: 2px;
}

/* ── TLAČÍTKA ─────────────────────────────────────────── */
.btn-primary {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 3px 10px var(--shadow);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.btn-secondary:hover {
    background: var(--primary);
    color: #fff;
}

.btn-remove {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.1em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-remove:hover { background: #fee2e2; }

/* ── PRODUKTY (index) ─────────────────────────────────── */
.produktContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px;
}

.produkt {
    flex: 1;
    min-width: 220px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.produkt:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px var(--shadow);
    border-color: var(--primary);
}

/* .produkt a, .produktObsah a .produkt img přesunuty do sekce CAROUSEL */

.produkt-subtitle {
    color: var(--text-muted);
    font-size: 0.82em;
    margin: 2px 0 0;
}

.produkt-price {
    font-size: 1.15em;
    font-weight: bold;
    color: var(--primary);
    margin-top: 12px;
    background: var(--primary-light);
    padding: 8px 14px;
    border-radius: 8px;
    width: 100%;
}

.produkt-price .price-no-vat {
    display: block;
    font-size: 0.72em;
    font-weight: normal;
    color: var(--text-muted);
}

.vat-label {
    font-size: 0.65em;
    font-weight: normal;
    color: var(--text-muted);
}

/* ── DETAIL PRODUKTU ──────────────────────────────────── */
.detail {
    display: flex;
    gap: 40px;
    margin: 20px 0;
    align-items: flex-start;
}

/* .detail-img a .detail-img img přesunuty do sekce CAROUSEL */

.detail-info { flex: 1; }
.detail-info h2 { margin-top: 0; color: var(--text); }

.detail-subtitle {
    color: var(--text-muted);
    margin-top: -10px;
    margin-bottom: 15px;
}

.detail-desc { line-height: 1.6; color: var(--text-muted); }

.detail-features {
    padding-left: 20px;
    line-height: 1.9;
    color: var(--text);
}

.detail-features li::marker { color: var(--primary); }

.detail-price {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--primary);
    margin: 20px 0;
    background: var(--primary-light);
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid var(--primary);
}

.price-label {
    font-size: 0.55em;
    font-weight: normal;
    color: var(--text-muted);
}

.detail-price-no-vat {
    display: block;
    font-size: 0.52em;
    font-weight: normal;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── CAROUSEL ─────────────────────────────────────────── */
.carousel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-light), var(--primary-light));
}

.carousel-track {
    display: flex;
    will-change: transform;
}

.carousel-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    max-width: 100%;
    object-fit: contain;
    rotate: 60deg;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
    padding: 0;
}

.carousel-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

.carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(8,145,178,0.3);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
    background: var(--primary);
    transform: scale(1.3);
}

/* Varianta galerie pro KARTIČKU PRODUKTU na úvodní stránce
   Nižší výška, zaoblené rohy jen nahoře (dole navazuje text s cenou) */
.carousel--card {
    height: 280px;
    border-radius: 12px 12px 0 0;
}

.carousel--card .carousel-slide img {
    height: 240px; /* Výška obrázku uvnitř kartičky */
}

/* Varianta galerie pro stránku DETAILU PRODUKTU
   Větší výška, azurový lem, pevná šířka 300px vedle popisu */
.carousel--detail {
    border-radius: 12px;
    border: 2px solid var(--border);
    height: 320px;
    flex: 0 0 300px;
}

.carousel--detail .carousel-slide img {
    height: 280px; /* Větší obrázek na stránce detailu */
}

/* Odkaz na stránku detailu produktu – obaluje název a cenu pod galerií
   Pozor: obrázková galerie je mimo tento odkaz, aby šipky galerie
   nezpůsobovaly přechod na detail produktu při kliknutí */
.produkt-link {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.produkt-link p:first-child {
    text-decoration: underline;        /* Podtržení signalizuje, že je název klikatelný */
    text-underline-offset: 3px;        /* Malá mezera mezi textem a podtržením */
}

.produkt-link:hover {
    background: var(--primary-light);
}

/* Obal galerie na stránce detailu produktu
   flex: 0 0 300px = galerie má pevnou šířku 300px, neroztahuje se */
.detail-img {
    flex: 0 0 300px;
    border-radius: 12px;
    overflow: hidden;
}

/* ── NÁVOD K OBSLUZE ──────────────────────────────────── */
.manual-download {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 18px 22px;
    background: var(--accent-light);
    border: 2px solid #e5d800;
    border-radius: 10px;
    flex-wrap: wrap;
}

.manual-icon {
    font-size: 2.2em;
    flex-shrink: 0;
}

.manual-download > div {
    flex: 1;
}

.manual-download strong {
    display: block;
    font-size: 1em;
    color: var(--text);
}

.manual-download p {
    margin: 2px 0 0;
    font-size: 0.78em;
    color: var(--text-muted);
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(160,125,0,0.25);
}

.btn-download:hover {
    background: #7a5f00;
    transform: translateY(-1px);
}

.manual-unavailable {
    font-size: 0.85em;
    color: var(--text-muted);
    font-style: italic;
}

/* ── CABLE / BOX SELECT ───────────────────────────────── */
.cable-select-wrap {
    display: grid;
    grid-template-columns: 150px 1fr; /* Pevná šířka popisku, select zabere zbytek */
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
}

.cable-select-wrap label {
    font-weight: bold;
    color: var(--text);
}

.cable-select-wrap select {
    width: 100%; /* Select vždy vyplní celý druhý sloupec gridu */
    padding: 10px 14px;
    font-size: 0.95em;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.2s;
}

.cable-select-wrap select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Na mobilu (do 600px): roletky přeskládáme – popisek nad select */
@media (max-width: 600px) {
    .cable-select-wrap {
        grid-template-columns: 1fr; /* Jeden sloupec místo dvou – popisek a select pod sebe */
        gap: 4px;                   /* Menší mezera mezi popiskem a roletkou */
    }
}

/* ── ADD TO CART FORM ─────────────────────────────────── */
.add-to-cart-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    background: var(--accent-light);
    border: 2px solid #e5d800;
    border-radius: 10px;
    padding: 16px;
}

.add-to-cart-form label { font-weight: bold; }

.add-to-cart-form input[type="number"] {
    width: 70px;
    padding: 10px;
    font-size: 1em;
    border: 2px solid var(--border);
    border-radius: 6px;
    text-align: center;
    background: #fff;
}

/* ── KOŠÍK ────────────────────────────────────────────── */
.cart-empty { text-align: center; padding: 50px 0; }

.cart-table-wrap { overflow-x: auto; }

.cart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--shadow);
}

.cart-table th,
.cart-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid var(--primary-light);
}

.cart-table th {
    background: linear-gradient(90deg, var(--accent-light), var(--primary-light));
    font-weight: bold;
    color: var(--text);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-product-name {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

.cart-product-name:hover { color: var(--primary); }

.cart-product-name img {
    height: 50px;
    width: 50px;
    object-fit: contain;
    rotate: 60deg;
}

.cart-variant { color: var(--text-muted); font-weight: normal; }

.qty-form input[type="number"] {
    width: 65px;
    padding: 8px;
    font-size: 1em;
    border: 2px solid var(--border);
    border-radius: 6px;
    text-align: center;
    background: #fff;
}

.row-total { font-weight: bold; color: var(--primary); }

.price-no-vat { color: var(--text-muted); }

.cart-table tfoot td {
    font-size: 1.05em;
    border-top: 3px solid var(--primary);
    border-bottom: none;
    background: var(--primary-light);
}

.cart-total {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--primary);
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

/* ── OCHRANA PROTI ROBOTŮM ────────────────────────────── */
.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.captcha-hint {
    font-size: 0.78em;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 6px;
}

.error-box {
    background: #fee2e2;
    border: 2px solid #dc2626;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* ── OBJEDNÁVKOVÝ FORMULÁŘ ────────────────────────────── */
.order-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
}

.order-form { flex: 1; }

fieldset {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 20px;
    background: #fff;
}

legend {
    font-weight: bold;
    padding: 0 8px;
    color: var(--primary);
    font-size: 0.95em;
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 0.88em;
    color: var(--text);
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    font-size: 1em;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--primary-light);
}

.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 1em;
    font-family: inherit;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    resize: vertical;
    transition: border-color 0.2s;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--primary-light);
}

.form-group.has-error input { border-color: #dc2626; }

.error-msg {
    display: block;
    color: #dc2626;
    font-size: 0.8em;
    margin-top: 4px;
}

.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.form-group--small { flex: 0 0 120px !important; }

.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.shipping-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.shipping-option:hover,
.shipping-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.shipping-option input[type="radio"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

.shipping-label { flex: 1; font-weight: bold; }
.shipping-price { color: var(--primary); font-weight: bold; }

.cod-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.65em;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-order {
    width: 100%;
    padding: 16px;
    font-size: 1.1em;
    margin-top: 10px;
}

/* ── SHRNUTÍ OBJEDNÁVKY ───────────────────────────────── */
.order-summary {
    flex: 0 0 280px;
    background: linear-gradient(160deg, var(--accent-light) 0%, var(--primary-light) 100%);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    position: sticky;
    top: 20px;
}

.order-summary h3 {
    margin-top: 0;
    color: var(--primary);
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9em;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 0;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--primary);
}

.summary-total--novat {
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-muted);
    padding-top: 4px;
}

/* ── ÚSPĚCH OBJEDNÁVKY ────────────────────────────────── */
.order-success { text-align: center; padding: 40px 20px; }

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--yellow), var(--cyan));
    color: var(--text);
    border-radius: 50%;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px var(--shadow);
}

/* ── FOOTER ───────────────────────────────────────────── */
footer {
    width: 100%;
    min-height: 80px;
    padding: 24px 10%;
    text-align: center;
    background: linear-gradient(130deg, #d4d460 42%, #5bbfd4 42%);
    color: var(--text);
    font-size: 0.9em;
}

footer a { color: var(--text); font-weight: bold; }

/* ── TABLET (max 900px) ───────────────────────────────── */
@media (max-width: 900px) {
    .content { width: 90%; padding: 20px; }
    header h2 { margin-right: 0; }
    .inner { padding-left: 15px; }
    .order-layout { flex-direction: column; }
    .order-summary { flex: unset; width: 100%; position: static; }
    .detail { flex-direction: column; }
    .detail-img { flex: unset; width: 100%; }
}

/* ── MOBIL (max 600px) ────────────────────────────────── */
@media (max-width: 600px) {
    body { font-size: 16px; }

    header {
        font-size: 18px;
        padding: 15px 55px 15px 10px; /* pravý padding uvolní místo pro ikonu košíku */
        background: var(--yellow);
    }

    header h2 { margin-right: 0; }
    .cart-label { display: none; }
    .content { width: 100%; padding: 15px; margin-bottom: 30px; }
    .inner { padding-left: 0; }
    .produktContainer { flex-direction: column; gap: 20px; }
    .produkt { min-width: unset; }
    .produkt img { height: 200px; }
    .cart-actions { flex-direction: column-reverse; }
    .cart-actions a { width: 100%; text-align: center; }
    .form-row { flex-direction: column; gap: 0; }
    .form-group--small { flex: unset !important; }
    footer { padding: 20px 5%; font-size: 13px; background: var(--yellow); }
}