:root {
    /* Main colors */
    --sf-color-text: #231f20;
    --sf-color-primary: #ffffff;
    --sf-color-secondary: #93d500;
    --sf-color-label: #ffffff;
    --sf-color-accent: #93d500;
    --sf-color-white: #ffffff;
    --sf-color-shadow: rgba(0, 0, 0, 0.16);
    --sf-error-color: #d32d2d;
    --sf-color-button: #93d500;
    --sf-color-button-hover: #93d500;
    --sf-color-button-border: #93d500;

    /* Font settings */
    --sf-font-family: inherit;
    --sf-font-family-input: inherit;
    --sf-font-family-label: inherit;
    --sf-font-family-error: inherit;
    --sf-font-family-button: inherit;
    /* Default font sizes */
    --sf-font-size-small: clamp(12px, 1.1vw, 16px);
    --sf-font-size-normal: clamp(14px, 1.3vw, 18px);
    --sf-font-size-large: clamp(16px, 1.5vw, 22px);
    --sf-font-size-xlarge: clamp(24px, 2vw, 36px);
    /* Default font weights */
    --sf-font-weight-normal: 400;
    --sf-font-weight-bold: 600;
    --sf-line-height: 1.3em;
    --sf-letter-spacing: 0px;
    /* Default border radius */
    --sf-border-radius: 0px !important;
    /* Default indent */
    --sf-indent: 0px;
}

#myForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-bottom: 1.4em;
}

/* Nové triedy pre flexbox layout pri variabilnej šírke polí */
.fields-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.width-33 {
    flex: 0 0 calc(33.333% - 14px);
}

.width-50 {
    flex: 0 0 calc(50% - 10px);
}

.width-100 {
    flex: 0 0 100%;
}

/* Backwards compatibility - stará trieda */
.form-group {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: flex-start;
    min-height: 160px;
    flex-wrap: wrap;
    align-content: flex-start;
}

.input-group select {
    width: 100%;
    box-sizing: border-box;
    background: var(--sf-color-white) 0% 0% no-repeat padding-box;
    border-radius: var(--sf-border-radius);
    border: none;
    letter-spacing: 0px;
    color: var(--sf-color-text);
    padding: 20px 30px;
    font-size: var(--sf-font-size-normal);
    line-height: var(--sf-line-height);
}


.input-group textarea {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    background: var(--sf-color-white) 0% 0% no-repeat padding-box;
    border: none;
    letter-spacing: 0px;
    color: var(--sf-color-text);
    padding: 20px 30px;
    font-size: var(--sf-font-size-normal);
    line-height: var(--sf-line-height);
}

/* Input polia - priehľadné pozadie s bielou spodnou čiarou */
.input-group input,
.input-group select,
.input-group textarea {
    font-family: var(--sf-font-family-input);
    font-size: var(--sf-font-size-xlarge);
    font-weight: var(--sf-font-weight-normal);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--sf-color-white);
    border-radius: 0;
    color: var(--sf-color-white);
    box-shadow: none;
    width: 100%;
    padding: var(--sf-indent) 0;
}

/* Focus state - odstránenie tieňa */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: none;
    border-bottom: 2px solid var(--sf-color-white);
}

/* Invalid state - červená spodná čiara */
.invalid {
    outline: none !important;
    border: none !important;
    border-bottom: 2px solid var(--sf-error-color) !important;
}

.checkbox.input-group.invalid label {
    color: var(--sf-error-color);
    font-family: var(--sf-font-family-error);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    outline: 3px solid var(--sf-error-color) !important;
    outline-offset: -2px;
    border-radius: var(--sf-border-radius);
    margin-bottom: 0;
}

.checkbox span.error-field {
    padding: 0px 10px;
    margin: 0px 0 0 10px;
    text-align: left;
    background: var(--sf-error-color);
    color: var(--sf-color-white);
    border-radius: 0 0 var(--sf-border-radius) var(--sf-border-radius);
}

.checkbox.input-group.invalid {
    outline: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.invalid label:before {
    outline: 5px solid var(--sf-error-color) !important;
    outline-offset: -5px;
}

span.error-field {
    background: var(--sf-error-color);
    color: var(--sf-color-white);
    border-radius: 0 0 var(--sf-border-radius) var(--sf-border-radius);
    padding: 0px 10px;
    margin: 0px 10px 0 10px;
    text-align: left;
    letter-spacing: 0px;
    font-weight: var(--sf-font-weight-normal);
    font-family: var(--sf-font-family-error);
}

#summary-error {
    color: var(--sf-error-color);
    font-family: var(--sf-font-family-error);
    margin-bottom: 20px;
}

