/**
 * Custom CSS pro Biketraining.cz
 * Přesunuté inline styly z PHP souborů
 */

/* E-shop - Hero overlay */
.hero-overlay-dark {
    background: rgba(0,0,0,0.6);
}

/* E-shop - Design gallery */
.design-gallery-img {
    cursor: pointer;
    padding: 20px;
    background: white;
}

/* E-shop - Filter pills */
.filter-pills {
    gap: 10px;
}

/* E-shop - Sticky filter section */
.sticky-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 72px; /* Výchozí pozice pod navigací - JavaScript to přepíše přesněji */
    z-index: 998;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 0;
}

/* Navigace sticky na e-shop a košík stránkách */
.page-eshop .ftco_navbar,
.page-eshop .ftco-navbar,
.page-eshop #ftco-navbar,
.page-cart .ftco_navbar,
.page-cart .ftco-navbar,
.page-cart #ftco-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Mobile fallback */
@media (max-width: 991px) {
    .sticky-filter {
        top: 56px;
    }

    /* Menší tlačítka filtru na mobilu */
    .filter-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem;
    }

    .filter-pills {
        gap: 5px;
    }

    /* Menší ikony kroků objednávky na mobilu */
    .order-step .step-icon {
        width: 55px !important;
        height: 55px !important;
    }

    .order-step .step-icon i {
        font-size: 1.4rem !important;
    }

    .order-step .step-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
        border: 2px solid #fff !important;
    }

    .order-step h5 {
        font-size: 0.95rem !important;
    }

    .order-step p {
        font-size: 0.8rem !important;
    }
}

.filter-link {
    border-radius: 0.25rem;
    border: 1px solid #f9d700;
    background: transparent;
    color: #f9d700;
}

.filter-link.active {
    background: #f9d700;
    border: 1px solid #f9d700;
    color: #000;
}

.filter-link-outline {
    border-radius: 0.25rem;
    border: 1px solid #f9d700;
    background: transparent;
    color: #f9d700;
}

/* E-shop - Product card */
.product-card-img {
    height: 300px;
    object-fit: contain;
    background-color: #f8f9fa;
    padding: 15px;
}

/* E-shop - Features list */
.product-features {
    font-size: 0.9rem;
}

/* E-shop - Small links */
.link-small {
    font-size: 0.9rem;
    color: #000 !important;
}

.link-small:hover {
    color: #333 !important;
    text-decoration: underline;
}

/* Hero Background Images - Page-specific */
.hero-e-shop {
    background-image: url('../images/team-jersey-eshop.webp');
    background-position: center center;
    background-size: 75%;
    background-repeat: no-repeat;
}

.hero-faq {
    background-image: url('../images/faq-optimized.webp');
}

.hero-contacts {
    background-image: url('../images/contacts.webp');
}

.hero-cart {
    background-image: url('../images/cart-hero.webp');
}

.hero-about {
    background-image: url('../images/about-me.webp');
}

.hero-order-confirmation {
    background-image: url('../images/carousel-1.webp');
}

.instagram-handle {
    color: #666;
}

.instagram-handle .icon-instagram {
    font-size: 1.2rem;
    margin-right: 6px;
}

.instagram-handle a {
    font-weight: 600;
    color: #666;
}

.hero-training {
    background-image: url('../images/training.webp');
}

.hero-lactate {
    background-image: url('../images/lactate-testing.webp');
}

.hero-team {
    background-image: url('../images/team.webp');
}

.hero-carousel-1 {
    background-image: url(../images/carousel-1-mobile.webp);
}

.hero-carousel-2 {
    background-image: url(../images/carousel-2-mobile.webp);
}

.hero-carousel-3 {
    background-image: url(../images/carousel-3-mobile.webp);
}

@media (min-width: 769px) {
    .hero-carousel-1 {
        background-image: url(../images/carousel-1-desktop.webp);
    }

    .hero-carousel-2 {
        background-image: url(../images/carousel-2-desktop.webp);
    }

    .hero-carousel-3 {
        background-image: url(../images/carousel-3-desktop.webp);
    }
}

/* E-shop - Order Steps Design */
.order-step {
    transition: transform 0.3s ease;
}

.order-step:hover {
    transform: translateY(-5px);
}

.order-step .step-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f9d700 0%, #f0c800 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(249, 215, 0, 0.3);
}

.order-step .step-icon i {
    font-size: 2.5rem;
    color: #000;
}

.order-step .step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #000;
    color: #f9d700;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    border: 3px solid #fff;
}

.order-step h5 {
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
}

.order-step p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Utility classes */
.hidden {
    display: none;
}

.quantity-input {
    width: 80px;
}

.success-icon {
    font-size: 4rem;
    color: #28a745;
    display: block;
    margin-bottom: 20px;
}

.order-steps {
    padding-left: 20px;
}

/* Order confirmation - small step icons */
.step-icon-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-icon-small i {
    font-size: 1.5rem;
}

/* Discount code styles - increased specificity */
.alert.alert-discount-success.alert-dismissible {
    background-color: #f9d700 !important;
    color: #000 !important;
    border-color: #f9d700 !important;
}

tr.discount-row-light td {
    background-color: #fffacd !important;
}

tr.discount-row-highlight td {
    background-color: #f9d700 !important;
    font-weight: bold !important;
}

div.discount-code-box {
    background-color: #f9d700 !important;
    color: #000 !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    border: 2px solid #f9d700 !important;
}

button.discount-remove-btn {
    background-color: #000 !important;
    color: #f9d700 !important;
    border-color: #000 !important;
}

button.discount-remove-btn:hover {
    background-color: #333 !important;
    color: #f9d700 !important;
    border-color: #333 !important;
}

div.discount-summary-light {
    color: #000 !important;
    background-color: #fffacd !important;
    padding: 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

div.discount-summary-total {
    background-color: #f9d700 !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

/* E-shop - Gold links for better contrast */
a.link-gold {
    color: #d4af37;
}

a.link-gold:hover {
    color: #b8941f;
    text-decoration: underline;
}

/* E-shop - Gender badge for women's products */
.product-image-wrapper {
    position: relative;
}

.gender-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.women-badge {
    background-color: #8175c1;
    color: white;
}

/* Cart - Form radio button labels styling */
.form-check-label {
    color: #495057;
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0;
}

/* Partners logos - larger on mobile */
@media (max-width: 991px) {
    .ftco-sponsors img {
        min-width: 200px !important;
        width: 250px !important;
        height: auto !important;
        margin: 15px 20px !important;
    }

    /* Carousel-1 - shift image right on mobile to show cyclist */
    .slider-item.hero-carousel-1,
    .owl-carousel .slider-item.hero-carousel-1,
    .home-slider .slider-item.hero-carousel-1 {
        background-position: 80% center !important;
    }
}

/* Firefox fix for AOS animation issues (GitHub issue #675, #394, #245) */
/* Firefox doesn't always add aos-animate class, causing elements to stay at opacity 0 */
@-moz-document url-prefix() {
    /* Force all AOS elements to be visible immediately - before AOS even tries to hide them */
    [data-aos],
    .ftco-animate {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}