:root {
--primary: #244646;
--accent: #d9534f;
--gold: #f39c12;
--bg: #f9f9f9;
--text: #216869;
}


BODY {

padding: 0;
margin: 0;
width: 100vw;
min-height: 100vh;
min-width : 266px;
overflow-x: hidden;
font-family: "Barlow", sans-serif;
line-height: 1.5;
color: #216869;
font-size: 1.2em;
}

header {
position:relative;
z-index:3;
}

.ff_bc {
font-family: "Barlow Condensed", sans-serif;
}

.ff_b {
font-family: "Barlow", sans-serif;
}

.tt_def {
text-transform:none !important;
}

.btn_more {text-transform: uppercase;
font-weight: 800;
font-family: "Barlow Condensed", sans-serif;
display: inline-block;
background-color: #247dc1;
padding: .45em .9em;
color: #FFF;
border: .2em solid #247dc1;
transition: all 0.2s ease-in-out;
}

.btn_more:HOVER {
color: #247dc1;
background-color: transparent;
transform: scale(.9);
transition: all 0.2s ease-in-out;
}

.btn_more_swich .mso_ic.ic_switch {
transform: scaleX(-1) rotate(-90deg);
}

.f_norm {
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


.spacer_1 {clear: both;
display: block;
padding: 0.15em;
content: '';}

.spacer_2 {clear: both;
display: block;
padding: 0.3em;
content: '';}

.spacer_3 {clear: both;
display: block;
padding: 0.45em;
content: '';}

.spacer_4 {clear: both;
display: block;
padding: 0.6em;
content: '';}

.spacer_5 {clear: both;
display: block;
padding: 0.75em;
content: '';}

.spacer_6 {clear: both;
display: block;
padding: 0.9em;
content: '';}

.spacer_7 {clear: both;
display: block;
padding: 1.05em;
content: '';}

.spacer_8 {clear: both;
display: block;
padding: 1.25em;
content: '';}

.upper {
text-transform:uppercase;
}

A {
color: #e93f68;
text-decoration:none;
transition: color 0.2s ease-in-out;
}

A:HOVER,
A:FOCUS {
color: #17BEBB;
}

p.hashtag {
font-size: .65em;
font-weight: 300;
}

.hashtag A {
color: #17BEBB;
}

.hashtag A:hover {
color: #216869;
}

.f_bc {font-family: "Barlow Condensed", sans-serif;}

H3 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: 3.2em;
color: #17BEBB;
text-transform: uppercase;
margin: 3em 0 .75em;
letter-spacing: 0em;
line-height: 1.1;
position:relative;
}


H3.bg-title {
margin: 1em auto .75em;
}

H4 {
font-family: "Barlow Condensed", sans-serif;
font-size: 1.45em;
font-weight: 600;
color: #17bebb;
margin: 1.6em 0 0;
line-height: 1.3;
}


H4 A {
color: #176ebe;
}

H5.pinfo {
font-family: "Barlow Condensed", sans-serif;
margin: 1.25em 0 1em 1em;
font-size: .85em;
text-transform: uppercase;
font-weight: 600;
color: #4cbebb;
display: block;
text-indent: -1em;
max-width: 80%;
}

.pinfo_cont.left {
border-left: .3em solid #c9efef;
border-radius: 1em;
padding: .5em 1.25em 1.5em;
}

.pinfo_cont.right {
border-right: .3em solid #c9efef;
border-radius: 1em;
padding: .5em 1.25em 1.5em;
}

.pinfo_cont.right .pin_ncard {
display: block;
text-align: right;
}
 
.btn_pinfo {
font-family: "Barlow Condensed", sans-serif;
display: inline-block; 
background: #FFF;
color: #176ebe; 
text-decoration: none; 
padding: 8px 14px 8px; 
font-size: .85em; 
font-weight: bold;
transition: background 0.2s;
border:1px solid #c6efef;
border-bottom: 3px solid transparent;
border-right: none;
transition: border .2s ease;
}

.pin_ncard_cont {
border-radius: 0;
padding: .5em 1.25em 1.5em;
margin: .25em;
background: #F4F7BE;
position: relative;
max-width: caLC((100% / 3) - 6em);
min-width: 14em;
display: inline-block;
float: left;
transform: rotate(1deg);
}

.pin_ncard_cont:nth-child(2n),
.pin_ncard_cont:nth-child(4n) {
transform: rotate(0deg);
}