.file-input {
    display: none;
}

label {
    text-align: left;
    color: var(--sf-color-label) !important;
    margin-bottom: 10px;
    margin-left: var(--sf-indent) !important;
    display: inline-block;
    font-family: var(--sf-font-family-label);
    text-transform: uppercase;
    font-size: var(--sf-font-size-large) !important;
    font-weight: 500;
}

label p {
    padding: unset !important;
    margin: unset !important;
}



/* Container pre tlačidlo */
.inside {
    justify-content: flex-start;
}

.file-selected {
    background-color: var(--sf-color-white) !important;
    box-shadow: inset 0px 3px 6px var(--sf-color-shadow);
    color: var(--sf-color-text);
}

a.rules-link {
    text-align: center;
    display: block;
}



.nadpis-sekcie {
    color: var(--sf-color-accent);
    font-family: var(--sf-font-family), Sans-serif;
    font-size: var(--sf-font-size-xlarge);
    font-weight: var(--sf-font-weight-bold);
    line-height: var(--sf-line-height);
    letter-spacing: var(--sf-letter-spacing);
    text-align: center;
    margin-bottom: 40px;
}

.infotext {
    text-align: center;
    letter-spacing: 0px;
    color: var(--sf-color-white);
    display: block;
    font-size: var(--sf-font-size-xlarge);
    line-height: var(--sf-line-height);
}

.inside {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: center;
    align-items: center;
}

.form-info {
    font-weight: var(--sf-font-weight-normal);
    padding: 10px 30px;
}

.blok {
    background: url(blok-icon.svg) no-repeat center;
    height: 64px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 10px;
    width: 50px;
}

.checkbox.input-group {
    position: relative;
    margin-bottom: 15px;
}

.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox label {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    display: inline-block;
    line-height: 1.4;
    min-height: 30px;
}

.checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    background: var(--sf-color-white) 0% 0% no-repeat padding-box;
    box-shadow: inset 0px 3px 6px var(--sf-color-shadow);
    border-radius: var(--sf-border-radius);
    width: 30px;
    height: 30px;
}

.checkbox input[type="checkbox"]:checked+label:after {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    height: 20px;
    width: 12px;
    border: solid #008E1D;
    border-width: 0 6px 6px 0;
}

.checkbox label .checkbox-text {
    display: inline-block;
    vertical-align: middle;
}

.checkbox.input-group.invalid label {
    color: var(--sf-error-color);
    outline: none !important;
    border: 2px solid var(--sf-error-color) !important;
    border-radius: var(--sf-border-radius);
    padding: 5px 10px 5px 40px;
}

.checkbox label a {
    display: inline;
    text-decoration: underline;
    color: inherit;
}

/* Oprava pre autofill - biely text na tmavom pozadí */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-text-fill-color: var(--sf-color-white) !important;
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    box-shadow: 0 0 0 30px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Alternatívne riešenie pre staršie prehliadače */
input:-webkit-autofill {
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* Ikona kalendára - zmena farby na bielu */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.8;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Pre Firefox */
input[type="datetime-local"] {
    background-color: transparent;
}

/* Zabezpečenie bielej farby textu v datetime poli */
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: var(--sf-color-white);
}

