/* --- ZÁKLADNÍ NASTAVENÍ --- */
:root {
    --app-blue: #10357a;
    --app-bg: #0c0e12;
    --app-bg-separate: #252a33;
    --app-card: #191d24;
    --app-text: #6b778c;
    --app-green: #ccf340;
    --app-border: #222730;
    --app-white: #fff;
}

* { box-sizing: border-box; }

body { 
    font-family: 'Inter', -apple-system, sans-serif; 
    background: var(--app-bg); 
    color: var(--app-text); 
    margin: 0; 
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


.nav-container, .main-container { 
    max-width: 1500px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
.main-navi {text-decoration:none; font-weight:600; font-size:0.9rem; color: var(--app-text); height: 32px;}
.nav-container { position: relative; }

.main-footer {margin-top: 50px; border-top: 1px solid #222730; background: #0c0e12; padding: 40px 0;}
.footer-first {
    font-weight: 800;
    color: var(--app-white);
    margin-bottom: 10px;
    font-family: "Chakra Petch";
}
.footer-second  {font-size: 0.8rem; color: #6b778c; }

.footer-third {
    font-size: 0.75rem;
    color: #6b778c;
    margin-top: 20px;
    opacity: 50%;
}

/* --- HEADER --- */
.nav-header { 
    background: var(--app-card); 
    padding: 25px 0 0px 0; 
    border-bottom: none; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}


.nav-header nav {
    display: flex;
    gap: 20px;
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding-top: 20px; 
    padding-bottom: 0px;
}


.nav-header nav::-webkit-scrollbar {
    display: none;
}

.logo { 
    font-weight: 900; 
    color: var(--app-white); 
    font-size: 2rem; 
    text-decoration: none; 
    font-family: "Chakra Petch";
    text-transform: uppercase;
}
@media (max-width: 768px) { .logo  {font-size: 1.5em; } }

/* --- DETAIL UDÁLOSTI (WIDGET) --- */
.match-widget { 
    background: var(--app-card); border-radius: 12px; margin: 40px auto 20px auto; max-width: 1460px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;
}

.match-header-top { 
    background: #191d24;
    padding: 12px 20px; 
    border-bottom: 1px solid var(--app-border); 
    display: flex; 
    justify-content: space-between; 
    font-size: 0.8rem; 
    font-weight: 600; 
    color: #6b778c; 
}

.match-main { 
    padding: 40px 20px; 
    text-align: center; 
}

.match-main h1 {
    font-size: 2.2rem;
    margin: 0;
    letter-spacing: -1px;
}

.featured-match { background: linear-gradient(135deg, var(--app-blue) 0%, #0747a6 100%); border-radius: 12px; padding: 25px; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; color: white; background: linear-gradient(135deg, #0c0e12 0%, #0aacc3 100%);}
.featured-label { padding: 4px 8px; border-radius: 4px; text-transform: uppercase; font-weight: 800; background: #03bcd426; color: #07b7cf; font-size: 0.65rem; }
.featured-title { font-size: 1.8rem; margin: 10px 0; color: #fff; letter-spacing: -0.5px; }
.featured-subtitle { opacity: 0.9; font-weight: 600; font-size: 0.8em; }
.featured-match h2 a {color:white;}
.featured-btn-primary { text-decoration: none; padding: 12px 25px; border-radius: 8px; font-weight: 800; flex-shrink: 0; margin-left: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); background: #ffffff; font-size: 0.8em; color: #191d24; }

/* --- TABS (Záložky) --- */
.match-tabs { 
    display: flex; 
    border-bottom: 1px solid var(--app-border); 
    background: var(--app-card); 
    max-width: 990px; margin: auto; padding: 0px 0px;
}
@media (max-width: 768px) { .match-tabs  {padding: 0px 0px } }

.match-time{ font-size: 3.2rem; /* font-size: 2em; */ font-weight: 900; color: var(--app-blue); color: white; font-family: "Bungee";  font-family: "Chakra Petch";}

.team-logo { width: 64px; height: 64px; background: var(--app-bg-separate); border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #ffffff; }

.tab-item { 
    flex: 1; 
    text-align: center; 
    padding: 15px; 
    text-decoration: none; 
    color: #6b778c; 
    font-weight: 700; 
    font-size: 0.9rem;
    border-bottom: 3px solid transparent; 
    transition: 0.2s;
}

.tab-item:hover { background: var(--app-bg-separate);}
.tab-item.active { 
    color: #04e2ff;
    border-bottom-color: #00e2ff;
}

/* --- VÝPIS UDÁLOSTÍ (HOMEPAGE) --- */
.day-divider { 
    margin: 30px 0 15px; 
    font-size: 0.8rem; 
    font-weight: 800; 
    color: #6b778c; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
}

.day-divider::after { 
    content: ""; 
    flex: 1; 
    height: 1px; 
    background: var(--app-border); 
    margin-left: 15px; 
}

.event-card { 
    background: var(--app-card); 
    border-radius: 10px; 
    padding: 18px 20px; 
    margin-bottom: 10px; 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    color: inherit; 
    border: 1px solid transparent; 
    transition: 0.2s; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.event-card:hover { 
    border-color: var(--app-green); 
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* --- ODZNAKY (BADGES) --- */
.badge { 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 0.7rem; 
    font-weight: 700; 
    margin-left: 5px; 
}

.badge-stream { background: #ccf34114; color: var(--app-green); color: #00e2ff; background: #00e2ff1a;}
.badge-top { background: #ccf34114; color: var(--app-green);}

/* --- OBSAH ANALÝZY --- */
.article-content {
    padding: 30px; line-height: 1.7; max-width: 1050px; margin: auto;
}
@media (max-width: 768px) { .article-content {padding: 20px; } }
.article-content img { max-width: 100%; height: auto; border-radius: 8px;}

.sport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; margin: 40px 0 20px 0; }
.sport-card { background: var(--app-card); padding: 15px 0px; border-radius: 12px; text-align: center; text-decoration: none; color: var(--app-text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: 0.2s; }
.sport-card:hover { transform: translateY(-3px); border-color: var(--app-green); }
.sport-card i { display: block; font-size: 1.5rem; margin-bottom: 5px; font-style: normal; }



.top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 768px) { .top-grid { grid-template-columns: 1fr; } }

.league-nav { background: transparent; border-bottom: 1px solid #222730; white-space: nowrap; }
.league-pill { color: #6b778c; text-decoration: none; font-weight: 600; padding-right: 7px; font-size: 0.8rem; }
.league-pill.active { color: #fff; }

/* Zvýraznění aktivní kategorie v menu */
.nav-link.active {
    color: white !important; border-bottom: 3px solid #ffffff !important;
}

@media (max-width: 1460px) { .match-widget{ border-radius: 0px; }}

.tv-box {
    background: var(--app-bg-separate);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tv-box-line1 {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--app-white);
    font-weight: 700;color: #04e2ff;
}
.tv-box-line2 { font-size: 0.85rem; color: #6b778c; }
.tv-box-line3 {
    background: var(--app-green);
    color: #111419;
    border-radius: 6px;
    flex: none;
    padding: 12px 20px;
    border-bottom: none;background: #04e2ff;
}

.main-container-page { max-width: 1500px; margin: 0 auto; padding: 20px 20px 0 20px; }
@media (max-width: 1000px) {.main-container-page { padding: 0px; margin: 0; }}
.page-block {background: transparent; border-radius: 12px; margin: 40px auto 20px auto; max-width: 1460px;  overflow: hidden; padding: 0px; line-height: 1.8;}
@media (max-width: 1000px) {.page-block { border-radius: 0px;padding: 20px;}}

.search-form-primary input::placeholder {
  color: #6b778c; 
  opacity: 1;    
}

.search-form-primary {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    background: var(--app-bg-separate);
    border-radius: 10px;
    margin-right: 20px;
    z-index: 100;
}

.search-form-primary input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    padding: 7px 3px 6px 3px;
    width: 250px;
    color: white;
}

.search-submit-btn {
    border: none; 
    background: transparent; 
    cursor: pointer; 
    font-size: 1rem;
}

.mobile-search-trigger, .mobile-search-close {
    display: none; 
}


@media (max-width: 768px) {
    .search-form-primary {
        display: none; 
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%; height: auto;
        margin: 0; border-radius: 0;
        padding: 20px;
        background: #191d24; 
        flex-direction: row;
    }

    .search-form-primary.active {
        display: flex; 
        z-index: 9999;
    }

    .search-form-primary input {
        width: 100%;
        font-size: 1.1rem;
        padding: 10px;
    }

    .mobile-search-trigger {
        display: block;
        position: absolute;
        right: 14px;
        top: 0px;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: white;
    }

    .mobile-search-close {
        display: block;
        background: transparent;
        border: none;
        color: #6b778c;
        font-size: 1.5rem;
        margin-right: 15px;
    }

    .search-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgb(25 29 36 / 70%);
        z-index: 9998;
    }

    .search-overlay.active {
        display: block;
    }
}

.nav-container-primary { display: flex; gap: 10px; overflow-x: auto; padding: 9px 20px 8px 20px; align-items: center; max-width: 1500px; margin: 0 auto; }

.eventlink { text-decoration: none; color: var(--app-white); font-weight: 700; font-size: 1.05rem; }

.eventlink2 { text-decoration:none; color:var(--app-white); font-weight: 700; font-size: 0.95rem;}

.event-date { width:60px; font-weight:800; color:var(--app-green); font-size:0.9rem; }

.event-date-2 {width: 70px; font-weight:800; color:var(--app-green); font-size:0.9rem;}

.event-date-3 {width: 50px; font-size: 0.75rem; line-height: 1.2; font-weight:800; color:var(--app-green);}

.list-container { max-width: 1500px; margin: 0 auto; padding: 0 20px; } 
.list-container ul { padding: 0px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.list-container ul li { display: inline-block; background: var(--app-card); align-items: center; text-decoration: none; transition: 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 10px 14px; font-weight: 600; font-size: 0.75rem; border-radius: 7px; line-height: 1.4; position: relative; color: var(--app-text);}
.list-container ul li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); }
.list-container a { font-weight: 600; font-size: 0.75rem; color: var(--app-text); text-decoration: none; display: block;}
.list-container a span { position: absolute; top: -5px; right: 8px; background: #1a2b34; color: #00BCD4; padding: 2px 6px; border-radius: 4px; font-size: 0.6rem; font-weight: 700; }

@media (max-width: 500px) {.list-container ul { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }}



.text-sector p, .text-sector li, .text-sector table { color: #b7c0cf; }  .text-sector h1, .text-sector h2 { color: white; line-height: 1.3;} .text-sector a { color: #04e2ff; }

.footer-link-list a { font-size: 0.8rem; text-decoration: none; font-weight: 500; margin-right: 7px; color: #b7c0cf; }

.sport-card img { max-width: 30px; display: block; margin: auto;  padding-bottom: 7px;  filter: invert(89%) sepia(9%) saturate(396%) hue-rotate(176deg) brightness(87%) contrast(88%); filter: invert(66%) sepia(11%) saturate(431%) hue-rotate(180deg) brightness(88%) contrast(87%); filter: invert(45%) sepia(27%) saturate(302%) hue-rotate(179deg) brightness(97%) contrast(90%);}

.search-submit-btn img { max-width: 25px; display: block; margin: auto; filter: invert(89%) sepia(9%) saturate(396%) hue-rotate(176deg) brightness(87%) contrast(88%); filter: invert(66%) sepia(11%) saturate(431%) hue-rotate(180deg) brightness(88%) contrast(87%); /* filter: invert(45%) sepia(27%) saturate(302%) hue-rotate(179deg) brightness(97%) contrast(90%); */ padding-bottom: 0px; }

@media (max-width: 768px) {.search-submit-btn img{ filter: invert(1); padding-bottom: 2px; max-width: 27px; float: right; margin: 0px; } .search-submit-btn { padding: 0px; }}

.mobile-search-trigger img { max-width: 27px; display: block; margin: auto; filter: invert(89%) sepia(9%) saturate(396%) hue-rotate(176deg) brightness(87%) contrast(88%); filter: invert(66%) sepia(11%) saturate(431%) hue-rotate(180deg) brightness(88%) contrast(87%); /* filter: invert(45%) sepia(27%) saturate(302%) hue-rotate(179deg) brightness(97%) contrast(90%); */ filter: invert(1); padding-bottom: 0px; }

.sport-card:nth-child(4) {display: none;} @media (max-width: 768px) {.sport-card:nth-child(4) {display: none;}}

@media (max-width: 768px) { .sport-card {color: #b7c0cf; font-size: 0.8em;} .sport-card img {max-width: 25px; filter: invert(86%) sepia(23%) saturate(154%) hue-rotate(180deg) brightness(88%) contrast(82%);}}

.match-score{ letter-spacing: 0em; color: white; line-height: 1; font-family: "Chakra Petch"; font-weight: 900; font-size: 3.2rem; }.match-score.match-score-small { font-size: 1.2em; letter-spacing: 0.01em; font-family: "Inter"; font-weight: 700; line-height: 1.2;}

.team-block {flex: 1; margin-bottom: auto; text-align: center;}
.team-name {margin-top: 10px; font-weight: bold; color: white; font-size: 1.2rem;}
.score-block {flex: 1; text-align:center;}

@media (max-width: 768px) { .score-block  {flex: 2;} .team-name {font-size: 1em;}.match-score.match-score-small {font-size: 0.9em;}}

@keyframes pulse-live {
    0% { color: #ccf341;  }
    50% { color: transparent;  }
    100% { color: #ccf341;  }
}
.separator-live {animation: pulse-live 2s infinite ease-in-out;display: inline-block;}
.score-live { color: #ccf341;  }

/* --- OBSAH UI --- */
.article-content h1 { font-size: 2.4rem; color: white;} 
.article-content h2{ font-size: 1.4rem; color: white; } 
.article-content h3{ font-size: 1.17em; color: white; }
.article-content h4{ color: #b7c0cf; display: block; font-size: 1.07em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; unicode-bidi: isolate; }
.article-content p, .article-content li, .article-content table { color: #b7c0cf; }
.article-content table { border-collapse: collapse; width: 100%; }
.article-content table th { text-align: left; color: white; font-weight: 400; border: 1px solid var(--app-border); padding: 8px; }
.article-content table td { border: 1px solid var(--app-border); padding: 8px; }
.article-content div.stepbystepbox{ background: #252a33; padding: 20px; border-left: 4px solid #03bcd4; margin: 20px 0; border-radius: 7.5px;position: relative;}
.article-content div.stepbystepbox h3{ margin-top: 10px; }

.article-content div.stepbystepbox.orange{background: linear-gradient(320deg, #252a33 85%, rgba(255, 107, 0, .15)), #252a33; border-left: none;}
.article-content div.stepbystepbox.orange:before { bottom: unset; content: ""; height: calc(100% - 20px); position: absolute; width: 4px; display: block; top: 50%; z-index: 20; left: 0; border-radius: 0 7.5px 7.5px 0; transform: translate(0px, -50%); background: #ff6b00; }

.article-content div.stepbystepbox.blue { background: linear-gradient(320deg, #252a33 85%, rgb(4 226 255 / 15%)), #252a33; border-left: none; }
.article-content div.stepbystepbox.blue:before { bottom: unset; content: ""; height: calc(100% - 20px); position: absolute; width: 4px; display: block; top: 50%; z-index: 20; left: 0; border-radius: 0 7.5px 7.5px 0; transform: translate(0px, -50%); background: rgb(4 226 255); }

.article-content div.stepbystepbox.green {background: linear-gradient(320deg, #252a33 85%, rgb(204 243 64 / 15%)), #252a33;border-left: none; }
.article-content div.stepbystepbox.green:before { bottom: unset; content: ""; height: calc(100% - 20px); position: absolute; width: 4px; display: block; top: 50%; z-index: 20; left: 0; border-radius: 0 7.5px 7.5px 0; transform: translate(0px, -50%); background: rgb(204 243 64); }

.article-content div.stepbystepbox.pink { background: linear-gradient(320deg, #252a33 85%, rgb(233 30 99 / 15%)), #252a33; border-left: none; }
.article-content div.stepbystepbox.pink:before { bottom: unset; content: ""; height: calc(100% - 20px); position: absolute; width: 4px; display: block; top: 50%; z-index: 20; left: 0; border-radius: 0 7.5px 7.5px 0; transform: translate(0px, -50%); background: #E91E63; }