html {
    overflow-y: scroll; /* JAVÍTVA: Auto – csak szükség esetén scrollbar */
    height: 100%; /* Teljes magasság a flexhez */
}

body {
    text-align: center;
    position: relative;
    margin: 0;
    min-height: 100vh; /* JAVÍTVA: 100vh biztosítja a minimális teljes képernyő magasságot */
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex; /* Flex konténer a sticky footerhez */
    flex-direction: column; /* Függőleges elrendezés */
    overflow-x: hidden; /* HOZZÁADVA: Megakadályozza a felesleges vízszintes görgetést */
    --body-bg: #f5f5f5;
    --footer-bg: #e0e0e0;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("1.jpg");
    background-size: 100vh;
    background-repeat: repeat;
    opacity: 0.05;
    z-index: -1;
}

main { /* Kitölti a helyet, tolja le a footert */
    flex: 1; /* Ez tolja le a footert a flex konténer aljára */
    padding: 20px;
    /* Itt add hozzá a saját kontent stílusaidat, ha kell */
    overflow-x: hidden; /* Extra védelem a main-ben vízszintes ellen */
    min-height: 0; /* HOZZÁADVA: Megakadályozza a flex item túlcsordulását rövid tartalomnál */
}

.results-table {
    border-collapse: collapse; /* Marad */
    width: 100%;
    table-layout: fixed;
    border-radius: 4px;
    overflow-x: auto;
    /* HOZZÁADVA: iOS dupla border fix – explicit spacing 0-val, Safari-specifikus (csak vízszintes vonalakhoz kell) */
    border-spacing: 0;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}

.results-table td,
.results-table th {
    font-size: calc(0.7rem + 0.2vw);
    overflow: hidden;
    white-space: normal;
    position: relative;
    /* MÓDOSÍTVA: Nincs border a cellákon – csak padding, box-sizing és background-clip a színváltáshoz */
    padding: 0.2rem 2px; /* th padding külön marad */
    box-sizing: border-box;
    background-clip: padding-box; /* Background ne menjen a border alá (ha lenne) */
    /* ELTÁVOLÍTVA: Nincs border-right vagy más függőleges border – ez volt a felesleges */
}

.results-table th {
    display: table-cell;
    height: 2.8rem;
    min-height: 2.8rem;
    line-height: 1.2;
    padding: 0.2rem 2px; /* Egységes padding */
    vertical-align: middle;
    box-sizing: border-box;
    /* HOZZÁADVA: Fejlécnek explicit border-bottom, ha a tr nem kezeli (de tr kezeli) */
}

/* HOZZÁADVA: Explicit fejléc-sor border-bottom-ja – ez fixálja a th utáni vonal hiányát */
.results-table thead tr {
    border-bottom: 1px solid #ccc;
    -webkit-border-bottom: 1px solid #ccc; /* iOS/Safari explicit vonal */
}

/* VISSZAÁLLÍTVA: Csak vízszintes belső vonalak (sorok között) – nincs függőleges */
.results-table tr:not(:last-child) {
    border-bottom: 1px solid #ccc; /* Minden nem-utolsó sor alatti vonal (beleértve thead-et is, ha kell) */
    -webkit-border-bottom: 1px solid #ccc; /* iOS fix */
}

.results-table tr:last-child td {
    border-bottom: none !important; /* Alsó vonal eltávolítás marad */
}

.results-table tr:nth-child(even) td {
    background-color: #eee !important; /* Even sor cellái */
}

.results-table tr:nth-child(odd) td {
    background-color: #fff !important; /* Odd sor cellái */
}

.results-table thead tr th {
    background-color: #fff !important; /* Enyhe szürke fejléc, hogy kiemelkedjen */
}

.results-table th:nth-child(1), .results-table td:nth-child(1) {
    width: 22%;
    text-align: center;
}

.results-table th:nth-child(2), .results-table td:nth-child(2) {
    width: 50%;
    text-align: center;
}

.results-table th:nth-child(3), .results-table td:nth-child(3) {
    width: 28%;
    text-align: center;
}

.container {
    opacity: 0.80;
    width: 90vw;
    max-width: 800px;
    margin: 10px auto 5px auto;
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    display: block;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow-x: hidden; /* Megakadályozza vízszintes görgetést itt */
    box-sizing: border-box; /* Ez tartja a teljes szélességet változatlanul */
}

