/**
 * JPH Survey CSS - TAB-PANE VÁLTOZAT (ACCORDION NÉLKÜL)
 * Teljes névtér-védelem: Csak a .jph-survey-container-en belül lép életbe.
 */
:root {
    --survey-hilight-color: #3399FF;   
    --survey-hilight-color-rgb: 51, 153, 255; 

}

/* --- Gombok és Szövegtörések --- */
.jph-survey-container .kerdoiv-gomb {
    min-width: 140px;
    word-break: break-word;
}

.jph-survey-container .nicebreak {
    word-break: normal;
}

/* --- Kérdésblokk (Kártya) egyedi stílusa --- */
.jph-survey-container .kerdes, .survey-textonly-card {
    background-color: #efefef !important; /* A jellegzetes szürke háttér */
    padding: 1.5em;
    margin-bottom: 1em;
    box-shadow: none !important; /* Letöröljük a bootstrap kártya árnyékát */
}


.jph-survey-container .kerdes-cim {
    font-weight: bold;
	font-size: 1.1em;
}

.jph-survey-container .kerdes-leiras {
    background-color: white !important; /* A jellegzetes szürke háttér */
	border: 0px solid #afafaf;
    
}

/* --- Általános Input elemek finomítása --- */
.jph-survey-container .kerdes .form-control,
.jph-survey-container .kerdes input[type=text],
.jph-survey-container .kerdes input[type=email],
.jph-survey-container .kerdes input[type=number],
.jph-survey-container .kerdes input[type=url],
.jph-survey-container .kerdes select,
.jph-survey-container .kerdes textarea {
    border: 0px !important;
    border-bottom: 1px solid #999 !important;
    border-radius: 0px !important;
    background-color: white !important;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* --- Dátum és Választó elemek kiemelése --- */
.jph-survey-container .kerdes input[type=text],
.jph-survey-container .kerdes input[type=email],
.jph-survey-container .kerdes input[type=date],
.jph-survey-container .kerdes input[type=datetime],
.jph-survey-container .kerdes input[type=datetime-local],
.jph-survey-container .kerdes input[type=month],
.jph-survey-container .kerdes input[type=time],
.jph-survey-container .kerdes input[type=radio],
.jph-survey-container .kerdes input[type=checkbox] {
    font-size: 1.2em; /* Finomított méret, hogy Bootstrap környezetben ne essen szét */
}

/* --- Animált Fókusz Vonal (Középről kinyíló kék csík) --- */
.jph-survey-container .effect:focus,
.jph-survey-container .kerdes .form-control:focus,
.jph-survey-container .kerdes input:focus,
.jph-survey-container .kerdes select:focus,
.jph-survey-container .kerdes textarea:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    /*background-color: transparent !important;*/
}

.jph-survey-container .focus-border, 
.jph-survey-container .effect + .focus-border,
.jph-survey-container .kerdes .form-control + .focus-border {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3399FF;
    transition: 0.4s ease-in-out;
    z-index: 10;
}

.jph-survey-container .effect:focus + .focus-border,
.jph-survey-container .kerdes .form-control:focus + .focus-border,
.jph-survey-container .kerdes input:focus + .focus-border,
.jph-survey-container .kerdes select:focus + .focus-border,
.jph-survey-container .kerdes textarea:focus + .focus-border {
    width: 100%;
    transition: 0.4s ease-in-out;
    left: 0;
}

/* --- Fájl feltöltő (File input) egyedi vizualitása --- */
.jph-survey-container .kerdes input[type="file"] {
    background-color: transparent !important;
    border: 0px !important;
    border-bottom: 1px solid #999 !important;
    border-radius: 0px !important;
    transition: 1s;
}

.jph-survey-container .kerdes input[type="file"]::file-selector-button {
    color: white;
    background-color: #3399FF;  
    border: 0px;  
    border-radius: 3px;
    padding: 5px 12px;
    margin-right: 10px;
    transition: 0.3s ease;
}

.jph-survey-container .kerdes input[type="file"]::file-selector-button:hover {
    background-color: #0094FF;
    color: white;
}