/* Submit button - REGISTROVAŤ BLOK */
.btn,
input.odoslat {
    background: var(--sf-color-button) !important;
    border: 4px solid var(--sf-color-button) !important;
    border-radius: 0 !important;
    color: var(--sf-color-text) !important;
    padding: 20px 50px !important;
    font-family: var(--sf-font-family-button) !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-size: var(--sf-font-size-large) !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Submit button hover - vyplnené červenou */
.btn:hover,
.btn:focus,
input.odoslat:hover,
input.odoslat:focus {
    background: var(--sf-color-button) !important;
    border-color: var(--sf-color-button) !important;
    color: var(--sf-color-white) !important;
    box-shadow: none !important;
    outline: none;
}

/* Disabled state */
.btn:disabled,
input.odoslat:disabled {
    background-color: transparent !important;
    border-color: #8a8a8a !important;
    color: #8a8a8a !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.btn:disabled:hover,
input.odoslat:disabled:hover {
    background-color: transparent !important;
    border-color: #8a8a8a !important;
    box-shadow: none;
}

/* Upload button štýly */
.upload-button {
    background-color: transparent !important;
    border: 2px solid var(--sf-color-white) !important;
    border-radius: 0 !important;
    color: var(--sf-color-white) !important;
    text-align: center !important;
    padding: 20px 40px !important;
    font-family: var(--sf-font-family-button) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: var(--sf-font-size-large) !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Upload button hover */
.upload-button:hover {
    background-color: var(--sf-color-button-hover) !important;
    color: var(--sf-color-white) !important;
}

/* Upload button invalid state - zostáva červené */
.upload-button.invalid {
    background-color: var(--sf-color-button) !important;
    color: var(--sf-color-white) !important;
    border: none !important;
}

/* SVG ikona v tlačidle */
.upload-button::before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_12_83)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.61294 0H26.9669C28.4037 0 29.5795 1.17566 29.5795 2.61253V19.63C29.102 19.5479 28.6113 19.5047 28.1104 19.5047C27.8257 19.5047 27.5446 19.5188 27.2672 19.5459V3.20141C27.2672 2.88596 27.009 2.62793 26.6936 2.62793H2.88594C2.5706 2.62793 2.31245 2.88596 2.31245 3.20141V22.2736C2.31245 22.5889 2.5706 22.8469 2.88594 22.8469H21.3022C20.1759 24.3017 19.5052 26.1271 19.5052 28.1094C19.5052 28.4615 19.5268 28.8081 19.5679 29.1491H2.61294C1.1758 29.1491 0 27.9736 0 26.5362V2.61253C0 1.17566 1.17569 0 2.61294 0ZM21.2193 28.1094C21.2193 24.3038 24.3041 21.2188 28.1097 21.2188C31.9153 21.2188 35 24.3038 35 28.1094C35 31.915 31.915 35 28.1097 35C24.3045 35 21.2193 31.915 21.2193 28.1094ZM24.5848 27.5668L27.8562 23.2394C27.9182 23.1573 28.0067 23.1132 28.1096 23.1132C28.2126 23.1132 28.301 23.1573 28.363 23.2394L31.6343 27.5668C31.709 27.6654 31.7205 27.7893 31.6654 27.9C31.6104 28.0106 31.5045 28.0763 31.3809 28.0763H30.1792C30.0042 28.0763 29.8613 28.2189 29.8613 28.3942V32.7877C29.8613 32.9627 29.7187 33.1056 29.5437 33.1056H26.6754C26.5004 33.1056 26.3579 32.9627 26.3579 32.7877V28.3942C26.3579 28.2189 26.215 28.0763 26.04 28.0763H24.8382C24.7145 28.0763 24.6086 28.0106 24.5536 27.9C24.4984 27.7893 24.5101 27.6655 24.5847 27.5668H24.5848ZM3.61936 20.3303V20.7994C3.61936 21.0821 3.85012 21.313 4.13269 21.313H22.8324C23.7458 20.6026 24.8061 20.0722 25.9602 19.7753V17.033C25.9602 16.6222 25.7688 16.2694 25.4246 16.0456C23.1645 14.574 20.8103 11.3232 19.1985 11.343C18.0515 11.3574 16.3983 12.6559 15.0578 13.7091C11.8779 16.2064 8.09159 18.1973 4.22266 19.4924C3.85573 19.6149 3.61936 19.9436 3.61936 20.3304V20.3303ZM3.61936 12.8333V18.2178C3.61936 18.2624 3.63828 18.3009 3.67403 18.3278C3.70933 18.3552 3.7519 18.3633 3.7948 18.3512C5.63165 17.845 8.10567 16.9446 10.8878 15.4482C10.9398 15.42 10.9677 15.3653 10.9594 15.3063C10.9511 15.2479 10.9091 15.2029 10.8513 15.1904C8.72921 14.7328 6.40455 13.9293 4.97038 13.2452C4.55912 13.0488 4.17218 12.8642 3.81383 12.7064C3.7695 12.6867 3.72253 12.6908 3.68195 12.7172C3.64147 12.7436 3.61925 12.7852 3.61925 12.8333H3.61936ZM11.8543 5.65424C13.4562 5.65424 14.7544 6.95286 14.7544 8.55428C14.7544 10.1557 13.4562 11.4546 11.8543 11.4546C10.2524 11.4546 8.95403 10.1561 8.95403 8.55428C8.95403 6.95242 10.2527 5.65424 11.8543 5.65424Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12_83'%3E%3Crect width='35' height='35' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.info {
    position: relative;
    display: inline-block;
    width: 100%;
}

span.mark-required {
    color: var(--sf-error-color);
}

@media (max-width: 768px) {
    #myForm {
        flex-direction: row;
        gap: 20px;
    }

    .input-group {
        flex: 0 0 100%;
        min-height: inherit;
    }

    .input-group input {
        padding: 16px 20px;
    }

    label {
        margin-left: 0px;
    }

    .form-group {
        flex: 0 0 100%;
        min-height: inherit;
    }

    .form-info {
        padding: 0px 20px;
    }

    /*
    .checkbox label:before {
        top: 0px;
    }
*/
    span.error-field {
        font-size: 16px;
    }

    .upload-button {
        padding: 16px 20px;
    }

    .checkboxes-div {
        width: 100%;
    }

    .btn,
    input.odoslat {
        width: 100% !important;
        text-align: center !important;
        text-wrap: balance;
    }


    span.hura {
        font-size: 32px;
    }
}


