:root {
    --dark-bg: #111827;
    --medium-bg: #1f2937;
    --light-bg: #374151;
    --text-light: #f9fafb;
    --text-gray: #9ca3af;
    --border-color: #4b5563;
    --blue: #3b82f6;
    --green: #16a34a; /* Régi zöld, lehet, hogy máshol még kell */
    --red: #dc2626; /* Régi piros, lehet, hogy máshol még kell */
    --new-green-dark: #0fa875;
    --new-green-light: #34d399;
    --new-red-dark: #d63550;
    --new-red-light: #fb7185;
    --yellow: #facc15;
}


*{
    box-sizing: border-box;
}

.mw-toggle {
    box-sizing: content-box;
    /* background: #95A5A6; */
    display: flex;
    align-items: center;
    /* height: 30px; */
    flex-wrap: wrap;
    padding: 5px;
    border-radius: 50px;
    position:relative;
    border: 2px solid #8eabda;
    margin: 0;

    column-gap: 7px;
    width: fit-content;
    /* width: 300px; */
}

.mw-toggle label{
    box-sizing: border-box;

    display: flex;
    align-content: center;

    color: #8eabda;
    
    margin: 0;    
    /* padding: 3px; */
    padding-inline: 10px;
    
    /* height: 40px; */
    height: 30px;

    align-items: center;

    border-radius: 45px;

    transition: all 150ms ease-in-out; 
}

.mw-toggle label>span{
    text-align: center;
    font-size: 13px;
    line-height: 14px;
    /* width: 80px; */

    text-transform: capitalize;
}

.mw-toggle input[type='radio']:checked ~ label{
    background-color: #2750ab;
    color: white;
}


/* --- Alapbeállítások és Törzs --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* bg-gray-900 */
    color: #f9fafb; /* text-white */
    
    margin: 0;
    padding-block: 1rem; 
}

/* --- Fő Konténer --- */
body>main {
    box-sizing: border-box;
    background-color: #1f2937; /* bg-gray-800 */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    padding: 2.5rem; /* p-10 */
    width: 100%;
    max-width: 1200px;
    border: 1px solid #374151; /* border-gray-700 */

    margin-inline: auto;
}

body>main[data-open="0"]{
    display: none;
}

/* --- Fejléc Szekció --- */
#homepage header {
    text-align: center;
    margin-bottom: 5rem;
}

header h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    margin-bottom: 0.5rem;
    /* Színátmenetes szöveg */
    background: linear-gradient(to right, #60a5fa, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

header p {
    color: #9ca3af; /* text-gray-400 */
    max-width: 42rem; /* max-w-2xl */
    margin: 0 auto;
}

/* --- Figyelmeztetés Szekció --- */
.disclaimer {
    background-color: rgba(17, 24, 39, 0.5); /* bg-gray-900/50 */
    border: 1px solid rgba(234, 179, 8, 0.3); /* border-yellow-500/30 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.25rem; /* p-5 */
    margin-bottom: 2rem;
    margin-top: 5rem;
    display: flex;
    align-items: flex-start;
}

.disclaimer-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    color: #facc15; /* text-yellow-400 */
}

.disclaimer h2 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: #fde047; /* text-yellow-300 */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.disclaimer ul {
    list-style-position: inside;
    list-style-type: disc;
    color: #d1d5db; /* text-gray-300 */
    padding-left: 0;
    margin: 0;
}

.disclaimer li {
    margin-bottom: 0.25rem;
}


