.topnav_box {
    background: rgb(239, 239, 239);
    padding: 10px 0;
}

.topnav_box a {
    margin: 0 15px; /* odsazení zleva i zprava */
    text-decoration: none;
    color: inherit;
    font-size: .9rem;
    transition: color 0.2s ease; /* plynulý přechod barvy */
}

.topnav_box a:hover {
    color: #007bff; /* bootstrap modrá */
    text-decoration: none;
    transition: color 0.2s ease; /* přechod na hover */
}

.topnav_box a:not(:hover) {
    transition: color 0.2s ease 0.2s; /* 0.5s delay při návratu */
}

/* Nastaví 5 produktů na řádek při větších obrazovkách */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.btn-primary {background: rgb(84,176,244); border: 1px solid rgb(84,176,244); width: auto !important; font-size: .8rem;}

/* Styl produktu */
.product-card {
    transition: transform 0.25s ease;
}
.product-card:hover {
    transform: translateY(-5px);
}

/* Modré kolečko s cenou/slevou */
.discount-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #d62828;
    color: #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1.1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.discount-badge .old-price {
    text-decoration: line-through;
    font-size: 0.75rem;
    opacity: 0.9;
}

.discount-badge .discount {
    font-weight: 700;
    font-size: 0.9rem;
}

/* Stav produktu */
.product-status {
    color: #4361ee;
    font-weight: 600;
    font-size: 0.9rem;
}

.footer-section a {
    color: #e3e3e3;
    text-decoration: none;
    font-size: 1rem !important;
    transition: color 0.3s;
}
.footer-section a:hover {
    color: #b8b8b8; /* moderní modrá */
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.social-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s, color 0.3s;
}

.social-icon:hover svg {
    transform: scale(1.2);
    color: #0d6efd;
}

.bg-dark {  background: linear-gradient(135deg, rgba(70,157,221,0.9) 0%, rgba(30,90,160,0.9) 100%) !important;
    color: #fff; /* text nad gradientem */
    position: relative;}

@media (max-width: 767.98px) {
    .footer-section {
        text-align: center;
    }
    .footer-section .row > div {
        text-align: center;
    }
    .footer-links {
        padding-left: 0;
    }
    iframe{max-width: 100%;}
}


footer .text-secondary {color: white !important; }
footer .text-muted {color: rgb(62 62 62 / 75%) !important}
footer .text-muted a {color: rgb(62 62 62 / 75%) !important}
.homeicon {margin-top: -3px;}
.breadcrumb-home {margin-right: 0px !important; margin-left: 0px !important;}
.breadcrumb {margin-bottom: 10px;}

.nejprodavanejsi h3 {font-size: 1.3rem;}
.kola-odrazedla .item-link {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.kola-odrazedla .item-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: rgba(0,0,0,0.03);
}

.kola-odrazedla img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}
/* Quantity selector */
.quantity-selector {
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    height: 32px;
}

.quantity-selector .btn {
    width: 30px;
    padding: 0;
    border: none;
    border-radius: 0;
    line-height: 1;
    transition: background-color 0.2s;
}

.quantity-selector .btn:hover {
    background-color: #cfe2ff;
}

.quantity-selector .qty-input {
    width: 50px;
    border: none;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    text-align: center;
    padding: 0;
}

.cart-items .cart-info {
    min-width: 150px;
}