/* Štýly pre wrapper labelu */
.label-wrapper {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

/* Nový wrapper pre text labelu a ikonu */
.label-text-wrapper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

/* Štýly pre text labelu */
.label-text {
    display: inline;
    margin-right: 5px;
    color: var(--sf-color-label);
}

/* Aplikácia kurzora help iba na label-wrapper s popisom */
.label-wrapper.has-description {
    cursor: help;
}

/* Štýly pre ikonu otáznika */
.field-description {
    display: inline-block;
    vertical-align: top;
    color: var(--sf-color-primary);
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    font-size: var(--sf-font-size-small);
    cursor: help;
    border: 2px solid var(--sf-color-primary);
}

/* Základné štýly pre tooltip */
.tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--sf-color-white);
    color: var(--sf-color-text);
    text-align: left;
    line-height: 1.3em;
    padding: 10px 20px;
    border-radius: var(--sf-border-radius);
    width: max-content;
    max-width: 300px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0px 10px 30px var(--sf-color-shadow);
    font-size: var(--sf-font-size-small);
    font-family: var(--sf-font-family);
    font-weight: normal;
}

/* Šípka pre tooltip */
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: var(--sf-color-white) transparent transparent transparent;
}

/* Zobrazenie tooltipov pri hover nad labelom a focus na ikone otáznika */
.label-wrapper.has-description:hover .tooltip,
.field-description:focus+.tooltip {
    visibility: visible;
    opacity: 1;
}

/* Zabezpečenie, že tooltip zostane viditeľný pri hover na samotný tooltip */
.label-wrapper.has-description:hover .tooltip:hover,
.field-description:focus+.tooltip:hover {
    visibility: visible;
    opacity: 1;
}

/* Zachovanie pôvodného správania pre .field-description */
.field-description:hover .tooltip,
.field-description:focus .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Responzívne úpravy */
@media (max-width: 768px) {
    .tooltip {
        max-width: 250px;
    }

    .width-33,
    .width-50,
    .width-100 {
        flex: 0 0 100% !important;
    }
}

/* Úpravy pre dotykové zariadenia */
@media (hover: none) {

    .field-description:focus+.tooltip,
    .field-description:focus .tooltip {
        visibility: visible;
        opacity: 1;
    }
}


/* Štýly pre notifikaciu po odoslaní */


#message {
    display: none;
    /* Skryté, kým sa nevloží obsah */
    text-align: center;
}

#message {
    h1 {
        font-size: clamp(30px, 8vw, 80px);
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: -2px;
        margin-bottom: 40px;
        font-family: var(--sf-font-family-button);
        text-transform: uppercase;
    }

    .subtitle {
        font-size: var(--sf-font-size-large);
        font-family: var(--sf-font-family-button);
        text-transform: uppercase;
        line-height: 1.6;
        font-weight: 300;
        letter-spacing: 0.5px;
        margin-bottom: 50px;
        color: var(--sf-color-white);
    }

    .register-btn {
        font-family: var(--sf-font-family-button);
        background-color: transparent;
        color: var(--sf-color-white);
        border: 3px solid var(--sf-color-button);
        border-radius: 0%;
        padding: 18px 40px;
        font-size: var(--sf-font-size-large);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 20px;
        text-wrap: balance;
    }

    p {
        text-align: center !important;
    }

    .register-btn:hover {
        background-color: var(--sf-color-button);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
    }

    .register-btn:active {
        transform: translateY(0);
    }

    .back-link {
        color: #ffffff;
        text-decoration: underline;
        font-size: 14px;
        letter-spacing: 0.5px;
        transition: opacity 0.3s ease;
        cursor: pointer;
        display: inline-block;
        margin-top: 10px;
    }

    .back-link:hover {
        opacity: 0.7;
    }
}

@media (max-width: 768px) {
    h1 {
        margin-bottom: 30px;
    }

    .subtitle {
        margin-bottom: 40px;
    }

    .register-btn {
        padding: 15px 30px;
        font-size: 16px;
    }
}