body {
    font-family: "Lexend", Helvetica, Sans-serif;
    overflow-x: hidden;
}

/* reseni fontu - tridy podle rozliseni */
@media (max-width: 480px) {
    .font-smaller { font-size: 0.8125rem; } /* 13px */
    .font-small { font-size: 0.875rem; } /* 14px */
    .font-default { font-size: 1rem; } /* 16px */
    .font-large { font-size: 1.125rem; } /* 18px */
    .font-larger { font-size: 1.25rem; } /* 20px */
    .s480 { display: block !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .font-smaller { font-size: 0.8125rem; } /* 13px */
    .font-small { font-size: 0.875rem; } /* 14px */
    .font-default { font-size: 1rem; } /* 16px */
    .font-large { font-size: 1.125rem; } /* 18px */
    .font-larger { font-size: 1.25rem; } /* 20px */
}


@media (min-width: 769px) and (max-width: 992px) {
    .font-smaller { font-size: 0.8125rem; } /* 13px */
    .font-small { font-size: 0.875rem; } /* 14px */
    .font-default { font-size: 1rem; } /* 16px */
    .font-large { font-size: 1.125rem; } /* 18px */
    .font-larger { font-size: 1.25rem; } /* 20px */
}

/* pro vsechna rozliseni */
@media (min-width: 993px) and (max-width: 9999px) {
    .font-smaller { font-size: 0.8125rem; } /* 13px */
    .font-small { font-size: 0.875rem; } /* 14px */
    .font-default { font-size: 1rem; } /* 16px */
    .font-large { font-size: 1.125rem; } /* 18px */
    .font-larger { font-size: 1.25rem; } /* 20px */
}

body { background: #354964; color: white; }
#main { max-width: 1400px; background: #203554; }

#paticka { max-width: 1400px; background: #152233; }

#menu_obal { background: #617085; }
#menu ul { list-style-type: none; margin: 0px auto; }
#menu ul li { float: left; }

.text-bg-light { background: white !important; }
.btn { border-radius: 20px; }
.btn-company-blue { background: #203554; border-color: #203554; color: white; }
.btn-company-blue:hover { background: #daa315; border-color: #daa315; color: white; }

.btn-company-green { background: #1fa65e; border-color: #1fa65e; color: white; }
.btn-company-green:hover { background: #daa315; border-color: #daa315; color: white; }

.btn-company-gold { background: #daa315; border-color: #daa315; color: white; }
.btn-company-gold:hover { background: #203554; border-color: #203554; color: white; }

.card-body-effect {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 12px; /* volitelné, pokud chceš jemné zaoblení */
}

.card-body-effect:not(.no-zoom):hover {
    transform: scale(1.03); /* malinko zvětší */
    cursor: default;
}

.flip-card-inner, .flip-card-container, .detail_produkt {
    cursor: pointer !important;
}

.logo {
    display: inline-block;
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden; /* hladší animace */
}

/* jen na zařízeních s myší */
@media (hover:hover) and (pointer:fine) {
    .logo:hover {
        animation: logoPulse 1.2s ease-in-out infinite;
    }
}

/* klávesová navigace – stejné chování jako hover */
.logo:focus-visible {
    outline: none;
    animation: logoPulse 1.2s ease-in-out infinite;
}

@keyframes logoPulse {
    0%   { transform: scale(1.02); }  /* hned po najetí lehce zvětšené */
    50%  { transform: scale(1.06); }  /* vrchol pulzu */
    100% { transform: scale(1.02); }
}

/* volitelné: respektuj omezení animací v OS */
@media (prefers-reduced-motion: reduce) {
    .logo, .logo:hover, .logo:focus-visible {
        animation: none;
        transform: none;
    }
}

/* ================================================
   TYPEWRITER TEXT - zlatý text s efektem odlesku
   ================================================ */

.typewriter-container {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.typewriter-text {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 272%;
    display: inline-block;
    opacity: 0;
    animation: fadeIn 3s ease-out forwards, textShine 6s linear 4s infinite;
    /* Gradient background pro shine efekt */
    background: linear-gradient(
        90deg,
        #DAA520 0%,
        #DAA520 35%,
        #fff 50%,
        #DAA520 65%,
        #DAA520 100%
    );
    background-size: 400% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Automatický shine efekt přes text - animace background-position */
@keyframes textShine {
    0% { background-position: 100% 0; }
    50%, 100% { background-position: 0% 0; }
}

/* Třpytky kolem textu */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #DAA520 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.sparkle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background: linear-gradient(to bottom, transparent, #DAA520, transparent);
    transform: translate(-50%, -50%);
}

.sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: linear-gradient(to right, transparent, #DAA520, transparent);
    transform: translate(-50%, -50%);
}

@keyframes sparkle-anim {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

.sparkle.active {
    animation: sparkle-anim 1.2s ease-out forwards;
}

/* Wrapper s oušky */
.ouska{
    display: flex;
    flex-wrap: nowrap;   /* případně 'wrap', chceš-li lámat na malé šířce */
    align-items: flex-start;
    gap: 0;
    padding: 0;
    position: relative;
}


/* Základ ouška (neaktivní stav je níž – viz transform) */
.ousko{

    line-height: 1.3;
    flex: 0 0 230px;
    display: flex;                  /* flexbox pro centrování obsahu */
    flex-direction: row;            /* obsah vedle sebe */
    align-items: center;            /* vertikální centrování */
    justify-content: flex-end;        /* horizontální centrování */
    gap: 12px;                       /* mezera mezi obrázkem a textem */
    margin: 0;
    padding: 10px 12px;
    text-align: center;             /* text na střed */
    text-decoration: none;
    font-weight: normal !important;
    box-sizing: border-box;

    position: relative;             /* kvůli ::after pruhu */
    overflow: hidden;

    /* zakulacení pravého horního rohu */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

    /* výchozí „nižší" stav pro všechna neaktivní ouška */

    font-size: 86%;

    transition: transform 0.2s ease, filter 0.3s ease;
    border-bottom: 0px solid #7b8899;
    background: #617085;
    transform: translateY(0px);

}


.ousko img { height: 46px; }

@media (max-width: 600px) {
    .ousko{
        flex: 50%;
    }
}

@media (min-width: 600px) and (max-width: 800px) {
    .ousko{
        flex: 0 0 230px;
    }
}

@media (max-width: 800px) {
    .ousko-text-pod {
        font-size: 56%;
    }

}

.ousko:hover { text-decoration: none !important; }




/* Aktivní ouško – je „vysoké“ a bez efektů */
.ousko_aktivni{
    transform: translateY(0);       /* nahoře */
    font-size: 100%;
    filter: none;
    cursor: pointer;
    padding-top: 20px;
    padding-bottom: 12px;
    justify-content: center;
    border: 0px;
    border-top-left-radius: 20px;
}

/* Hover zvýraznění pouze pro NEaktivní ouška */
.ousko:not(.ousko_aktivni):hover{

    filter: brightness(1.15);
    cursor: pointer;
}

/* Lesklý „shine“ proužek – base */
.ousko::after{
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.35) 50%,
            rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;           /* ať neovlivní hover */
}

/* Spuštění lesku jen na NEaktivních při hoveru */
.ousko:not(.ousko_aktivni):hover::after{
    animation: shine 0.9s ease-in-out;
}

@keyframes shine{
    0%   { left: -75%; }
    100% { left: 125%; }
}

/* Obrázek v oušku */
.ousko-img {
    flex-shrink: 0;
}

/* Text v oušku - vlevo zarovnaný vedle obrázku */
.ousko-text {
    text-align: right;
}

/* Logo v hlavičce */
.header-logo {
    width: 270px;
    margin-bottom: 2px;
}

@media (max-width: 600px) {
    .header-logo {
        width: 170px;
    }
}


.ousko .bold { font-weight: bold; font-size: 17px !important; }
.ousko-text-pod { font-size: 12px !important; }

/* Barvy oušek */
#ousko_stribro { background: #455770; color: #b6b9bc !important; margin-right: 4px; }
#ousko_zlato   { background: #455770; color: #daa31a !important; }

.upozorneni { border-radius: 0 0 16px 16px !important; }

/* Menu styly - musi byt pred vykreslenim menu aby nedochazelo k FOUC */
#menu li a { color: white; text-decoration: none; text-transform: uppercase; font-size: 111%; }
#menu li a:hover { color: #daa315; }

#login {
    color: white;
    text-decoration: none;
    font-size: 96%;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
}
#login:hover {
    color: #daa315;
}

/* Desktop menu - zobrazit od 1000px */
#menu_obal {
    display: none;
}
@media (min-width: 1000px) {
    #menu_obal {
        display: flex;
    }
}

/* Mobilní menu - skrýt od 1000px */
#menu_mobile_wrapper {
    display: block;
    border-top-left-radius: 20px;
    background: #617085;
}
@media (min-width: 1000px) {
    #menu_mobile_wrapper {
        display: none;
    }
}
@media (max-width: 600px) {
    #menu_mobile_wrapper {

        border-top-left-radius: 0px !important;
    }
}

/* Horní logo - schovat pod 820px */
#header-logo-wrapper {
    display: flex;
}
@media (max-width: 819px) {
    #header-logo-wrapper {
        display: none;
    }
}