/* --- Rádió gomb és Checkbox egyedi stílusa (Tűpontos igazítás + bg-light háttér) --- */
.jph-survey-container .kerdes input[type=radio],
.jph-survey-container .kerdes input[type=checkbox] {
    border: 2px solid var(--bs-border-color-translucent, #757575) !important;
    background-color: white !important;
    background-image: none !important;
    filter: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    margin-top: 0.15em;
    position: relative;
    
    /* Fix méretek a sablon paddingek torzítása ellen */
    width: 1.25em !important;
    height: 1.25em !important;
    padding: 0 !important; /* Nullázzuk, nehogy a téma eltolja a belsőt */
}

/* Fókusz állapot */
.jph-survey-container .kerdes input[type=radio]:focus,
.jph-survey-container .kerdes input[type=checkbox]:focus {
    border-color: var(--survey-hilight-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--survey-hilight-color-rgb), 0.25) !important;
}

/* Kijelölt állapot: Bekapcsoljuk a kért Bootstrap bg-light hátteret */
.jph-survey-container .kerdes input[type=radio]:checked,
.jph-survey-container .kerdes input[type=checkbox]:checked {
    border-color: var(--survey-hilight-color) !important;
    background-color: var(--bs-light-subtle, var(--bs-light, #f8f9fa)) !important;
}

/* Rádió gomb belső pöttye - Százalékos tengely-eltolással a tökéletes 1px-es centrumpontért */
.jph-survey-container .kerdes input[type=radio]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* A -50% eltolás böngészőszinten simítja ki a belső elemet a téma line-height zavarai ellen */
    transform: translate(-50%, -50%);
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background-color: var(--survey-hilight-color) !important;
    display: block;
}

/* Checkbox belső pipája - Abszolút pozícióval és finomhangolt forgatástengellyel */
.jph-survey-container .kerdes input[type=checkbox]:checked::before {
    content: "";
    position: absolute;
    /* Kicsit feljebb és balrább pozicionáljuk a forgatás tengelye miatt */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.35em;
    height: 0.65em;
    border: solid var(--survey-hilight-color);
    border-width: 0 3px 3px 0;
    display: block;
}

/* --- Validáció (Érvénytelen kérdéskártyák és mezők) --- */

/* --- Kérdéskártya pirosítása hiba esetén --- */
.survey-question-card.kerdes.is-invalid {
    /* A !important kell, hogy kiüsse a HTML-be égetett border-0-t */
    border: 1px solid #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.01) !important;
}

/* Hibaüzenet kényszerített megjelenítése */
.survey-question-card.kerdes.is-invalid .invalid-feedback {
    color: #dc3545 !important;
    display: block !important;
}

/* Ha a form-control elemeket is pirosítani akarod a kártyán belül */
.survey-question-card.kerdes.is-invalid .form-control,
.survey-question-card.kerdes.is-invalid textarea,
.survey-question-card.kerdes.is-invalid select {
    border-color: #dc3545 !important;
}

/* Rádiók és checkboxok egyedi pirosítása, ha szükséges */
.survey-question-card.kerdes.is-invalid .form-check-input {
    border-color: #dc3545 !important;
}

/* --- Contenteditable elemek --- */
.jph-survey-container [contenteditable=true] {
    border-radius: 0;
    border: 0px;
    border-bottom: solid 1px #999;
}

.jph-survey-container [contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    display: block;
    color: #777;
}

.jph-survey-container [contenteditable=true]:hover {
    border-bottom: solid 3px #3399FF;  
}

/* --- Blokkidézetek, listák és adatsorok --- */
.jph-survey-container ul {
    list-style-type: disclosure-closed;
}

.jph-survey-container blockquote {
    margin: 10px 0;
    border-radius: 5px;
    padding: 15px;
    background-color: #efefef;
    border-left: 5px solid #000088; 
}

.jph-survey-container .adatsor {
    background: #F8F9FA;
    transition: background 0.2s;
}

.jph-survey-container .adatsor:hover {
    background: #e3f2fd; /* Halványkék háttér az olvashatóságért */
}

/* --- Nyomtatási kép (Print Media) --- */
@media print {
    body, 
    .jph-survey-container {
        font-size: 12pt !important;
        background-color: #fff !important;
    }
    
    .jph-survey-container .bg-light, 
    .jph-survey-container .tab-pane, 
    .jph-survey-container .kerdes {
        background-color: #fff !important;
        background: #fff !important;
        padding: 0px !important;
        margin-bottom: 1.5rem !important;
    }
    
    .jph-survey-container .card, 
    .jph-survey-container .tab-content {
        box-shadow: none !important;
        border: 0px !important;
        padding: 0px !important;
        margin: 0px !important;
    }
    
    /* Nyomtatásban jelenjen meg minden szakasz egymás után */
    .jph-survey-container .tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fejezet címek szimulálása a rejtett panelekből nyomtatáskor (ha h3/h4-et használsz szakaszcímnek) */
    .jph-survey-container .jph-step-title {
        border-bottom: 2px solid #333 !important;
        font-size: 1.4em !important;
        padding-bottom: 5px !important;
        margin-top: 2rem !important;
        font-weight: bold;
    }
    
    /* Kezelőszervek és navigáció elrejtése nyomtatásból */
    .jph-survey-container .btn, 
    .jph-survey-container .survey-footer,
    .jph-survey-container #jph-survey-navigation-zone,
    #jph-save-draft,
    footer {
        display: none !important;
    }
    
    .jph-survey-container .kerdes input, 
    .jph-survey-container .kerdes select, 
    .jph-survey-container .kerdes textarea {
        border-bottom: 1px dashed #333 !important;
    }
}



/* ==========================================================================
   FLEX-ALAPÚ LINEÁRIS SKÁLA (LINEAR) STÍLUSOK
   ========================================================================== */
  /* Nem nullázzuk a stílust, hanem biztosítjuk, hogy megkapja a Bootstrap alapértelmezett méretét */
	.scale-buttons-container input[type="radio"].form-check-input {
		width: 1.25em !important;  /* Ez a Bootstrap 5 alapértelmezett mérete */
		height: 1.25em !important;
		margin: 0 !important;      /* Csak a hibás margókat takarítjuk el */
		padding: 0 !important;
		display: inline-block !important;
	}

	/* Biztosítjuk, hogy a gombok dobozai egyenlő szélességűek legyenek és ne ugorjanak össze */
	.scale-buttons-container .jph-scale-item {
		flex: 1 1 0% !important;
		min-width: 0 !important;
	}

	

	
	.jph-linear-scale-wrapper .scale-text-label {
		text-align: center !important;
		font-weight: bold !important;
		font-size: 0.9rem !important;
	}
	
/* ==========================================================================
   FLEX-ALAPÚ MÁTRIX RÁCS (FVRACS & JNRACS) STÍLUSOK
   ========================================================================== */

/* A külső burkoló, ami kezelni fogja a vízszintes görgetést mobilon */
.jph-survey-container .jph-matrix-scroll-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* A rács minimális szélessége, ami alatt bekapcsol a görgetés (Pl. ha 3 oszlop van: 200px cím + 3*100px input = 500px) */
.jph-survey-container .jph-matrix-flex-grid {
    min-width: 500px; /* Ezt szükség szerint növelheted, ha nagyon sok az oszlopod */
    display: flex !important;
    flex-direction: column !important;
}

/* A sorok alapbeállítása */
.jph-survey-container .matrix-header-row,
.jph-survey-container .matrix-data-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Bal oldali kérdéscím cella szélessége (Fixáljuk, hogy függőlegesen egy vonalban fussanak) */
.jph-survey-container .matrix-cell-title {
    width: 200px !important;
    flex-shrink: 0 !important;
    word-break: break-word;
}

/* Input cellák arányos elosztása az oszlopok között */
.jph-survey-container .matrix-cell-input {
    flex: 1 1 0% !important; /* Egyenlő szélességet ad az oszlopoknak */
    min-width: 80px !important; /* Biztosítja, hogy az oszlopnév és a pötty ne csússzon egymásra */
    flex-shrink: 0 !important;
}

/* Tűpontos igazítás a te egyedi form-check-inputjaidhoz a flexboxon belül */
.jph-survey-container .matrix-cell-input input[type="radio"].form-check-input,
.jph-survey-container .matrix-cell-input input[type="checkbox"].form-check-input {
    display: inline-block !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
}


/* Biztosítjuk, hogy a rádiógomb rácsban a gombok kerekek maradjanak */
.jph-survey-container .matrix-radio {
    border-radius: 50% !important; /* Ettől lesz tökéletesen kerek */
}

/* Letiltjuk, hogy a rádiógomb megkapja a checkbox pipáját */
.jph-survey-container .matrix-radio:checked::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0.55em !important;
    height: 0.55em !important;
    border-radius: 50% !important;
    border: none !important; /* Eltünteti a checkbox pipa-vonalait */
    background-color: var(--survey-hilight-color, #3399FF) !important; /* Behelyezi a kék belső pöttyöt */
    display: block !important;
}

	
/* ==========================================================================
   EGYÉB KAPCSOLÓK CIMKÉJE:
   ========================================================================== */
/* Ezzel megakadályozzuk, hogy a checkbox/radio állapota kihatással legyen a címkére */
.form-check-input:invalid~.form-check-label, .form-check-input.is-invalid~.form-check-label {
    color: inherit !important; /* Maradjon az eredeti szövegszín */
}
/* Ezzel megakadályozzuk, hogy a checkbox/radio állapota kihatással legyen a címkére */
.form-check-input:valid~.form-check-label, .form-check-input.is-valid~.form-check-label {
    color: inherit !important; /* Maradjon az eredeti szövegszín */
}
.dropzone.dz-clickable {
    border: 1px dashed #999 !important;
	background-color: #f7f7f7 !important; 
	border-radius: 6px;
	padding: 4px;
}

/* Elrejtjük a Dropzone alapértelmezett pipa és kereszt ikonjait */
.dropzone .dz-preview .dz-success-mark, 
.dropzone .dz-preview .dz-error-mark {
    display: none !important;
}


/* 1. CSAK AKKOR halványítunk, ha fut a feldolgozás, de MÉG NEM sikeres */
.dropzone .dz-preview.dz-processing:not(.dz-success) .dz-image {
    position: relative;
    opacity: 0.3 !important; /* Kényszerített halványítás feltöltés alatt */
}

/* 2. SIKERES feltöltés vagy visszaállított mock fájl esetén kőkeményen visszaállítjuk 100%-ra */
.dropzone .dz-preview.dz-success .dz-image {
    opacity: 1 !important; /* Teljesen látható lesz */
}

/* A spinner köre */
.dropzone .dz-preview.dz-processing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-top: -25px; /* Középre igazítás finomhangolása */
    margin-left: -15px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff; /* Bootstrap kék (vagy a te témád színe) */
    border-radius: 50%;
    animation: dz-spinner 0.8s linear infinite;
    z-index: 10;
}

/* Ha elkészült a feltöltés, eltüntetjük a spinnert */
.dropzone .dz-preview.dz-success::after {
    display: none;
}

/* Spinner forgó animációja */
@keyframes dz-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Felkészítjük a gombsort, hogy a spinner hozzá képest középre igazodjon */
#jph-survey-navigation-zone {
    position: relative;
    transition: all 0.3s ease;
}

/* Amikor aktív a betöltés, egy áttetsző réteget és spinnert húzunk rá */
#jph-survey-navigation-zone.loading-zone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* Fehéres, áttetsző maszk */
    border-radius: inherit; /* Átveszi a fő div kerekítését */
    z-index: 5;
}

/* Maga a központi spinner */
#jph-survey-navigation-zone.loading-zone::after {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff; /* Téma színe (Bootstrap kék) */
    border-radius: 50%;
    animation: zone-spinner 0.8s linear infinite;
    z-index: 6;
}

/* Forgó animáció */
@keyframes zone-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}