.tab-container {
    opacity: 0.80;
    width: 90vw;
    max-width: 800px;
    margin: 10px auto 5px auto;
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 0.4rem;
    border-radius: 4px;
    display: block;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow-x: hidden; /* Megakadályozza vízszintes görgetést itt */
    box-sizing: border-box;
}

.tab-buttons {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 5px;
    position: relative;
    flex-wrap: wrap; /* MÓDOSÍTVA: wrap engedélyezve a több soros töréshez */
    overflow-x: hidden;
    white-space: normal; /* MÓDOSÍTVA: nowrap eltávolítva a törés engedélyezéséhez */
    padding: 0.8rem 3rem 0.8rem 0.8rem; /* HOZZÁADVA: padding-right a kereső ikon helyének biztosítására */
}

.tab-button {
    text-decoration: none;
    color: #333;
    padding: 0.4rem calc(0.1rem + 0.1vw);
    font-size: calc(1.1rem + 0.2vw);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

.tab-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00B9B3;
    transition: width 0.3s ease;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
}

.tab-button:hover::after {
    width: 100%;
}

.tab-button.active {
    color: #00B9B3;
}

.tab-button.active::after {
    width: 100%;
}

.tab-button:not(:hover):not(.active)::after {
    width: 0;
}

.tab-content {
    display: none;
    padding: 0.4rem;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow-x: hidden;
}

.tab-content.active {
    display: block;
}

.inner-tab-buttons {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    flex-wrap: wrap; /* MÓDOSÍTVA: wrap engedélyezve a több soros töréshez */
    overflow-x: hidden;
    white-space: normal; /* MÓDOSÍTVA: nowrap eltávolítva a törés engedélyezéséhez */
    padding: 1rem 0.4rem;
}

.inner-tab-button {
    text-decoration: none;
    color: #333;
    padding: 0.4rem calc(0.1rem + 0.1vw);
    font-size: calc(1rem + 0.2vw);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

.inner-tab-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00B9B3;
    transition: width 0.3s ease;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
}

.inner-tab-button:hover::after {
    width: 100%;
}

.inner-tab-button.active {
    color: #00B9B3;
}

.inner-tab-button.active::after {
    width: 100%;
}

.inner-tab-button:not(:hover):not(.active)::after {
    width: 0;
}

.inner-tab-button svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
}

.inner-tab-content {
    display: none;
    padding: 0.4rem;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    color: #333;
    overflow-x: hidden;
}

.inner-tab-content.active {
    display: block;
}

.gender-filter-buttons {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 10px;
    position: relative;
    flex-wrap: nowrap;
    overflow-x: hidden;
    white-space: nowrap;
    padding: 0.5rem;
}

.gender-button {
    text-decoration: none;
    padding: 0.4rem calc(0.2rem + 0.2vw);
    font-size: calc(1.1rem + 0.2vw);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    padding-top: 0;
}

.gender-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00B9B3;
    transition: width 0.3s ease;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
}

.gender-button:hover::after {
    width: 100%;
}

.gender-button.active::after {
    width: 100%;
}

.gender-button:not(:hover):not(.active)::after {
    width: 0;
}

.gender-button:nth-child(1) {
    color: #f08080; /* Pink for female */
}

.gender-button:nth-child(1).active,
.gender-button:nth-child(1):hover {
    color: #f08080;
}

.gender-button:nth-child(1)::after {
    background: #f08080;
}

.gender-button:nth-child(2) {
    color: #333; /* Black for all */
}

.gender-button:nth-child(2).active,
.gender-button:nth-child(2):hover {
    color: #333;
}

.gender-button:nth-child(2)::after {
    background: #333;
}

.gender-button:nth-child(3) {
    color: #6495ED; /* Blue for male */
}

.gender-button:nth-child(3).active,
.gender-button:nth-child(3):hover {
    color: #6495ED;
}

.gender-button:nth-child(3)::after {
    background: #6495ED;
}

body.dark .gender-button:nth-child(1),
body.auto.dark-container .gender-button:nth-child(1) {
    color: #f08080;
}

body.dark .gender-button:nth-child(2),
body.auto.dark-container .gender-button:nth-child(2) {
    color: #333;
}

body.dark .gender-button:nth-child(3),
body.auto.dark-container .gender-button:nth-child(3) {
    color: #6495ED;
}

.category-table {
    border: 1px solid #eee;
    border-collapse: separate;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow-x: auto; /* Csak ha szükséges */
}