/* Logo v mobilním menu - zobrazit pod 820px */
#menu-mobile-logo {
    display: none;
}
@media (max-width: 819px) {
    #menu-mobile-logo {
        display: block;
    }
}

/* Ouška - plná šířka pod 820px */
@media (max-width: 819px) {
    #ouska-wrapper {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

#main { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

/* Zabraň horizontálnímu scrollu kvůli mincím */
body {
    overflow-x: hidden;
}


#menu li a { color: white; text-decoration: none; text-transform: uppercase; font-size: 111%; }
#menu li { padding: 8px 20px 8px 30px }

/* UL jen tak široké, jak je třeba + bez defaultních okrajů */
#menu{
    display: inline-flex;      /* shrink-to-content, ať nebere 100% šířku */
    align-items: center;
    gap: .75rem;               /* rozestupy */
    list-style: none;
    margin: 0;                 /* zruší svislé okraje, co „odsouvaly“ obsah dolů */
    padding: 0;
    flex-wrap: nowrap;         /* neobtáčí na další řádek */
    white-space: nowrap;       /* ani text uvnitř se neláme */
}


/* odkazy – kompaktní blok */
#menu a{
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .25rem .1rem;
}

#menu a:hover { color: #daa315;}

/* Efekt nadzvednutí textu a animovaná čára pod položkou menu */
#menu li {
    position: relative;
}