.cart-summary {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

@media (max-width: 575px) {
    .cart-items .d-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .quantity-selector {
        margin-top: 0.5rem;
    }
    .cart-summary {
        text-align: left;
    }
    .kosik-tabs li {width: 100%;}
}

.quantity-selector {
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    height: 32px;
}
.quantity-selector .btn {
    width: 30px;
    padding: 0;
    border: none;
    border-radius: 0;
    line-height: 1;
    transition: background-color 0.2s;
}
.quantity-selector .btn:hover {
    background-color: #cfe2ff;
}
.quantity-selector .qty-input {
    width: 50px;
    border: none;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    text-align: center;
    padding: 0;
}

/* --- Responzivní úpravy --- */
@media (max-width: 767px) {
    .cart-item {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left;
        gap: 0.5rem;
    }
    .cart-item > div {width: auto !important;}

    .cart-item > div {
        width: 100%;
    }

    .cart-info {
        order: 1;
    }
    .quantity-selector {
        order: 2;
        justify-content: flex-start;
    }
    .text-muted, .fw-bold {
        order: 3;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    height: 36px;
    flex-shrink: 0;
}

/* Tlačítka */
.quantity-selector .btn {
    background: #fff;
    border: none;
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #6c757d;
    transition: background-color 0.2s;
}

.quantity-selector .btn:hover {
    background-color: #e9f2ff;
}

/* Input */
.quantity-selector .qty-input {
    width: 55px;
    height: 100%;
    text-align: center;
    border: none;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    font-size: 14px;
    -moz-appearance: textfield;
}
.quantity-selector .qty-input::-webkit-outer-spin-button,
.quantity-selector .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Responsivní zajištění, že zůstane vždy v jedné řadě */
@media (max-width: 576px) {
    .quantity-selector {
        width: auto;
    }
    .quantity-selector .qty-input {
        width: 45px;
    }
}
.hoverable {
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
}
.hoverable:hover {
    background-color: #e9f2ff;
    border-color: #80bdff;
}
.form-check-input {
    cursor: pointer;
}
.check-input {width: 12px; height: 17px !important; margin-right: 10px;}

.osobni-udaje input,
.osobni-udaje select,
.osobni-udaje textarea {
    border-radius: 6px;
    border-color: #dee2e6;
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
}

.osobni-udaje h6 {
    font-weight: 600;
    font-size: 1rem;
}

.osobni-udaje .bg-light {
    background-color: #f8f9fa !important;
}



@media (max-width: 991px) {
    .col-lg-4 {
        margin-top: 1rem;
    }
}

.bg-lightblue {
    background-color: #009fe3;
}

.souhrn_objednavky h1 {font-size: 2rem;}

.text-primary {
    color: #ffffff !important;
}

.green_color {color: green;}
.lista span {color: white !important;}
.lista div {color: white !important;}


@media (max-width: 767px) {
    .text-md-start {
        text-align: center !important;
    }
    .text-md-end {
        text-align: center !important;
    }
}
.cpointer {cursor: pointer;}

.feature-block {
    --bs-gutter-x: 2rem; /* zmenšená mezera mezi sloupci */
}

.feature-content {
    width: 85%; /* dříve 70 %, teď blíž k obrázku */
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}

.feature-content h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.feature-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.feature-content .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* Otočená varianta */
.feature-block.reverse {
    flex-direction: row-reverse;
}

@media (max-width: 991.98px) {
    .feature-content {
        width: 100%;
        margin: 2rem 0 0 0;
        text-align: center;
    }
    .feature-block.reverse {
        flex-direction: column;
    }
}

.produkt-box {text-decoration: none; color: black;}
.product-card {color: black; text-decoration: none;}
.product-card {
    color: black;
    text-decoration: none;
    display: block;
    border-radius: 12px;
    transition: all 0.25s ease;
    background: #fff;
    overflow: hidden;
}
.modal-header {border-bottom: 0px;}
.modal-header h4 {font-size: 1.4rem;}
.modal-footer {border-top: 0px;}

.product-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.product-card img {
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}
.lista_box {background: rgb(237,114,141); width: 100%; height: auto; font-size: 1rem; color: white;}
.lista_box a {color: white; text-decoration: underline; font-size: 1.1rem;}
.lista_box p {margin-bottom: 0px;}
nav.navbar {box-shadow: 0 0 20px #00000020;}

.custom-alert {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    max-width: 400px;
    animation: fadeInSlide 0.4s ease-out, fadeOut 0.4s ease-in 4s forwards;
}

.alert-icon {
    font-size: 22px;
}

.custom-alert.success {
    background: linear-gradient(135deg, #00c851, #007e33);
}

.custom-alert.error {
    background: linear-gradient(135deg, #ff4444, #cc0000);
}

.custom-alert.warning {
    background: linear-gradient(135deg, #ffbb33, #ff8800);
}

.custom-alert.info {
    background: linear-gradient(135deg, #33b5e5, #0099cc);
}

/* Animace */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}