.pin_ncard_cont:nth-child(3n) {
transform: rotate(-1deg);
}

.pin_ncard_cont:before {
content: '';
width: 2em;
height: 1em;
background: #b5df86;
display: block;
bottom: .56em;
right: .06em;
position: absolute;
z-index: 1;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pin_ncard_cont:after {
content: '';
width: 1.55em;
height: 1.55em;
background: #FFFFFF;
display: block;
bottom: -.1em;
right: -.1em;
position: absolute;
z-index: 1;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%);
}

.pin_ncard_cont > P  {
   line-height: 1.25;
   letter-spacing: -.01em;
}

.pin_ncard_cont .pin_ncard {
text-align: right;
}

.pin_ncard_cont .pin_ncard SMALL {
font-size: .65em;
color: #a9c49f;
display: inline-block;
padding: 0 .7em 1em;
border-left: 1px solid #b5df86;
margin-left: 1em;
}

.pin_ncard_cont .pin_ncard STRONG {
font-family: "Barlow Condensed", sans-serif;
font-style: italic;
font-weight: 600;
font-size: .85em;
}
  

.btn_pinfo:HOVER {
display: inline-block; 
background: #fff; 
color: #4cbebb; 
text-decoration: none;
padding: 5px 14px 11px; 
border:1px solid transparent;
border-bottom: 3px solid #c6efef;
border-right: none;
}

.seo-masked-title {
text-transform:uppercase;
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: 3.2em;
color: #17BEBB;
margin: 1em 0 .75em;
letter-spacing: 0em;
line-height: 1.1;
position: relative;
}

.seo-masked-title {
position: relative;
width: 100%;
max-height: 2.22em;
margin: -.1em auto 0;
padding: 0;
font-family: "Barlow Condensed", sans-serif;
font-weight: 900;
font-size: 10em;
text-transform: uppercase;
line-height: .73;
text-align: left;
letter-spacing: 0;
box-sizing: border-box;
word-spacing: -.2em;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-break: anywhere;
}

.seo-masked-title span::after {
display: block;
position: absolute;
top: 21em;
left: 30em;
color: #FFF;
font-size: .08em;
z-index: 4;
letter-spacing: .01em;
word-spacing: normal;
font-weight: 400;
text-transform: none;
font-style: italic;
}

