/* változók */
:root {
    --black: #242424;
    --white: #fafafa;

    --gray-1: #d1d5db;
    --gray-2: #ddd;
    
    --red: #ef233c;

    --classic-blue: #4194B1;
    --blue: #3b8aff;
    --dark-blue: #3177e0;
    --light-blue: #a0c1f3;

    --purple: #3f51b5;
    --teal: #009688;

    --px-xs: 4px;
    --px-s: 6px;
    --px-m: 10px;
    --px-l: 16px;
    --px-xl: 27px;
    --px-2xl: 44px;
    --px-3xl: 71px;
    --px-4xl: 116px;
}

/* font */
@font-face {
    font-family: OpenSans;
    src: url(../assets/OpenSans.ttf);
}

/* globális */
* {
    padding: 0;
    margin: 0;
    
    box-sizing: border-box;
    font-family: OpenSans;
}

/* body -> hogy a lábléc mindig alul legyen */
body {
    display: flex;
    flex-direction: column;
    row-gap: 100px;
    
    min-height: 100vh;
}

/* h1, h2, h3, h4, h5, h6 */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    text-align: center;

    font-weight: 600;
    color: var(--black);
    word-break: break-word;

    font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 28px }
h2 { font-size: 26px; }

/* gomb */
button {
    padding: 8px 16px;
    font-size: 16px;
    min-width: 110px;

    background-color: var(--black);
    color: var(--white);
    border: none;

    cursor: pointer;
    transition: background-color 300ms ease-in-out;
}

button:hover {
    background-color: #313131;
}

button:disabled,
.button-v2:disabled {
    background-color: #ccc;
    color: #555;
    cursor: default;
}

/* másik fajta gomb */
.button-v2 {
    padding: 6px 16px;

    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}

.button-v2:hover {
    background-color: #eaeaea;
}

.button-v2:disabled {
    padding: 8px 16px;
    border: none;
}

.button-v2:hover:disabled {
    background-color: #ccc;
}

/* input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input {
    outline: none;
    border: 1px solid var(--black);

    padding: 6px 8px;
    font-size: 16px;
}

/* a */
a {
    color: var(--black);
    text-underline-offset: 3px;

    font-size: 17px;
}

/* a - aláhúzás nélkül */
.a-v2 {
    text-decoration: none;
    text-decoration-skip-ink: none;
}

.a-v2:has(span):hover > span {
    text-decoration: underline;
}

.a-v2:not(:has(span)):hover {
    text-decoration: underline;
}

/* label - input */
.custom-label-input {
    display: flex;
    flex-direction: column-reverse;
    row-gap: var(--px-s);
}

.custom-label-input > input {
    order: 3;

    width: 100%;
    padding: 18px 8px 8px 12px;

    z-index: 0;
    transition: border-color 100ms ease-in-out;
}

.custom-label-input > label {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 6px;

    order: 4;
    
    width: fit-content;
    padding: 0 4px;
    margin: 0 0 -16px 8px;
 
    background-color: #fff;

    z-index: 1;
    transition: color 100ms ease-in-out;
}

.custom-label-input > ul {
    order: 1;

    list-style: none;
    width: 100%;
}

.custom-label-input > ul > li {
    font-size: 14px;

    color: #585858;
    transition: color 100ms ease-in-out;
}

.custom-label-input > ul > li::before {
    content: "● ";
}

.custom-label-input > input:focus { border-color: var(--dark-blue) }
.custom-label-input > input:focus ~ label { color: var(--dark-blue) }

.custom-label-input[error] > label { color: var(--red) !important }
.custom-label-input[error] > input { border-color: var(--red) }
.custom-label-input[error] > ul { display: none }
.custom-label-input[error]::after {
    position: relative;
    top: -2px;

    content: attr(error);
    color: var(--red);
}

/* lista */
.custom-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--px-xs);

    list-style: none;
}

/* visszajelzés */
.feedback::before {
    font-family: open-sans, fontAwesome;
    
    margin-right: 4px;
}

.feedback[success] {
    color: var(--dark-blue);
}

.feedback[success]::before {
    content: "\f336";
}

.feedback[success]::after {
    content: attr(success);
}

.feedback[error] {
    color: var(--red);
}

.feedback[error]::before {
    content: "\f06a";
}

.feedback[error]::after {
    content: attr(error);
}

/* label, amely egy file uploader-hez tartozik, célja, hogy az uploader rejtett legyen */
.hidden-file-uploader > input {
    display: none;
}

/* horizontálisan középen */
.center-x {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* vertikálisan középen */
.center-y {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* relative top 120px */
.relative-top-120px {
    position: relative;
    top: 120px;
}

/* kiemelés félkövéren */
.custom-bold {
    font-weight: 600;
    color: #000000ab;
}

/* select */
select {
    min-width: 60px;
    padding: 2px 8px;

    font-size: 16px;

    outline: none;
    border: 1px solid var(--black);

    background-color: #f6f6f6;
}

/* label-checkbox */
.label-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 6px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    cursor: pointer;
}

.label-checkbox > input {
    display: none;
}

.label-checkbox > span {
    content: "";

    width: 22px;
    height: 22px;
    
    background-color: #e4e4e4;
    border: 1px solid #c9c9c9;
    border-radius: 2px;

    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
}

.label-checkbox > input:checked ~ span {
    background-color: var(--blue);
    border-color: var(--blue);
}

.label-checkbox:hover > span {
    background-color: #c9c9c9;
}

/* icon-text */
.icon-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--px-s);
}

/* kijelölés meggátolása -> a sok kattintás során ne legyen zavaró */
.anti-selection {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* menü design */
.menu-design {
    padding: 30px 40px;

    box-shadow: #00000061 0px 10px 20px;
}

/* szép scroll bar */
.nice-scrollbar {
    overflow: auto;
}

.nice-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}
.nice-scrollbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.nice-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888; 
}

.nice-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* táblázat */
.nice-table {
    width: 100%;

    border-collapse: collapse;
}

.nice-table :is(td, th) {
    width: 100%;
    padding: 12px 15px;

    text-align: center;
    white-space: nowrap;
}

.nice-table th {
    background-color: var(--dark-blue);
    color: var(--white);

    font-weight: 100;
}

.nice-table td {
    border: 1px solid var(--gray-1);
}

.nice-table tr:nth-child(odd) > td {
    background-color: #efefef;
}

/* flex row wrap space-between */
.flex-row-wrap-space-between {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* flex row space-between */
.flex-row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* flex row wrap center x y, with minimal row gap */
.flex-row-wrap-center-x-y-row-gap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: var(--px-l);
}

/* flex row center x y */
.flex-row-center-x-y {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* flex row center y */
.flex-row-center-y {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* flex row center x */
.flex-row-wrap-center-x-minimal-row-column-gap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: var(--px-xl);
}

/* flex column center x y, with minimal row gap */
.flex-column-center-x-y-minimal-row-gap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--px-xl);
}

/* flex column center y, with minimal row gap */
.flex-column-center-y-minimal-row-gap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: var(--px-xl);
}

/* flex column center x, with minimal row gap */
.flex-column-center-x-minimal-row-gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--px-xl);
}