.category-table th, .category-table td {
    text-align: left;
    padding: calc(0.1rem + 0.2vw) 0.2rem;
    font-size: calc(0.8rem + 0.2vw);
    overflow: hidden;
    white-space: normal;
}

.category-table th {
    width: 20%;
    font-weight: bold;
}

.category-table td {
    width: 80%;
}

.category-table th:nth-child(1) {
    text-align: right;
}

hr.table-separator {
    border-top: 1px solid #333; /* Thicker border, adjust color as needed */
    margin: 0 0; /* Spacing above and below the separator */
}

body.dark .tab-container,
body.auto.dark-container .tab-container,
body.dark .container,
body.auto.dark-container .container {
    opacity: 0.65;
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.4);
}

body:not(.initialized) .switch-container {
    visibility: hidden;
}

body.light {
    --body-bg: #f5f5f5;
    --footer-bg: #e0e0e0;
    background: #f5f5f5;
    color: #333;
}

body.dark {
    --body-bg: #333;
    --footer-bg: #2a2a2a;
    background: #333;
    color: #333;
}

body.auto {
    --body-bg: #f5f5f5;
    --footer-bg: #e0e0e0;
    background: #f5f5f5;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    body.auto {
        --body-bg: #333;
        --footer-bg: #2a2a2a;
        background: #333;
        color: #333;
    }
}

.switch-buttons {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
}

.switch-button {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    padding: 0.3rem 0.3rem;
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

body.dark .switch-button,
body.auto.dark-container .switch-button {
    color: #f5f5f5;
}

.switch-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00B9B3;
    transition: width 0.3s ease;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
}

.switch-button:hover::after {
    width: 50%;
}

.switch-button.active,
body.auto .switch-button.active,
body.dark .switch-button.active {
    color: #00B9B3;
}

.switch-button.active::after {
    width: 50%;
}

.switch-button:not(:hover):not(.active)::after {
    width: 0;
}

.switch-button svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    vertical-align: middle;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center; /* Erős középre igazítás */
    transform: scale(0.5);
    margin: -50px auto; /* JAVÍTVA: Kisebb negatív margin, auto vízszintes középre */
    text-decoration: none; /* Remove underline from link */
    width: fit-content; /* JAVÍTVA: Csak a tartalom szélessége, nem 100% */
    max-width: 90vw; /* Extra védelem, de kisebb */
}

@media (max-width: 767px) {
    .logo {
        transform: scale(0.4);
        margin: -55px auto; /* Kisebb negatív mobilon */
    }
}

@media (max-width: 480px) {
    .logo {
        transform: scale(0.3);
        margin: -60px auto; /* Még kisebb extrém mobilon */
    }
}

.eco {
    font-family: 'League Spartan', sans-serif;
    font-size: 140px;
    color: #00B9B3;
    margin-right: 8px;
    margin-top: 46px;
}

.time {
    font-family: 'Dancing Script', cursive;
    font-size: 160px;
    color: #00B9B3;
    margin-left: 40px;
}

.clock {
    width: 76px;
    height: 76px;
    position: relative;
}

.clock-face {
    width: 76px;
    height: 76px;
    border: 11px solid #00B9B3;
    border-radius: 50%;
    position: relative;
}

.clock-face .tick {
    width: 2px;
    height: 6px;
    background: #00B9B3;
    position: absolute;
    left: 50%;
    top: 4px;
    transform-origin: 50% 34px;
}

.tick:nth-child(1) {
    transform: translateX(-50%) rotate(0deg);
}

.tick:nth-child(2) {
    transform: translateX(-50%) rotate(90deg);
}

.tick:nth-child(3) {
    transform: translateX(-50%) rotate(180deg);
}

.tick:nth-child(4) {
    transform: translateX(-50%) rotate(270deg);
}

.hand {
    position: absolute;
    background: #00B9B3;
    left: 50%;
    top: 50%;
    transform-origin: 50% 100%;
}

.hour-hand {
    width: 4px;
    height: 20px;
    margin-top: -20px;
}

.minute-hand {
    width: 3px;
    height: 25px;
    margin-top: -25px;
}

.second-hand {
    width: 1px;
    height: 30px;
    margin-top: -30px;
}

.svg-male, .svg-female, .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: top;
    display: inline-block;
}

.countdown-timer {
    font-size: calc(0.8rem + 0.4vw);
    margin: 10px 0;
    text-align: center;
}