#menu li a {
    position: relative;
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

#menu li a:hover {
    transform: translateY(-3px);
}

/* Animovaná čára pod položkou */
#menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #daa315, transparent);
    transition: width 0.35s ease, left 0.35s ease;
}

#menu li a:hover::after {
    width: 100%;
    left: 0;
}

#prihlasit { color: white; text-decoration: none; font-size: 96%; }
#prihlasit:hover { color: #daa315;}

/* Volitelné: na mobilech klidně povolit zalomení a schovat oddělovače */
@media (max-width: 576px){
    #menu{ display:flex; justify-content:center; flex-wrap:wrap; white-space:normal; }
    #menu li + li{ border-left:0; padding-left:0; }
}

/* Hamburger menu pro mobil */
#hamburger-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 10px 15px;
}

#hamburger-btn {
    background: #daa315;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
}

#hamburger-btn:hover {
    background: #c99412;
}

#hamburger-btn i {
    margin-right: 8px;
}

#menu-mobile {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #3a4a5e;
    margin-bottom: 12px;
}

#menu-mobile.open {
    display: block;
}

#menu-mobile li {
    border-bottom: 1px solid #4c5d76;
}

#menu-mobile li:last-child {
    border-bottom: none;
}

#menu-mobile li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 100%;
}

#menu-mobile li a:hover {
    background: #4c5d76;
    color: #daa315;
}

#menu-mobile .menu-mobile-prihlasit {
    background: #2a3a4e;
    margin-top: 10px;
}

#menu-mobile .menu-mobile-prihlasit a {
    color: #daa315;
}

#menu-mobile .menu-mobile-prihlasit a i {
    margin-right: 8px;
}

.news-input {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #c0c6cf; /* jemně šedý rámeček */
    border-radius: 9999px; /* maximálně zaoblené rohy */
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    background-color: white;
    color: #2c2c2c;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 4px;
    padding-left: 10px;
}

.news-input::placeholder {
    color: #6b7280; /* šedý text placeholderu */
    opacity: 1;
    padding-left: 10px;
}

.news-input:focus {
    border-color: #9ca3af; /* tmavší při focusu */
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.3); /* jemný focus efekt */
}

#paticka_footer {
    padding: 0px 80px;
    background: #152233;
    max-width: 1400px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 20px;
}
#paticka_footer h4 {
    color: #daa315;
    text-transform: none;
    padding: 12px 0px;
}
#menu_footer li a { color: white; text-decoration: none; }
#menu_footer li a:hover { text-decoration: underline; }
#menu_footer { list-style: none; padding: 0; margin: 0; }

@media (max-width: 991px) {
    #paticka_footer {
        padding: 0px 20px;
    }
    #paticka_footer .row > div {
        text-align: center;
        margin-bottom: 15px;
    }
    #paticka_footer h4 {
        text-align: center;
    }
    #menu_footer {
        text-align: center;
    }
}