/* --- Mód Választó Szekció --- */
.mode-selection {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.mode-card {
    background-color: #374151; /* bg-gray-700 */
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #4b5563; /* border-gray-600 */
    transition: border-color 0.3s ease;
}

.mode-card h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.mode-card p {
    color: #9ca3af; /* text-gray-400 */
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Biztosítja, hogy a gomb alulra kerüljön */
}

/* Kártya hover effektek */
.mode-card.practice:hover { border-color: var(--blue); }
.mode-card.memo:hover { border-color: var(--new-green-dark); }
.mode-card.exam:hover { border-color: var(--new-red-dark); }


/* --- Gombok --- */
.btn {
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-practice {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}


.btn-practice {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.btn-memo {
    /* background-color: #16a34a; /* bg-green-600 */ 
    background: linear-gradient(135deg, var(--green), var(--new-green-dark));
}

.btn-exam {
    /* background-color: #dc2626; /* bg-red-600 */ 
    background: linear-gradient(135deg, var(--red), var(--new-red-dark));
}



/* Scrollbar styling */

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #374151;
    padding-inline: 1px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #284eb5ff;
    cursor: pointer;
    border-radius: 15px;

    transition: all 200ms ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #3679e3ff;
}



/* --- Modal Stílusok --- */
.modal-overlay {
    display: flex; /* Alapból rejtett */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.modal-overlay[data-open="0"]{
    display: none;
}

.modal-content {
    background-color: #1f2937;
    padding: 2rem;
    padding-top: 5rem;
    border-radius: 0.75rem;
    border: 1px solid #374151;
    width: 90%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;

    max-height: 100%;
}

#modal-body{
    overflow-y: auto;
    max-height: 80dvh;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    color: #9ca3af;
    font-size: 2rem;
    font-weight: bold;
    border: none;
    background: none;
    cursor: pointer;
}

.modal-close-btn:hover {
    color: #ffffff;
}

.modeSettingsForm {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    color: #ffffff;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: bold;
    margin: 0;
}

/* --- Lábléc --- */
main>footer {
    text-align: center;
    margin-top: 4.5rem;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}

footer>p{
    margin: 0;
    text-align: center;
}

#modal-body>form{
    display: flex;
    flex-direction: column;

    row-gap: 20px;
}

#modal-body>form>.multiway_toggle_input{
    flex-direction: column;
    
}


#modal-body .setting_input_holder{
    display: flex;
    flex-direction: row;
    
}

#modal-body .setting_input_holder.question_pool{
    flex-direction: column;
    row-gap: 10px;
    margin-right: 10px;
    
}

#modal-body input[type='checkbox']{
    accent-color: #3679e3ff;
}

#modal-body>form>button{
    max-width: 100px;
    /* margin-left: auto; */
    margin-top: 15px;
}

label, button, a, input, select{
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.btn-close-session {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-gray);
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.btn-close-session:hover {
    background-color: var(--border-color);
    color: var(--text-light);
}
.btn-close-session svg {
    width: 1.5rem;
    height: 1.5rem;
}

.picker-toggle-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.shuffle_enabled .topic-picker-container{
    display: none;
}

.topic-picker-container {
    display: block; 
    height: 100%;
    /* Scrollbar stílusok */
    scrollbar-width: thin;
    scrollbar-color: var(--light-bg) var(--dark-bg);
}
.topic-picker-container::-webkit-scrollbar { width: 8px; }
.topic-picker-container::-webkit-scrollbar-track { background: var(--dark-bg); }
.topic-picker-container::-webkit-scrollbar-thumb {
    background-color: var(--light-bg);
    border-radius: 4px;
}

.topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.topic-item {
    border-bottom: 1px solid var(--border-color);
}

.topic-item>div.topic-toggle-holder{
    display: flex;
    flex-direction: row;
    column-gap: 7px;
    transition: background-color 0.2s;
    align-items: center;
    padding-left: 5px;
}

.topic-item>div.topic-toggle-holder>input[type='checkbox']{
    height: fit-content;
}

.topic-title-btn {
    background-color: var(--medium-bg);
    border: none;
    color: var(--text-light);
    padding: 1rem 0.5rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}
.topic-title-btn:hover, .topic-toggle-holder:hover {
    background-color: var(--light-bg);
}

.topic-toggle-holder:hover>.topic-title-btn{
    background-color: transparent;
}

.topic-title-btn .topic-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray);
    transition: transform 0.2s ease-in-out;
}
.topic-item[data-open="1"] .topic-title-btn .topic-arrow {
    transform: rotate(90deg);
}

.topic-question-grid {
    display: none;
    background-color: var(--dark-bg);
    padding: 1rem;
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.75rem;
}
.topic-item[data-open="1"] .topic-question-grid {
    display: grid;
}


.multiway_toggle_input>p{
    margin: 0;
    margin-bottom: 10px;
}

/* --- Reszponzív Beállítások --- */
@media (min-width: 768px) { /* md: breakpoint */
    .mode-selection {
        grid-template-columns: repeat(3, 1fr);
    }
    header h1 {
        font-size: 3rem; /* sm:text-5xl */
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
}


#quiz-container {
    display: flex; /* Alapból rejtve */
    width: 100%;
    max-width: 1200px;
    height: 85vh;
    background-color: var(--medium-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    flex-direction: row;
    overflow: hidden; /* Fontos, hogy a belső panelek ne lógjanak ki */
    margin-inline: auto;
}

#quiz-container[data-open="0"]{
    display: none;
}

/* --- Kvíz Bal Oldali Panel (Kérdés, válaszok) --- */
.quiz-panel {
    flex-grow: 1;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.quiz-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Tördelés mobilon */
    gap: 1rem; /* Térköz a tördelt elemek között */
    margin-bottom: 1.5rem;
}