.search-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-icon {
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 8px;
    box-sizing: content-box;
}

.search-input {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    padding: 5px;
    border: none;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
    max-width: 100vw; /* Megakadályozza túlcsordulást */
}

.search-input.active {
    width: 220px;
    height: 32px;
    opacity: 1;
    visibility: visible;
}

.search-input:focus {
    outline: none;
    border: 1px solid #333;
}

.race {
    text-decoration: none;
    color: #333;
    font-size: calc(1.0rem + 0.2vw);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.race::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00B9B3;
    transition: width 0.3s ease;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
}

@media (hover: hover) {
    .race:hover::after {
        width: 100%;
    }
    .race:hover {
        color: #00B9B3;
    }
}

.race:not(:hover)::after {
    width: 0;
}

/* FOOTER STYLES START HERE */

.footer-classic {
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--body-bg) 0px, var(--footer-bg) 50px);
    color: var(--footer-text-color);
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

.footer-classic__container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Általános link stílusok */
.footer-classic a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-classic a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

.footer-classic__brand {
    padding-top: 1rem;
}

.footer-classic__main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    border-bottom: 1px solid var(--footer-border-color);
}

.footer-classic__links-group {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-classic__brand p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.footer-classic__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--footer-heading-color);
    margin-top: 0;
    margin-bottom: 1rem;
}

.footer-classic__links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-classic__links li {
    margin-bottom: 0.75rem;
}

.footer-classic__bottom {
    font-size: 0.875rem;
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    flex-wrap: wrap;
}

.footer-classic__copyright {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.footer-classic__social ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.footer-classic__social a {
    transition: color 0.3s ease;
}

.footer-classic__social a:hover {
    text-decoration: none;
    color: #4267B2;
}

.footer-classic__social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-partner-section {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / -1;                /* teljes sor elfoglalása a grid-ben */
    justify-self: center;
}

.partner-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    width: fit-content;
    gap: 0.8rem;
}

/* Ha a h3 túl hosszú lenne és balra húzódna */
.partner-inner .footer-classic__heading {
    margin: 0;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 0;                   /* ne zsugorodjon a szöveg */
}

/* Logo stílusok */
.footer-logo-wrapper {
    max-width: 160px;
    width: 100%;
    flex-shrink: 0;
}

.footer-logo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    filter:
            grayscale(100%)
            brightness(0.9);
    transition: filter 0.35s ease, transform 0.35s ease;
}

.footer-logo:hover {
    filter:
            grayscale(0%)
            brightness(1.05);
    transform: translateY(-2px);
}

/* === CSAK ELRENDEZÉS – semmi design === */
.footer-classic__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-classic__webdesign {
    flex: 1;
    text-align: center;
}

/* ────────────────────────────────────────────────
   Nagyobb képernyők (tablet & desktop)
───────────────────────────────────────────────── */
@media (min-width: 640px) {
    .footer-classic__main {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 0 1rem;
    }

    .footer-classic__links-group {
        grid-column: 2 / 4;
        padding-top: 0;
    }

    .footer-classic__bottom {
        flex-wrap: nowrap;
    }

    .footer-logo-wrapper {
        padding-bottom: 10px;
    }
}

/* ────────────────────────────────────────────────
   Mobil / keskeny nézet – stackelés
───────────────────────────────────────────────── */
@media (max-width: 639px) {
    .partner-inner {
        padding: 4px 0;
    }

    .partner-inner .footer-classic__heading {
        margin-bottom: 0.6rem;
    }

    .footer-logo-wrapper {
        max-width: 120px;
        width: 100%;
        flex-shrink: 0;
    }

    .footer-logo {
        filter:
                grayscale(0%)
                brightness(1.05);
    }

    .footer-classic__social svg {
        fill: #4267B2;
    }
}

:root {
    --footer-bg: #222529;
    --footer-text-color: #333;
    --footer-heading-color: #333;
    --footer-link-color: #777;
    --footer-link-hover-color: #333;
    --footer-border-color: #3b3f44;
}

/* Dark mode footer compatibility */
body.dark,
body.auto.dark-container {
    --footer-link-hover-color: #ecf0f1; /* Új: Hover szín dark mode-ra (világos, kontrasztos) */
}

/* JAVÍTVA: Dark mode specifikus footer színek finomhangolása a láthatóbb átmenet érdekében */
body.dark {
    --body-bg: #3D3D3D;
    --footer-bg: #1a1a1a; /* Sötétebbre állítva (#2a2a2a helyett), hogy az átmenet látható legyen */
    background: #333;
    color: #333;
}