.logo {
position: absolute;
top: .15em;
left: 0;
padding: 1em;
max-width: 2em;
max-height: 2em;
overflow: hidden;
z-index: 13;
color: transparent !important;
line-height: 0;
box-sizing: border-box;
background-color: #FFF;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-mask-image: url(../image/logo_egeszsegugyibiztositas_t.svg);
mask-image: url(../image/logo_egeszsegugyibiztositas_t.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: .2em;
mask-position: .2em;
-webkit-mask-size: cover;
mask-size: cover;
 }


.seo-masked-title span {
display:block; 
position:relative; 
}

.seo-masked-title span::before {
content: '';
display: block;
width: 100%;
height: 100%;
max-height: 2.22em;
position: absolute;
top: 0;
z-index: 1;
background-size: cover;
background-position: top;
}

H1.bg-title,
.is H2.bg-title {
display: block;
position: absolute;
top: 0.04em;
left: 50%;
transform: translateX(-50%);
color: #e93f68;
z-index: 1;
font-family: "Barlow Condensed", sans-serif;
font-weight: 900;
font-size: 23em;
text-transform: uppercase;
line-height: 0;
text-align: center;
letter-spacing: -.05em;
box-sizing: border-box;
word-spacing: -.2em;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.is H2.bg-title {
top: -.12em;
}



.seo-masked-title span > strong {
position: relative;
display: inline-block; 
max-height: 2.22em;
width: 100%;
z-index: 4;
background-size: cover;
background-position: top;
color: transparent;
-webkit-background-clip: text;
background-clip: text;;
}

.seo-masked-logo {
position: absolute;
z-index: 5;
width: 100%;
max-height: 2.22em;
margin: 0;
padding: 0;
font-family: "Barlow Condensed", sans-serif;
font-weight: 900;
font-size: 10em;
text-transform: uppercase;
line-height: .73;
text-align: left;
letter-spacing: 0;
box-sizing: border-box;
word-spacing: -.2em;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-break: anywhere;
}

.seo-masked-logo strong {
position: relative;
top: -.73em;
display: block;
width: 100%;
z-index: 4;
color: #FFF;
-webkit-mask-image: url(../image/logo_egeszsegugyibiztositas_b.svg);
mask-image: url(../image/logo_egeszsegugyibiztositas_b.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: .5em;
mask-position: .2em .87em;
-webkit-mask-size: 4em;
mask-size: 2em;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: width .2s !important;
}

.hovered strong { 
width: 200%;
}

nav, 
article,
footer
{
position:relative;
z-index:1;
max-width:1200px;
margin:2em;
}

nav, 
footer
{
z-index:3;
}

footer nav ul {
list-style-type: none;
margin: 0;
padding: 0; 
}

footer nav ul li {
margin: 0 .75em 0 0;
font-size: .85em;
line-height: 1.3;
display: inline;
}


HR {
border-top: 1px dashed #17BEBB;
border-bottom: none;
}

.slim {
font-weight:100 !important;
}

.semi {
font-weight:400;
}


.is H1 {
font-weight: 800;
font-size: 3.2em;
color: #17BEBB;
margin: 1.75em 0 .75em;
letter-spacing: 0em;
line-height: 1.1;
font-family: "Barlow Condensed", sans-serif;

}

H3 .mso,
.is H3 .mso { font-size: 3em;}


menu {
list-style: none;
margin: 0 0 0 -1em;
display: flex; 
align-items: flex-end; 
padding: 0;
}

menu li {
display: inline-block;
position: relative;
border-bottom: .3em solid #e93f68;
margin: 0 -.2em; 
transition: transform 0.25s ease-out; 
transform-origin: bottom center; 
transform: scale(1); 
}

menu li:last-child {
border-bottom: .1em solid #e93f68;
}

menu li A {
text-transform: uppercase;
font-weight: 800;
font-family: "Barlow Condensed", sans-serif;
display: block;
background: white;
padding: .85em 2em .4em;
margin: 0;
white-space: nowrap;
transition: color 0.2s ease-in-out, transform 0.25s ease-out;
}

menu li.active-page A {
color: #17BEBB;
}

menu li.active-page:HOVER A {
color: #49dedb;
}

menu li.active-page {
   margin: 0 .2em;
}

menu li:hover {
transform: scale(1.3); 
margin: 0 .2em;
z-index: 10; 
border-bottom: .3em solid transparent;
}

menu li:last-child:hover {
border-bottom: .1em solid transparent;
}

menu li:hover + li {
transform: scale(1.15); 
z-index: 5;
margin: 0 -.2em;
}

menu:has(li:hover) li:has(+ li:hover) {
transform: scale(1.15); 
z-index: 5;
}

menu:has(li:hover) li:not(:hover):not(:hover + li):not(:has(+ li:hover)) {
transform: scale(0.9) !important; 
}

menu li:last-child A {
font-size: 1em;
text-transform: capitalize;
background: transparent;
color: #e33d67;
transform: translateY(2.2em);
}

menu li:last-child A:HOVER {
color: #17BEBB;
transform: translateY(2.2em);
}


/**/

menu:not(:has(li:hover)) li.active-page {
transform: scale(1.3); 
z-index: 10; 
border-bottom: .3em solid transparent;
}

menu:not(:has(li:hover)) li.active-page:last-child {
border-bottom: .1em solid transparent;
}

menu:not(:has(li:hover)) li.active-page + li,
menu:not(:has(li:hover)) li:has(+ li.active-page) {
transform: scale(1.15); 
z-index: 5;
}


menu:not(:has(li:hover)) li:not(.active-page):not(.active-page + li):not(:has(+ li.active-page)) {
transform: scale(0.9); 
}


Q { 
font-style: italic;
font-size: 1.62em;
font-weight: 300;
line-height: 1.3;
text-indent: -1em;
display: block;
padding: 0 1.4em;
}




.mso {
font-family: 'Material Symbols Outlined';
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
 font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 24
 
}

.mso_ic,
.mso_hic:before {
content: '';
display: inline-block;
padding: 3em;
margin: 0 0 -2em -2.62em;
background-color: #c6efef;
-webkit-mask-size: cover;
mask-size: cover;
z-index: -1;
position: relative;
}

.mso_hic:before {
position: absolute;
top: -3em;
left: -3em;
margin: 0;
}

.ic_tactic,
.mso_hic.hic_tactic:before {
-webkit-mask-image: url(../image/mso_tactic.svg);
mask-image: url(../image/mso_tactic.svg);
}

.ic_verified_u,
.mso_hic.hic_verified_u:before {
-webkit-mask-image: url(../image/mso_verified_u.svg);
mask-image: url(../image/mso_verified_u.svg);
}

.ic_swipe_v,
.mso_hic.hic_swipe_v:before {
-webkit-mask-image: url(../image/mso_swipe_v.svg);
mask-image: url(../image/mso_swipe_v.svg);
}

.ic_switch,
.mso_hic.hic_switch:before {
-webkit-mask-image: url(../image/mso_switch.svg);
mask-image: url(../image/mso_switch.svg);
}

.ic_mso_medical_infocard,
.mso_hic.hic_mso_medical_infocard:before {
-webkit-mask-image: url(../image/mso_medical_infocard.svg);
mask-image: url(../image/mso_medical_infocard.svg);
}

.ic_mso_home {
-webkit-mask-image: url(../image/mso_home.svg);
mask-image: url(../image/mso_home.svg);
}

.ic_szekhely,
.mso_hic.hic_szekhely:before {
-webkit-mask-image: url(../image/mso_pin_min.svg);
mask-image: url(../image/mso_pin_min.svg);
}

.ic_mukodesiterulet,
.mso_hic.hic_mukodesiterulet:before {
-webkit-mask-image: url(../image/mso_map_pin_min.svg);
mask-image: url(../image/mso_map_pin_min.svg);
}


.ic_tel,
.mso_hic.hic_tel:before {
-webkit-mask-image: url(../image/mso_phone_min.svg);
mask-image: url(../image/mso_phone_min.svg);
}

.ic_mail,
.mso_hic.hic_mail:before {
-webkit-mask-image: url(../image/mso_mail_min.svg);
mask-image: url(../image/mso_mail_min.svg);
}

.hic_mso_medical_infocard .alp_st {
font-size: .45em;
font-weight: 100;
display: block;
margin-top: .55em;
line-height: 1.35;
}

.hashtagz {
font-size: .45em;
font-weight: 100;
}

.adlp_ic {
content: '';
display: inline-block;
padding: .65em;
margin: 0;
background-color: #4cbebb;
-webkit-mask-size: cover;
mask-size: cover;
z-index: 0;
position: relative;
}


.breadcrumb-container UL {
list-style-type: none;
font-size: .75em;
font-family: "Barlow Condensed", sans-serif;
color: #34c0c2;
font-weight: 700;
padding: 0;
}

.breadcrumb-container LI {
margin:.2em 0;
position: relative;
}

.breadcrumb-container LI:first-child A {
color: transparent;
}

.breadcrumb-container .mso_ic {
padding: 1em;
position:relative;
margin: 0;
top:0;
left:0;
}

.btn_more_swich {
position:relative; }

.visual-hidden {
display: none !important;
visibility: hidden;
}


.toplista-wrapper { margin: 3em 0; }
   
.toplista-item { display: flex;
align-items: center;
padding: 1.5em 1.5em 1.5em 0;
position: relative;
}

.toplista-item H4 {
margin: 0;
}

.helyezes-szam { font-size: 2em;
font-weight: 100;
color: #17BEBB;
text-align: center;
border-right: 1px solid #ebf2f2;
margin-right: .5em;
padding: 0.5em; }

.ceg-adatok { flex-grow: 1; }
.ceg-nev { font-weight: bold; margin: 0 0 5px 0;}
.ceg-bev { margin-bottom: 10px; }

.stat-doboz { text-align: right; min-width: 140px; }
.csillag-ertek { font-size: 22px; font-weight: bold; color: var(--gold); }
.szavazat-count { font-size: 12px; color: #888; margin-top: 2px; }

.badge { display: inline-block; padding: 3px 8px; font-size: 11px; border-radius: 4px; background: #eef2f2; color: var(--primary); font-weight: 600; }
.badge-helyszin { background: #e3ecec; }

.ertekeles-box {
border-top: .3em solid #c9efef;
border-bottom: .3em solid #c9efef;
border-radius: 1em;
padding: .5em 1em 2.5em;
margin-top: 1.25em;
}
.kriterium-sor {
display: flex;
justify-content: space-between;
align-items: center;
padding: .25em 0;
border-bottom: 1px solid #c6efef;
}

.velemeny-poszt {
background: #fff;
border: 1px solid #c9efef;
padding: 1.25em;
margin: 1.25em 0;
border-radius: .25em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


.kriterium-sor:last-child {
border-bottom: 1px solid transparent;
}

.kriterium-nev { font-size: 14px; font-weight: 600; }
.csillag-radiok { display: flex; gap: 5px; flex-direction: row-reverse; } 
.csillag-radiok input { display: none; }
.csillag-radiok label { font-size: 20px; color: #ccc; cursor: pointer; transition: color 0.1s; }

.csillag-radiok input:checked ~ label,
.csillag-radiok label:hover,
.csillag-radiok label:hover ~ label { color: #fbbc04; }
.form-control { font-family: Barlow, sans-serif; width: 100%; padding: 8px; margin-top: 5px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.btn-submit { background: #244646; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-submit:hover { background: #1a3333; }


.google-stars-container {
display: inline-flex;
align-items: center;
gap: 4px;
}


.google-rating-num {
   font-weight: 700;
}


.google-stars-outer {
position: relative;
display: inline-block;
line-height: 1;
color: #dadce0;
}


.google-stars-outer::before {
content: "★★★★★";
letter-spacing: 0;
}


.google-stars-inner {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
color: #fbbc04; 
}


.google-stars-inner::before {
content: "★★★★★";
letter-spacing: 0;
}


.google-review-count {
display: inline-block;
margin-right: .35em;
}

.mobsho_block {
display:none;
}

.mobhid_block {
display:block;
}


.ceg-info-panel {
display: flex;
gap: 30px;
margin: -6px 0 0;
flex-wrap: wrap;
background: #ffffff;
border: 1px solid #dddddd;
padding: 2em 1.25em 1.25em;
border-radius: 6px;
border-top-left-radius: 0;
border-top-right-radius: 0;

}


.ceg-info-panel H3 {
color: #17bebb;
margin-top: 0;
border-bottom: 1px solid #b5eae9;
font-family: "Barlow Condensed", sans-serif;
margin: 0 0 .25em 0;
padding: .6em 0;
font-size: .85em;
text-transform: uppercase;
font-weight: 600;
color: #4cbebb;
display: flex; 
justify-content: space-between; 
align-items: center; 
flex-wrap: wrap; gap: 10px;
}

.ceg-info-panel .cont_mukodesiterulet {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
background: #b5eae942;
padding: 10px;
border-radius: 4px;
border-left: 3px solid #4cbebb;
}


@media screen and (max-width: 890px) {
menu {
list-style: none;
margin: 0;
flex-direction: column;
align-items: flex-end;
}

.breadcrumb-container {
position: absolute;
top: 0;
max-width: calc(100% - 10em);
}

nav {
 margin: 2em 2em 5em;
}

Q {
font-size: 1.32em;
font-weight: 300;
line-height: 1.3;
text-indent: 0;
padding: 0;
}

.mobsho_block {
display:block;
}

.mobhid_block {
display:none;
}

.is H1 {
margin: 1em 0 1em;
}

.is H3 {

}

.t_btn {
margin: 3em 0 3em 2em;
max-width: 11em;
line-height: 1.34;
}

H3 B,
.is H1 {
display:block;
}

.mso_ic {
position: absolute;
top: -3em;
left: -3em;
margin: 0;
}

}

@media screen and (max-width: 480px) {
h1.seo-masked-title::after,
.is h2.seo-masked-title::after {
  
-webkit-mask-position: center .54em;
mask-position: center .54em;
-webkit-mask-size: 4em;
mask-size: clamp(231px, 11vw, 112px);
}

.logo {
top: .52em;
left: calc(50% - .2em);
transform: translateX(-50%);
padding: clamp(115px, 11vw, 112px);
}

nav, article, footer {
min-width: 266px;
margin: 2em 1em;
}


}


/* --- SZAVAZÁS --- */

.modal-overlay {
display: none; 
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
/* JAVÍTÁS: Ha az ablak mégis túl nagy lenne, a háttér is görgessen */
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
}

.modal-overlay.active {
display: flex;
}

.modal-box {
background: #ffffff;
width: 100%;
max-width: 550px;
padding: 30px;
border-radius: 12px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
animation: modalBeuszas 0.3s ease-out;

/* JAVÍTÁS ASZTALI NÉZETRE: Korlátozzuk a magasságot és flexbox-szá alakítjuk */
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}

/* JAVÍTÁS: A form kitölti a helyet és flexboxként működik */
#multi-step-form {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden; /* Megakadályozza, hogy a form kiugorjon a dobozból */
}

/* JAVÍTÁS: Ez a legfontosabb rész! Csak az aktív lépés tartalma görgethető belsőleg */
.form-step.active {
display: block;
overflow-y: auto;
flex-grow: 1;
padding-right: 5px; /* Kis hely a görgetősávnak, hogy ne takarja a csillagokat */
}

@keyframes modalBeuszas {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.modal-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: #999;
cursor: pointer;
transition: color 0.2s;
z-index: 10; /* JAVÍTÁS: Mindig a görgetősáv felett maradjon */
}
.modal-close:hover {
color: #333;
}

.modal-title {
margin: 0 0 25px 0;
font-size: 18px;
color: #244646;
font-weight: bold;
text-align: center;
flex-shrink: 0; /* JAVÍTÁS: Nem mehet össze, ha kevés a hely */
}

.step-progress {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 0 10px;
flex-shrink: 0; /* JAVÍTÁS: Nem mehet össze, ha kevés a hely */
}

.step-dot {
width: 32px;
height: 32px;
background: #eee;
color: #666;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}

.step-dot span {
position: absolute;
top: 38px;
font-size: 11px;
white-space: nowrap;
color: #888;
font-weight: normal;
}

.step-dot.active {
background: #244646;
color: #fff;
}
.step-dot.active span {
color: #244646;
font-weight: bold;
}

.step-line {
flex-grow: 1;
height: 2px;
background: #eee;
margin: 0 10px;
position: relative;
top: 0px;
z-index: 1;
}


.form-step {
display: none;
}

.form-uzenet.on {
margin: 0;
padding: 0;
text-align: left;
font-weight: bold;
color: #244646;
font-size: .65em;
}

.form-uzenet.on {
margin: 1.25em 0 1.25em 1.25em;
padding: .25em .85em;
border-left: .45em solid #e33d67;
}

.step-label {
display: block;
font-weight: bold;
margin: 1.25em 0 .25em;
font-size: 14px;
}

.kriteriumok-kontener {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 auto;
max-width: 17em;
}

.kriterium-sor {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #eee;
}

.szoveg-kontener textarea {
width: 100%;
height: 160px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
resize: none;
}

.nev-kontener input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
font-size: 14px;
}

.modal-navigation {
margin-top: 30px;
display: flex;
justify-content: space-between;
gap: 15px;
flex-shrink: 0; 
}

.btn-nav {
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
box-sizing: border-box;
}

.btn-prev {
background: #f0f0f0;
color: #555;
}
.btn-prev:hover { background: #e0e0e0; }

.btn-next, .btn-submit {
background: #244646;
color: #fff;
flex-grow: 1; 
}
.btn-next:hover, .btn-submit:hover { background: #1b3535; }

.btn-primary-large {
position: relative;
background: #FFF;
color: #e93f68;
text-transform: uppercase;
font-weight: 800;
font-family: "Barlow Condensed", sans-serif;
padding: 0;
border: none;
border-radius: .4em;
font-size: 1em;
cursor: pointer;
box-shadow: 0 0px 0px .4em rgb(198 239 239);
transition: background 0.2s;
}

.btn-primary-large B {
position: relative;
background: #FFF;
display:block;
z-index:2;
padding: .65em 1.55em;
border-radius: .4em;
}

.btn-primary-large.tapasz B:after {
content:'Ossza meg Ön is tapasztalatait!';
display:block;
font-weight: 500;
text-transform: none;
font-style: italic;
}

.btn-primary-large:after {
width: 1em;
height: 1em;
background: rgb(198 239 239);
display: block;
content: '';
left:1.55em;
bottom: -1em;
position: absolute;
z-index: 1;
clip-path: polygon(0 0, 0% 100%, 75% 0);
transform:translateY(0);
transition: transform 0.1s ease-in-out;
z-index:1;
}

.btn-primary-large:hover {
color: #17BEBB;
}

.btn-primary-large.tapasz:hover B:after {
content:'Tapasztalat megosztása ...';
}


.btn-primary-large:hover:after {
transform:translateY(-1em);
}

@media (max-width: 575px) {
.modal-overlay {
padding: 0;
}

.modal-box {
height: 100%;
max-height: 100%;
border-radius: 0;
padding: 20px;
}

.modal-navigation {
margin-top: auto; 
padding-top: 15px; 
padding-bottom: env(safe-area-inset-bottom, 10px);
}

.step-dot span {
display: none;
}
}