.quiz-header-info {
    /* Mobilon a header info töltse ki a helyet */
    flex-grow: 1; 
}

.quiz-header-info h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-light);
    text-align: left;
}

.quiz-header-info p {
    margin: 0;
    margin-top: 3px;
    color: var(--text-gray);
    font-size: 0.875rem;
    text-align: left;
}

.quiz-header-info .max{
    color: var(--text-gray); 
    font-weight: 400;
}

.quiz-header-stats {
    display: flex;
    gap: 1rem;
    /* Mobilon a gombok alá kerül */
    order: 3;
    /* Töltse ki a teljes szélességet mobilon */
    width: 100%;
    justify-content: center;
}

.quiz-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--light-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-light);
}

.quiz-stat-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-gray);
}

/* Időzítő specifikus (pirosas) */
#quiz-timer {
    color: #fca5a5; /* text-red-300 */
}

#quiz-timer svg {
    color: #ef4444; /* text-red-500 */
}

/* ÚJ: Monospace font a számlálóhoz */
#quiz-timer-text, #quiz-score-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 600; /* Kicsit vastagabb a jobb olvashatóságért */
}


/* Pontszám specifikus (zöldes) */
#quiz-score {
    color: #86efac; /* text-green-300 */
}

#quiz-score svg {
    color: #22c55e; /* text-green-500 */
}

/* Láthatóság vezérlése a config osztályok alapján */
#quiz-timer {
    display: none;
}

.time_controlled #quiz-timer {
    display: flex;
}

#quiz-score {
    display: none;
}

.always_show_score.show_feedback #quiz-score {
    display: flex;
}
/* .show_score_at_end.session-ended #quiz-score {
    display: flex;
}
*/

.quiz-header-actions{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.picker-toggle-btn {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    display: none;
}
.picker-toggle-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- Kérdés Szekció --- */
.quiz-main {
    flex-grow: 1; /* Kitölti a helyet a láblécig */
    /* padding: 2rem 0; */
}

.question-text {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 2rem;
    margin-top: 0;
}

.answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.answer-btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 1rem;
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.answer-prefix {
    font-weight: 700;
    background-color: var(--border-color);
    border-radius: 0.25rem;
    padding: 0.25rem 0.6rem;
    margin-right: 1rem;
    transition: all 0.2s ease;
}

.answer-btn:hover {
    background-color: var(--border-color);
}

/* --- Válasz Gomb Állapotok --- */

/* Amikor a felhasználó rákattint */
.answer-btn.selected {
    background-color: #2b4f8a;
    border-color: var(--blue);
}
.answer-btn.selected .answer-prefix {
    background-color: var(--blue);
}

/* Ha a válasz HELYES (Gyakorló módban) */
.show_feedback .answer-btn.correct {
    background-color: #115e32;
    border-color: var(--green);
    color: #ffffff;
}
.show_feedback .answer-btn.correct .answer-prefix {
    background-color: var(--green);
    color: #ffffff;
}


/* Ha a válasz HELYTELEN (Gyakorló módban) */
.show_feedback .selected.answer-btn.incorrect {
    background-color: #7f1d1d;
    border-color: var(--red);
    color: #ffffff;
}
.show_feedback .selected.answer-btn.incorrect .answer-prefix {
    background-color: var(--red);
    color: #ffffff;
}

/* Miután válaszoltunk, a többi gomb */
.answer-btn.disabled {
    pointer-events: none;
    /* opacity: 0.7; */
}

.show_only_correct .answer-btn.correct{
    display: flex;
}

.show_only_correct .answer-btn{
    display: none;
}




/* --- Kvíz Lábléc --- */
.quiz-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 1.5rem;
}

.flag-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-gray);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.flag-btn svg { width: 1rem; height: 1rem; }

.flag-btn:hover {
    border-color: var(--yellow);
    color: var(--yellow);
}
.flag-btn.flagged {
        background-color: rgba(250, 204, 21, 0.1);
        border-color: var(--yellow);
        color: var(--yellow);
}

.nav-buttons {
    display: flex;
    gap: 1rem;
}

.btn-nav {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-nav:not(:disabled):hover {
    background-color: var(--border-color);
}
.btn-nav.next {
    background-color: var(--blue);
    border-color: var(--blue);
}
.btn-nav.next:not(:disabled):hover {
    background-color: #2563eb;
}

.btn-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Kvíz Jobb Oldali Panel (Kérdésválasztó Rács) --- */
.picker-panel {
    flex-shrink: 0;
    width: 320px;
    background-color: var(--dark-bg);
    border-left: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    max-width: 100%;
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.picker-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.picker-close-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.25rem;
}
.picker-close-btn svg { width: 1.5rem; height: 1.5rem; }
.picker-close-btn:hover { color: var(--text-light); }

.shuffle_enabled .session-grid-container{
    display: block;
}

.session-grid-container {
    padding-inline: 5px;
    display: none;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--light-bg) var(--dark-bg);
}