body.auto.dark-container {
    --body-bg: #3D3D3D;
    --footer-bg: #1a1a1a; /* Itt is alkalmazva */
    background: #333;
    color: #333;
}

body.dark .footer-classic,
body.auto.dark-container .footer-classic,
body.dark .footer-classic h3,
body.auto.dark-container .footer-classic h3 {
    color: #ecf0f1;
}

body.dark .footer-classic a,
body.auto.dark-container .footer-classic a {
    color: #777;
}

/* Explicit hover override for dark mode (biztonság kedvéért, ha a változó nem terjed) */
body.dark .footer-classic a:hover,
body.auto.dark-container .footer-classic a:hover {
    color: #4267B2 !important; /* Használhatod a változó helyett is: var(--footer-link-hover-color) */
}

/* Dark mode specifikus footer átmenet biztosítása (ha szükséges, de a változóval már működik) */
body.dark .footer-classic,
body.auto.dark-container .footer-classic {
    background: linear-gradient(to bottom, var(--body-bg) 0px, var(--footer-bg) 100px);
}

@media (prefers-color-scheme: dark) {
    body.auto {
        --body-bg: #333;
        --footer-bg: #333; /* Itt is finomhangolva az auto dark módhoz */
        background: #333;
        color: #333;
    }

    body.auto .footer-classic,
    body.auto .footer-classic h3 {
        color: #ecf0f1;
    }

    body.auto .footer-classic a {
        color: #bdc3c7;
    }

    body.auto .footer-classic {
        background: linear-gradient(to bottom, var(--body-bg) 0px, var(--footer-bg) 100px);
    }
}

.form-group {
    margin-bottom: 10px; /* CSÖKKENTVE: 15px-ről 10px-re a kisebb térköz érdekében */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, textarea {
    width: 90%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
    max-width: 600px; /* Megakadályozza vízszintes túlcsordulást */
}

.register-button {
    background-color: #00B9B3;
    color: white;
    padding: 10px 6px;
    margin: 0 8px 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block; /* Megakadályozza szélesség-problémát */
}

.register-header-button a {
    color: white;
    text-decoration: none; /* No underline or other effects */
}

.register-button:hover {
    background-color: darkcyan;
}

.register-button:hover a {
    color: white; /* Ensure text stays white on hover */
    text-decoration: none; /* No underline on hover */
}

.facebook-button {
    background-color: #1877F2;
    color: white;
    padding: 10px 6px;
    margin: 0 0 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
}

.facebook-button a {
    color: white;
    text-decoration: none; /* No underline or other effects */
}

.facebook-button:hover {
    background-color: #4267B2;
}

.facebook-button:hover a {
    color: white; /* Ensure text stays white on hover */
    text-decoration: none; /* No underline on hover */
}

.error, .success {
    font-size: 0.9em;
    margin-top: 10px;
}

.error {
    color: red;
}

.success {
    color: green;
}

.coupon-check-container {
    text-align: center;
    margin-top: 5px;
}

.coupon-check {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    color: gray;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    user-select: none;
}

.coupon-check.active {
    background-color: #d4edda;
    color: green;
}

.coupon-check.invalid {
    background-color: #f8d7da;
    color: red;
}

.coupon-check.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.coupon-check::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: left 1s linear;
}

.coupon-check.loading::before {
    left: 0;
}

.coupon-check.complete::before {
    display: none;
}

.billing-section {
    display: none;
}

.billing-section.active {
    display: block;
}

input::placeholder {
    color: #aaa;
    opacity: 1;
}

.radio-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    width: fit-content;
}

.radio-wrapper {
    display: inline-flex;
    align-items: center;
}

.radio-wrapper input[type="radio"] {
    position: absolute;
    opacity: 0; /* Vizuálisan elrejtve, de fókuszálható */
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    cursor: pointer;
    z-index: 1; /* Biztosítja, hogy az input a label felett legyen a fókuszhoz */
}

.radio-wrapper label {
    position: relative;
    padding-left: 1.8em;
    cursor: pointer;
    line-height: 1.5;
    font-weight: normal;
}

.radio-wrapper label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #9098A9;
    border-radius: 50%;
    background: #fff;
}

.radio-wrapper input[type="radio"]:checked + label:before {
    background: #00B9B3;
    border-color: #333;
}

.radio-wrapper input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    left: 0.35em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6em;
    height: 0.6em;
    background: #fff;
    border-radius: 50%;
}

.radio-wrapper input[type="radio"]:focus-visible + label {
    outline: 2px solid #333; /* Fókuszjelző csak billentyűzetfókusz esetén */
    outline-offset: 4px;
    border-radius: 4px; /* Lekerekített körvonal a jobb láthatóságért */
}

.no-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    width: fit-content;
    margin: 0 auto;
}

.checkbox-wrapper-47 input[type="checkbox"] {
    position: absolute;
    opacity: 0; /* Vizuálisan elrejtve, de fókuszálható */
    width: 1.4em;
    height: 1.4em;
    margin: 0;
    cursor: pointer;
    z-index: 1; /* Biztosítja, hogy az input a label felett legyen a fókuszhoz */
}

.checkbox-wrapper-47 label {
    position: relative;
    padding-left: 2em;
    padding-right: 1em;
    line-height: 2;
    cursor: pointer;
    display: inline-flex;
}

.checkbox-wrapper-47 label:before {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top: 0.3em;
    left: 0;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid #ddd;
    border-radius: 6px;
    z-index: -1;
}

.checkbox-wrapper-47 input[type="checkbox"]:checked + label {
    padding-left: 1em;
    color: #fff;
}

.checkbox-wrapper-47 input[type="checkbox"]:checked + label:before {
    top: 0;
    width: 100%;
    height: 2em;
    background: #00B9B3;
    border-color: #333;
}

.checkbox-wrapper-47 input[type="checkbox"]:focus-visible + label {
    outline: 2px solid #333; /* Fókuszjelző csak billentyűzetfókusz esetén */
    outline-offset: 4px;
    border-radius: 4px; /* Lekerekített körvonal a jobb láthatóságért */
}

.checkbox-wrapper-47 label,
.checkbox-wrapper-47 label::before {
    transition: 0.25s all ease;
}

/* HOZZÁADVA: Kisebb margin a checkbox form-group-okhoz a két checkbox közötti térköz csökkentésére */
.form-group:has(.checkbox-wrapper-47) {
    margin-bottom: 5px;
}

.date-picker {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 90%;
    margin: 0 auto;
    max-width: 600px; /* Vízszintes védelem */
    align-items: center; /* Új: Jobb igazítás a selectek között */
}

.date-picker select {
    width: 33.33%;
    margin: 0;
    flex: 1; /* Új: Egyenlő eloszlás a rendelkezésre álló helyen */
    padding: 8px 0px 8px 8px; /* Új: Bal: 8px, jobb: 30px (a nyíl miatt több hely a szövegnek), fel/le: 8px */
    border: 1px solid #ddd; /* Új: Alap border, ha még nincs definiálva */
    border-radius: 4px; /* Új: Lekerekített sarkok */
    font-size: 14px; /* Új: Alap fontméret, hogy olvasható legyen */
    min-width: 80px; /* Új: Minimum szélesség, hogy ne legyen túl keskeny */
    cursor: pointer; /* Új: Pointer kurzor a selectre */
    box-sizing: border-box; /* Új: Padding belefoglalása a szélességbe */
}

/* Option elemek light módban (alapértelmezett) */
.date-picker select option {
    background-color: white;
    color: #5A5A5A;
}

body.dark .date-picker select option,
body.auto.dark-container .date-picker select option {
    background-color: #bbb;
    color: #5A5A5A;
}

.email-message {
    text-align: center;
    margin: 15px 0;
}

.email-message.success {
    color: green;
}

.email-message.error {
    color: red;
}

.discount {
    display: inline-block;
    padding: 5px 10px;
    background-color: #dc3545;
    color: #fff;
    border-radius: 4px;
    margin: 0 5px;
}

.strikethrough {
    text-decoration: line-through;
}

.lap-times-table-container {
    overflow-x: auto; /* Megtartva, mert táblázatnál kellhet görgetés */
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    /* Kurzor jelezze, hogy megragadható a terület */
    cursor: grab;
    user-select: none; /* Megakadályozza a szöveg kijelölését görgetés közben */
}

/* Amikor az egér lenyomva van, változzon a kurzor */
.lap-times-table-container.grabbing {
    cursor: grabbing;
}