.scrollable{
    overflow-y: auto;
    /* position: relative; */
}

/* Webkit (Chrome, Safari) scrollbar */
.session-grid-container::-webkit-scrollbar {
    width: 8px;
}
.session-grid-container::-webkit-scrollbar-track {
    background: var(--dark-bg);
}
.session-grid-container::-webkit-scrollbar-thumb {
    background-color: var(--light-bg);
    border-radius: 4px;
}


.session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.75rem;
}

.grid-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.grid-btn:hover {
    background-color: var(--border-color);
}

input.visually-hidden:checked+label.grid-btn{
    background-color: var(--blue);
    border-color: var(--blue);
}

/* --- Rács Gomb Állapotok --- */
/* .grid-btn.current {
    background-color: var(--blue);
    border-color: var(--blue);
} */
.show_feedback .grid-btn.correct {
    background-color: var(--green);
    border-color: var(--green);
}
.show_feedback .grid-btn.incorrect {
    background-color: var(--red);
    border-color: var(--red);
}
/* Vizsga módban, ha már válaszolt, de nem tudjuk az eredményt */
.hide_feedback .grid-btn.answered {
    background-color: #6b7280;
    border-color: #6b7280;
}

/* Megjelölt kérdés (sárga háromszög a sarkában) */
.grid-btn.flagged::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent var(--yellow) transparent transparent;
}


.summary-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.summary-modal-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
}

.summary-stats {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
}

.summary-stat-item {
    flex-grow: 1;
    max-width: 200px;
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
}

.summary-stat-item h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-gray);
        text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-stat-item p {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
}

.summary-stat-item.score p {
    color: var(--green);
}

.summary-stat-item.time p {
    color: var(--text-light);
    font-size: 1.75rem; /* Kicsit kisebb, hogy elférjen */
}

.summary-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    margin-top: 1rem;
}

.summary-actions .btn,
.summary-actions .btn-nav {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}

.summary-actions .btn-practice>svg{
    width: 15px;
    height: 15px;
}


/* --- ÚJ: Stílusok a number input mezőhöz --- */
#modal-body .setting_input_holder.number_input {
    align-items: center;
    gap: 1rem;
}

#modal-body .setting_input_holder.number_input input[type='number'] {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    width: 100px; /* Alap szélesség */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    
    /* Chrome, Safari, Edge, Opera - Spin gombok elrejtése */
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox - Spin gombok elrejtése */
#modal-body .setting_input_holder.number_input input[type='number'] {
    -moz-appearance: textfield;
}

#modal-body .setting_input_holder.number_input input[type='number']:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Halvány kék ragyogás */
}

/* --- Reszponzív Beállítások --- */
@media (min-width: 768px) {
    .mode-selection {
        grid-template-columns: repeat(3, 1fr);
    }
        header h1 {
        font-size: 3rem;
    }
    

    
}

@media (max-width: 1024px) {
    #quiz-container {
        height: auto;
        min-height: 90vh;
    }
    .picker-panel {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 1100;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .picker-panel.visible {
        transform: translateX(0);
    }
    /* Overlay a háttér elsötétítéséhez mobilon */
    .picker-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }
    .picker-overlay.visible {
        display: block;
    }

    .picker-toggle-btn {
        display: block; /* Asztali nézetben nincs bezáró gomb */
    }

    .picker-close-btn {
        display: block; /* Asztali nézetben nincs bezáró gomb */
    }
}

@media (max-width: 767px) {
    body {
        padding: 0;
    }
    body>main {
        border-radius: 0;
        padding: 1.5rem;
    }

    #quiz-container {
        border-radius: 0;
        min-height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
    }

    .quiz-panel {
        padding: 1.5rem;
    }

    .quiz-header-info h2 { font-size: 1.25rem; }
    .question-text { font-size: 1.125rem; }

    .quiz-header-actions{
        column-gap: 10px;
        flex-direction: row;
    }
}

@media (max-width: 380px){
    .flag-btn>span{
        display: none;
    }

    .flag-btn{
        padding: 0.5rem;
    }

    .quiz-panel {
        padding: 1rem;
    }
}

/* @media (max-height: 900px){
    .quiz-panel {
        padding-block: 1rem;
    }
} */