/* Görgetősáv testreszabása (látható marad) */
.lap-times-table-container::-webkit-scrollbar {
    height: 6px;
    width: 100%;
}

.lap-times-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.lap-times-table-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.lap-times-table-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.lap-times-table {
    width: 100%;
    border-collapse: collapse; /* Összevonja a szomszédos cellák szegélyeit */
    font-size: calc(0.7rem + 0.3vw);
    color: #333;
    border: 0; /* Külső szegély eltávolítása */
}

.lap-times-table th, .lap-times-table td {
    border: 1px solid #ccc; /* Belső szegélyek 1px */
    margin: 0;
    text-align: center;
    vertical-align: middle;
    min-width: 40px;
    box-sizing: border-box;
    position: relative;
    font-size: calc(0.7rem + 0.2vw); /* JAVÍTVA: font-size egységesítése a results-table-lel */
    overflow: hidden; /* JAVÍTVA: hozzáadva a results-table mintájára */
    white-space: normal; /* JAVÍTVA: hozzáadva a results-table mintájára */
}
/* Fejléc és cellák további stílusai */
.lap-times-table th {
    font-weight: bold;
    word-break: break-word;
    height: 2.8rem;          /* Fix ~48px (3 * 16px rem), viewport-független */
    min-height: 2.8rem;      /* Biztonság kedvéért */
    line-height: 1.2;      /* Lazább sorköz a 2 soros tartalomhoz (pl. "Körátlag<br>Célidő") */
    padding: 0.2rem 2px; /* Extra vertikális tér (0.4rem ~6.4px fel/le), hogy ne legyen szűk */
    box-sizing: border-box; /* Border/padding belefoglalása */
    display: table-cell; /* Biztosítja, hogy a th táblázatcellaként viselkedjen */
    vertical-align: middle; /* Középre igazítja a tartalmat */
    border-bottom: 1px solid #ccc; /* JAVÍTVA: hozzáadva a results-table mintájára */
}

.lap-times-table td {
    padding: 0.2rem 0.2rem;
    font-size: calc(0.6rem + 0.3vw);
}

.lap-times-table .svg-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 5px;
}

/* Külső szegélyek eltávolítása */
.lap-times-table th:first-child,
.lap-times-table td:first-child {
    border-left: 0; /* Bal oldali külső szegély eltávolítása */
}

.lap-times-table th:last-child,
.lap-times-table td:last-child {
    border-right: 0; /* Jobb oldali külső szegély eltávolítása */
}

.lap-times-table tr:first-child th {
    border-top: 0; /* Felső külső szegély eltávolítása */
}

.lap-times-table tr:last-child td {
    border-bottom: 0; /* Alsó külső szegély eltávolítása */
}

/* Sticky oszlopok beállítása */
.lap-times-table th:nth-child(1),
.lap-times-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 4;
    width: calc(3rem + 2vw); /* MÓDOSÍTVA: Növelve a szélességet egy kicsit, calc képlettel a többi oszlop követéséhez */
    min-width: calc(3rem + 2vw); /* MÓDOSÍTVA: Növelve a min-width-et egy kicsit, calc képlettel a többi oszlop követéséhez */
    max-width: calc(3rem + 2vw); /* HOZZÁADVA: Max-width a fix méret biztosításához */
    border-right: 0; /* Jobb oldali szegély eltávolítása a cella szintjén */
}

.lap-times-table th:nth-child(2),
.lap-times-table td:nth-child(2) {
    position: sticky;
    left: calc(3rem + 2vw); /* MÓDOSÍTVA: left értéket frissítve az első oszlop új szélességéhez igazítva */
    z-index: 3;
    min-width: 120px;
    border-left: 0; /* Bal oldali szegély eltávolítása a "Név" oszlopban */
    border-right: 0; /* Jobb oldali szegély eltávolítása a cella szintjén */
}

/* Köridő oszlopok azonos szélessége */
.lap-times-table th:nth-child(n+3),
.lap-times-table td:nth-child(n+3) {
    width: calc(3.5rem + 1vw);
    min-width: calc(3.5em + 1vw);
    max-width: calc(3.5rem + 1vw);
}

/* Harmadik oszlop bal oldali szegélyének eltávolítása */
.lap-times-table th:nth-child(3),
.lap-times-table td:nth-child(3) {
    border-left: 0; /* Bal oldali szegély eltávolítása a harmadik oszlopban */
}

/* Fejléc sticky oszlopainak z-index növelése */
.lap-times-table thead th:nth-child(1),
.lap-times-table thead th:nth-child(2) {
    z-index: 5;
}

/* Háttérszín alkalmazása a sorokra, beleértve a sticky oszlopokat */
.lap-times-table tr:nth-child(even) td,
.lap-times-table tr:nth-child(even) th {
    background-color: #eee;
}

.lap-times-table tr:nth-child(odd) td,
.lap-times-table tr:nth-child(odd) th {
    background-color: #fff;
}

/* Pszeudo-elem a "Kör" oszlop jobb oldalán, hogy a "Kör" és "Név" közötti szegély 1px legyen */
.lap-times-table th:nth-child(1)::after,
.lap-times-table td:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* A "Kör" oszlop jobb oldalán lévő szegély */
    width: 1px;
    height: 100%;
    background-color: #ddd; /* Megegyezik a belső szegély színével */
    z-index: 6;
}

/* Pszeudo-elem a "Név" oszlop jobb oldalán, hogy a szegély fixen látható legyen */
.lap-times-table th:nth-child(2)::after,
.lap-times-table td:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* A "Név" oszlop jobb oldalán lévő szegély */
    width: 1px;
    height: 100%;
    background-color: #ddd; /* Megegyezik a belső szegély színével */
    z-index: 6;
}

/* Lebegő mini popup a csapattagok infójához */
.team-popup {
    position: fixed;
    background: #2d2d2d;                /* sötétebb háttér */
    color: #f0f0f0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.45;
    z-index: 9999;
    min-width: 180px;
    max-width: 320px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* látható állapot */
.team-popup.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Nyíl – alapból felfelé (popup az ikon alatt) */
.team-popup::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #2d2d2d;
}

/* Ha a popup az ikon fölé került (alul kilógott volna) */
.team-popup.upward::before {
    top: auto;
    bottom: -8px;
    border-bottom: none;
    border-top: 8px solid #2d2d2d;
}

/* Ha szeretnéd változtatni a nyíl pozícióját dinamikusan */
.team-popup::before {
    left: var(--arrow-left, 50%);
}

/* Sötét / világos mód kompatibilitás (ha van dark mode váltód) */
@media (prefers-color-scheme: light) {
    .team-popup {
        background: #ffffff;
        color: #222222;
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }
    .team-popup::before {
        border-bottom-color: #ffffff;
    }
    .team-popup.upward::before {
        border-top-color: #ffffff;
    }
}

/* Mobil nézet – kisebb popup */
@media (max-width: 768px) {
    .team-popup {
        min-width: 160px;
        max-width: 85vw;
        font-size: 0.86em;
        padding: 9px 12px;
    }
}

/* Extra: ha nagyon szűk a képernyő */
@media (max-width: 480px) {
    .team-popup {
        min-width: 140px;
        padding: 8px 10px;
    }
}

.team-cell {
    cursor: pointer;
    transition: background-color 0.18s ease;
    user-select: none; /* ne jelölődjön ki szöveg kattintáskor */
    -webkit-tap-highlight-color: transparent; /* mobil kék villanás tiltása */
}

.team-cell:hover,
.team-cell:active {
    background-color: rgba(255, 255, 255, 0.08) !important; /* sötét módban */
}

@media (prefers-color-scheme: light) {
    .team-cell:hover,
    .team-cell:active {
        background-color: rgba(0, 0, 0, 0.06) !important;
    }
}

.hidden {
    display: none !important;
}

.tab-container:has(.search-input.active) .tab-button {
    display: none;
}

.tab-container:has(.search-input.active) .inner-tab-buttons {
    display: none;
}

.tab-container:has(.search-input.active) .tab-buttons {
    min-height: 40px;
}

/* Betűméret osztályok */
.font-size-large {
    font-size: calc(0.9rem + 0.2vw);
}

.font-size-medium {
    font-size: calc(0.8rem + 0.2vw);
}

.font-size-small {
    font-size: calc(0.7rem + 0.2vw);
}

.font-size-extra-small {
    font-size: calc(0.6rem + 0.2vw);
}

/* Betűvastagság osztályok */
.font-weight-normal {
    font-weight: normal;
}

.font-weight-bold {
    font-weight: bold;
}

/* Stílus és átlátszóság osztályok */
.italic-opacity-08 {
    font-style: italic;
    opacity: 0.8;
}

.italic-opacity-06 {
    font-style: italic;
    opacity: 0.6;
}