/* ==========================================================================
   ELONY RENDSZER - egyseges design-rendszer
   Forras: Elony_Rendszer_HTML_designcsomag_v4 (101 kepernyo kozos stiluslapja)
   Ez a fajl ket reszbol all:
     1. DESIGN-RENDSZER  - a tervezoi csomagbol valtozatlanul atvett alap
     2. ELES UZEMI RETEG - reszponzivitas, fokusz-allapotok, hianyzo komponensek
   A markaszinek a :root tokenekben vannak, azokat kell modositani.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN-RENDSZER (tervezoi csomag)
   ========================================================================== */
:root{
 --blue:#0357B1; --blue2:#023E7D; --yellow:#F2B705; --ink:#33404F;
 --muted:#667587; --bg:#F7F9FC; --soft:#F1F4F8; --line:#DCE3EA; --white:#fff;
 --green:#176B36; --greenbg:#E7F6EC; --amber:#7A5200; --amberbg:#FFF4D6;
 --red:#A12828; --redbg:#FDE8E8; --info:#034B91; --infobg:#E8F2FC;
 --shadow:0 6px 22px rgba(25,45,70,.075);
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);font-family:Arial,"Segoe UI",sans-serif;color:var(--ink)}
body{font-size:16px;line-height:1.42} button,input,select,textarea{font:inherit}
.logo-original{display:block;object-fit:contain;object-position:center;background:#0357B1;filter:none!important;opacity:1!important;transform:none!important;clip-path:none!important;border-radius:0!important;box-shadow:none!important}
.icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn{height:44px;padding:0 18px;border-radius:7px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;cursor:default;white-space:nowrap}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue2)}
.btn.accent{background:var(--yellow);color:#26313e}.btn.secondary{background:#fff;border-color:var(--blue);color:var(--blue)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn.danger{background:#fff;border-color:#e3a5a5;color:var(--red)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:700}
.badge.green{background:var(--greenbg);color:var(--green)}.badge.amber{background:var(--amberbg);color:var(--amber)}.badge.red{background:var(--redbg);color:var(--red)}.badge.blue{background:var(--infobg);color:var(--info)}.badge.gray{background:#edf0f3;color:#566474}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px rgba(25,45,70,.055)}
.field{display:flex;flex-direction:column;gap:7px}.field label{font-weight:700;font-size:14px;color:#405064}.field input,.field select,.field textarea{height:44px;border:1px solid #ccd6e0;border-radius:7px;background:#fff;padding:0 13px;color:#33404f}.field textarea{height:105px;padding-top:12px;resize:none}
.muted{color:var(--muted)}.blue{color:var(--blue)}.yellow{color:var(--yellow)}
.h1{font-size:46px;line-height:1.08;margin:0 0 18px;color:#173958;letter-spacing:-1.1px}.h2{font-size:30px;line-height:1.2;margin:0;color:#173958}.h3{font-size:20px;margin:0;color:#233c54}

/* Public */
.public-shell{width:100vw;min-height:100vh;background:#fff;position:relative;overflow:hidden}
.public-header{height:74px;display:flex;align-items:center;padding:0 32px;border-bottom:1px solid #e5eaf0;background:#fff;gap:30px}
.public-header .logo-original{width:96px;height:62px;flex:0 0 auto}
.public-nav{display:flex;align-items:center;gap:20px;flex:1;justify-content:center}.public-nav span{font-size:13.5px;color:#34485c;font-weight:600}.public-nav .active{color:var(--blue);position:relative}.public-nav .active:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--blue);border-radius:2px}
.header-actions{display:flex;gap:10px;align-items:center}.header-actions .search{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#253d56}
.hero{height:305px;background:linear-gradient(105deg,#eef6ff 0%,#fff 49%,#fff7dd 100%);display:grid;grid-template-columns:.96fr 1.04fr;position:relative;overflow:hidden}
.hero-copy{padding:38px 50px}.hero-copy p{font-size:17px;color:#536578;max-width:500px;margin:0 0 22px}.hero-actions{display:flex;gap:12px}
.hero-art{position:relative;overflow:hidden;background:#fff}.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.hero-art:after{content:"";position:absolute;left:-70px;top:54px;width:250px;height:250px;border:24px solid rgba(242,183,5,.20);border-radius:50%;pointer-events:none}
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 32px}.quick{padding:15px;display:flex;gap:14px;align-items:flex-start}.quick .qicon{width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}.quick h3{font-size:16px;margin:0 0 5px}.quick p{font-size:13px;margin:0;color:var(--muted)}.quick a{font-size:13px;color:var(--blue);font-weight:700;display:block;margin-top:7px}
.section{padding:6px 32px 24px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-head h2{font-size:22px;margin:0;color:#183952}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.offer-card{overflow:hidden;position:relative}.offer-card .img{height:125px;background:#eef2f6 center/cover no-repeat;position:relative}.offer-card .heart{position:absolute;right:9px;top:9px;background:#fff;border:1px solid #d8dee8;color:var(--blue);width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}.offer-card .body{padding:12px}.offer-card small{color:var(--blue);font-weight:700}.offer-card h3{font-size:15px;margin:5px 0 2px}.offer-card .partner{font-size:12px;color:var(--muted)}.price{font-size:19px;color:#d88a00;font-weight:800;margin-top:8px}.old-price{text-decoration:line-through;font-size:12px;color:#7a8794;margin-right:6px}.offer-footer{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:11px;color:#647484}.mini-link{padding:6px 9px;border:1px solid #b9cbe0;border-radius:6px;color:var(--blue);font-weight:700}
.public-footer{height:112px;background:linear-gradient(110deg,#033f82,#0357B1);color:#fff;padding:18px 32px;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:26px}.public-footer .logo-original{width:105px;height:68px}.public-footer h4{font-size:13px;margin:0 0 8px}.public-footer p,.public-footer span{font-size:11px;display:block;opacity:.9;margin-bottom:5px}
/* Generic public lists */
.list-hero{padding:28px 36px 22px;background:linear-gradient(105deg,#edf6ff,#fff9df);border-bottom:1px solid #e3eaf2}.list-hero .h1{font-size:38px}.list-hero p{margin:0;color:var(--muted);font-size:17px}.content-wide{padding:22px 36px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}.searchbox{height:46px;background:#fff;border:1px solid #cbd5df;border-radius:9px;display:flex;align-items:center;gap:9px;padding:0 14px;flex:1;color:#7a8793}.toolbar select{height:46px;border:1px solid #cbd5df;border-radius:9px;padding:0 12px;background:#fff;color:#405064}.filter-chips{display:flex;gap:9px;margin-bottom:18px}.chip{border:1px solid #cbd5df;border-radius:999px;padding:8px 12px;background:#fff;color:#4f6072;font-size:13px}.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.grid-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.partner-card{padding:16px;display:flex;flex-direction:column;gap:11px}.partner-thumb{height:96px;border-radius:10px;background:linear-gradient(135deg,#ddeeff,#fce7b6);position:relative}.partner-thumb:before{content:"";position:absolute;width:64px;height:64px;border-radius:16px;background:#fff;left:17px;top:16px;box-shadow:0 3px 10px #0001}.partner-thumb:after{content:"";position:absolute;width:28px;height:28px;border:8px solid var(--yellow);border-radius:50%;left:35px;top:29px}.partner-card h3{font-size:17px;margin:0}.partner-card p{font-size:13px;color:var(--muted);margin:0}.loc{display:flex;align-items:center;gap:6px;font-size:13px;color:#536476}.partner-actions{display:flex;gap:8px;margin-top:auto}.partner-actions .btn{height:38px;padding:0 12px;font-size:13px;flex:1}
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.event-card{display:grid;grid-template-columns:82px 1fr;overflow:hidden}.datebox{background:var(--blue);color:#fff;padding:18px 10px;text-align:center}.datebox b{font-size:30px;display:block}.datebox span{font-size:13px;text-transform:uppercase}.event-body{padding:16px}.event-body h3{font-size:17px;margin:0 0 7px}.event-body p{font-size:13px;color:var(--muted);margin:3px 0}.event-body .btn{height:38px;margin-top:10px;font-size:13px}
/* Details */
.detail-wrap{padding:28px 50px;display:grid;grid-template-columns:1.15fr .85fr;gap:26px}.gallery{display:grid;grid-template-columns:1fr 120px;gap:12px}.main-photo{height:380px;border-radius:16px;background:linear-gradient(135deg,#f2d3dc,#f6f1d4 50%,#a7d0e8);position:relative}.main-photo:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.65);left:70px;top:65px}.thumbs{display:flex;flex-direction:column;gap:10px}.thumb{height:86px;border-radius:10px;background:linear-gradient(135deg,#cfe4f4,#f9d18a)}.thumb:nth-child(2){background:linear-gradient(135deg,#ffdce8,#e4c4e3)}.thumb:nth-child(3){background:linear-gradient(135deg,#adc6d8,#233a58)}.detail-card{padding:24px}.detail-card h1{font-size:30px;margin:0 0 7px}.detail-card .partner-name{color:var(--blue);font-weight:700}.price-box{background:#fff7d9;border:1px solid #f0d276;border-radius:12px;padding:16px;margin:18px 0;display:grid;grid-template-columns:1fr 1fr}.price-box small{display:block;color:#6e7780}.price-box b{font-size:26px}.price-box .adv b{color:#c98100}.detail-card ul{padding-left:20px;color:#556677}.detail-card li{margin:6px 0}.sticky-actions{display:flex;gap:10px;margin-top:20px}.sticky-actions .btn{flex:1}.info-tabs{padding:0 50px 30px}.tabs{display:flex;border-bottom:1px solid var(--line);gap:22px}.tabs span{padding:12px 4px;font-weight:700;color:#627285}.tabs .active{color:var(--blue);border-bottom:3px solid var(--blue)}.tab-body{padding:18px 0;font-size:15px;color:#536476;max-width:900px}
/* Landing */
.landing{padding:42px 58px}.landing-top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.landing-art{height:330px;border-radius:24px;background:linear-gradient(135deg,#cde9ff,#fff3bf);position:relative;overflow:hidden}.landing-art:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:28px solid rgba(242,183,5,.55);right:40px;top:48px}.landing-art:after{content:"";position:absolute;width:250px;height:130px;border-radius:20px;background:var(--blue);right:105px;top:120px;box-shadow:0 18px 25px #003b7950}.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.benefit{padding:20px}.benefit .qicon{width:48px;height:48px;background:var(--blue);color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center}.benefit h3{font-size:17px;margin:12px 0 6px}.benefit p{font-size:14px;color:var(--muted);margin:0}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.plan{padding:20px;position:relative}.plan.featured{border:2px solid var(--yellow);transform:translateY(-5px)}.plan h3{margin:0 0 7px}.plan .cost{font-size:25px;color:var(--blue);font-weight:800}.plan ul{padding-left:18px;font-size:14px;color:#556677}.plan .btn{width:100%}
/* Auth */
.auth-shell{width:100vw;height:100vh;display:grid;grid-template-columns:42% 58%;background:#fff}.auth-brand{background:linear-gradient(145deg,#023E7D,#0357B1);position:relative;padding:50px;color:#fff;overflow:hidden}.auth-brand .logo-original{width:210px;height:140px}.auth-brand h1{font-size:38px;margin:35px 0 10px}.auth-brand p{font-size:18px;max-width:430px;opacity:.9}.auth-brand:after{content:"";position:absolute;width:380px;height:380px;border:38px solid rgba(242,183,5,.75);border-radius:50%;right:-110px;bottom:-110px}.auth-main{display:flex;align-items:center;justify-content:center;padding:42px}.auth-card{width:510px}.auth-card h2{font-size:32px;margin:0 0 8px;color:#173958}.auth-card p{color:var(--muted);margin:0 0 24px}.auth-form{display:grid;gap:15px}.auth-form .btn{width:100%}.divider{display:flex;align-items:center;gap:12px;color:#8793a0;font-size:13px}.divider:before,.divider:after{content:"";height:1px;background:#d8dee6;flex:1}.checkline{display:flex;justify-content:space-between;font-size:14px}.google{height:46px;border:1px solid #cbd5df;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#3e4d5d;background:#fff}
/* Wizard */
.wizard-shell{width:100vw;height:100vh;background:#f4f7fa;padding:24px 44px}.wizard-top{height:70px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;padding:0 22px;gap:22px}.wizard-top .logo-original{width:100px;height:60px}.steps{display:flex;align-items:center;flex:1;justify-content:center}.step{display:flex;align-items:center;gap:8px;color:#738193;font-weight:700;font-size:14px}.step i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e7edf3;font-style:normal}.step.active{color:var(--blue)}.step.active i{background:var(--blue);color:#fff}.step.done{color:var(--green)}.step.done i{background:var(--greenbg);color:var(--green)}.step-line{height:2px;background:#d9e0e8;width:60px;margin:0 9px}.wizard-card{margin:20px auto 0;max-width:1060px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 32px;box-shadow:var(--shadow)}.wizard-card h1{font-size:28px;margin:0 0 6px}.wizard-card>p{margin:0 0 20px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}.form-grid .full{grid-column:1/-1}.upload-box{height:110px;border:2px dashed #b8c7d7;border-radius:11px;background:#f8fafc;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#667587}.wizard-actions{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between}.wizard-actions>div{display:flex;gap:10px}
/* Mobile */
.mobile-page{width:430px;min-height:932px;background:#f7f9fc;position:relative;overflow:hidden}.mobile-head{height:74px;background:#fff;border-bottom:1px solid #dfe6ee;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.mobile-head .logo-original{width:92px;height:60px}.mobile-head .menu-btn{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#173958}.mobile-content{padding:18px 16px 88px}.mobile-hero{background:linear-gradient(135deg,#e8f4ff,#fff6d9);border-radius:12px;padding:20px;position:relative;overflow:hidden}.mobile-hero h1{font-size:30px;line-height:1.1;margin:0 0 12px;color:#173958}.mobile-hero p{font-size:15px;color:#586a7b}.mobile-hero .btn{width:100%;margin-top:8px}.mobile-cards{display:grid;gap:10px;margin-top:14px}.mobile-quick{padding:14px;display:flex;align-items:center;gap:13px}.mobile-quick .qicon{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}.mobile-quick h3{font-size:15px;margin:0 0 3px}.mobile-quick p{font-size:12px;margin:0;color:var(--muted)}.mobile-section-title{font-size:19px;margin:22px 0 10px}.mobile-offer{overflow:hidden}.mobile-offer .img{height:150px;background:#eef2f6 center/cover no-repeat}.mobile-offer .body{padding:14px}.mobile-offer h3{margin:4px 0;font-size:17px}.mobile-bottom{position:absolute;bottom:0;left:0;right:0;height:72px;background:#fff;border-top:1px solid #dfe5ec;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 5px}.mobile-bottom .navitem{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-size:10px;color:#657486}.mobile-bottom .navitem.active{color:var(--blue);font-weight:700}.mobile-bottom .icon{width:21px;height:21px}
.qr-shell{width:430px;min-height:932px;background:linear-gradient(180deg,#edf6ff,#fff 45%);padding:28px 18px;text-align:center;position:relative}.qr-shell .logo-original{width:150px;height:100px;margin:0 auto 16px}.qr-shell h1{font-size:28px;color:#173958;margin:8px 0}.qr-shell p{color:var(--muted);font-size:16px}.qr-code{width:185px;height:185px;margin:22px auto;background:repeating-conic-gradient(#1d3047 0 25%,#fff 0 50%) 0/24px 24px;border:14px solid #fff;box-shadow:0 4px 18px #0002}.qr-buttons{display:grid;gap:12px;margin-top:24px}.qr-buttons .btn{height:58px;width:100%;font-size:17px}.status-panel{padding:28px 20px;border-radius:18px;margin:24px 0;text-align:center}.status-panel.green{background:var(--greenbg);color:var(--green)}.status-panel.red{background:var(--redbg);color:var(--red)}.status-panel .big-check{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}.status-panel .big-check .icon{width:38px;height:38px}.status-panel h2{font-size:24px;margin:0 0 5px}.owner-card{padding:18px;text-align:left}.owner-card .row{display:flex;justify-content:space-between;border-bottom:1px solid #e6ebf0;padding:12px 0}.owner-card .row:last-child{border:0}.checkin-search{height:56px;border:2px solid var(--blue);border-radius:12px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;text-align:left}.checkin-search .icon{color:var(--blue)}.guest-card{padding:16px;margin-top:14px;text-align:left;display:flex;align-items:center;gap:13px}.guest-avatar{width:50px;height:50px;border-radius:50%;background:#d6e9f7;color:var(--blue);display:flex;align-items:center;justify-content:center}.guest-card h3{font-size:16px;margin:0}.guest-card p{font-size:13px;margin:3px 0;color:var(--muted)}
/* Internal app */
.app-shell{width:100vw;height:100vh;display:flex;background:var(--bg);overflow:hidden}.sidebar{width:232px;background:linear-gradient(180deg,#023E7D,#024b99);color:#fff;display:flex;flex-direction:column}.sidebar .brand{height:86px;padding:6px 14px;border-bottom:1px solid rgba(255,255,255,.15)}.sidebar .logo-original{width:120px;height:74px;margin:auto}.side-scroll{padding:15px 12px;flex:1;overflow:hidden}.side-group-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.6;margin:17px 10px 7px}.side-item{height:40px;border-radius:6px;padding:0 12px;display:flex;align-items:center;gap:11px;font-size:13px;color:#e5eff9;margin-bottom:4px}.side-item.active{background:#0c68c6;color:#fff;font-weight:700}.side-item .icon{width:18px;height:18px}.side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;display:flex;align-items:center;gap:9px}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:64px;background:#fff;border-bottom:1px solid #dfe6ed;display:flex;align-items:center;padding:0 24px;justify-content:space-between}.top-left{display:flex;align-items:center;gap:15px}.top-left h1{font-size:23px;margin:0;color:#213c55}.crumb{font-size:12px;color:#7a8793}.top-actions{display:flex;align-items:center;gap:10px}.circle-btn{width:40px;height:40px;border:1px solid #d5dee7;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:#415267}.user-circle{width:40px;height:40px;border-radius:50%;background:#173958;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.app-content{padding:16px 18px;overflow:hidden;flex:1}.contextbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.location-switch{height:42px;border:1px solid #cbd5df;border-radius:8px;background:#fff;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:13px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.stat-card{padding:14px}.stat-card span{font-size:12px;color:#637386}.stat-card b{font-size:25px;color:#1d4e79;display:block;margin-top:5px}.stat-card small{font-size:11px;color:#6f7c88}.dashboard-grid{display:grid;grid-template-columns:1.38fr .62fr;gap:12px;margin-top:12px}.panel{padding:15px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.panel-head h2{font-size:17px;margin:0}.chart{height:205px;position:relative;border-left:1px solid #dfe5ec;border-bottom:1px solid #dfe5ec;background:repeating-linear-gradient(to bottom,transparent 0 39px,#edf1f5 40px)}.chart svg{position:absolute;inset:10px 8px 8px 8px;width:calc(100% - 16px);height:calc(100% - 18px)}.popular-list{display:grid;gap:10px}.popular{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center}.popular .pic{height:50px;border-radius:8px;background:linear-gradient(135deg,#e9cdd8,#f4dbb4)}.popular:nth-child(2) .pic{background:linear-gradient(135deg,#8a2a20,#f1a239)}.popular:nth-child(3) .pic{background:linear-gradient(135deg,#f6d2e3,#e6e8ff)}.popular h3{font-size:13px;margin:0}.popular p{font-size:11px;color:var(--muted);margin:2px 0}.task-list{margin-top:15px}.task{display:flex;align-items:center;padding:12px 0;border-top:1px solid #e6ebf0;font-size:13px}.task .icon{color:var(--blue);margin-right:10px}.task time{margin-left:auto;color:#7b8794;font-size:11px}
.data-toolbar{display:grid;grid-template-columns:minmax(300px,1fr) 160px 160px 150px auto;gap:9px;margin-bottom:14px}.data-toolbar .searchbox,.data-toolbar select{height:42px}.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}.data-table th{height:40px;background:#f5f7fa;text-align:left;font-size:11px;color:#596b7d;padding:0 12px;border-bottom:1px solid #dbe3eb}.data-table td{height:44px;font-size:12px;padding:0 12px;border-bottom:1px solid #edf1f4}.data-table tr:last-child td{border-bottom:0}.data-table tr.selected{background:#edf6ff}.name-link{color:var(--blue);font-weight:700}.split{display:grid;grid-template-columns:1.22fr .78fr;gap:12px;height:calc(100% - 58px)}.split-left,.split-right{min-width:0}.detail-panel{height:100%;padding:18px;position:relative}.detail-panel h2{font-size:22px;margin:0 0 7px}.detail-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:15px 0}.detail-tabs span{font-size:12px;padding:9px 0;font-weight:700}.detail-tabs .active{color:var(--blue);border-bottom:3px solid var(--blue)}.info-grid{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:12px;margin-top:14px}.info-grid .label{color:#718092}.detail-bottom{position:absolute;left:18px;right:18px;bottom:17px;display:flex;gap:9px}.detail-bottom .btn{height:40px;font-size:12px}
.editor-layout{display:grid;grid-template-columns:1fr 360px;gap:16px;height:100%}.editor-main,.editor-preview{padding:18px}.rich-toolbar{height:42px;background:#f2f6f9;border:1px solid #cbd5df;border-bottom:0;border-radius:8px 8px 0 0;display:flex;align-items:center;gap:6px;padding:0 10px}.tool{width:30px;height:28px;border:1px solid #d5dee7;border-radius:5px;background:#fff;text-align:center;line-height:26px;font-weight:700;color:#536476}.rich-area{height:190px;border:1px solid #cbd5df;border-radius:0 0 8px 8px;padding:14px;color:#536476}.preview-phone{width:290px;height:500px;border:10px solid #203248;border-radius:30px;margin:0 auto;background:#fff;overflow:hidden}.preview-head{height:65px;background:var(--blue);display:flex;align-items:center;justify-content:center}.preview-head .logo-original{width:90px;height:60px}.preview-body{padding:16px;font-size:12px}.preview-body h3{font-size:18px;color:#173958}.preview-cta{height:38px;background:var(--yellow);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;margin-top:14px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.hub-card{padding:20px}.hub-icon{width:48px;height:48px;border-radius:13px;background:#e8f2fc;color:var(--blue);display:flex;align-items:center;justify-content:center}.hub-card h3{font-size:17px;margin:12px 0 6px}.hub-card p{font-size:13px;color:var(--muted);min-height:38px}.hub-card .btn{height:38px;font-size:12px;margin-top:9px}
/* UI kit */
.ui-shell{width:100vw;height:100vh;background:#f7f9fc;padding:28px}.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ui-panel{padding:20px}.ui-panel h2{font-size:19px;margin:0 0 15px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatch{height:82px;border-radius:10px;border:1px solid #d5dde6;padding:8px;display:flex;align-items:end;font-size:10px;font-weight:700}.buttons{display:flex;gap:9px;flex-wrap:wrap}.status-row{display:flex;gap:9px;flex-wrap:wrap}.fields-demo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.type-row{display:grid;grid-template-columns:100px 1fr;align-items:baseline;border-bottom:1px solid #edf1f4;padding:6px 0}.type-row b{color:#173958}
/* Email */
.email-shell{width:100vw;height:100vh;background:#e9eef3;padding:30px}.email-canvas{width:680px;margin:0 auto;background:#fff;min-height:820px;box-shadow:var(--shadow);border-radius:12px;overflow:hidden}.email-head{height:120px;background:var(--blue);display:flex;align-items:center;justify-content:center}.email-head .logo-original{width:160px;height:105px}.email-body{padding:28px 34px}.email-body h1{font-size:28px;color:#173958}.email-summary{background:#fff6d8;border:1px solid #f0d27a;border-radius:12px;padding:18px;margin:18px 0}.email-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.email-card{padding:14px;border:1px solid var(--line);border-radius:10px}.email-card small{color:var(--muted)}.email-card b{display:block;font-size:24px;color:var(--blue);margin-top:6px}.email-table{width:100%;border-collapse:collapse;margin-top:20px}.email-table th,.email-table td{font-size:12px;text-align:left;padding:10px;border-bottom:1px solid #e5eaf0}.email-table th{background:#f2f6f9}.email-foot{background:#f2f6f9;text-align:center;padding:18px;font-size:11px;color:#6d7b89}

.hero-photo{background:#fff}
.offer-card.photo-1 .img{background-image:url("../assets/offer_beauty.png")}
.offer-card.photo-2 .img{background-image:url("../assets/offer_brunch.png")}
.offer-card.photo-3 .img{background-image:url("../assets/offer_shoes.png")}
.offer-card.photo-4 .img{background-image:url("../assets/offer_watch.png")}
.mobile-offer .img{background-image:url("../assets/offer_beauty.png")}
.popular:nth-child(1) .pic{background-image:url("../assets/offer_beauty.png");background-size:cover;background-position:center}
.popular:nth-child(2) .pic{background-image:url("../assets/offer_brunch.png");background-size:cover;background-position:center}
.popular:nth-child(3) .pic{background-image:url("../assets/offer_shoes.png");background-size:cover;background-position:center}

/* v2.1 render compatibility and approved montage refinements */
.icon svg{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.mobile-head{height:64px;padding:0 14px}.mobile-head .logo-original{width:92px;height:56px}
.mobile-content{padding:12px 14px 70px}.mobile-hero{padding:16px}.mobile-hero h1{font-size:28px;margin-bottom:8px}.mobile-hero p{font-size:14px;margin:0 0 8px}.mobile-hero .btn{height:44px;margin-top:7px}
.mobile-cards{gap:8px;margin-top:10px}.mobile-quick{padding:10px 12px}.mobile-quick .qicon{width:40px;height:40px;border-radius:9px}.mobile-quick h3{font-size:14px}.mobile-quick p{font-size:11px}.mobile-section-title{font-size:18px;margin:14px 0 8px}.mobile-offer .img{height:118px}.mobile-offer .body{padding:10px}.mobile-bottom{height:62px;padding:5px}
.side-scroll{padding:8px 10px;overflow:hidden}.side-group-title{font-size:8.5px;line-height:1.1;white-space:nowrap;margin:9px 8px 4px}.side-item{height:34px;font-size:11px;margin-bottom:2px;padding:0 10px}.side-item .icon{width:15px;height:15px}.side-foot{padding:9px 12px;font-size:10px}



.detail-bottom{gap:6px}.detail-bottom .btn{padding:0 10px;font-size:11px}


.ui-shell .logo-original{width:150px!important;height:96px!important;flex:0 0 auto}

/* V3 precision and contrast corrections */
html,body{width:100%;height:100%;overflow:hidden}
*{min-width:0}
.card,.panel,.contextbar,.data-toolbar,.toolbar,.topbar,.public-header{min-width:0}
.sidebar,.sidebar *{color:#fff}
.sidebar .icon,.sidebar .side-item .icon,.sidebar .side-foot .icon{color:#fff!important}
.sidebar .icon svg,.sidebar .side-item svg,.sidebar .side-foot svg{stroke:#fff!important}
.side-group-title{color:#b7d5f1!important;opacity:1!important}
.side-item{color:#edf6ff!important}
.side-item.active{color:#fff!important;background:#0B68C8!important}
.side-scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none;padding-bottom:10px}
.side-scroll::-webkit-scrollbar{display:none}
.topbar{padding-left:24px;padding-right:34px;gap:12px;overflow:visible}
.top-left{flex:1;overflow:hidden}.top-left h1,.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{flex:0 0 auto;margin-left:auto;padding-right:8px;gap:8px}
.circle-btn,.user-circle{flex:0 0 36px;width:36px;height:36px}


.data-table{table-layout:fixed}.data-table th,.data-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split,.dashboard-grid,.stats-row,.hub-grid,.editor-layout,.form-grid{align-items:stretch}
.split>* ,.dashboard-grid>* ,.stats-row>* ,.hub-grid>* ,.editor-layout>* ,.form-grid>*{min-width:0}
.btn{line-height:1.15;text-align:center}
.public-header{overflow:hidden}.public-nav{min-width:0}.public-nav span{white-space:nowrap}

.card{position:relative}
/* Grouped/collapsible menu */
.side-group{margin-bottom:8px}.side-group-head{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-radius:7px;color:#b7d5f1;font-size:10px;font-weight:800;letter-spacing:.65px;text-transform:uppercase}
.side-group-head .icon{width:13px;height:13px}.side-group.open .side-group-head{background:rgba(255,255,255,.08);color:#fff}
.side-group-count{font-size:10px;background:rgba(255,255,255,.12);padding:2px 6px;border-radius:999px;color:#fff}
.side-glyph{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;color:#fff!important;font-size:16px;font-weight:700;line-height:1;text-shadow:none}.side-item.active .side-glyph{color:#fff!important}.side-foot .side-glyph{color:#fff!important}
/* New generic components */
.center-page{width:100vw;height:100vh;background:linear-gradient(135deg,#edf6ff,#fff 54%,#fff8dd);display:flex;align-items:center;justify-content:center;padding:48px}
.center-card{width:min(820px,92vw);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:34px;text-align:center}
.center-card .logo-original{width:135px;height:90px;margin:0 auto 18px}.center-card h1{font-size:34px;color:#173958;margin:0 0 12px}.center-card p{font-size:17px;color:var(--muted);max-width:650px;margin:0 auto 22px}
.action-stack{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:20px auto 0}.action-stack .btn{width:100%;height:54px;justify-content:flex-start;padding-left:20px}
.text-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:26px 38px;height:calc(100vh - 74px)}
.text-nav{padding:18px}.text-nav h3{font-size:15px;color:#173958;margin:0 0 12px}.text-nav span{display:block;padding:9px 10px;border-radius:7px;color:#506176;font-size:13px}.text-nav span.active{background:#e8f2fc;color:#0357B1;font-weight:700}
.text-content{padding:26px 30px;overflow:hidden}.text-content h1{font-size:35px;color:#173958;margin:0 0 8px}.text-content h2{font-size:20px;color:#173958;margin:22px 0 8px}.text-content p,.text-content li{font-size:15px;line-height:1.55;color:#4f6071}.text-content .toc-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf1f4;font-size:14px}
.auth-shell{width:100vw;height:100vh;display:grid;grid-template-columns:42% 58%;background:#fff}.auth-brand{background:linear-gradient(145deg,#023E7D,#0357B1);color:#fff;padding:52px;position:relative;overflow:hidden}.auth-brand .logo-original{width:150px;height:100px}.auth-brand h1{font-size:34px;line-height:1.15;margin:42px 0 14px}.auth-brand p{font-size:17px;max-width:420px;opacity:.9}.auth-brand:after{content:"";position:absolute;width:360px;height:360px;border:42px solid rgba(242,183,5,.75);border-radius:50%;right:-130px;bottom:-150px}
.auth-form-area{display:flex;align-items:center;justify-content:center;padding:40px}.auth-card{width:520px;padding:30px}.auth-card h1{font-size:29px;color:#173958;margin:0 0 7px}.auth-card>p{color:var(--muted);margin:0 0 22px}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.auth-grid .full{grid-column:1/-1}.divider{display:flex;align-items:center;gap:10px;color:#8190a0;font-size:12px;margin:16px 0}.divider:before,.divider:after{content:"";height:1px;background:#dfe5eb;flex:1}
.wizard-steps{display:flex;align-items:center;gap:8px;margin:0 0 20px}.wizard-step{display:flex;align-items:center;gap:8px;color:#788797;font-size:12px;font-weight:700}.wizard-step i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9eef3;color:#5a6877;font-style:normal}.wizard-step.active{color:#0357B1}.wizard-step.active i{background:#0357B1;color:#fff}.wizard-line{height:2px;background:#dfe5eb;flex:1}
.form-section{padding:18px;margin-bottom:14px}.form-section h2{font-size:18px;color:#173958;margin:0 0 14px}.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.form-actions>div{display:flex;gap:9px}
.list-shell{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;height:calc(100% - 62px)}.list-only{height:calc(100% - 62px)}
.detail-card-v3{padding:18px;height:100%;overflow:hidden}.detail-card-v3 h2{font-size:22px;color:#173958;margin:0 0 4px}.detail-card-v3 .subtitle{color:var(--muted);font-size:13px}.detail-list{margin-top:16px}.detail-row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f4;font-size:12px}.detail-row span:first-child{color:#718092}.detail-actions{position:absolute;left:18px;right:18px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{padding:16px}.metric small{display:block;color:#6d7d8e}.metric b{font-size:26px;color:#24537e;display:block;margin:8px 0 2px}
.editor-canvas{display:grid;grid-template-columns:260px 1fr 285px;gap:14px;height:calc(100% - 62px)}.tool-panel{padding:16px;overflow:hidden}.tool-panel h3{font-size:15px;color:#173958;margin:0 0 12px}.tool-item{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e0e6ec;border-radius:8px;margin-bottom:8px;background:#fff;font-size:12px}.design-stage{padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage-paper{width:455px;height:640px;background:linear-gradient(145deg,#fff7d5,#e8f2fc);border:1px solid #d8e0e8;box-shadow:0 8px 28px #203a5520;position:relative;overflow:hidden}.stage-item{position:absolute;border:2px dashed #0357B1;padding:8px;background:#fff;border-radius:5px;color:#173958}.prop-row{margin-bottom:12px}.prop-row label{display:block;font-size:11px;font-weight:700;margin-bottom:5px}.prop-row input,.prop-row select{width:100%;height:38px;border:1px solid #cbd5df;border-radius:7px;padding:0 9px}
.mobile-qr{width:430px;height:932px;background:linear-gradient(180deg,#eff7ff,#fff 45%,#fff9df);margin:0 auto;position:relative;padding:20px 18px 80px}.mobile-qr .qr-head{display:flex;align-items:center;justify-content:space-between;height:74px}.mobile-qr .logo-original{width:105px;height:70px}.qr-card{padding:22px;text-align:center}.qr-card h1{font-size:27px;color:#173958;margin:10px 0}.qr-card p{font-size:16px;color:#617183}.qr-status{padding:22px;border-radius:14px;text-align:center;margin-bottom:15px}.qr-status.green{background:#e7f6ec;color:#176b36}.qr-status.red{background:#fde8e8;color:#a12828}.qr-status.amber{background:#fff4d6;color:#7a5200}.qr-status .icon{width:48px;height:48px;margin:auto}.qr-status h2{font-size:24px;margin:9px 0 4px}.qr-bottom{position:absolute;left:18px;right:18px;bottom:18px;font-size:11px;color:#748394;text-align:center}
.email-preview-shell{width:100vw;height:100vh;background:#eef2f6;padding:34px;display:flex;align-items:center;justify-content:center}.email-frame{width:680px;max-height:840px;background:#fff;border-radius:12px;box-shadow:0 12px 35px #203a5520;overflow:hidden}.email-frame .head{background:#0357B1;padding:18px 26px}.email-frame .head .logo-original{width:120px;height:78px}.email-frame .content{padding:25px 28px}.email-frame h1{font-size:26px;color:#173958}.email-frame p{font-size:15px;color:#5f7081}.email-frame .foot{background:#f3f6f9;padding:16px 28px;color:#778695;font-size:11px;text-align:center}

/* ==========================================================================
   ELES UZEMI RETEG
   A fenti design-rendszer makett-celra keszult (fix 1440x900 / 430x932).
   Ez a reteg teszi valodi, gorgetheto, reszponzív es akadalymentes weboldalla.
   ========================================================================== */

/* --- 0. Admin > Torzsadatok > Szinek / Megjelenes altal allithato tokenek ---
   A :root alap-ertekek a design-rendszerbol jonnek (--blue, --yellow, --ink, ...).
   Az itt definialt harom token a fejlec es a lablec hattere, amiket a tervezoi
   csomag fixen kodolt; tokenre bontva ezek is allithatok az admin feluleten.
   A SzinBeallitasService a stiluslap UTAN injektal egy :root felulirast. */
:root {
  --header-bg: #fff;
  --footer-bg-1: #0357B1;
  --footer-bg-2: #0357B1;
  --hero-bg: #EEF6FF;
}

/* --- 1. Keretek feloldasa: a valodi oldal tetszoleges hosszu es gorgetheto --- */
html, body { height: auto; min-height: 100%; overflow: visible; }

.app-shell { width: auto; height: auto; min-height: 100vh; overflow: visible; align-items: stretch; }
.app-main { width: auto; max-width: none; overflow: visible; }
.app-content { padding: 20px 22px 40px; overflow: visible; flex: 1 1 auto; }
.public-shell { width: auto; min-height: 100vh; overflow: visible; display: flex; flex-direction: column; }
.public-shell > main { flex: 1 0 auto; }
.auth-shell { width: auto; height: auto; min-height: 100vh; }
.wizard-shell { width: auto; height: auto; min-height: 100vh; padding: 24px; }
.qr-shell { width: auto; max-width: 520px; min-height: 100vh; margin: 0 auto; }
.mobile-page, .mobile-qr { width: auto; height: auto; min-height: 100vh; overflow: visible; }
.mobile-content { height: auto; overflow: visible; }
.list-shell { height: auto; }
.detail-card-v3 { height: auto; overflow: visible; }
.public-footer { height: auto; }

/* Allando oldalso menu, sajat gorgetessel */
.sidebar { flex: 0 0 232px; position: sticky; top: 0; height: 100vh; }
.side-scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }

/* --- 2. Akadalymentesseg: lathato fokusz mindenhol --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 6px;
}
.side-item:focus-visible, .btn:focus-visible { outline-offset: 3px; }

/* Billentyuzetes ugras a tartalomra */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 3. Valodi gombok es linkek (a makettben div-ek voltak) --- */
.btn { cursor: pointer; text-decoration: none; font-family: inherit; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
a.btn { text-decoration: none; }
.side-item, .navitem, .chip, .mini-link, .name-link { cursor: pointer; text-decoration: none; }
a.side-item, a.navitem, a.name-link, a.mini-link { color: inherit; }
.mini-link, .name-link { color: var(--blue); }
.mini-link:hover, .name-link:hover { text-decoration: underline; }
button.circle-btn, button.tool { cursor: pointer; border: 0; background: none; font: inherit; }

/* --- 4. Uzenetsav (flash) --- */
.flash-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  width: min(460px, calc(100vw - 28px));
  pointer-events: none;
}
.flash-wrap > * {
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(16, 32, 52, .22);
  margin: 0;
  width: 100%;
}
.flash-tunes { opacity: 0; transform: scale(.96); }
.flash-wrap > * { transition: opacity .35s ease, transform .35s ease; }
@media (max-width: 600px) {
  .flash-wrap { width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-wrap > * { transition: none; }
}
.flash {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid; border-left-width: 4px; border-radius: 8px;
  padding: 13px 16px; font-size: 15px; line-height: 1.45;
}
.flash .icon { margin-top: 1px; }
.flash--siker    { background: var(--greenbg); border-color: #b7e0c5; border-left-color: var(--green); color: var(--green); }
.flash--hiba     { background: var(--redbg);   border-color: #efbdbd; border-left-color: var(--red);   color: var(--red); }
.flash--figyelem { background: var(--amberbg); border-color: #ecd08a; border-left-color: var(--amber); color: var(--amber); }
.flash--info     { background: var(--infobg);  border-color: #b9d8f5; border-left-color: var(--info);  color: var(--info); }
.flash strong { font-weight: 700; }

/* --- 5. Urlap: hibaallapot, kotelezoseg, segitoszoveg --- */
.field label .kotelezo { color: var(--red); margin-left: 3px; }
.field .segito { font-size: 13px; color: var(--muted); }
.field.is-hibas input, .field.is-hibas select, .field.is-hibas textarea { border-color: var(--red); background: #fffafa; }
.field.is-hibas input:focus-visible, .field.is-hibas textarea:focus-visible { outline-color: var(--red); }
.mezo-hiba { display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 13px; font-weight: 600; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--soft); color: var(--muted); cursor: not-allowed; }
.field input::placeholder, .field textarea::placeholder { color: #9aa8b8; }

/* --- 6. Lapozo --- */
.lapozo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.lapozo-oldalak { display: flex; align-items: center; gap: 5px; }
.lapozo-oldalak a, .lapozo-oldalak span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.lapozo-oldalak a:hover { border-color: var(--blue); color: var(--blue); }
.lapozo-oldalak .aktiv { background: var(--blue); border-color: var(--blue); color: #fff; }
.lapozo-oldalak .tores { border: 0; background: none; color: var(--muted); min-width: 20px; }
.lapozo-info { color: var(--muted); font-size: 14px; }
.lapozo-meret { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.lapozo-meret select { height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; background: #fff; }

/* --- 7. Modalis ablak / megerosito parbeszed --- */
.modal-hatter {
  position: fixed; inset: 0; background: rgba(20, 36, 56, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal-hatter[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 32, 52, .3);
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px;
}
.modal h2 { margin: 0 0 10px; font-size: 21px; }
.modal p { margin: 0 0 20px; color: var(--muted); }
.modal-gombok { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* --- 8. Ures allapot --- */
.ures-allapot { text-align: center; padding: 48px 24px; color: var(--muted); }
.ures-allapot .ikon-kor {
  width: 62px; height: 62px; border-radius: 50%; background: var(--soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--blue);
}
.ures-allapot h3 { margin: 0 0 7px; font-size: 18px; color: var(--ink); }
.ures-allapot p { margin: 0 auto 18px; max-width: 46ch; }

/* --- 9. Tablazat: kis kepernyon vizszintesen gorgetheto --- */
.tabla-gorgeto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-gorgeto > table { min-width: 720px; }
.data-table { table-layout: auto; width: 100%; }
.data-table td, .data-table th { font-variant-numeric: tabular-nums; }

/* --- 8/b. Hero: a magassag a tartalomhoz igazodjon ---
   A tervezoi csomag fix 305px magassagot + overflow:hidden-t ad a herora. Eles
   szoveggel a tartalom ennel magasabb, ezert a CTA-gombok alja levagodott.
   Most a magassag rugalmas, a min-height megtartja a vizualis sulyt, a hero-photo
   pedig height:100% + object-fit:cover, tehat egyutt no a kerettel. */
/* A tervezoi csomag a herora 105 fokos szinatmenetet (vilagoskek -> feher -> halvany
   sarga) es a kepre egy sarga dekor-karikat (.hero-art:after) tett. Kertre a szekcio
   EGYSEGES vilagoskek hatteret kap - ez a korabbi atmenet bal oldali szine -, es
   minden dekoracios elem lekerul, hogy csak a kep es a szoveg maradjon. */
.hero {
  height: auto; min-height: 330px;
  background: var(--hero-bg);
}
.hero-art { background: transparent; }
.hero-art:after { content: none; display: none; }
.hero-photo { background: transparent; }

.hero-copy { padding: 38px 50px 44px; display: flex; flex-direction: column; justify-content: center; }
.hero-actions { flex-wrap: wrap; }

/* --- Kep-montazs a hero jobb oldalan ---------------------------------
   A hero kepei veletlenszeruen valasztott FEHER kepkeretet kapnak: klasszikus
   perforalt belyeg, passzpartu, lekerekitett vagy ivelt sarku keret.
   MINDEGYIK valtozat kerete korbe egyenletes - ha uj valtozat kerul be, annak is
   annak kell lennie (a korabbi Polaroid keret alul 3,2-szeres savot kapott, ami
   aszimmetrikusnak latszott, ezert kikerult).
   Minden valtozat csak feher - szines keret nincs. A keretvastagsagot es a
   belyeg fogazasat a sablon sorsolja kepenkent (--keret, --lyuk).
   Az arnyekot a KONTENER kapja: a drop-shadow a (maszkolt) alakzat sziluettjet
   koveti, igy minden kep sajat, a keret formajat koveto arnyekot kap. */
.kep-montazs {
  position: relative; width: 100%; height: 100%; min-height: 330px;
  filter: drop-shadow(0 6px 14px rgba(16, 40, 70, .18));
}

.kepkeret {
  --szog: 0deg; --lyuk: 10px; --keret: 12px;
  --top: 0%; --left: 0%; --szel: 50%; --z: 1;
  position: absolute; top: var(--top); left: var(--left); width: var(--szel);
  z-index: var(--z); margin: 0; padding: var(--keret); background: #fff;
  transform: rotate(var(--szog));
}
.kepkeret img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--soft);
}

/* 1. Klasszikus belyeg - perforalt szel.
   1. maszkreteg: korok racsa (round-dal pontosan kiosztva) - ez a fogazas
   2. maszkreteg: tomor teglalap fel fogazasnyival bejjebb - a belso felulet
   A ketto unioja latszik, igy a kulso gyuru csak ott marad meg, ahol kor van. */
.kepkeret.keret-belyeg {
  padding: var(--lyuk);
  -webkit-mask:
    radial-gradient(circle farthest-side, #000 98%, #0000) 0 0 / var(--lyuk) var(--lyuk) round,
    linear-gradient(#000 0 0) 50% / calc(100% - var(--lyuk)) calc(100% - var(--lyuk)) no-repeat;
  mask:
    radial-gradient(circle farthest-side, #000 98%, #0000) 0 0 / var(--lyuk) var(--lyuk) round,
    linear-gradient(#000 0 0) 50% / calc(100% - var(--lyuk)) calc(100% - var(--lyuk)) no-repeat;
}

/* 2. Passzpartu - egyenletes, boseges feher keret */
.kepkeret.keret-passzpartu { padding: calc(var(--keret) * 1.8); }

/* 3. Lekerekitett sarku keret */
.kepkeret.keret-lekerekitett { border-radius: 14px; }
.kepkeret.keret-lekerekitett img { border-radius: 7px; }

/* 4. Ivelt - atlosan eros lekerekites */
.kepkeret.keret-ivelt { border-radius: 42px 8px 42px 8px; }
.kepkeret.keret-ivelt img { border-radius: 32px 4px 32px 4px; }

/* Egyetlen kep eseten kozepre kerul - a meretet a sablon sorsolja, ezert
   itt NEM allitjuk felul a --szel erteket. */
.kep-montazs.egyes .kepkeret {
  --left: 50%;
  transform: translate(-50%, -50%) rotate(var(--szog));
}

/* Domino kep: harom kepnel kevesebb eseten az egyik 75%-nal nagyobb.
   Ekkora szelessegnel a 4:3 arany mar kilogna a keretbol, ezert fekvo
   (3:2) aranyt kap, es fuggolegesen kozepre all - igy teljes egeszeben latszik. */
.kepkeret.nagy { top: 50%; transform: translateY(-50%) rotate(var(--szog)); }
.kepkeret.nagy img { aspect-ratio: 3 / 2; }
.kep-montazs.egyes .kepkeret.nagy {
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--szog));
}

@media (max-width: 1150px) {
  .kep-montazs { min-height: 300px; }
}

/* --- 9/a. Vilagos hatteru logo (feher fejlec/lablec) ---
   A tervezoi csomag `.logo-original`-ja kek hatteret kenyszerit (a kek hatteru
   logofajlhoz keszult). A vilagos valtozat sajat, majdnem feher hatteret hoz,
   ezert ott a kek hatteret ki kell kapcsolni. */
.logo-original.logo-vilagos { background: transparent; }

/* --- 9/b. Publikus fejlec-menu: gombos megjelenes ---
   A tervezoi csomag <span>-eket stilusozott (sima szoveg + alahuzas). Az eles
   oldalon valodi <a> linkek vannak, ezek kapjak meg a gombos kinezetet. */
/* Fejlec-elvalaszto terhatassal: a vonal alatt finom arnyek, igy a fejlec a
   tartalom fole "emelkedik". A z-index kell, hogy az arnyek a tartalomra essen. */
.public-header {
  gap: 18px; position: relative; z-index: 30;
  background: var(--header-bg);
  border-bottom: 1px solid #dbe4ee;
  box-shadow: 0 3px 10px rgba(16, 40, 70, .075), 0 1px 3px rgba(16, 40, 70, .05);
}
.public-nav { gap: 6px; }

/* A tartalom kozvetlenul a vonal alatt kezdodjon (nincs ures elotag). */
.public-shell > main { padding-top: 0; }
.public-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  color: #34485c; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.public-nav a:hover { background: var(--infobg); color: var(--blue); border-color: #cfe0f5; }
.public-nav a.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.public-nav a.active:hover { background: var(--blue2); border-color: var(--blue2); color: #fff; }
.public-nav a.active::after { display: none; }

@media (max-width: 1279px) {
  .public-nav a { padding: 8px 11px; font-size: 13.5px; }
  .public-nav { gap: 4px; }
  .public-header { padding: 0 20px; gap: 12px; }
}
@media (max-width: 1150px) {
  .public-nav a { padding: 8px 9px; font-size: 13px; }
  .public-nav { gap: 2px; }
  .public-header { padding: 0 14px; gap: 8px; }
  .public-header .logo-original { width: 80px; height: 52px; }
  .header-actions .btn { padding: 0 12px; font-size: 13.5px; }
}

/* --- 10. Mobil fejlec-menu (a publikus fejlechez) --- */
.menu-gomb { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }

/* ==========================================================================
   RESZPONZIV RETEG
   Toréspontok: 1024 (asztali), 768 (tablet), 560 (mobil)
   ========================================================================== */

/* --- Tablet es alatta: oldalso menu ikon-savva szukul --- */
@media (max-width: 1023px) {
  .sidebar { flex-basis: 66px; }
  .sidebar .side-item span:not(.icon),
  .sidebar .side-group-title,
  .sidebar .side-group-count,
  .sidebar .side-foot span:not(.icon) { display: none; }
  .sidebar .side-item { justify-content: center; padding: 0; }
  .sidebar .brand .logo-original { width: 52px; height: 40px; }

  .app-content { padding: 16px 14px 32px; }
  .detail-wrap { grid-template-columns: 1fr; padding: 20px; }
  .list-shell { grid-template-columns: 1fr; }
  .split, .editor-layout, .hub-grid { grid-template-columns: 1fr !important; }
  .cards-4, .grid-list { grid-template-columns: repeat(2, 1fr); }
  .data-toolbar { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-art { display: none; }
  .hero-copy { padding: 28px 24px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .public-header { padding: 0 18px; gap: 16px; }
  .section, .content-wide { padding-left: 18px; padding-right: 18px; }
  .public-footer { grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 18px; }
}

/* --- Mobil: oldalso menu felulre kerul, egy oszlop --- */
@media (max-width: 767px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    flex: 0 0 auto; width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; overflow-x: auto;
  }
  .sidebar .brand { height: auto; padding: 8px 12px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.15); }
  .side-scroll { display: flex; flex-direction: row; gap: 4px; padding: 8px; overflow-x: auto; overflow-y: hidden; }
  .side-item { flex: 0 0 auto; margin-bottom: 0; }
  .side-foot { display: none; }

  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px !important; gap: 8px; }
  .crumb { width: 100%; }
  .app-content { padding: 14px 12px 32px; }

  .public-nav { display: none; }
  .public-nav.is-nyitva {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 74px; left: 0; right: 0; z-index: 50;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px;
  }
  .public-nav.is-nyitva > * { padding: 12px 14px; border-radius: 8px; }
  .public-nav.is-nyitva a { justify-content: flex-start; font-size: 15px; }
  .menu-gomb { display: inline-flex; }
  .public-header { position: relative; height: 64px; }
  .header-actions .btn { padding: 0 12px; font-size: 14px; }

  .cards-4, .grid-list, .event-grid, .quick-row, .fields-demo, .form-grid { grid-template-columns: 1fr !important; }
  .data-toolbar { grid-template-columns: 1fr; }
  .public-footer { grid-template-columns: 1fr; }
  .detail-actions, .modal-gombok { flex-direction: column; align-items: stretch; }
  .detail-actions .btn, .modal-gombok .btn { width: 100%; }
  .lapozo-meret { margin-left: 0; width: 100%; }

  h1, .h1 { font-size: 26px; }
  h2 { font-size: 21px; }
}

@media (max-width: 559px) {
  .section, .content-wide, .app-content { padding-left: 12px; padding-right: 12px; }
  .card, .panel { padding: 14px; }
  .btn { width: 100%; }
  .header-actions .btn, .toolbar .btn, .detail-actions .btn { width: auto; }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ==========================================================================
   UJ KOMPONENSEK (a tervezoi csomagban nem szerepeltek)
   ========================================================================== */

/* Csak kepernyoolvasonak szant cimke */
.rejtett-cimke {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Publikus lablec - tobboszlopos, valodi tartalommal */
.public-footer {
  display: grid; grid-template-columns: 2.4fr 0.95fr 0.95fr 1.35fr;
  gap: 26px; padding: 34px 32px 18px; align-items: start;
  background: linear-gradient(110deg, var(--footer-bg-1), var(--footer-bg-2));
}
.public-footer h2 { font-size: 15px; margin: 0 0 12px; color: #fff; font-weight: 700; }
.public-footer a { color: #dbe9f8; text-decoration: none; display: block; padding: 4px 0; font-size: 14px; }
.public-footer a:hover { color: #fff; text-decoration: underline; }
.public-footer p { color: #cfe0f5; font-size: 14px; margin: 0 0 14px; line-height: 1.5; }
.footer-brand .logo-original { width: 120px; height: 80px; margin-bottom: 12px; }
.footer-oszlop { display: flex; flex-direction: column; }

.social-links { display: flex; gap: 8px; flex-wrap: wrap; }
.social-btn {
  display: inline-flex !important; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px; padding: 7px 12px !important; color: #fff !important; font-size: 13px; font-weight: 600;
}
.social-btn:hover { background: rgba(255, 255, 255, .22); text-decoration: none !important; }

.hirlevel-form { display: flex; flex-direction: column; gap: 8px; }
.hirlevel-form input {
  height: 42px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px;
  padding: 0 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px;
}
.hirlevel-form input::placeholder { color: #cfe0f5; }
.hirlevel-form input:focus-visible { background: #fff; color: var(--ink); }
.hirlevel-form .btn { width: 100%; }

.footer-zaro {
  grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 12px; padding-top: 14px;
  font-size: 13px; color: #cfe0f5;
}

/* Partner / esemeny csempe */
.partner-tile { display: block; overflow: hidden; padding: 0; color: inherit; text-decoration: none; }
.partner-tile .img { height: 150px; background: var(--soft) center/cover no-repeat; }
.partner-tile .body { padding: 13px 15px; }
.partner-tile h3 { margin: 6px 0 0; font-size: 16px; }
.partner-tile .partner { color: var(--muted); font-size: 13px; margin-top: 4px; }
.partner-tile:hover { border-color: var(--blue); }
.partner-tile.is-kiemelt { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(242, 183, 5, .28); }

/* Ajanlatkartya kiegeszitesek */
.offer-kep-link { display: block; text-decoration: none; }
.offer-card .heart.is-kedvelt { color: var(--red); }
.kedveles-form { margin-top: 10px; }
.kedveles-form .btn { width: 100%; height: 38px; font-size: 14px; }

/* Kozlemeny */
/* Kozlemeny: a hero alatt all, ezert ranezesre el kell kulonulnie a tobbi kartyatol -
   teljes sotetzold keret (nem csak bal savval), halvany zold hatterrel.
   KET OSZTALYOS SZELEKTOR (.card.kozlemeny-kartya) KELL: a 3_compat_layer.css-ben allo
   `.card { background:#fff; border:1px solid var(--line) }` azonos erossegu es KESOBB
   fuzodik hozza, tehat egyosztalyos szabalykent a keret es a hatter nem ervenyesulne.
   A korabbi kek bal sav emiatt sosem latszott. */
.card.kozlemeny-kartya {
    padding: 18px 20px;
    margin-bottom: 12px;
    border: 2px solid var(--green);
    border-left: 6px solid var(--green);
    background: var(--greenbg);
}
.card.kozlemeny-kartya h3 { margin: 0 0 8px; font-size: 18px; color: var(--green); }

/* A kozlemeny-sav fuggoleges ritmusa. Az alap `.section` 6px felul / 24px alul, ami itt
   forditva kellene: a hero ala levegot kell tenni, a harom gyorslink-doboz viszont a
   kozlemenyhez tapadjon. Ket osztalyos szelektor kell (.section.kozlemeny-sav), mert az
   egyosztalyos `.section` a kesobb fuzodo retegekben is szerepel. */
.section.kozlemeny-sav { padding-top: 30px; padding-bottom: 2px; }
.kozlemeny-sav + .quick-row { padding-top: 6px; }

/* Hogyan mukodik - lepessor */
.hogyan-mukodik { background: var(--soft); border-radius: 12px; margin: 8px 32px 32px; padding: 26px 28px; }
.lepesek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lepes { display: flex; gap: 14px; align-items: flex-start; }
.lepes-szam {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.lepes-szam.sarga { background: var(--yellow); color: #26313e; }
.lepes h3 { margin: 0 0 5px; font-size: 17px; }
.lepes p { margin: 0; color: var(--muted); font-size: 14px; }

/* Kereso mezo a toolbarban (a makettben csak dekoracio volt) */
.searchbox input {
  border: 0; outline: 0; background: transparent; flex: 1 1 auto;
  font: inherit; color: var(--ink); min-width: 0; height: 100%;
}
.searchbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(3, 87, 177, .12); }
.toolbar { flex-wrap: wrap; }

/* Altalanos kartya-torzs */
.card > .body { padding: 16px 18px; }

/* Morzsamenu */
.morzsa { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; padding-bottom: 4px; }
.morzsa a { color: var(--blue); text-decoration: none; }
.morzsa a:hover { text-decoration: underline; }

/* Esemenykartya */
.esemeny-kartya { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.esemeny-kartya .img { height: 168px; background: var(--soft) center/cover no-repeat; }
.esemeny-kartya .body { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.esemeny-kartya h3 { margin: 0; font-size: 18px; }
.esemeny-kartya p { margin: 0; color: var(--muted); font-size: 14px; }
.esemeny-cimkek { display: flex; gap: 7px; flex-wrap: wrap; }
.esemeny-helyszin { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 13px; }
.esemeny-helyszin .icon { width: 17px; height: 17px; color: var(--blue); }
.esemeny-muvelet { margin-top: auto; padding-top: 6px; }
.esemeny-muvelet .btn, .esemeny-muvelet form { width: 100%; }

/* Piacteri reszletezo */
.termek-fo { padding: 0; overflow: hidden; }
.termek-kep { background: var(--soft); }
.termek-kep img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
.termek-fo .body { padding: 22px 24px 26px; }
.termek-fo h1 { font-size: 30px; margin: 10px 0 6px; line-height: 1.15; }
.termek-fo h2 { font-size: 19px; margin: 22px 0 8px; }
.termek-fo .szlogen { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.adat-sorok { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.adat-sorok dt { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.adat-sorok dd { margin: 0; font-weight: 700; }

.detail-oldalsav { display: flex; flex-direction: column; gap: 14px; }
.detail-oldalsav h2 { font-size: 16px; margin: 0 0 10px; }
.detail-oldalsav h3 { font-size: 18px; margin: 0 0 6px; }
.detail-oldalsav p { margin: 0 0 14px; font-size: 14px; }

.ar-doboz { padding: 18px 20px; }
.ar-sor { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ar-sor + .ar-sor { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ar-cimke { color: var(--muted); font-size: 14px; }
.ar-normal { text-decoration: line-through; color: var(--muted); font-size: 17px; }
.ar-elony { color: var(--green); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }

.belepes-doboz { background: var(--greenbg); border-color: #b7e0c5; }
.belepes-doboz .btn { width: 100%; margin-bottom: 8px; }

.muvelet-blokk { display: flex; flex-direction: column; gap: 16px; }
.muvelet-blokk form { display: flex; flex-direction: column; gap: 10px; }
.muvelet-blokk .btn { width: 100%; }
.muvelet-blokk textarea { min-height: 92px; }
.urlap-oszlop { display: flex; flex-direction: column; gap: 12px; }
.urlap-oszlop .btn { width: 100%; }

/* Racsok, amiket a csomag nem definialt */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lepesek-4 { grid-template-columns: repeat(4, 1fr); }

/* Olvashato szovegoldal */
.szoveg-oldal { max-width: 68ch; }
.szoveg-oldal p { margin: 0 0 14px; line-height: 1.62; }
.szoveg-oldal h2 { font-size: 20px; margin: 26px 0 10px; }
.szoveg-oldal ul, .szoveg-oldal ol { margin: 0 0 14px; padding-left: 20px; }
.szoveg-oldal li { margin-bottom: 6px; }

/* Zaro cselekvesre hivas */
.zaro-cta { text-align: center; padding: 30px 24px; margin-top: 30px;
  background: linear-gradient(105deg, #edf6ff, #fff9df); border-color: #e3eaf2; }
.zaro-cta h2 { margin: 0 0 8px; font-size: 22px; }
.zaro-cta p { margin: 0 0 18px; color: var(--muted); }
.zaro-cta .hero-actions { justify-content: center; }

/* Elerhetoseg-lista ikonokkal */
.elerhetoseg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.elerhetoseg-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.elerhetoseg-lista .icon { width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }
.elerhetoseg-lista a { color: var(--blue); text-decoration: none; word-break: break-word; }
.elerhetoseg-lista a:hover { text-decoration: underline; }
.social-links--vilagos .social-btn { background: var(--soft); border-color: var(--line); color: var(--ink) !important; }
.social-links--vilagos .social-btn:hover { background: #e6eef7; }

/* Elfogadohely publikus profil */
.efh-fejlec { position: relative; background: linear-gradient(105deg, #edf6ff, #fff9df); border-bottom: 1px solid #e3eaf2; }
.efh-fokep { height: 260px; background: var(--soft) center/cover no-repeat; }
.efh-fejlec-tartalom { display: flex; gap: 18px; align-items: flex-end; padding: 20px 36px 22px; }
.efh-logo { flex: 0 0 auto; display: block; width: 96px; height: 96px; border-radius: 16px;
  overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.efh-fokep + .efh-fejlec-tartalom .efh-logo { margin-top: -60px; }
.efh-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.efh-fejlec h1 { margin: 0 0 4px; font-size: 30px; }
.efh-fejlec p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.efh-fo { display: flex; flex-direction: column; gap: 22px; }

.galeria-racs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galeria-elem { display: block; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.galeria-elem img { width: 100%; height: 150px; object-fit: cover; display: block; }
.galeria-elem:hover { border-color: var(--blue); }

.kedvenc-doboz { background: var(--greenbg); border-color: #b7e0c5; }
.kedvenc-doboz.is-kedvenc { background: #dff2e6; }
.kedvenc-doboz .btn { width: 100%; }

.nyitva-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.nyitva-tabla th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 0; }
.nyitva-tabla td { text-align: right; padding: 6px 0; font-variant-numeric: tabular-nums; }
.nyitva-tabla tr + tr th, .nyitva-tabla tr + tr td { border-top: 1px solid var(--line); }
.nyitva-tabla .zarva { color: var(--red); }

@media (max-width: 1023px) {
  .public-footer { grid-template-columns: 1fr 1fr; }
  .lepesek { grid-template-columns: 1fr; }
  .lepesek-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .efh-fejlec-tartalom { padding: 18px 18px 20px; }
  .efh-fokep { height: 200px; }
  .hogyan-mukodik { margin: 8px 18px 24px; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .adat-sorok { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .public-footer { grid-template-columns: 1fr; padding: 24px 18px 16px; }
  .partner-tile .img { height: 170px; }
  .hogyan-mukodik { margin: 8px 12px 20px; padding: 20px 16px; }
  .event-grid { grid-template-columns: 1fr; }
  .cards-3, .cards-2, .lepesek-4 { grid-template-columns: 1fr; }
  .galeria-racs { grid-template-columns: repeat(2, 1fr); }
  .efh-fejlec-tartalom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .efh-fokep + .efh-fejlec-tartalom .efh-logo { margin-top: -48px; }
  .efh-fejlec h1 { font-size: 24px; }
  .efh-fokep { height: 160px; }
  .zaro-cta { padding: 24px 16px; }
  .termek-fo h1 { font-size: 24px; }
  .termek-fo .body { padding: 18px 16px 20px; }
  .searchbox { width: 100%; }
  .toolbar > .btn, .toolbar select { width: 100%; }
}

/* ==========================================================================
   NYOMTATAS
   ========================================================================== */
@media print {
  .sidebar, .topbar, .public-header, .public-footer, .flash-wrap,
  .menu-gomb, .lapozo, .detail-actions, .toolbar, .data-toolbar { display: none !important; }
  .app-shell, .app-main, .app-content, .public-shell { display: block; padding: 0; margin: 0; }
  body { background: #fff; font-size: 12pt; }
  .card, .panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a[href]::after { content: ""; }
  .nyomtatasi-lap { width: 100%; page-break-after: always; }
}

/* ==========================================================================
   AI szoveg-javaslat panel (Partner feluletek: bemutatkozas, poszt, termek, hirlevel)
   ========================================================================== */
.ai-javaslat { margin: 10px 0 4px; }
.ai-javaslat-doboz {
  border: 1px solid var(--kek-200, #d5e0ee);
  border-radius: 10px;
  background: var(--soft, #f7f9fc);
  overflow: hidden;
}
.ai-javaslat-fejlec {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--kek-900, #12305a);
  list-style: none;
  user-select: none;
}
.ai-javaslat-fejlec::-webkit-details-marker { display: none; }
.ai-javaslat-fejlec:hover { background: var(--kek-50, #eef4fb); }
.ai-javaslat-jel {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--kek-700, #1d4f8c);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ai-javaslat-keret {
  margin-left: auto;
  font-weight: 400;
  font-size: .78rem;
  color: var(--szurke-600, #5d6b7d);
}
.ai-javaslat-torzs { padding: 4px 14px 14px; }
.ai-javaslat-vezerlok {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}
.ai-javaslat-vezerlok label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--szurke-700, #3f4b5b);
}
.ai-javaslat-vezerlok select,
.ai-javaslat-vezerlok input[type="text"] {
  margin: 0;
  font-size: .86rem;
  padding: 6px 9px;
}
.ai-javaslat-kulcsszavak-mezo { flex: 1 1 320px; min-width: 220px; }
.ai-javaslat-uzenet {
  margin: 9px 0 0;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: .84rem;
  background: var(--kek-50, #eef4fb);
  color: var(--kek-900, #12305a);
}
.ai-javaslat-uzenet-hiba { background: #fdecec; color: #96262a; }
.ai-javaslat-uzenet-siker { background: #e8f6ec; color: #1c6b33; }
.ai-javaslat-eredmeny {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--kek-300, #b9cde3);
  border-radius: 8px;
  background: #fff;
  max-height: 320px;
  overflow-y: auto;
}
.ai-javaslat-elonezet {
  white-space: pre-wrap;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--szurke-800, #2b3543);
}
.ai-javaslat-muveletek {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .ai-javaslat-keret { margin-left: 0; width: 100%; }
  .ai-javaslat-vezerlok { flex-direction: column; align-items: stretch; }
  .ai-javaslat-kulcsszavak-mezo { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Ertesites harang (fejlec) - a <details>/<summary> adja a nyitast, JS nelkul.
   --------------------------------------------------------------------------- */
.harang { position: relative; }
.harang > summary {
  list-style: none;
  cursor: pointer;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border: 1px solid #d5dee7;
  border-radius: 10px;
  background: #fff;
  color: #415267;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.harang > summary::-webkit-details-marker { display: none; }
.harang > summary::marker { content: ''; }
.harang > summary:hover { border-color: var(--kek-600, #0357b1); color: var(--kek-800, #17406f); }
.harang > summary:focus-visible { outline: 2px solid var(--kek-600, #0357b1); outline-offset: 2px; }
.harang-szam {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #c0392b; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.harang-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(360px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #dfe6ed;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 31, 56, .18);
  z-index: 60;
  overflow: hidden;
}
.harang-fejlec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f7;
  font-weight: 700; font-size: .9rem;
  color: var(--kek-900, #0a3a73);
}
.harang-link-gomb {
  border: 0; background: none; padding: 0;
  color: var(--kek-600, #0357b1);
  font-size: .82rem; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.harang-lista { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.harang-tetel { border-bottom: 1px solid #f2f5f9; }
.harang-tetel:last-child { border-bottom: 0; }
.harang-tetel > a {
  display: block; padding: 11px 14px;
  color: inherit; text-decoration: none;
}
.harang-tetel > a:hover { background: #f6f9fc; }
.harang-tetel--uj { background: #f0f7ff; }
.harang-tetel--uj .harang-cim::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--kek-600, #0357b1);
  vertical-align: middle;
}
.harang-cim { display: block; font-size: .88rem; font-weight: 600; color: #1f2733; }
.harang-kivonat { display: block; font-size: .8rem; color: #5d6b7d; margin-top: 3px; }
.harang-ido { display: block; font-size: .74rem; color: #8a9099; margin-top: 4px; }
.harang-ures { padding: 22px 14px; text-align: center; color: #8a9099; font-size: .86rem; }
.harang-lablec {
  display: block; padding: 11px 14px; text-align: center;
  border-top: 1px solid #eef2f7;
  background: #f8fafc;
  font-size: .84rem; font-weight: 600;
  color: var(--kek-600, #0357b1); text-decoration: none;
}
.harang-lablec:hover { background: #eef4fa; }

.ertesites-uj { border-left: 4px solid var(--kek-600, #0357b1); }
.ertesites-pott {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--kek-600, #0357b1);
  vertical-align: middle;
}

.ertesites-szoveg > summary {
  cursor: pointer; list-style: none; font-size: .9rem; color: var(--muted, #667587);
  margin-top: 4px; display: block;
}
.ertesites-szoveg > summary::-webkit-details-marker { display: none; }
.ertesites-szoveg > summary:hover .ertesites-tovabb,
.ertesites-szoveg > summary:focus-visible .ertesites-tovabb { text-decoration: underline; }
.ertesites-tovabb {
  display: inline-block; margin-left: 6px; white-space: nowrap;
  color: var(--kek-600, #0357b1); font-weight: 600;
}
.ertesites-szoveg[open] > summary .ertesites-kivonat { display: none; }
.ertesites-teljes {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  background: var(--soft, #f1f4f8); color: var(--ink, #33404f);
  font-size: .92rem; line-height: 1.55; white-space: normal;
}

@media (max-width: 900px) {
  /* Szuk kepernyon a panel a fejlecsorhoz igazodik, nem a harang ikonhoz:
     igy nem csuszhat ki a viewport bal szelen. */
  .app-fejlec-sor { position: relative; }
  .harang { position: static; }
  .harang-panel {
    left: auto; right: 0;
    width: min(360px, 100%);
    top: calc(100% + 10px);
  }
  .harang-lista { max-height: min(380px, 60vh); }
}
@media print {
  .harang { display: none; }
}

/* ---------------------------------------------------------------------------
   UI kor 2026-08: osszecsukhato oldalmenu, masolo gomb, csikos tabla,
   osszevont esemeny-cella, lebego "vissza a tetejere" gomb.
   --------------------------------------------------------------------------- */

/* Fiokmenu fiokban (off-canvas): minden oldal tetejen egy balra mutato nyil,
   a menupontok bal oldalrol beuszo kulon panelben jelennek meg. */
.dashboard:has(> .fo-menu) { display: block; }
@supports not selector(:has(*)) {
  .dashboard { display: block; }
}

.fo-menu { display: block; margin: 0 0 16px; }

.fo-menu-nyito {
  display: inline-flex; align-items: center; gap: 10px;
  list-style: none;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #023E7D, #024b99);
  color: #fff;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow, 0 2px 8px rgba(10, 31, 56, .12));
  max-width: 100%;
}
.fo-menu-nyito::-webkit-details-marker { display: none; }
.fo-menu-nyito::marker { content: ''; }
.fo-menu-nyito:hover { background: linear-gradient(180deg, #024b99, #0357b1); }
.fo-menu-nyito:focus-visible { outline: 3px solid #f4b01e; outline-offset: 2px; }
.fo-menu-nyito svg { flex: 0 0 auto; }
.fo-menu-nyito-cimke { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fo-menu-fatyol {
  position: fixed; inset: 0;
  background: rgba(6, 22, 44, .5);
  z-index: 80;
}

.fo-menu-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 282px; max-width: 86vw;
  background: linear-gradient(180deg, #023E7D, #024b99);
  box-shadow: 4px 0 22px rgba(6, 22, 44, .34);
  z-index: 81;
  display: flex; flex-direction: column;
  animation: fo-menu-be .18s ease-out;
}
@keyframes fo-menu-be {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.fo-menu-fejlec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 10px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.fo-menu-cim { color: #fff; font-weight: 700; font-size: 15px; }
.fo-menu-bezar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer;
}
.fo-menu-bezar:hover { background: rgba(255, 255, 255, .22); }
.fo-menu-bezar:focus-visible { outline: 2px solid #f4b01e; outline-offset: 2px; }

.fo-menu-lista { padding: 10px 8px 22px; overflow-y: auto; flex: 1 1 auto; }
.fo-menu-lista a {
  display: flex; align-items: center; gap: 8px;
  color: #e5eff9 !important; padding: 10px 12px; border-radius: 6px;
  font-weight: 600; font-size: 13.5px; text-decoration: none; margin-bottom: 2px;
}
.fo-menu-lista a:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.fo-menu-lista a.active { background: #0c68c6; color: #fff !important; font-weight: 700; }
.fo-menu-lista .group-label {
  display: block;
  color: #a9c6e6; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  padding: 12px 12px 5px; font-weight: 700;
}
.fo-menu-lista .menu-felirat { flex: 1 1 auto; min-width: 0; }
.fo-menu-lista a .almenu-jel {
  flex: 0 0 auto; font-size: 17px; line-height: 1; opacity: .62;
  transform: translateY(-1px);
}
.fo-menu-lista a:hover .almenu-jel, .fo-menu-lista a.active .almenu-jel { opacity: 1; }
.fo-menu-lista .dashboard-nav-elvalaszto {
  border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 8px 10px;
}

body.fo-menu-nyitva { overflow: hidden; }

.kartyas-attekintes { grid-template-columns: 1fr 1fr; }
.kartyas-mutatok { grid-template-columns: 1fr 1fr; }

.masolhato-link {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.masolhato-link-cim {
  flex: 1 1 240px;
  min-width: 0;
  word-break: break-all;
  font-size: .92rem;
  color: var(--kek-600, #0357b1);
}
.masolo-gomb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid #d5dee7; border-radius: 8px;
  background: #fff; color: #415267;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.masolo-gomb:hover { border-color: var(--kek-600, #0357b1); color: var(--kek-800, #17406f); }
.masolo-gomb:focus-visible { outline: 2px solid var(--kek-600, #0357b1); outline-offset: 2px; }
.masolo-gomb--kesz { border-color: #157347; color: #157347; background: #e6f6ec; }

.tabla-csikos tbody tr:nth-child(even) > td { background: #f6f9fc; }

/* Esemenylista kartyas elrendezesben: minden adat egymas alatt,
   a cellan beluli sorok savosan szinezve. */
.esemeny-tabla { width: 100%; border-collapse: collapse; }
.esemeny-tabla thead th {
  text-align: left; padding: 10px 12px;
  background: #eef3f9; color: #33465e;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid #d9e3ee;
}
.esemeny-tabla tbody tr + tr > .esemeny-kartya { border-top: 10px solid transparent; }

.esemeny-kartya {
  padding: 0;
  border: 1px solid #d9e3ee; border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.ek-sor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  padding: 3px 12px;
  line-height: 1.3;
}
.ek-sor:nth-child(odd) { background: #f6f9fc; }
.ek-cimke {
  flex: 0 0 152px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7c92; font-weight: 700; white-space: nowrap;
}
.ek-ertek { flex: 1 1 200px; min-width: 0; color: #1f2733; word-break: break-word; }
.ek-ertek.ek-kiemelt { font-weight: 700; font-size: 1.02rem; }
.ek-ertek .esemeny-allapot-reszlet { display: block; font-size: .84rem; margin-top: 1px; }
.ek-ertek .esemeny-kod {
  padding: 4px 12px;
  font-size: 15px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.25;
}
.ek-ertek .badge { padding: 1px 9px; }

.masolhato-kod {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.masolhato-kod::after {
  content: '';
  flex: 0 0 auto;
  width: 13px; height: 13px;
  background: currentColor;
  opacity: .55;
  -webkit-mask: var(--masolo-ikon) center / contain no-repeat;
  mask: var(--masolo-ikon) center / contain no-repeat;
}
.masolhato-kod:hover { border-color: var(--kek-600, #0357b1); color: var(--kek-800, #17406f); }
.masolhato-kod:hover::after { opacity: 1; }
.masolhato-kod:focus-visible { outline: 2px solid var(--kek-600, #0357b1); outline-offset: 2px; }
.masolhato-kod--kesz {
  border-color: #157347; color: #157347; background: #e6f6ec;
  letter-spacing: normal;
}
.masolhato-kod--hiba { border-color: #b42318; color: #b42318; background: #fdeceb; letter-spacing: normal; }
.masolhato-kod--kesz::after, .masolhato-kod--hiba::after { display: none; }

:root {
  --masolo-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}
.ek-muveletek { gap: 8px; padding: 6px 12px; }
.ek-muveletek form { display: inline; margin: 0; }

@media (max-width: 640px) {
  .ek-sor { flex-direction: column; align-items: stretch; gap: 0; }
  .ek-cimke { flex: 0 0 auto; }
  .ek-ertek { flex: 0 1 auto; }
  .ek-muveletek { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ek-muveletek .btn { width: auto; }
}

/* ---------------------------------------------------------------------------
   Jelszo megjelenitese: a ui-kiegeszitok.js minden input[type=password] melle
   beszur egy szem gombot. A mezo egy .jelszo-mezo burokba kerul.
   --------------------------------------------------------------------------- */
.jelszo-mezo { position: relative; display: block; }
.jelszo-mezo input { padding-right: 46px !important; }

.jelszo-mutato {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: #7b8a9c;
  cursor: pointer;
  border-radius: 0 7px 7px 0;
}
.jelszo-mutato:hover { color: var(--kek-600, #0357b1); }
.jelszo-mutato:focus-visible { outline: 2px solid var(--kek-600, #0357b1); outline-offset: -2px; }
.jelszo-mutato--aktiv { color: var(--kek-600, #0357b1); }

.jelszo-mezo input::-ms-reveal,
.jelszo-mezo input::-ms-clear { display: none; }

@media print {
  .jelszo-mutato { display: none; }
}

/* ---------------------------------------------------------------------------
   Mobil tablazat-kartyak: 640 px alatt minden tobb oszlopos tabla soronkent
   egy kartyava all ossze, a cellak a fejlec cimkejevel (data-cimke) jelennek
   meg egymas alatt. A cimkezest a ui-kiegeszitok.js teszi ra.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .table-wrap:has(> table.mobil-kartya) { overflow-x: visible; }

  table.mobil-kartya { display: block; width: 100%; border-collapse: collapse; }
  table.mobil-kartya thead { display: none; }
  table.mobil-kartya tbody { display: block; }

  table.mobil-kartya tbody tr {
    display: block;
    margin: 0 0 10px;
    border: 1px solid #d9e3ee; border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }
  table.mobil-kartya tbody tr:last-child { margin-bottom: 0; }

  table.mobil-kartya tbody td {
    display: block;
    width: auto !important;
    padding: 3px 12px;
    border: 0;
    text-align: left !important;
    white-space: normal;
    line-height: 1.3;
    word-break: break-word;
  }
  table.mobil-kartya tbody td:nth-child(odd) { background: #f6f9fc; }
  table.mobil-kartya tbody td:first-child { font-weight: 700; }

  table.mobil-kartya tbody td[data-cimke]::before {
    content: attr(data-cimke);
    display: block;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7c92; font-weight: 700;
  }

  table.mobil-kartya tbody tr[data-mobil="teljes"] > td {
    background: none; font-weight: inherit; padding: 10px 12px;
  }

  table.mobil-kartya tbody td .btn { margin: 2px 4px 2px 0; }
  table.mobil-kartya tbody td form { display: inline-block; margin: 0; }
}

.tetejere-gomb {
  position: fixed; right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--kek-600, #0357b1); color: #fff;
  box-shadow: 0 6px 18px rgba(10, 31, 56, .28);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
}
.tetejere-gomb--lathato { opacity: 1; visibility: visible; transform: translateY(0); }
.tetejere-gomb:hover { background: var(--kek-800, #17406f); }
.tetejere-gomb:focus-visible { outline: 3px solid #f4b01e; outline-offset: 2px; }

@media (max-width: 900px) {
  .fo-menu-nyito { display: flex; width: 100%; justify-content: flex-start; }

  .kartyas-attekintes { grid-template-columns: 1fr; }
  .kartyas-mutatok { grid-template-columns: 1fr; }
  .kartyas-mutatok .stat-tile { grid-column: auto !important; }

  .tetejere-gomb { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tetejere-gomb { transition: none; }
  .fo-menu-panel { animation: none; }
}
@media print {
  .tetejere-gomb, .masolo-gomb, .fo-menu { display: none; }
}

.uzenet-mezo { min-height: 220px; line-height: 1.5; }

.karakter-szamlalo {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #64748b;
  text-align: right;
}
.karakter-szamlalo--fogy { color: #b45309; font-weight: 600; }
.karakter-szamlalo--tele { color: #c0392b; font-weight: 700; }

.logo-qr-sav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; margin-bottom: 10px;
}
.logo-qr-hasab { min-width: 0; padding: 0 20px 0 0; }
.logo-qr-hasab--qr {
  padding: 0 0 0 20px;
  border-left: 1px solid var(--line, #dce3ea);
}
.logo-qr-hasab h3 { margin-bottom: 10px; }

.qr-probalhato-kep {
  display: block; width: 180px; height: 180px;
  border: 1px solid var(--line, #dce3ea); border-radius: 8px; background: #fff; padding: 6px;
}
.logo-qr-hasab--qr p { font-size: 12px; line-height: 1.4; margin: 10px 0 0; overflow-wrap: anywhere; }
.logo-qr-hasab--qr a { font-weight: 600; }

@media (max-width: 760px) {
  .logo-qr-sav { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .logo-qr-hasab { padding: 0; }
  .logo-qr-hasab--qr { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line, #dce3ea); }
}

.weboldal-kod-blokk {
  padding: 16px 0 4px;
  border-top: 1px solid var(--line, #dce3ea);
  margin-top: 14px;
}
.weboldal-kod-blokk h3 { font-size: 15px; }
.weboldal-kod-blokk > p.muted { font-size: 12.5px; margin: 4px 0 12px; }

.weboldal-kod-elonezet {
  position: relative;
  padding: 26px 18px 18px;
  border: 1px dashed var(--line, #dce3ea); border-radius: 10px;
  background: #fff; margin-bottom: 12px;
}
.weboldal-kod-elonezet-cimke {
  position: absolute; top: 6px; left: 12px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: #94a3b8;
}

.weboldal-kod-mezo {
  width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; resize: vertical;
  background: #f8fafc; color: #33404f;
}

.bt-nyitas-sor {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.bt-nyitas-sor .muted { font-size: 12.5px; }

details.bt-lecke > summary.bt-lecke-fej {
  cursor: pointer; list-style: none;
  padding-right: 26px; position: relative;
}
details.bt-lecke > summary.bt-lecke-fej::-webkit-details-marker { display: none; }
details.bt-lecke > summary.bt-lecke-fej::after {
  content: ''; position: absolute; right: 4px; top: 14px;
  width: 9px; height: 9px;
  border-right: 2px solid #7b8a9c; border-bottom: 2px solid #7b8a9c;
  transform: rotate(45deg); transition: transform .15s ease;
}
details.bt-lecke[open] > summary.bt-lecke-fej::after { transform: rotate(-135deg); }
details.bt-lecke > summary.bt-lecke-fej:hover h3 { text-decoration: underline; }
details.bt-lecke > summary.bt-lecke-fej:focus-visible { outline: 3px solid var(--yellow, #f2b705); outline-offset: 3px; }

details.bt-lecke:not([open]) > summary.bt-lecke-fej .bt-cel {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.bt-lecke > .bt-lepesek { margin-top: 14px; }

.bt-lecke-kesz > summary.bt-lecke-fej h3::after {
  content: ' ✓'; color: var(--green, #176b36); font-weight: 700;
}

/* --- Lista vezerlo: a "Megjelenitas:" a nev oszloppal egy vonalban --- */
.tabla-vezerlo-bal { padding-left: 15px; }
.tabla-blokk { min-width: 0; }
@media (max-width: 767px) {
  .tabla-vezerlo-bal { padding-left: 0; }
}

/* --- Vonal grafikon (Riportok) --- */
.vg-doboz { margin-top: 14px; }
.vg-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.vg-cim { font-weight: 700; color: var(--kek-900, #0a1f38); font-size: 15px; margin: 0; }
.vg-valtok { display: flex; gap: 6px; flex-wrap: wrap; }
.vg-valtok .btn { width: auto; }
.vg-valtok .btn.aktiv {
  background: var(--kek-900, #0a1f38); border-color: var(--kek-900, #0a1f38); color: #fff;
}
.vg-vaszon { width: 100%; display: block; }
.vg-osszeg { font-size: 12.5px; }
.vg-racs { stroke: #e7edf4; stroke-width: 1; }
.vg-tengely { stroke: #cbd5e1; stroke-width: 1; }
.vg-cimke { fill: #64748b; font-size: 11px; }
.vg-oszlop { transition: opacity .12s ease; }
.vg-oszlop:hover { opacity: .75; }
.vg-ures { color: var(--muted, #64748b); font-size: 13px; padding: 24px 0; text-align: center; }

/* --- Hirlevel sablon szerkeszto: elonezet + torles sav --- */
.sablon-elonezet {
  width: 100%; min-height: 460px; display: block;
  border: 1px solid var(--line, #dbe3eb); border-radius: 8px; background: #fff;
}
.sablon-torles-sav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line, #dbe3eb);
}
.sablon-torles-sav .muted { font-size: 13px; }
.sablon-torles-sav form { margin: 0; }
.sablon-torles-sav .btn { width: auto; }
@media (max-width: 767px) {
  .sablon-elonezet { min-height: 360px; }
}

/* --- Korabbi hirlevelek: mindig lathato muveletsor a becsukott dobozon is --- */
.korabbi-muveletsor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #dbe3eb);
}
.korabbi-muveletsor form { margin: 0; }
.korabbi-muveletsor .btn { width: auto; }
.csomag-box > details > summary { cursor: pointer; }

/* --- Hirlevel szerkeszto: automatikus mentes allapotjelzo --- */
.auto-mentes-allapot {
  font-size: 12.5px; color: var(--muted, #64748b); margin-left: 6px;
}
.auto-mentes-allapot.auto-mentes-ok { color: var(--green, #176b36); font-weight: 600; }
.auto-mentes-allapot.auto-mentes-hiba { color: var(--red, #b3261e); font-weight: 600; }

/* Bot-csapda mező: a látogatónak láthatatlan, a kitöltő robotot viszont leleplezi. */
.mezo-csapda {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Urlap-kitoltesek: pipa es megjegyzes-jel a CSUKOTT soron is. */
.kitoltes-pipa {
    display: inline-block;
    width: 22px; height: 22px; line-height: 22px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--green, #176B36);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    vertical-align: middle;
}
.kitoltes-pipas { border-left: 4px solid var(--green, #176B36); }
.kitoltes-megjegyzes-jel {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--amberbg, #FFF4D6);
    color: var(--amber, #7A5200);
    font-size: 12px;
    font-weight: 600;
}
.kitoltes-muveletek {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
details.card > summary:has(.kitoltes-muveletek) {
    position: relative;
    padding-right: 190px;
}

@media (max-width: 700px) {
    .kitoltes-muveletek { position: static; transform: none; display: flex; margin-top: 8px; }
    details.card > summary:has(.kitoltes-muveletek) { padding-right: 18px; }
}

/* Altalanos tablazat-kereso es oszlopszuro sav (tabla-vezerlo.js epiti).
   A kliensoldali listaretegre epul, ezert minden opt-in tablan kulon munka nelkul mukodik. */
.lista-szuro-sav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.lista-szuro-sav .lista-kereso {
    flex: 1 1 220px;
    min-width: 180px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
.lista-szuro-sav .lista-oszlopszuro {
    flex: 0 1 auto;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    max-width: 100%;
}
.lista-szuro-sav .lista-szuro-torles {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.lista-szuro-sav .lista-szuro-torles:hover { border-color: var(--blue); color: var(--blue); }
.lista-szuro-sav .lista-talalat {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Kedvenceim: magasabb sor, a logo a nev elott. */
.kedvenc-sor > td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.kedvenc-nev {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}
.kedvenc-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
}
.kedvenc-logo-ures {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--soft, #F1F4F8);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 800;
    font-size: 15px;
}

/* Urlapszerkeszto mezosorai. A fejlec MINDIG latszik (fogantyu + cimke + tipus),
   igy a becsukott sor is huzhato marad; csak a torzs rejtozik el.
   Minden mezotipus sajat szint kap, hogy a hosszu listaban ranezesre elkulonuljenek. */
.urlap-mezo-sor {
    border-left: 5px solid var(--mezo-szin, #94A3B8);
    overflow: hidden;
}
.urlap-mezo-sor.huzas-alatt { opacity: .45; }
.urlap-mezo-fej {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--mezo-halvany, #F1F4F8);
    border-bottom: 1px solid var(--line);
}
.urlap-mezo-sor.mezo-csukva .urlap-mezo-fej { border-bottom: 0; }
.urlap-mezo-fej .mezo-fogantyu {
    cursor: grab; user-select: none; font-size: 18px; line-height: 1;
    color: var(--mezo-szin, #94A3B8); flex: 0 0 auto;
}
.urlap-mezo-fej .mezo-sorszam {
    color: var(--muted); min-width: 24px; flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.urlap-mezo-fej .mezo-fej-cimke {
    flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.urlap-mezo-fej .mezo-fej-cimke.ures { color: var(--muted); font-weight: 400; font-style: italic; }
.urlap-mezo-fej .mezo-fej-valaszto {
    flex: 0 1 auto;
    max-width: 220px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--mezo-szin, #CBD5E1);
    color: var(--mezo-szin, #475569);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
}
.urlap-mezo-fej .mezo-fej-szelesseg { max-width: 165px; }
.urlap-mezo-fej .mezo-fej-valaszto:focus-visible {
    outline: 2px solid var(--mezo-szin, #0357B1);
    outline-offset: 1px;
}
.urlap-mezo-fej .mezo-nyito {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: #fff; border: 1px solid var(--line); color: var(--ink);
    font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.urlap-mezo-fej .mezo-nyito:hover { border-color: var(--mezo-szin, #94A3B8); }
.urlap-mezo-torzs { padding: 12px 14px; }

.mezo-tipus-szoveg { --mezo-szin: #0357B1; --mezo-halvany: #EBF3FC; }
.mezo-tipus-hosszu_szoveg { --mezo-szin: #023E7D; --mezo-halvany: #E8EEF7; }
.mezo-tipus-email { --mezo-szin: #0E7490; --mezo-halvany: #E6F4F7; }
.mezo-tipus-telefon { --mezo-szin: #0F766E; --mezo-halvany: #E5F4F2; }
.mezo-tipus-szam { --mezo-szin: #176B36; --mezo-halvany: #E7F6EC; }
.mezo-tipus-datum { --mezo-szin: #4D7C0F; --mezo-halvany: #EFF6E2; }
.mezo-tipus-legordulo { --mezo-szin: #B45309; --mezo-halvany: #FCF0E0; }
.mezo-tipus-radio { --mezo-szin: #C2410C; --mezo-halvany: #FDEDE5; }
.mezo-tipus-jelolo_csoport { --mezo-szin: #6D28D9; --mezo-halvany: #F1EBFC; }
.mezo-tipus-jelolo { --mezo-szin: #4338CA; --mezo-halvany: #EAEBFB; }
.mezo-tipus-cimsor { --mezo-szin: #475569; --mezo-halvany: #EEF1F5; }
.mezo-tipus-tartalom { --mezo-szin: #A21CAF; --mezo-halvany: #FAEAFB; }

@media (max-width: 900px) {
    .urlap-mezo-fej { flex-wrap: wrap; }
    .urlap-mezo-fej .mezo-fej-cimke { flex: 1 0 100%; order: -1; }
    .urlap-mezo-fej .mezo-fej-valaszto,
    .urlap-mezo-fej .mezo-fej-szelesseg { max-width: none; flex: 1 1 130px; }
}

/* Allapot-csempe: egysoros folyo szoveg szinezett dobozban (pl. kartya statusza).
   Zold = rendben van, piros = tiltva/felfuggesztve/lejart, borostyan = fuggoben. */
.stat-tile.stat-tile-allapot { padding: 14px 18px; }
.stat-tile.stat-tile-allapot .allapot-mondat {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}
.stat-tile.stat-tile-zold { border-color: var(--green, #176B36); background: var(--green, #176B36); }
.stat-tile.stat-tile-zold:hover { border-color: var(--green, #176B36); }
.stat-tile.stat-tile-zold .allapot-mondat { color: #fff; }

.stat-tile.stat-tile-piros { border-color: var(--red, #A12828); background: var(--red, #A12828); }
.stat-tile.stat-tile-piros:hover { border-color: var(--red, #A12828); }
.stat-tile.stat-tile-piros .allapot-mondat { color: #fff; }

.stat-tile.stat-tile-borostyan { border-color: var(--amber, #7A5200); background: var(--amber, #7A5200); }
.stat-tile.stat-tile-borostyan:hover { border-color: var(--amber, #7A5200); }
.stat-tile.stat-tile-borostyan .allapot-mondat { color: #fff; }

.stat-tile.stat-tile-semleges { border-color: #B9C3CE; background: #EEF1F5; }
.stat-tile.stat-tile-semleges:hover { border-color: #B9C3CE; }
.stat-tile.stat-tile-semleges .allapot-mondat { color: var(--ink, #33404F); }

/* Teendo-csempe az admin attekintesen: a jovahagyasra/megerositesre varo tetelek.
   CSAK akkor kap piros kiemelest, ha van is benne tetel - a nulla ertek nem teendo,
   es ha mindig piros lenne, a kiemeles elvesztene a jelentoseget. */
.stat-tile.stat-tile-teendo {
    border-color: var(--red, #A12828);
    background: var(--redbg, #FDE8E8);
}
.stat-tile.stat-tile-teendo:hover { border-color: var(--red, #A12828); }
.stat-tile.stat-tile-teendo .value { color: var(--red, #A12828); }
.stat-tile.stat-tile-teendo .label { color: var(--red, #A12828); }

.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .grid-5 { grid-template-columns: 1fr; }
}

.reszlet-nyito {
    border: 1px solid var(--line, #DCE3EA);
    background: #fff;
    color: var(--kek-700, #0357B1);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    line-height: 1;
    cursor: pointer;
    font-size: 13px;
}
.reszlet-nyito:hover { background: var(--soft, #F1F4F8); }
.cimzett-reszletek { background: var(--soft, #F1F4F8); padding: 14px 18px; }
.cimzett-reszletek .cr-cimke {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #667587);
    margin-bottom: 2px;
}
@media (max-width: 900px) {
    .cimzett-reszletek .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cimzett-reszletek .grid-3 { grid-template-columns: 1fr; }
}

.maximum-sav {
    height: 10px;
    border-radius: 999px;
    background: var(--soft, #F1F4F8);
    overflow: hidden;
}
.maximum-sav > span {
    display: block;
    height: 100%;
    background: var(--green, #176B36);
    border-radius: 999px;
    transition: width .4s ease;
}
.maximum-jel {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-weight: 700;
}
.maximum-jel-kesz { color: var(--green, #176B36); }
.maximum-jel-nyitva { color: var(--kek-700, #0357B1); }
.maximum-jel-zarva,
.maximum-jel-ures { color: var(--muted, #667587); font-weight: 400; }
.maximum-lepesek { display: flex; flex-direction: column; gap: 2px; }
.maximum-lepes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 10px;
    border-radius: 8px;
}
.maximum-lepes:hover { background: var(--soft, #F1F4F8); }
.maximum-lepes-kesz { opacity: .72; }
.maximum-haszon {
    border-left: 4px solid var(--green, #176B36);
    background: var(--greenbg, #E7F6EC);
    padding: 11px 14px;
    border-radius: 0 8px 8px 0;
    margin: 14px 0 0;
}
.maximum-kerdes {
    border-top: 1px solid var(--line, #DCE3EA);
    padding: 14px 0 4px;
}
/* A valaszlehetosegek egymas ala kerulnek: a .checkbox-sor sima <label>, tehat
   CSS nelkul soronkent egymas melle folyna, mint a szoveg. */
.maximum-kerdes .checkbox-sor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 2px;
    line-height: 1.45;
    border-radius: 8px;
    cursor: pointer;
}
.maximum-kerdes .checkbox-sor:hover { background: var(--szurke-50, #FBFCFE); }
.maximum-kerdes .checkbox-sor input[type="radio"] { flex: 0 0 auto; margin-top: 3px; }
.maximum-kerdes:first-of-type { border-top: 0; }
.maximum-fazis-kesz > summary { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
    .maximum-sav > span { transition: none; }
}

.maximum-ceg-fejlec {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--soft, #F1F4F8);
    border-bottom: 1px solid var(--line, #DCE3EA);
    border-radius: 12px 12px 0 0;
}

.velemeny-osszesito {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}
a.velemeny-osszesito:hover .velemeny-atlag { background: var(--kek-700, #0357B1); color: #fff; }
.velemeny-atlag {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--kek-900, #023E7D);
    background: var(--soft, #F1F4F8);
    border-radius: 10px;
    padding: 8px 14px;
}
.velemeny-csillagok { color: #C9D2DC; font-size: 18px; letter-spacing: 1px; }
.velemeny-csillagok .tele { color: #F2B705; }
.velemeny-valaszto {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    touch-action: manipulation;
}
.velemeny-valaszto input { position: absolute; opacity: 0; width: 0; height: 0; }
.velemeny-valaszto label,
.velemeny-mezo .velemeny-valaszto label {
    font-size: 38px;
    line-height: 1;
    color: #C9D2DC;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}
.velemeny-valaszto label:active { background: #EEF2F7; }
.velemeny-valaszto input:checked ~ label,
.velemeny-valaszto label:hover,
.velemeny-valaszto label:hover ~ label { color: #F2B705; }
.velemeny-valaszto input:focus-visible + label { outline: 2px solid var(--kek-700, #0357B1); outline-offset: 2px; }

/* A kivalasztott ertek szoveges visszajelzese. Tisztan CSS: a :has() a modern
   bongeszokben mukodik, ahol nincs, ott egyszeruen ures marad a sor. */
.velemeny-ertek {
    display: block;
    margin-top: 2px;
    min-height: 1.35em;
    font-weight: 700;
    font-size: .95rem;
    color: var(--kek-900, #10284A);
}
.velemeny-mezo:has(.velemeny-valaszto input[value="1"]:checked) .velemeny-ertek::after { content: '1 csillag – Nem volt jó'; }
.velemeny-mezo:has(.velemeny-valaszto input[value="2"]:checked) .velemeny-ertek::after { content: '2 csillag – Lehetne jobb'; }
.velemeny-mezo:has(.velemeny-valaszto input[value="3"]:checked) .velemeny-ertek::after { content: '3 csillag – Rendben volt'; }
.velemeny-mezo:has(.velemeny-valaszto input[value="4"]:checked) .velemeny-ertek::after { content: '4 csillag – Jó volt'; }
.velemeny-mezo:has(.velemeny-valaszto input[value="5"]:checked) .velemeny-ertek::after { content: '5 csillag – Kiváló'; }

/* A QR-os mobil nezetben a huvelykujj a beviteli eszkoz: ott meg nagyobb. */
.qr-oldal .velemeny-valaszto { gap: 6px; }
.qr-oldal .velemeny-valaszto label { font-size: 44px; min-width: 56px; min-height: 56px; }

@media (max-width: 480px) {
    .velemeny-valaszto label { font-size: 42px; min-width: 52px; min-height: 52px; }
}

summary.maximum-ceg-fejlec { cursor: pointer; list-style: none; }
summary.maximum-ceg-fejlec::-webkit-details-marker { display: none; }
summary.maximum-ceg-fejlec::before {
    content: '\25B8';
    color: var(--muted, #667587);
    font-size: 13px;
    margin-right: 2px;
    transition: transform .15s ease;
    display: inline-block;
}
details[open] > summary.maximum-ceg-fejlec::before { transform: rotate(90deg); }
details[open] > summary.maximum-ceg-fejlec { border-radius: 12px 12px 0 0; }
summary.maximum-ceg-fejlec { border-radius: 12px; border-bottom-color: transparent; }
details[open] > summary.maximum-ceg-fejlec { border-bottom-color: var(--line, #DCE3EA); }
summary.maximum-ceg-fejlec:hover { background: #E7EDF4; }
@media (prefers-reduced-motion: reduce) {
    summary.maximum-ceg-fejlec::before { transition: none; }
}

.qr-oldal .mobil-cta-sav .cta-sor { display: flex; gap: 8px; align-items: stretch; }
.qr-oldal .mobil-cta-sav .cta-sor > * { flex: 1 1 50%; width: 50%; margin: 0; min-width: 0; }
.qr-oldal .mobil-cta-sav .cta-sor .btn {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 15px; padding-left: 8px; padding-right: 8px;
}

.velemeny-tetel {
  border-top: 1px solid var(--line, #DCE3EA);
  padding-top: 12px;
  margin-top: 12px;
}
.velemeny-tetel:first-of-type { margin-top: 16px; }

/* --- AI segito (belso kerdes-valasz) es a publikus AI tanacsado --- */
.ai-segito textarea { min-height: 84px; }
.ai-valasz {
  border-top: 1px solid var(--line, #DCE3EA);
  margin-top: 18px;
  padding-top: 16px;
}
.ai-valasz-jelzes {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ai-jelzes-valasz { background: #E6F4EA; color: #1E7B34; }
.ai-jelzes-nemtudom { background: #FDF3D8; color: #8A6100; }
.ai-jelzes-ember { background: #E7EEF8; color: #23558C; }
.ai-valasz-szoveg {
  white-space: pre-wrap;
  line-height: 1.62;
}
.ai-valasz-szoveg:empty { display: none; }

/* --- Jelolonegyzet / valaszto gomb merete: az alapertelmezett ~13px tul kicsi,
       kulonosen erintokepernyon es egy jogi hozzajarulasnal --- */
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  width: 19px;
  height: 19px;
  min-width: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--kek-700, #1d4f8c);
  cursor: pointer;
}
.checkbox-row label { cursor: pointer; }
@media (max-width: 560px) {
  .checkbox-row input[type="checkbox"],
  .checkbox-row input[type="radio"] {
    width: 23px;
    height: 23px;
    min-width: 23px;
  }
}

/* --- "Miert jo nekem?" menupont piros kiemelessel. Aktiv allapotban piros hatter
       feher szoveggel, mert piros betu kek hatteren olvashatatlan lenne. --- */
.public-shell .public-nav a[href="/miert-jo"] {
  color: var(--red, #A12828);
}
.public-shell .public-nav a[href="/miert-jo"]:hover {
  background: var(--redbg, #FDE8E8);
  color: var(--red, #A12828);
  border-color: #efbdbd;
}
.public-shell .public-nav a[href="/miert-jo"].active,
.public-shell .public-nav a[href="/miert-jo"].active:hover {
  background: var(--red, #A12828);
  color: #fff;
  border-color: var(--red, #A12828);
}

/* --- Alkalmazas-fejlec keskeny kepernyon: a harang (details.harang) zsugorodott
       (flex-shrink alapertelmezes 1), a benne levo gomb viszont nem, ezert az
       ertesites-ikon racsuszott a felhasznaloi korre. Semmi nem zsugorodik tobbe
       a muveletsavban; helyet a markanev ad, az rovidul el. --- */
@media (max-width: 767px) {
  .app-fejlec-muvelet { gap: 6px; }
  .app-fejlec-muvelet > * { flex: 0 0 auto; }
  .app-fejlec-sor { gap: 8px; }
  .app-fejlec-sor > .app-brand { min-width: 0; flex: 0 0 auto; }
  /* A felulet neve ("Partner portal") 123 px-t vitt el a 375 px-bol - a logo
     onmagaban is azonositja az oldalt, a lap tetejen ott az oldal H1 cime. */
  .app-fejlec .app-brand .app-felulet { display: none; }
  .app-fejlec-muvelet .btn { padding-left: 10px; padding-right: 10px; font-size: 13px; }
}
@media (max-width: 400px) {
  .app-fejlec .app-brand .logo-original { width: 64px; height: auto; }
}

/* --- Mobil kartya-mod: a soron beluli `style="white-space:nowrap"` (18 helyen van
       tablacellakon, asztali nezetre) mobilon egy sorba kenyszeritette a cella
       tartalmat. A cella ilyenkor 540 px lett egy 290 px-es kartyaban, es a
       .card `overflow-x: hidden`-je LEVAGTA a masodik gombot - vagyis a muvelet
       elerhetetlen volt. Az inline stilust csak !important tudja felulirni. --- */
@media (max-width: 767px) {
  table.mobil-kartya tbody td {
    white-space: normal !important;
  }
  table.mobil-kartya tbody td form { max-width: 100%; }
  table.mobil-kartya tbody td .btn { max-width: 100%; }
}

/* Katalogus-ajanlo doboz az Elfogadohely adatlapjan: egy gomb, ami kulon
   kepernyore visz. Halvany zold hatter, hogy elvaljon a tobbi kartyatol. */
.katalogus-ajanlo { background: var(--greenbg); border-radius: 12px; }
.katalogus-ajanlo h2 { margin-top: 0; color: var(--green); }
.katalogus-ajanlo p { margin-bottom: 14px; }

/* --- Lapozhato katalogus (konyv-nezet) -----------------------------------
       FIGYELEM: a .lapozo* nevek MAR FOGLALTAK - azok a lista-lapozo savhoz
       tartoznak (.lapozo-oldalak, .lapozo-info, .lapozo-meret). Ezert kap a
       katalogus sajat nevteret.

       900 px folott ket lap latszik egymas mellett, mint egy nyitott konyv;
       alatta egy lap. A lapozas 3D-s forgatas a gerinc korul.
       Csokkentett mozgas eseten a JS at sem kapcsol animaciora. --- */
.katalogus-lapozo { max-width: 1180px; margin: 0 auto 32px; }
.katalogus-vezerlo {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.katalogus-allas {
  font-size: 14px; color: var(--muted); min-width: 110px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.katalogus-vezerlo .btn[disabled] { opacity: .45; }

/* A konyvtest: a lapok alatt vetett arnyek, a szeleken lapel-koteg. */
.katalogus-konyv {
  position: relative; display: flex; justify-content: center; align-items: stretch;
  gap: 0; -webkit-perspective: 2400px; perspective: 2400px;
  max-width: 580px; margin: 0 auto;
  -webkit-filter: drop-shadow(0 18px 34px rgba(20,35,55,.24));
  filter: drop-shadow(0 18px 34px rgba(20,35,55,.24));
  transition: transform .9s cubic-bezier(.42,0,.34,1);
}
.katalogus-konyv.konyv-ketoldalas { max-width: 1140px; }

/* --- Maganyos lap: borito es paratlan utolso oldal ---
   A boritonak nincs elotte lap, az utolso oldalnak (ha paratlan) nincs utana.
   A hianyzo lap ures marad, es a :empty valasztoval teljesen lathatatlan lesz -
   kulonben egy felesleges feher lap allna mellette. A konyv emellett eltolodik
   egy fel lapnyit, hogy a megmarado lap ne csuszszon ki a kozepbol; ez a
   lapozassal egyutt fut le, tehat ugy hat, mintha a konyv kinyilna vagy
   becsukodna. A gerinc a konyv kozepen marad, ezert a vaszon geometriaja
   valtozatlan - a translate nem befolyasolja az elem szelesseget. */
.katalogus-konyv .konyv-oldal:empty {
  background: transparent; box-shadow: none; cursor: default;
}
.katalogus-konyv .konyv-oldal:empty::before { display: none; }
.katalogus-konyv .konyv-oldal:empty:hover { transform: none; }
.katalogus-konyv.konyv-borito { transform: translateX(-25%); }
.katalogus-konyv.konyv-hatlap { transform: translateX(25%); }
.katalogus-konyv.konyv-borito .konyv-jobb,
.katalogus-konyv.konyv-hatlap .konyv-bal { border-radius: 10px; box-shadow: none; }

.konyv-oldal {
  position: relative; flex: 1 1 0; min-width: 0; background: #fff;
  cursor: pointer; transition: transform .18s ease;
}
.konyv-oldal img { display: block; width: 100%; height: auto; }
.konyv-bal { border-radius: 10px 2px 2px 10px; }
.konyv-jobb { border-radius: 2px 10px 10px 2px; }
.katalogus-konyv:not(.konyv-ketoldalas) .konyv-bal { border-radius: 2px 10px 10px 2px; }

/* Lapel-koteg: a kulso szelen vekony csikok, mintha tovabbi lapok lennenek alatta.
   Tisztan CSS, futasidoben nem kerul semmibe. */
.konyv-oldal::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 9px;
  background: repeating-linear-gradient(
    to right,
    #ffffff 0px, #ffffff 1px,
    #e6e9ee 1px, #e6e9ee 2px
  );
  box-shadow: 0 1px 3px rgba(20,35,55,.18);
  pointer-events: none;
}
.konyv-bal::before { left: -9px; border-radius: 4px 0 0 4px; }
.konyv-jobb::before { right: -9px; border-radius: 0 4px 4px 0; }
.katalogus-konyv:not(.konyv-ketoldalas) .konyv-bal::before { left: auto; right: -9px; border-radius: 0 4px 4px 0; }

/* A gerinc arnyeka csak nyitott konyvnel latszik. */
.konyv-ketoldalas .konyv-bal { box-shadow: inset -18px 0 26px -16px rgba(20,35,55,.42); }
.konyv-ketoldalas .konyv-jobb { box-shadow: inset 18px 0 26px -16px rgba(20,35,55,.42); }

.konyv-ketoldalas .konyv-jobb:hover { transform: translateX(2px) translateY(-2px); }
.konyv-ketoldalas .konyv-bal:hover { transform: translateX(-2px) translateY(-2px); }
.katalogus-konyv:not(.konyv-ketoldalas) .konyv-bal:hover { transform: translateY(-2px); }

/* --- A forduló lap --- */
.konyv-fordulo {
  position: absolute; top: 0; bottom: 0; width: 50%; left: 50%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transform-origin: left center;
  pointer-events: none; opacity: 0; z-index: 3;
}
.konyv-fordulo.fordulo-aktiv { opacity: 1; }
.fordulo-lap {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #fff; overflow: hidden;
  box-shadow: 0 12px 34px rgba(20,35,55,.32);
}
.fordulo-lap img { display: block; width: 100%; height: auto; }
.fordulo-hatul { transform: rotateY(180deg); }

/* Fenysav a fordulo lapon: ez adja a "hajlas" erzetet a legolcsobban.
   Csak opacity/transform valtozik, tehat a kompozitoron marad. */
.fordulo-lap::after {
  content: ""; position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 42%,
    rgba(255,255,255,0) 58%,
    rgba(20,35,55,.16) 100%);
  opacity: 0;
}
.fordulo-aktiv .fordulo-lap::after { animation: konyv-feny .62s ease-in-out both; }

/* A fordulo lap arnyeka arra a lapra, ami alatta felbukkan. */
.konyv-arnyek {
  position: absolute; top: 0; bottom: 0; width: 50%; left: 50%;
  pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(to right, rgba(20,35,55,.30), rgba(20,35,55,0) 72%);
}
.fordulo-aktiv ~ .konyv-arnyek { animation: konyv-vetett .62s ease-out both; }
/* Visszafele lapozasnal a bal felre esik az arnyek, nem a jobbra. */
.fordulo-vissza ~ .konyv-arnyek {
  left: 0;
  background: linear-gradient(to left, rgba(20,35,55,.30), rgba(20,35,55,0) 72%);
}

.fordulo-elore { animation: konyv-elore .62s cubic-bezier(.42,0,.34,1) both; }
.fordulo-vissza {
  left: 0; transform-origin: right center;
  animation: konyv-vissza .62s cubic-bezier(.42,0,.34,1) both;
}
.fordulo-vissza .fordulo-hatul { transform: rotateY(-180deg); }

@keyframes konyv-elore {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-180deg); }
}
@keyframes konyv-vissza {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(180deg); }
}
@keyframes konyv-feny {
  0%   { opacity: 0; }
  35%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { opacity: 0; }
}
@keyframes konyv-vetett {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Vaszonra rajzolt lapmeghajlas ---
   A vaszon a konyv egeszet fedi, es csak lapozas kozben lathato. Ilyenkor a
   fordulo lap alatti oldal es a gerinc-arnyek zavarna, ezert azokat elrejtjuk:
   mindent a vaszon rajzol. Ha a bongeszo nem tud vasznat, a CSS-es 3D-forgatas
   marad ervenyben - a ket megoldas soha nem fut egyszerre. */
.konyv-vaszon {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 0; z-index: 4;
}
.konyv-hajlik .konyv-vaszon { opacity: 1; }
.konyv-hajlik .konyv-oldal { transition: none; }
.konyv-hajlik .konyv-oldal:hover { transform: none; }

.katalogus-muveletek {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .katalogus-konyv { transition: none; }
  .konyv-oldal { transition: none; }
  .konyv-oldal:hover { transform: none; }
  .fordulo-elore, .fordulo-vissza { animation: none; }
  .konyv-fordulo, .konyv-arnyek, .konyv-vaszon { display: none; }
}
@media (max-width: 899px) {
  .katalogus-konyv, .katalogus-konyv.konyv-ketoldalas { max-width: 540px; }
  .katalogus-konyv.konyv-borito, .katalogus-konyv.konyv-hatlap { transform: none; }
  .konyv-fordulo, .konyv-arnyek, .konyv-vaszon { display: none; }
}
@media (max-width: 620px) {
  .katalogus-vezerlo { gap: 10px; }
  .katalogus-vezerlo .btn { flex: 1 1 0; min-width: 0; }
  .katalogus-muveletek .btn { width: 100%; }
  .konyv-oldal::before { width: 5px; }
  .konyv-bal::before { left: -5px; }
  .konyv-jobb::before, .katalogus-konyv:not(.konyv-ketoldalas) .konyv-bal::before { right: -5px; }
}
/* ==========================================================================
   KOMPATIBILITASI RETEG
   A belso portalok (admin / partner / elonykartyas) es az urlapos kepernyok
   sablonjai a regi osztalyneveket hasznaljak. Ez a reteg azokat az UJ
   design-tokenekkel stilusozza ujra, igy a sablonok valtoztatas nelkul
   kapjak meg az uj arculatot.
   ========================================================================== */

/* --- Regi token-nevek, amiket a sablonok inline style-jai meg hasznalnak ---
   A regi design-rendszer valtozonevei (--kek-900, --szurke-500, --feher, ...)
   az uj :root-bol kimaradtak. Ahol egy sablon inline style-ban meg rajuk
   hivatkozik, ott a deklaracio ervenytelen lesz - ez okozott mar olvashatatlan
   (sotet szoveg sotet hatteren) gombot es lathatatlan keretet. Itt uj tokenekre
   kepezzuk oket, igy a regi inline style-ok is a mostani paletta szerint
   jelennek meg. UJ kodban a jobb oldali tokent hasznald, ne ezeket. */
:root {
  --feher: #fff;
  --kek-600: var(--blue);
  --kek-700: var(--blue2);
  --kek-900: var(--blue2);
  --sarga-500: var(--yellow);
  --sarga-600: #d99f04;
  --zold: var(--green);
  --piros: var(--red);
  --piros-200: #efbdbd;
  --szurke-50: #fbfcfe;
  --szurke-100: var(--soft);
  --szurke-200: var(--line);
  --szurke-300: var(--line);
  --szurke-500: var(--muted);
  --szurke-900: var(--ink);
  --border: var(--line);
  --radius: 8px;
}

/* --- Elrendezes --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 22px; width: 100%; }
.section.container { padding-top: 22px; padding-bottom: 28px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-iranyitoszam-sor { grid-template-columns: 110px 1fr 2fr; }

.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* --- Portal-elrendezes: oldalso menu + tartalom --- */
.dashboard { display: grid; grid-template-columns: 236px 1fr; gap: 20px; align-items: start; }
.dashboard-nav {
  background: linear-gradient(180deg, #023E7D, #024b99); border-radius: 10px;
  padding: 12px 8px; position: sticky; top: 16px; box-shadow: var(--shadow);
}
.dashboard-nav a {
  display: block; color: #e5eff9 !important; padding: 9px 12px; border-radius: 6px;
  font-weight: 600; font-size: 13.5px; text-decoration: none; margin-bottom: 2px;
}
.dashboard-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.dashboard-nav a.active { background: #0c68c6; color: #fff !important; font-weight: 700; }
.dashboard-nav .group-label {
  color: #a9c6e6; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  padding: 12px 12px 5px; font-weight: 700;
}
.dashboard-nav-elvalaszto { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 8px 10px; }

/* --- Kartya --- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.card-body { padding: 18px 20px; }
.card-pad-lg { padding: 26px; }
.card-divider { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.card-eh-aktiv { background: var(--greenbg); border-color: #b7e0c5; }

/* --- Gombok: EGYETLEN keszlet, ket osztalycsaladdal ---------------------
   A rendszerben ketfele iras el: a tervezoi csomag szokoz-elvalasztott
   modositoi (.btn.primary) es a regi kotojeles nevek (.btn-primary). Minden
   valtozat MINDKET szelektort felsorolja, igy a ketto nem tud elcsuszni.
   Minden valtozat egyszerre allit hattert, szoveg- ES keretszint - ne legyen
   olyan gomb, ahol egy inline felulirastol olvashatatlan lesz a szoveg.
   Ha egy gombhoz nem talalsz valtozatot, UJAT ITT vegyel fel, ne inline style-t. */
.btn {
  height: auto; min-height: 42px; padding: 9px 18px; border-radius: 7px;
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none;
  white-space: nowrap; font-family: inherit; line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* Fo muvelet - tomor kek */
.btn-primary, .btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover, .btn.primary:hover { background: var(--blue2); border-color: var(--blue2); color: #fff; }

/* Sotet valtozat - tomor sotetkek */
.btn-dark, .btn.dark { background: var(--blue2); color: #fff; border-color: var(--blue2); }
.btn-dark:hover, .btn.dark:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Kiemelt CTA - tomor napsarga */
.btn-accent, .btn-yellow, .btn.accent { background: var(--yellow); color: #26313e; border-color: var(--yellow); }
.btn-accent:hover, .btn-yellow:hover, .btn.accent:hover { background: #d99f04; border-color: #d99f04; color: #26313e; }

/* Kiemelt CTA - tomor zold. A fooldali hero "Mi is az Elony Rendszer?" gombja
   hasznalja: a sarga "Elonykartyat igenylek" mellett kell egy masik, ugyanolyan
   hangsulyos, de mas szinu hivoszo. */
.btn-zold, .btn.zold { background: var(--green); color: #fff; border-color: var(--green); }
.btn-zold:hover, .btn.zold:hover { background: #10502A; border-color: #10502A; color: #fff; }

/* Masodlagos - feher, kek kerettel */
.btn-outline, .btn.secondary { background: #fff; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover, .btn.secondary:hover { background: var(--infobg); border-color: var(--blue); color: var(--blue2); }

/* Semleges - feher, szurke kerettel */
.btn-ghost, .btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover, .btn.ghost:hover { background: var(--soft); border-color: var(--muted); color: var(--ink); }

/* Sotet hatteren allo gomb (fejlec, lablec) */
.btn-outline-light, .btn.light {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff;
}
.btn-outline-light:hover, .btn.light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* Destruktiv, halvany - visszafordithato muveletekhez (felfuggesztes, torles) */
.btn-danger, .btn.danger { background: #fff; border-color: #e3a5a5; color: var(--red); }
.btn-danger:hover, .btn.danger:hover { background: var(--redbg); border-color: var(--red); color: var(--red); }

/* Destruktiv, nyomatekos - VISSZAVONHATATLAN muveletekhez (vegleges torles).
   Ez valtja ki a korabbi inline "background:#7a1f1f" felulirasokat, amik a
   halvany valtozat piros szovegszinet sotet piros hatterre tettek. */
.btn-danger-solid, .btn.danger-solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger-solid:hover, .btn.danger-solid:hover { background: #7a1f1f; border-color: #7a1f1f; color: #fff; }

/* Meretek es szelesseg */
.btn-sm, .btn.sm { min-height: 36px; padding: 6px 13px; font-size: 13.5px; }
.btn-block, .btn.block { width: 100%; }

/* Ikon-gomb (pl. sor torlese egy listaban) - negyzetes, felirat nelkuli */
.btn-icon {
  min-height: 28px; width: 28px; padding: 0; font-size: 13px; border-radius: 6px; flex: 0 0 auto;
}

.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --- Cimkek --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.badge-blue { background: var(--infobg); color: var(--info); }
.badge-green { background: var(--greenbg); color: var(--green); }
.badge-red { background: var(--redbg); color: var(--red); }
.badge-yellow { background: var(--amberbg); color: var(--amber); }
.badge-amber { background: var(--amberbg); color: var(--amber); }
.badge-gray { background: var(--soft); color: var(--muted); }

/* --- Riasztasok --- */
.alert {
  padding: 13px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 15px;
  border: 1px solid; border-left-width: 4px;
}
.alert-success { background: var(--greenbg); border-color: #b7e0c5; border-left-color: var(--green); color: var(--green); }
.alert-error { background: var(--redbg); border-color: #efbdbd; border-left-color: var(--red); color: var(--red); }
.alert-info { background: var(--infobg); border-color: #b9d8f5; border-left-color: var(--info); color: var(--info); }
.alert-warning { background: var(--amberbg); border-color: #ecd08a; border-left-color: var(--amber); color: var(--amber); }

/* --- Statisztika-csempe --- */
.stat-tile {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 16px 18px; display: block; text-decoration: none;
}
.stat-tile:hover { border-color: var(--blue); }
.stat-tile .value { font-size: 28px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-tile .label { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 3px; }

/* --- Tablazatok --- */
.table-wrap {
  overflow-x: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch;
}
.table-wrap table, table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th, table.table th {
  text-align: left; background: var(--soft); color: #334155; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table-wrap td, table.table td { padding: 12px 16px; border-top: 1px solid #eef2f7; vertical-align: middle; }
.table-wrap th:first-child, .table-wrap td:first-child,
table.table th:first-child, table.table td:first-child { padding-left: 20px; }
.table-wrap th:last-child, .table-wrap td:last-child,
table.table th:last-child, table.table td:last-child { padding-right: 20px; }
.table-wrap tbody tr:hover td { background: #f8fafc; }

/* --- Rendezheto fejlec + lista vezerlo --- */
th.rendezheto { cursor: pointer; user-select: none; }
th.rendezheto:hover { background: #e7edf4; }
th.rendezheto > a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
th.rendezheto.rendezve { color: var(--blue, #0a1f38); background: #e3ebf5; }
.rendezo-nyil { font-size: 10px; opacity: .38; line-height: 1; margin-left: 5px; }
th.rendezheto:hover .rendezo-nyil { opacity: .7; }
th.rendezheto.rendezve .rendezo-nyil { opacity: 1; }

.tabla-vezerlo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 10px 0 4px; font-size: 13px;
}
.tabla-vezerlo-bal, .tabla-vezerlo-jobb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabla-vezerlo label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 600; font-size: 13px; }
.tabla-vezerlo select.tabla-meret {
  height: 32px; padding: 0 8px; font-size: 13px; border: 1px solid var(--line, #dbe3eb);
  border-radius: 7px; background: #fff; width: auto; min-width: 96px; margin: 0;
}
.tabla-vezerlo .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.tabla-info, .tabla-oldalszam { font-size: 12.5px; }

/* --- Hirlevel kuldes attekintes (Gantt) --- */
.gantt { margin-top: 10px; }
.gantt-fejlec {
  position: relative; height: 22px; margin-left: 240px;
  border-bottom: 1px solid var(--line, #dce3ea);
}
.gantt-cimke {
  position: absolute; top: 2px; transform: translateX(-50%);
  font-size: 11px; color: var(--muted, #667587); white-space: nowrap;
}
.gantt-sor { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.gantt-nev {
  width: 230px; min-width: 230px; font-size: 12.5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.gantt-nev strong { display: block; font-weight: 700; }
.gantt-nev .muted { font-size: 11.5px; }
.gantt-savok {
  position: relative; flex: 1; height: 26px; background: var(--soft, #f1f4f8);
  border-radius: 6px; overflow: hidden;
}
.gantt-ma { position: absolute; top: 0; bottom: 0; width: 2px; background: #c0504d; opacity: .65; z-index: 2; }
.gantt-sav {
  position: absolute; top: 4px; height: 18px; border-radius: 5px; min-width: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 3px rgba(16, 32, 51, .22);
}
.gantt-sav:hover { filter: brightness(1.08); }
.gantt-sav span { padding: 0 5px; overflow: hidden; white-space: nowrap; }
@media (max-width: 720px) {
  .gantt-fejlec { margin-left: 0; }
  .gantt-sor { flex-direction: column; align-items: stretch; gap: 3px; }
  .gantt-nev { width: auto; min-width: 0; }
}

/* --- Tesztlevel kuldes a listasorbol --- */
.teszt-kuldes { position: relative; display: inline-block; }
.teszt-kuldes > summary { cursor: pointer; }
.teszt-kuldes > summary::-webkit-details-marker { display: none; }
.teszt-kuldes[open] > summary { background: var(--blue, #0357b1); color: #fff; border-color: var(--blue, #0357b1); }
.teszt-kuldes-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px;
  background: #fff; border: 1px solid var(--line, #dce3ea); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 32, 51, .18); padding: 14px; text-align: left;
}
.teszt-kuldes-panel label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.teszt-kuldes-panel input[type="email"] { width: 100%; height: 36px; font-size: 13px; margin-bottom: 8px; }
.teszt-kuldes-panel p { font-size: 12px; line-height: 1.45; margin: 0 0 10px; }
.teszt-kuldes-panel code { font-size: 11.5px; }
@media (max-width: 640px) {
  .tabla-vezerlo { flex-direction: column; align-items: stretch; }
  .tabla-vezerlo-jobb { justify-content: space-between; }
}

/* --- Urlapok --- */
.form-group { margin-bottom: 16px; }
.form-group label, label.label { display: block; font-weight: 700; font-size: 14px; color: #405064; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; min-height: 44px; border: 1px solid #ccd6e0; border-radius: 7px;
  background: #fff; padding: 10px 13px; color: var(--ink); font: inherit;
}
textarea { min-height: 105px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }
.field-error { color: var(--red); font-size: 13px; font-weight: 600; margin: 5px 0 0; }
.field-hint { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.checkbox-row input { margin-top: 3px; }
.checkbox-row label { display: inline; font-weight: 500; margin: 0; }

/* --- Pill-navigacio (tabok) --- */
.pill-nav { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.pill-nav a {
  padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #cbd5df;
  color: #4f6072 !important; font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.pill-nav a:hover { border-color: var(--blue); color: var(--blue) !important; }
.pill-nav a.active { background: var(--blue); border-color: var(--blue); color: #fff !important; }

/* Admin alapszabaly: minden szuro-gombon ott a talalatok darabszama. A szam sajat
   "pirula" a cimke utan, hogy szurt allapotban is jol elkulonuljon a szovegtol. */
.pill-nav .pill-db {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #eef2f7; color: #4f6072; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.pill-nav a.active .pill-db { background: rgba(255, 255, 255, .22); color: #fff; }
.pill-nav a:hover .pill-db { background: #e3ecf6; }

/* --- Ures allapot --- */
.empty-state {
  text-align: center; padding: 42px 20px; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}

/* --- Gazdag szovegszerkeszto --- */
.rte-wrapper { border: 1px solid #ccd6e0; border-radius: 7px; overflow: hidden; background: #fff; }
.rte-toolbar { display: flex; gap: 5px; flex-wrap: wrap; padding: 7px; background: var(--soft); border-bottom: 1px solid var(--line); }
.rte-toolbar button, .rte-toolbar select {
  min-height: 32px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 5px;
  background: #fff; font-size: 13px; cursor: pointer; width: auto;
}
.rte-toolbar button:hover { border-color: var(--blue); color: var(--blue); }
.rte-editor { min-height: 180px; padding: 12px 14px; outline: 0; }
.rte-hidden { display: none; }
.rte-content { line-height: 1.6; }
.rte-content p { margin: 0 0 10px; }
.rte-content ul, .rte-content ol { margin: 0 0 10px; padding-left: 20px; }

/* --- Egyeb, sablonokban hasznalt elemek --- */
.product-card { display: flex; flex-direction: column; }
.product-card .thumb { height: 160px; background: var(--soft); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.gallery-tile { display: block; position: relative; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.gallery-tile img { width: 100%; height: 150px; object-fit: cover; display: block; }
.gallery-tile .caption { display: block; padding: 10px 12px; font-weight: 700; font-size: 14px; }
.price .old, .price .old-price { text-decoration: line-through; color: var(--muted); margin-right: 7px; font-weight: 400; }
.price { font-weight: 800; color: var(--green); font-size: 18px; }
.csomag-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
.csomag-summary-nev { font-weight: 700; }
.dashboard-grid { display: grid; gap: 14px; }

/* --- Belso felulet kerete (layout_app) --- */
.app-oldal { background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
.app-oldal > main { flex: 1 0 auto; padding-bottom: 32px; }
.app-fejlec {
  background: #fff; border-bottom: 1px solid #dbe4ee; position: sticky; top: 0; z-index: 40;
  box-shadow: 0 3px 10px rgba(16, 40, 70, .075), 0 1px 3px rgba(16, 40, 70, .05);
}
.app-fejlec-sor { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; }
.app-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.app-brand .logo-original { width: 84px; height: 54px; }
.app-felulet { font-weight: 800; font-size: 16px; color: var(--blue2); }
.app-fejlec-muvelet { display: flex; align-items: center; gap: 9px; }
.app-fejlec-muvelet .btn { width: auto; }
.user-circle {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: 0 0 auto;
}
.app-lablec { background: #fff; border-top: 1px solid var(--line); padding: 16px 0; font-size: 13px; color: var(--muted); }
.app-lablec .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-lablec nav { display: flex; gap: 16px; }
.app-lablec a { color: var(--muted); text-decoration: none; }
.app-lablec a:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 1023px) {
  .dashboard { grid-template-columns: 1fr; }
  .dashboard-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .dashboard-nav a { margin-bottom: 0; }
  .dashboard-nav .group-label { width: 100%; padding: 4px 8px; }
  .dashboard-nav-elvalaszto { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .grid-iranyitoszam-sor { grid-template-columns: 1fr; }
  .container { padding: 0 14px; }
  .card-pad-lg { padding: 18px; }
  .btn { width: 100%; }
  .pill-nav .btn, .flex .btn, .dashboard-nav .btn, .toolbar .btn { width: auto; }
}

/* ==========================================================================
   MARADEK SABLON-OSZTALYOK (auditbol)
   ========================================================================== */

/* Szekciocim + kiemelo felcimke */
.section-title { margin-bottom: 16px; }
.section-title h1, .section-title h2 { margin: 4px 0 6px; }
.section-title p { margin: 0; color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue);
}

/* Jogi dokumentum */
.jogi-dokumentum { max-width: 72ch; margin: 0 auto; }
.jogi-dokumentum h1 { font-size: 28px; margin: 0 0 8px; }
.jogi-dokumentum h2 { font-size: 20px; margin: 26px 0 10px; }
.jogi-dokumentum h3 { font-size: 17px; margin: 20px 0 8px; }
.jogi-dokumentum p, .jogi-dokumentum li { line-height: 1.65; }
.jogi-dokumentum ul, .jogi-dokumentum ol { padding-left: 20px; margin: 0 0 14px; }

/* Google belepes gomb */
.google-btn-panel { margin: 16px 0; }
/* A Google-gomb ugyanazt a geometriat es keretszint hasznalja, mint a .btn-ghost -
   csak a Google-logo miatt marad kulon osztaly. */
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 42px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; font-size: 15px;
  line-height: 1.2; cursor: pointer; font-family: inherit;
  transition: background-color .12s ease, border-color .12s ease;
}
.google-btn:hover { border-color: var(--muted); background: var(--soft); }

/* RTE eszkoztar legordulo */
.rte-format-select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 13px; width: auto; }

/* Piacteri muveleti blokkok */
.termek-akcio { padding: 14px 0; border-top: 1px solid var(--line); }
.termek-akcio:first-child { border-top: 0; padding-top: 0; }
.termek-akcio h4 { margin: 0 0 9px; font-size: 15px; }
.termek-akcio--kedveles h4 { color: var(--blue); }
.termek-akcio--rendeles h4 { color: var(--green); }
.termek-akcio--kerdes h4 { color: var(--amber); }

/* Hirlevel cimzett reszletek */
.cimzett-reszlet { margin-top: 10px; padding: 12px 14px; background: var(--soft); border-radius: 8px; border: 1px solid var(--line); }
.cimzett-tipus-radio, .szerkeszto-mod-radio { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.tag-beszuro { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.tag-beszuro button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; width: auto; }
.tag-beszuro button:hover { border-color: var(--blue); color: var(--blue); }

/* Kartyaminta-valaszto galeria.
   FONTOS: a .kartyaminta-valaszto osztaly a sablonokban az EGYES elemeken
   (a <label>-eken) van, NEM a galeria konteneren - a galeriat a .grid.grid-3
   adja. A korabbi szabalyok konteneri szerkezetet feltelezteztek, ezert:
   - a `.kartyaminta-valaszto input { position:absolute; opacity:0 }` az egyes
     elemek radio gombjat tuntette el (a valasztas megtortent, csak nem latszott),
   - a `.kartyaminta-valaszto label:has(...)` szelektor sosem illeszkedett
     (nincs beagyazott label), a `input:checked + img` pedig csak border-COLOR-t
     allitott egy 0 szelessegu kereten - vagyis semmilyen kivalasztott allapot
     nem jelent meg. Innentol az elem maga kapja a keretet es a kijeloles-jelzest. */
.kartyaminta-valaszto {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.kartyaminta-valaszto:hover { border-color: #a9c4e0; }
.kartyaminta-valaszto img { width: 100%; display: block; }
.kartyaminta-valaszto input[type="radio"] {
  position: static; opacity: 1; width: auto; min-height: 0;
  accent-color: var(--blue); cursor: pointer;
}
/* A kijelolt allapotot SZANDEKOSAN testverszelektorral jelezzuk, nem :has()-szal.
   Elesben merve: a `:has(input:checked)` szabaly a lap betoltesekor kiszamolt
   allapotnal ragad, es masik minta valasztasakor NEM szamolodik ujra - vagyis
   ket kartya latszana egyszerre kijeloltnek. Az `input:checked + img` viszont
   minden bongeszoben megbizhatoan frissul. */
.kartyaminta-valaszto input:checked + img {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.kartyaminta-valaszto input:checked ~ div { color: var(--blue); font-weight: 700; }
.kartyaminta-valaszto input:disabled, .kartyaminta-valaszto input:disabled + img { cursor: not-allowed; }

/* Admin menuszerkeszto */
.menu-szerkeszto { display: grid; gap: 14px; }
.menu-szerkeszto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.menu-szerkeszto-lista li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
.menu-szerkeszto-fogantyu { cursor: grab; color: var(--muted); font-size: 17px; user-select: none; }
.menu-szerkeszto-btns { display: flex; gap: 5px; margin-left: auto; }
.menu-sorrend-input { width: 64px; min-height: 34px; text-align: center; }

/* Megallito tabla szerkeszto */
.megallito-box-gomb {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none;
  color: inherit; text-align: center; font-weight: 700;
}
.megallito-box-gomb:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.megallito-igazit { display: flex; gap: 5px; }
.megallito-igazit button { min-height: 32px; padding: 4px 9px; font-size: 12.5px; width: auto; }
.megallito-szin-input { width: 46px; min-height: 34px; padding: 2px; }
.megallito-qr-keret { background: #fff; padding: 6px; border-radius: 6px; display: inline-block; }

/* Kisebb, ismetlodo elemek */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--infobg); }
.meta { color: var(--muted); font-size: 13px; }
.sep { color: var(--faint, #9aa8b8); margin: 0 6px; }
.social-btn-sm { padding: 6px 11px !important; font-size: 12.5px; }
.nyomtatas-gomb { margin-bottom: 14px; }
.copy-tartalom-btn { width: auto; }
.helyszin { color: var(--muted); font-size: 13px; }
.instrukcio { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.lap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.qr { display: inline-block; background: #fff; padding: 8px; border-radius: 8px; }

@media print {
  .lap { border: 0; box-shadow: none; padding: 0; }
  .nyomtatas-gomb { display: none !important; }
}

/* --- QR-folyamat kerete (layout_qr): minimal fejlec + lablec --- */
.qr-oldal { background: linear-gradient(180deg, #edf6ff, #fff 40%); min-height: 100vh; display: flex; flex-direction: column; }
.qr-oldal > main { flex: 1 0 auto; }
.qr-fejlec {
  display: flex; justify-content: center; padding: 16px 16px 14px; background: #fff;
  border-bottom: 1px solid #dbe4ee; position: relative; z-index: 30;
  box-shadow: 0 3px 10px rgba(16, 40, 70, .075), 0 1px 3px rgba(16, 40, 70, .05);
}
.qr-fejlec .logo-original { width: 104px; height: 68px; }
.qr-lablec { text-align: center; padding: 28px 20px 24px; border-top: 1px solid var(--line); margin-top: 28px; background: #fff; }
.qr-lablec .logo-original { width: 132px; height: 88px; margin: 0 auto 12px; }
.qr-lablec p { max-width: 46ch; margin: 0 auto 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.qr-lablec .social-links { justify-content: center; margin-bottom: 16px; }
.qr-jogi { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.qr-jogi a { color: var(--blue); text-decoration: none; font-size: 14px; }
.qr-jogi a:hover { text-decoration: underline; }
.qr-copyright { font-size: 12.5px; color: var(--faint, #94a3b8); margin: 0 !important; }

/* --- Egyseges oldalfejlec az almenu-oldalakon (cim balra, vissza-gomb jobbra) --- */
.oldal-fejlec {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.oldal-fejlec-cim { min-width: 0; flex: 1 1 300px; }
.oldal-fejlec-cim h1 { margin-top: 0; margin-bottom: 0; }
.oldal-fejlec-muveletek {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto; padding-top: 3px;
}
.oldal-fejlec-muveletek .btn { white-space: nowrap; }

/* --- Almenut tartalmazo menupontok jelolese az oldalso navigacioban --- */
.dashboard-nav a { display: flex; align-items: center; gap: 8px; }
.dashboard-nav a .menu-felirat { flex: 1 1 auto; min-width: 0; }
.dashboard-nav a .almenu-jel {
  flex: 0 0 auto; font-size: 17px; line-height: 1; opacity: .62;
  transform: translateY(-1px);
}
.dashboard-nav a:hover .almenu-jel, .dashboard-nav a.active .almenu-jel { opacity: 1; }

/* --- Admin > Torzsadatok > Szinek / Megjelenes: token-szerkeszto --- */
.szin-sor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line);
}
.szin-sor:first-of-type { border-top: 0; }
.szin-sor-cimke { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.szin-sor-cimke label { margin: 0; font-weight: 600; }
.szin-sor-token { font-size: 12px; }
.szin-sor-token code { font-size: 12px; }
.szin-sor-vezerlok { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.szin-valaszto {
  width: 48px; height: 38px; padding: 2px; border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; background: var(--white);
}
.szin-hex { width: 96px; font-family: ui-monospace, "Consolas", monospace; text-align: center; }

.szin-elonezet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.szin-elonezet-savok { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.szin-sav {
  border-radius: 8px; padding: 16px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); text-align: center;
}
.szin-sav-fejlec { background: var(--header-bg); color: var(--ink); }
.szin-sav-lablec {
  background: linear-gradient(110deg, var(--footer-bg-1), var(--footer-bg-2));
  color: #fff; border-color: transparent;
}
@media (max-width: 640px) {
  .szin-elonezet-savok { grid-template-columns: 1fr; }
}

/* --- Szuro-sor (admin listaoldalak fejleceben) -------------------------
   Az alap urlap-szabaly minden input/select-nek width:100%-ot ad, ami egy
   flex-sorban szetfesziti a mezoket - emiatt csusztak el a datum-mezok a
   Penzugyek szuro paneljen. Itt a vezerlok sajat, tartalomhoz igazodo
   szelesseget kapnak, es a cimkezett mezok alulra igazodnak, igy minden
   elem egy vonalban all. */
.szuro-sor { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.szuro-sor > * { margin: 0; }

.szuro-mezo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.szuro-mezo > .szuro-cimke {
  font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.2; white-space: nowrap;
}

.szuro-sor input[type="text"], .szuro-sor input[type="search"],
.szuro-sor input[type="date"], .szuro-sor select {
  width: auto; min-height: 40px; padding: 8px 12px;
}
.szuro-sor input[type="text"], .szuro-sor input[type="search"] { min-width: 240px; }
.szuro-sor select { min-width: 170px; max-width: 260px; }
.szuro-sor input[type="date"] { min-width: 148px; }

.szuro-datum { display: flex; align-items: center; gap: 6px; }
.szuro-datum .szuro-kotojel { color: var(--muted); flex: 0 0 auto; }

.szuro-jelolo { display: flex; align-items: center; gap: 7px; min-height: 40px; white-space: nowrap; }
.szuro-jelolo input[type="checkbox"] { min-height: 0; margin: 0; }

.szuro-sor .btn { min-height: 40px; }

@media (max-width: 700px) {
  .szuro-sor { align-items: stretch; }
  .szuro-sor input[type="text"], .szuro-sor input[type="search"],
  .szuro-sor select, .szuro-mezo { width: 100%; min-width: 0; max-width: none; }
  .szuro-datum input[type="date"] { flex: 1 1 0; min-width: 0; }
}

/* ==========================================================================
   OLDALSZELESSEG-KORLAT - a publikus weboldal savjai
   A tervezoi csomag fix 1440px szelessegre keszult, ezert a teljes szelessegu
   savoknak (fejlec, hero, gyorssor, szekciok, lablec) nem volt felso hatara:
   szeles monitoron a tartalom szethuzodott a kepernyo ket szelere.
   Megoldas: a SAV hattere tovabbra is a teljes szelesseget kitolti (igy a
   hero vilagoskekje es a lablec kekje a kepernyo szelere fut), a TARTALOM
   viszont --oldal-max ertekre korlatozodik es kozepre all. Ezt a savok oldalso
   belso margoja vegzi: max(minimum, (szabad hely fele)). A max() miatt szuk
   kepernyon automatikusan a --sav-margo minimum ervenyesul, tehat a meglevo
   reszponziv viselkedes valtozatlan marad, csak egy felso korlat kerul be.
   ========================================================================== */
:root { --oldal-max: 1280px; --sav-margo: 32px; }
@media (max-width: 1023px) { :root { --sav-margo: 18px; } }
@media (max-width: 559px) { :root { --sav-margo: 12px; } }

.public-header,
.hero,
.quick-row,
.list-hero,
.content-wide,
.section:not(.container):not(.hogyan-mukodik),
.detail-wrap,
.efh-fejlec-tartalom,
.public-footer {
  padding-left: max(var(--sav-margo), calc((100% - var(--oldal-max)) / 2));
  padding-right: max(var(--sav-margo), calc((100% - var(--oldal-max)) / 2));
}

/* A "Hogyan mukodik?" doboznak sajat belso margoja van, es oldalso MARGOval
   all be a sav szelere - ezert nala a margot kell korlatozni, nem a paddinget. */
.section.hogyan-mukodik {
  margin-left: max(var(--sav-margo), calc((100% - var(--oldal-max)) / 2));
  margin-right: max(var(--sav-margo), calc((100% - var(--oldal-max)) / 2));
}

/* Kepfeltoltesi tipp (partials/_kep_tipp) - minden kep-feltolto mezo alatt.
   A flex-basis:100% miatt a soros (display:flex) feltolto-urlapokban is sajat sorba
   kerul, nem szorul be a fajlvalaszto es a gomb koze. */
.kep-tipp {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.kep-tipp strong { color: var(--blue2); }

/* Szines szekcio-sav. A hatter a kepernyo teljes szelesseget kitolti, a tartalom
   viszont a fenti savmargo miatt tovabbra is az --oldal-max kereten belul marad
   es egy vonalban all a tobbi szekcioval. Barmelyik .section megkaphatja, ha el
   akar valni a feher oldalhattertol (fooldal: "Kiemelt ajanlatok"). Szandekosan
   a --soft felulet-tokent hasznalja - az az admin > Torzsadatok > Szinek oldalrol
   allithato -, ezert nincs benne fix szinkod. */
.section.szines-sav {
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 26px;
  padding-bottom: 30px;
  margin: 10px 0 26px;
}
@media (max-width: 559px) {
  .section.szines-sav { padding-top: 20px; padding-bottom: 22px; margin: 8px 0 18px; }
}

/* A hero bal hasabjanak sajat oldalso belso margoja megszunik: a savmargot
   mar a .hero adja, igy a hero szovege pontosan egy vonalba kerul a fejlec
   logojaval es az alatta levo szekciok tartalmaval. */
.hero-copy { padding-left: 0; padding-right: 26px; }
@media (max-width: 1023px) { .hero-copy { padding-right: 0; } }


/* A vilagos logofajl keparanya 3:2 (480x320). A tervezoi csomag doboza ettol
   elter (96x62 / 80x52), ezert a kep melle vekony fuggoleges savok maradtak,
   amelyek a .logo-original kek hatteret mutattak. A doboz pontos 3:2 aranya
   ezt a levegot teljesen megszunteti. */
.public-header .logo-original { width: 96px; height: 64px; }
@media (max-width: 1150px) { .public-header .logo-original { width: 78px; height: 52px; } }

/* Mobil fejlec: kek hatter (a kartya/logo kekje).
   A vilagos hatteru logofajl sotet "ELONY" felirata kek hatteren olvashatatlan
   lenne, ezert mobilon a KEK hatteru logovaltozat jelenik meg - annak a sajat
   hattere pontosan #0357B1, tehat egybeolvad a fejleccel. A ket kepbol mindig
   csak az egyik van megjelenitve, a masikat a display:none a kepernyoolvasok
   elol is elrejti, igy nem keletkezik ketszeres logo-felirat. */
.fejlec-logo-mobil { display: none; }

@media (max-width: 767px) {
  .public-header { background: var(--blue); border-bottom-color: var(--blue2); }
  .fejlec-logo-asztali { display: none; }
  .fejlec-logo-mobil { display: block; }
  .menu-gomb { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
  .menu-gomb:hover { background: rgba(255, 255, 255, .14); }

  /* Vilagos fejlec (publikus urlapoldalak): mobilon is a FEHER hatteru logo marad,
     ezert a fejlec hattere sem valthat kekre - kulonben feher teglalap lenne rajta. */
  .public-header.public-header--vilagos { background: var(--header-bg); border-bottom-color: #dbe4ee; }
  .public-header--vilagos .fejlec-logo-asztali { display: block; }
  .public-header--vilagos .menu-gomb { color: var(--ink); border-color: var(--line); }
  .public-header--vilagos .menu-gomb:hover { background: var(--soft); }
  .public-nav.is-nyitva { top: 100%; }
  .footer-brand .logo-original { display: none; }
}

/* QR-folyamat (layout_qr): a fejlec a kartya/logo kekjet kapja, hogy a kek
   hatteru logo ne kulon teglalapkent uljon egy feher savon. A lablecbol a logo
   kikerult a sablonbol, es az is a kartya kekjere valt - ezert a szovegek,
   linkek es a kozossegi gombok vilagos valtozatra allnak. */
/* ==========================================================================
   DOBOZ ALAKU LINKEK - ne legyenek alahuzott, link-szeru szovegek
   Az elony.css-ben nincs globalis `a { text-decoration: none }`, ezert minden
   olyan link, amelyre nem irtunk kulon szabalyt, megkapta a bongeszo
   alapertelmezett alahuzasat. Emiatt a kartya/doboz alaku "gombok" (Torzsadatok,
   hub-oldalak, csempek) alahuzott linkszovegkent jelentek meg. Ezek gombkent
   viselkednek, ezert nincs alahuzas - a kattinthatosagot a keret, az arnyek es
   a cimszin valtozasa jelzi. A szabaly nem kepernyomeret-fuggo, tehat mobilon
   is ervenyes.
   ========================================================================== */
a.card, a.panel, a.stat-tile, a.social-btn, a.partner-tile,
a.megallito-box-gomb, a.box-gomb, a.efh-logo {
  text-decoration: none;
}
a.card:hover, a.panel:hover, a.stat-tile:hover, a.box-gomb:hover {
  text-decoration: none; border-color: var(--blue);
  box-shadow: 0 5px 16px rgba(16, 40, 70, .13);
}
a.card:hover h1, a.card:hover h2, a.card:hover h3, a.card:hover h4 { color: var(--blue); }

/* ==========================================================================
   KEPHELYEK - a kepek illeszkedjenek a szamukra fenntartott helyre
   A tervezoi csomag minden kephelynek FIX PIXEL MAGASSAGOT adott, a szelesseg
   viszont a racstol fugg - igy a kephely tenyleges keparanya kepernyomerettel
   valtozott, a `cover` pedig kiszamithatatlanul vagott: egy allo termekfotobol
   csak egy vizszintes sav latszott, egy feher hatteru katalogusképbol meg a
   szelek. Innentol minden tartalmi kephely FIX ARANYT kap (4:3), es a kep
   `contain` modban, semleges hatteren jelenik meg: soha nem vagodik le belole
   semmi, a 4:3-ra feltoltott kep pedig hezag nelkul kitolti a helyet.
   A logo 1:1, szinten `contain`, hogy a szeles logok se csonkuljanak.
   Kivetel az Elfogadohely boritokep (.efh-fokep): az szandekosan marad
   panorama-sav `cover` modban, mert az egy hatterkent viselkedo banner.
   ========================================================================== */
.offer-card .img,
.partner-tile .img,
.esemeny-kartya .img {
  height: auto; aspect-ratio: 4 / 3;
  background-color: #fff; background-size: contain; background-position: center;
  background-repeat: no-repeat;
}

.product-card .thumb { height: auto; aspect-ratio: 4 / 3; background: #fff; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }

/* A "contain" modon megjelenitett kepeknel a doboz hattere lehet a kep sajat
   szelenek szine (kep.hatterszin), amit a sablon inline style-kent tesz ki.
   Ezert a FEHER alapertelmezes a DOBOZRA kerul, a kep maga atlatszo marad -
   kulonben a kep sajat feher hattere kitakarna a doboz szinet, es a szines
   logok korul megmaradna a feher gyuru (pl. Talajcsavarozo narancs logoja). */
.galeria-elem { background: #fff; }
.galeria-elem img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: transparent; }

.termek-kep { background: #fff; }
.termek-kep img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 460px;
  object-fit: contain; background: transparent;
}

.efh-logo img { object-fit: contain; background: transparent; padding: 4px; }

@media (max-width: 1023px) {
  .partner-tile .img, .esemeny-kartya .img, .offer-card .img { aspect-ratio: 4 / 3; height: auto; }
}

/* Oldalfejlec-savok: a tervezoi csomag mindenhova ugyanazt a kek-sarga
   szinatmenetet tette. Helyette oldalankent kulon, halvany, TOMOR szin -
   igy ranezesre megkulonboztetheto, melyik oldalon van a latogato.
   Mindegyik nagyon vilagos, hogy az --ink szovegszin kontrasztja veghig
   bosegesen a WCAG AA felett maradjon. */
.list-hero { background: var(--soft); }
.list-hero--piacter { background: #EEF4FC; }
.list-hero--partnereink { background: #EDF6EF; }
.list-hero--esemenyek { background: #FFF6E3; }
.list-hero--vallalkozas { background: #F1EEFA; }
.list-hero--maganszemely { background: #E9F5F5; }
.list-hero--rolunk { background: #F3F1EC; }
.list-hero--nyeremenyjatek { background: #FBECF2; }
.list-hero--miertjo { background: #EDEFF4; }
.list-hero--katalogus { background: #FFF3E8; }
.list-hero--kapcsolat { background: #FBEFEA; }
.list-hero--pontverseny { background: #FDF2CE; }

/* A hero bevezeto szovege a --muted (#667587) szinnel 17 px-en MINDEN hero-hatteren
   4,09-4,38:1 kontraszttal jott ki, vagyis a WCAG AA 4,5:1 alatt (17 px nem szamit nagy
   szovegnek - ahhoz 18,66 px felkover vagy 24 px kellene). Egy arnyalattal sotetebb szin
   mind a 11 hatteren atviszi: a legrosszabb eset igy 4,86:1.
   UJ HERO-HATTER FELVETELEKOR ezt ujra ellenorizni kell. */
.list-hero p { color: #5C697A; }

/* Zaro felhivas-doboz (Vallalkozasoknak / Maganszemelyeknek / Rolunk).
   A tervezoi csomag itt is a kek-sarga szinatmenetet hasznalta. Helyette
   tomor, visszafogott doboz: feher hatter, felul vastag napsarga savval.
   A figyelemfelhivast a sarga sav + a sarga gomb adja, nem a hatter. */
.zaro-cta {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--yellow);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 40, 70, .09);
  padding: 32px 26px;
}
.zaro-cta h2 { color: var(--blue2); font-size: 23px; }
.zaro-cta p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.zaro-cta .btn { min-height: 46px; padding: 0 26px; font-size: 15.5px; }

/* ==========================================================================
   ELONY CSOMAGOK a Vallalkozasoknak oldalon
   Feher kartyak, kozottuk egy tomor kek hatterrel kiemelt (a "kiemelt"
   adatbazis-jelolo alapjan). A kartyak azonos magassagok, hogy a valasztogomb
   egy vonalban alljon akkor is, ha a leirasok kulonbozo hosszuak.
   ========================================================================== */
.csomag-racs { align-items: stretch; }
.csomag-kartya {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; background: #fff; border: 1px solid var(--line);
}
.csomag-kartya .body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.csomag-kartya h3 { margin: 0; font-size: 20px; }
.csomag-ar-evi { font-size: 13px; font-weight: 600; margin-top: 3px; }

/* A kiemelt (Novekedesi) csomag doboza tomor markakek. Mivel a kartya
   minden szovege oroklodesbol kapja a szinet, itt egyben feheritjuk oket -
   kulonben a sotet hatteren olvashatatlan maradna a leiras es az ar. */
.csomag-kartya--kiemelt {
  background: var(--blue);
  border: 2px solid var(--blue2);
  box-shadow: 0 10px 28px rgba(3, 87, 177, .28);
  color: #fff;
}
.csomag-kartya--kiemelt h3,
.csomag-kartya--kiemelt .csomag-ar,
.csomag-kartya--kiemelt .csomag-ar strong,
.csomag-kartya--kiemelt .csomag-leiras,
.csomag-kartya--kiemelt .csomag-leiras :where(p, li, strong, em, span, h1, h2, h3, h4) {
  color: #fff;
}
.csomag-kartya--kiemelt .csomag-ar .muted { color: rgba(255, 255, 255, .78); }
/* Vedohalo a masolassal beragadt inline stilusok ellen: a kek kartyan a leiras
   minden eleme feher, hatter nelkul - kulonben egy mashonnan bemasolt szoveg
   sajat color/background-color ertekei olvashatatlanna tennek. */
.csomag-kartya--kiemelt .csomag-leiras,
.csomag-kartya--kiemelt .csomag-leiras * {
  color: #fff !important;
  background-color: transparent !important;
}
.csomag-kartya--kiemelt .csomag-leiras a { color: #fff; text-decoration: underline; }
.csomag-kartya--kiemelt .csomag-kep { background: transparent; }

.csomag-kep { background: #fff; aspect-ratio: 4 / 3; }
.csomag-kep img { width: 100%; height: 100%; object-fit: contain; display: block; }

.csomag-ar { font-size: 15px; }
.csomag-ar strong { font-size: 26px; color: var(--blue2); font-variant-numeric: tabular-nums; }
.csomag-leiras { font-size: 14.5px; color: var(--muted); flex: 1 1 auto; }
.csomag-leiras :first-child { margin-top: 0; }
.csomag-leiras :last-child { margin-bottom: 0; }
.csomag-valasztas { margin-top: auto; }

.csomag-reszletek { margin-top: 22px; text-align: center; }
.csomag-reszletek > summary {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; list-style: none; width: auto;
}
.csomag-reszletek > summary::-webkit-details-marker { display: none; }
.csomag-reszletek > summary::after { content: ' \25BE'; margin-left: 8px; }
.csomag-reszletek[open] > summary::after { content: ' \25B4'; }
.csomag-reszletek-tartalom { margin-top: 16px; text-align: left; }
/* Keskeny kepernyon a hosszu gombfelirat tullogott a tartalom-savon, ezert ott
   a summary teljes szelessegu, tordelheto blokk lesz. */
@media (max-width: 559px) {
  .csomag-reszletek > summary { display: flex; width: 100%; white-space: normal; }
}

.csomag-osszehasonlito th[scope="row"] {
  text-align: left; background: var(--soft); font-size: 13px;
  text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600;
}
.csomag-osszehasonlito td { text-align: center; }
.csomag-oszlop-kiemelt { background: var(--infobg) !important; }
.csomag-jelzes { margin-top: 5px; display: inline-flex; font-size: 11px; }

.csomag-kep-elonezet {
  max-width: 260px; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-bottom: 8px; background: #fff;
}
.csomag-kep-elonezet img { width: 100%; display: block; }

/* --------------------------------------------------------------
   RTE-bol jovo tartalom (leirasok, bemutatkozasok): a szerkeszto
   maga sosem ad betutipust vagy hattert - ha megis van a szovegben,
   az mashonnan bemasolt maradek, es szethuzza az oldal tipografiajat.
   -------------------------------------------------------------- */
.rte-content, .rte-content * {
  font-family: inherit !important;
  background-color: transparent !important;
}

/* Cron utemezo admin oldal */
.cron-meta { font-size: 12px; margin-top: 3px; }
.cron-ido { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cron-inaktiv td { opacity: .55; }
.cron-muveletek { white-space: nowrap; }
.cron-muveletek form { display: inline-block; margin-right: 6px; }
.cron-szerkeszto-cella { background: var(--bg); padding-top: 6px !important; padding-bottom: 10px !important; }
.cron-szerkeszto-cella summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.cron-szerkeszto-cella .szuro-sor { flex-wrap: wrap; }

/* A cron-szerkeszto szam-mezoi legfeljebb 2-4 karakteresek, ezert nem kapnak
   teljes szelesseget - igy az idoablak mezoi is beferek egy sorba. */
.szuro-mezo--szuk input[type="number"] { width: 84px; min-width: 0; }
.szuro-mezo--kozepes select { min-width: 118px; max-width: 140px; }
.cron-uzenet { font-size: 12.5px; overflow-wrap: anywhere; max-width: 420px; }

.qr-fejlec { background: var(--blue); border-bottom-color: var(--blue2); }
.qr-fejlec .logo-original { width: 105px; height: 70px; }

.qr-lablec {
  background: var(--blue); border-top: 0; margin-top: 28px; color: #fff;
}
.qr-lablec p { color: #cfe0f5; }
.qr-jogi a { color: #dbe9f8; }
.qr-jogi a:hover { color: #fff; }
.qr-copyright { color: #b9d2ee !important; }

/* A kereso mezo dupla kerete.
   A .searchbox maga a latvanyos keret (ikon + mezo egy dobozban), a benne levo
   input tehat keret nelkuli. A fentebbi globalis urlap-szabaly viszont MINDEN
   input[type="text"]-nek keretet, hatteret es sajat magassagot ad, es azonos
   szelektor-sullyal kesobb all, ezert felulirta a keret nelkuli beallitast -
   igy jelent meg a masodik, belso keret. Itt nagyobb sullyal allitjuk vissza. */
.searchbox input,
.searchbox input[type="text"],
.searchbox input[type="search"] {
  flex: 1 1 auto; width: auto; min-width: 0;
  height: 100%; min-height: 0;
  border: 0; border-radius: 0; background: transparent;
  padding: 0; color: var(--ink);
}

/* ==========================================================================
   ESEMENYNAPTAR - nezetvalto es havi naptarracs
   ========================================================================== */
.nezet-valto { margin-bottom: 18px; }

.naptar-vezerlo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.naptar-honap { margin: 0; font-size: 20px; }

.naptar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.naptar-nev {
  background: var(--soft); padding: 9px 6px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.naptar-nev abbr { text-decoration: none; border: 0; }

.naptar-nap {
  background: #fff; min-height: 108px; padding: 6px 6px 8px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.naptar-nap.mas-honap { background: var(--bg); }
.naptar-nap.mas-honap .naptar-nap-szam { color: var(--muted); }

.naptar-nap-szam {
  font-size: 13px; font-weight: 700; color: var(--ink);
  width: 24px; height: 24px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.naptar-nap.ma .naptar-nap-szam { background: var(--blue); color: #fff; border-radius: 999px; }

.naptar-esemeny {
  display: block; min-width: 0; font-size: 12px; line-height: 1.3;
  padding: 4px 6px; border-radius: 6px; text-decoration: none;
  background: var(--infobg); color: var(--blue2);
  border-left: 3px solid var(--blue);
}
.naptar-esemeny:hover { background: #d9e8f7; color: var(--blue2); text-decoration: none; }
.naptar-esemeny.betelt { background: var(--redbg); color: var(--red); border-left-color: var(--red); }
.naptar-esemeny.betelt:hover { background: #fbdada; }
.naptar-esemeny-ido { font-weight: 700; margin-right: 4px; }
.naptar-esemeny-nev { display: inline; overflow-wrap: anywhere; }

.naptar-lista-cim { margin: 28px 0 12px; font-size: 20px; }

.esemeny-ido-cella { white-space: nowrap; font-variant-numeric: tabular-nums; }
.esemeny-szekcio-cim { margin-top: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esemeny-allapot-reszlet { font-size: 12.5px; margin-top: 4px; }
.esemeny-kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .04em; background: var(--soft);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}
.esemeny-tabla-leiras { font-size: 13px; margin-top: 3px; }
.esemeny-muvelet-cella { text-align: right; white-space: nowrap; }
.esemeny-muvelet-cella form { display: inline; }

/* Kis kepernyon a napcellak nem birjak el a szoveget, ezert az esemenyek
   szines savokka fogynak - a hasznalhato reszletek a naptar alatti
   havi listaban maradnak. */
@media (max-width: 760px) {
  .naptar-nap { min-height: 64px; padding: 4px; gap: 3px; }
  .naptar-nap-szam { width: 20px; height: 20px; font-size: 12px; }
  .naptar-esemeny {
    height: 7px; padding: 0; border-left: 0; border-radius: 3px;
    background: var(--blue); overflow: hidden; text-indent: -999em;
  }
  .naptar-esemeny.betelt { background: var(--red); }
  .naptar-esemeny:hover { background: var(--blue2); }
  .naptar-vezerlo { justify-content: center; }
  .naptar-honap { order: -1; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------
   Elfogadohely > Esemenyek > Jelentkezok kezelese: jelenleti iv
   gomb + jelentkezo-eltavolitas nyithato urlap a sor vegen.
   -------------------------------------------------------------- */
.jelentkezok-fejlec {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 12px;
}
.jelentkezok-fejlec p { flex: 1 1 320px; font-size: 13px; }

.jelentkezo-muveletek { white-space: nowrap; }
.jelentkezo-muveletek > form { display: inline-block; vertical-align: top; }
.jelentkezo-muveletek > * + * { margin-left: 6px; }

.jelentkezo-eltavolitas { display: inline-block; position: relative; vertical-align: top; }
.jelentkezo-eltavolitas > summary { list-style: none; display: inline-flex; }
.jelentkezo-eltavolitas > summary::-webkit-details-marker { display: none; }
.jelentkezo-eltavolitas[open] > summary { border-color: var(--red); color: var(--red); }
.jelentkezo-eltavolitas > form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 280px; white-space: normal; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(16,40,70,.16); padding: 12px;
}
.jelentkezo-eltavolitas > form label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.jelentkezo-eltavolitas > form input[type="text"] { width: 100%; margin-bottom: 10px; }

@media (max-width: 700px) {
  .jelentkezo-eltavolitas > form { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}

/* --------------------------------------------------------------
   Kereso/szuro sav (Piacter, Elfogadohelyek): egyetlen sorban all
   a kereso, a legordulok es a Szures gomb. Alapertelmezetten az
   urlapmezok 100%-osak, ezert eddig mindegyik sajat sort kapott -
   itt a flex-alapokkal osztjuk el a helyet.
   -------------------------------------------------------------- */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.toolbar .searchbox { flex: 1 1 260px; width: auto; min-width: 180px; }
.toolbar > select {
  flex: 0 1 200px; width: auto; min-width: 150px; margin: 0;
}
.toolbar > .btn, .toolbar > button { flex: 0 0 auto; margin: 0; }

@media (max-width: 559px) {
  .toolbar .searchbox { flex-basis: 100%; }
  .toolbar > select { flex: 1 1 140px; }
  .toolbar > .btn, .toolbar > button { flex: 1 1 100%; }
}

/* Fooldali esemenycsempe datum-jelzese */
.partner-tile .body > .badge { margin-bottom: 6px; }

/* Kep nelkuli Elfogadohely csempe: a nev kezdobetuje markakek hatteren, hogy
   a 4x4-es racs akkor is egyseges maradjon, ha valakinek meg nincs fotoja. */
.partner-tile .img-monogram {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue2) 100%);
}
.partner-tile .img-monogram span {
  font-size: 44px; font-weight: 800; color: #fff; opacity: .85; line-height: 1;
}
.lista-osszegzo { margin: 0 0 12px; font-size: 13px; }

/* --------------------------------------------------------------
   Piacteri kartya tipus szerinti megkulonboztetese. Az Ajanlat a
   megszokott kek, a Teszt termek borostyan jelzest ES borostyan
   felso keretet kap - igy a szinjelzes nem csak a cimken mulik,
   hanem a kartya sziluettjen is latszik.
   -------------------------------------------------------------- */
.offer-card { border-top: 3px solid transparent; }
.offer-card--teszt_termek { border-top-color: var(--yellow); }
.offer-card--felajanlas { border-top-color: var(--green); }

.offer-tipus {
  align-self: flex-start; padding: 3px 9px; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase;
}
.offer-card .body > .offer-tipus + h3 { margin-top: 6px; }

/* ==========================================================================
   QR-FELULETEK (layout_qr) - egyseges megjelenes
   Az Elfogadohely QR udvozlo es az Esemeny belepteto oldal korabban a regi
   style.css-re epulo layout_mobil-t hasznalta, sajat beagyazott stilusokkal.
   Most mindketto a layout_qr-t kapja (mint az Elonykartya QR beolvasasa),
   ezert a kizarolag ott letezo mobil-* osztalyokat itt potoljuk, a markatokenek
   alapjan.
   ========================================================================== */
.qr-oldal .mobil-tartalom {
  max-width: 520px; margin: 0 auto;
  padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.qr-oldal .mobil-tartalom > .card { margin: 0; }
.qr-oldal .mobil-tartalom .grid-3 { grid-template-columns: 1fr; }

/* A fo cselekvesi gomb tapad a kepernyo aljahoz gorgetes kozben, de a lablechez
   erve beall a helyere - igy nem takarja ki a QR lablecet. */
.qr-oldal .mobil-cta-sav {
  position: sticky; bottom: 0; z-index: 20;
  max-width: 520px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(16, 40, 70, .10);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.qr-oldal .mobil-cta-sav .btn { font-size: 16px; padding: 13px; }
.qr-oldal .mobil-cta-sav form { margin: 0; }

.qr-oldal .mobil-elerhetoseg-sor {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; text-decoration: none; color: var(--ink);
}
.qr-oldal .mobil-elerhetoseg-sor:last-child { border-bottom: 0; }
.qr-oldal .mobil-nyitvatartas-mai { font-weight: 700; color: var(--green); }

/* A QR udvozlo oldal Piacteri elem-dobozai. Ezek eddig csak a regi style.css-ben
   leteztek (layout_mobil), ezert a layout_qr-re valtas utan stilus nelkul maradtak. */
.termek-qr-box { overflow: hidden; padding: 0; }
.termek-qr-box > summary { list-style: none; cursor: pointer; padding: 0; }
.termek-qr-box > summary::-webkit-details-marker { display: none; }
.termek-qr-box .termek-qr-kep {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  display: block; background: #fff; border-bottom: 1px solid var(--line);
}
.termek-qr-box .termek-qr-fejlec { padding: 12px 14px; }
.termek-qr-box .termek-qr-nev { font-weight: 800; color: var(--blue2); font-size: 16px; margin-top: 4px; }
.termek-qr-box .termek-qr-ar { margin-top: 4px; }
.termek-qr-box .termek-qr-ar .old { color: var(--muted); text-decoration: line-through; margin-right: 6px; font-weight: 500; }
.termek-qr-box .termek-qr-ar .uj { font-weight: 800; color: var(--green); font-size: 17px; }
.termek-qr-box > .card-body { padding-top: 0; }

/* --------------------------------------------------------------
   Vasarlas rogzitese vasarlasi koddal
   -------------------------------------------------------------- */
.qr-oldal .vasarlas-box { border-left: 4px solid var(--yellow); }
.qr-oldal .vasarlas-box h2 { font-size: 1.15rem; }
.qr-oldal .vasarlas-box input[type="text"] {
  font-size: 18px; letter-spacing: .04em; text-align: center;
}

.vasarlas-kod-kiemelt {
  font-size: 34px; font-weight: 800; letter-spacing: .06em;
  color: var(--blue2); background: var(--infobg);
  border: 2px dashed var(--blue); border-radius: 12px;
  padding: 18px 14px; text-align: center; margin-bottom: 12px;
  word-break: break-word;
}
.vasarlas-kod-gombok { display: flex; gap: 10px; flex-wrap: wrap; }

/* A harom mezo egy sorban: a Kod atirasa tolti ki a maradek helyet, a
   Kodvaltas es az Idoegyseg pontosan azonos szelessegu. */
.vasarlas-mezosor {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 4px;
}
.vasarlas-mezosor .vasarlas-mezo { margin-bottom: 0; }
.vasarlas-mezo { flex: 0 0 150px; }
.vasarlas-mezo input, .vasarlas-mezo select { width: 100%; min-width: 0; height: 44px; }
.vasarlas-mezo--kod { flex: 1 1 220px; min-width: 170px; }

@media (max-width: 559px) {
  .vasarlas-mezo, .vasarlas-mezo--kod { flex: 1 1 100%; }
}
.vasarlas-kod-info { font-size: 13px; margin: 0 0 12px; }

/* Elfogadohelyenkenti kartya a Beallitasok listaban */
.vasarlas-hely { padding: 16px 18px; margin-bottom: 14px; }
.vasarlas-hely:last-child { margin-bottom: 0; }
.vasarlas-hely-fejlec {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.vasarlas-hely-fejlec h3 { font-size: 17px; }
.vasarlas-hely .vasarlas-kod-kiemelt { font-size: 30px; margin: 0; }

/* A kod es az Elfogadohely QR-kodja egymas mellett: a QR-t beolvasva
   azonnal tesztelheto a rogzites a most latszo koddal. */
.vasarlas-kod-sor { display: flex; gap: 14px; align-items: stretch; margin-bottom: 10px; }
.vasarlas-kod-sor .vasarlas-kod-kiemelt {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}
.vasarlas-kod-qr {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none;
}
.vasarlas-kod-qr:hover { border-color: var(--blue); }
.vasarlas-kod-qr img { display: block; width: 130px; height: 130px; }

@media (max-width: 559px) {
  .vasarlas-kod-sor { flex-direction: column; align-items: stretch; }
  .vasarlas-kod-qr { align-self: center; }
}
.vasarlas-hely .vasarlas-kod-gombok {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  align-items: center;
}

/* --------------------------------------------------------------
   Ragados fejlec: a fomenu gorgeteskor is a kepernyo tetejen marad.
   A .public-shell overflow-ja mar 'visible' (production reteg), enelkul
   a sticky nem mukodne. A z-index a tartalom fole emeli, de a mobil
   legordulo menu (z-index 50, a fejlec gyereke) fole nem kerul.
   -------------------------------------------------------------- */
.public-header {
  position: sticky; top: 0; z-index: 60;
  overflow: visible;
}
@media (max-width: 767px) {
  .public-header { position: sticky; top: 0; }
}

/* Horgonyra ugraskor (pl. fooldali esemenycsempe -> Esemenynaptar sora)
   a cel ne csusszon a ragados fejlec ala. */
.public-shell :target { scroll-margin-top: 96px; }

/* --- Rendszer leiras (kepzesi anyag mindharom feluleten) --- */
.rl-dok { max-width: 980px; }
/* A dokumentum-oszlop folotti dobozok (bevezeto keret, betanulasi kor) ugyanolyan
   szelesek legyenek, mint maga a dokumentum - kulonben lepcsos lesz a lap. */
.rl-fejlec, .bt-kor { max-width: 980px; }
.rl-dok p { line-height: 1.62; }

.rl-toc { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 26px; }
.rl-toc > strong { display: block; color: var(--blue2); margin-bottom: 8px; font-size: 15px; }
.rl-toc-lista { display: flex; flex-direction: column; gap: 5px; }
.rl-toc-lista a { color: var(--blue); text-decoration: none; font-size: 14.5px; }
.rl-toc-lista a:hover { text-decoration: underline; }

.rl-szakasz { scroll-margin-top: 96px; padding-top: 6px; margin-bottom: 40px; }
.rl-szakasz > h2 { color: var(--blue2); border-bottom: 2px solid var(--blue); padding-bottom: 8px;
  margin: 0 0 14px; font-size: 24px; }
.rl-szakasz > h3 { color: var(--blue); margin: 28px 0 10px; font-size: 18px; }
.rl-alcim { color: var(--muted); margin-top: -6px; }

.rl-szerepek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.rl-szerep { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.rl-szerep h4 { margin: 8px 0 6px; font-size: 16px; color: var(--blue2); }
.rl-szerep p { font-size: 14px; margin: 0 0 6px; }
.rl-belepes { color: var(--muted); font-size: 13px !important; }

.rl-menu { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; }
.rl-menu h4 { margin: 0 0 8px; font-size: 16.5px; color: var(--blue2); }
.rl-menu p { margin: 0 0 8px; font-size: 14.5px; }
.rl-menu p:last-child { margin-bottom: 0; }
.rl-menu ul { margin: 0 0 8px; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }

.rl-kiemelt { background: var(--amberbg); border-left: 4px solid var(--yellow);
  border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; }
.rl-kiemelt p { margin: 6px 0 0; font-size: 14.5px; }
.rl-kiemelt strong { color: var(--amber); }

.rl-figyelem { background: var(--infobg); border-left: 3px solid var(--info);
  padding: 10px 14px; border-radius: 6px; font-size: 14px !important; }

.rl-lepesek { padding-left: 22px; font-size: 14.5px; line-height: 1.65; }
.rl-lepesek li { margin-bottom: 7px; }

.rl-folyamat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px; }
.rl-folyamat h4 { margin: 0 0 10px; font-size: 16px; color: var(--blue2); }
.rl-ki { display: inline-block; min-width: 108px; font-weight: 700; color: var(--blue);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }

.rl-gyik { border-bottom: 1px solid var(--line); padding: 12px 0; }
.rl-gyik:last-of-type { border-bottom: none; }
.rl-gyik h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--blue2); }
.rl-gyik p { margin: 0; font-size: 14.5px; }

.rl-lablec { color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 30px; }

@media (max-width: 900px) {
  .rl-szerepek { grid-template-columns: 1fr; }
  .rl-ki { min-width: 0; display: block; margin-bottom: 2px; }
}

.bt-dok { max-width: 980px; }

.bt-halado { position: sticky; top: 64px; z-index: 5; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(3, 87, 177, 0.08); }
.bt-halado-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bt-halado-fej strong { color: var(--blue2); }
.bt-halado-szam { color: var(--muted); font-size: 14px; }
.bt-savtart { height: 9px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 9px 0 8px; }
.bt-sav { height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .25s ease; }
.bt-halado-info { margin: 0; color: var(--muted); font-size: 13px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }

.bt-utmutato { background: var(--infobg); border-left: 4px solid var(--info);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; }
.bt-utmutato strong { color: var(--info); }
.bt-utmutato p { margin: 6px 0 0; font-size: 14.5px; }

.bt-lecke { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  border-radius: var(--radius); padding: 18px 18px 14px; margin-bottom: 18px; scroll-margin-top: 150px; }
.bt-lecke-kesz { border-left-color: var(--green); background: #fbfefb; }
.bt-lecke-fej { display: flex; align-items: flex-start; gap: 14px; }
.bt-szam { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--blue);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.bt-lecke-kesz .bt-szam { background: var(--green); }
.bt-lecke-cim { flex: 1 1 auto; }
.bt-lecke-cim h3 { margin: 3px 0 4px; font-size: 17.5px; color: var(--blue2); }
.bt-cel { margin: 0; font-size: 14.5px; color: var(--muted); }
.bt-cel strong { color: var(--blue2); }
.bt-ido { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); background: var(--soft);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

.bt-lepesek { margin: 14px 0 0; padding-left: 24px; font-size: 14.5px; line-height: 1.7; }
.bt-lepesek li { margin-bottom: 9px; }
.bt-ugras { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600;
  color: var(--blue); background: var(--soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; text-decoration: none; white-space: nowrap; }
.bt-ugras:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.bt-tipp { background: var(--amberbg); border-left: 3px solid var(--yellow); border-radius: 6px;
  padding: 10px 12px; margin: 12px 0 0; font-size: 14px; }
.bt-tipp strong { color: var(--amber); }

.bt-ellenorzo { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.bt-kerdes { margin: 0 0 8px; font-size: 14.5px; }
.bt-valasz { margin: 10px 0 0; font-size: 14.5px; background: var(--soft); border-radius: 6px;
  padding: 10px 12px; }

.bt-kesz { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--blue2);
  cursor: pointer; }
.bt-kesz input { width: 18px; height: 18px; cursor: pointer; }
.bt-lecke-kesz .bt-kesz { color: var(--green); }

.bt-vizsga { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-top: 28px; }
.bt-vizsga > h3 { margin: 0 0 6px; color: var(--blue2); font-size: 19px; }
.bt-vizsga > p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }
.bt-teszt { border-top: 1px solid var(--line); padding: 14px 0; }
.bt-teszt-kerdes { margin: 0 0 10px; font-size: 15px; }
.bt-teszt-valaszok { display: flex; flex-direction: column; gap: 8px; }
.bt-opcio { text-align: left; background: var(--soft); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font-size: 14.5px; cursor: pointer; color: var(--blue2);
  font-family: inherit; }
.bt-opcio:hover:enabled { border-color: var(--blue); background: #fff; }
.bt-opcio:disabled { cursor: default; opacity: .75; }
.bt-opcio-jo { background: #e8f6ec !important; border-color: var(--green) !important;
  color: var(--green) !important; font-weight: 600; opacity: 1 !important; }
.bt-opcio-rossz { background: #fdecec !important; border-color: #b3261e !important;
  color: #b3261e !important; opacity: 1 !important; }
.bt-teszt-jelzes { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.bt-teszt-jelzes.bt-jo { color: var(--green); }
.bt-teszt-jelzes.bt-rossz { color: #b3261e; }
.bt-eredmeny { border-top: 2px solid var(--blue); margin-top: 16px; padding-top: 14px;
  font-size: 15.5px; color: var(--blue2); }

@media (max-width: 900px) {
  .bt-halado { position: static; }
  .bt-lecke-fej { flex-wrap: wrap; }
  .bt-ido { order: 3; }
  .bt-ugras { display: block; margin: 6px 0 0; text-align: center; }
}

/* ==========================================================================
   4. FLEX GAP TARTALEK - GENERALT, KEZZEL NE SZERKESZD
   
   Eloallitja: css_retegek/flexgap_tartalek.py (a build_css.py hivja meg).
   Csak akkor lep eletbe, ha a bongeszo NEM tudja a flexbox gapet: ilyenkor az
   app.js kiteszi a <html> elemre a .nincs-flex-gap osztalyt.
   ========================================================================== */

.nincs-flex-gap .btn > * { margin-right: 9px; }
.nincs-flex-gap .btn > *:last-child { margin-right: 0; }
.nincs-flex-gap .badge > * { margin-right: 6px; }
.nincs-flex-gap .badge > *:last-child { margin-right: 0; }
.nincs-flex-gap .field > * { margin-bottom: 7px; }
.nincs-flex-gap .field > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .public-header > * { margin-right: 30px; }
.nincs-flex-gap .public-header > *:last-child { margin-right: 0; }
.nincs-flex-gap .public-nav > * { margin-right: 20px; }
.nincs-flex-gap .public-nav > *:last-child { margin-right: 0; }
.nincs-flex-gap .header-actions > * { margin-right: 10px; }
.nincs-flex-gap .header-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .hero-actions > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .hero-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .quick > * { margin-right: 14px; }
.nincs-flex-gap .quick > *:last-child { margin-right: 0; }
.nincs-flex-gap .toolbar > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .toolbar > *:last-child { margin-right: 0; }
.nincs-flex-gap .searchbox > * { margin-right: 9px; }
.nincs-flex-gap .searchbox > *:last-child { margin-right: 0; }
.nincs-flex-gap .filter-chips > * { margin-right: 9px; }
.nincs-flex-gap .filter-chips > *:last-child { margin-right: 0; }
.nincs-flex-gap .partner-card > * { margin-bottom: 11px; }
.nincs-flex-gap .partner-card > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .loc > * { margin-right: 6px; }
.nincs-flex-gap .loc > *:last-child { margin-right: 0; }
.nincs-flex-gap .partner-actions > * { margin-right: 8px; }
.nincs-flex-gap .partner-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .thumbs > * { margin-bottom: 10px; }
.nincs-flex-gap .thumbs > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .sticky-actions > * { margin-right: 10px; }
.nincs-flex-gap .sticky-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .tabs > * { margin-right: 22px; }
.nincs-flex-gap .tabs > *:last-child { margin-right: 0; }
.nincs-flex-gap .divider > * { margin-right: 12px; }
.nincs-flex-gap .divider > *:last-child { margin-right: 0; }
.nincs-flex-gap .wizard-top > * { margin-right: 22px; }
.nincs-flex-gap .wizard-top > *:last-child { margin-right: 0; }
.nincs-flex-gap .step > * { margin-right: 8px; }
.nincs-flex-gap .step > *:last-child { margin-right: 0; }
.nincs-flex-gap .wizard-actions>div > * { margin-right: 10px; }
.nincs-flex-gap .wizard-actions>div > *:last-child { margin-right: 0; }
.nincs-flex-gap .mobile-quick > * { margin-right: 13px; }
.nincs-flex-gap .mobile-quick > *:last-child { margin-right: 0; }
.nincs-flex-gap .mobile-bottom .navitem > * { margin-bottom: 3px; }
.nincs-flex-gap .mobile-bottom .navitem > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .checkin-search > * { margin-right: 10px; }
.nincs-flex-gap .checkin-search > *:last-child { margin-right: 0; }
.nincs-flex-gap .guest-card > * { margin-right: 13px; }
.nincs-flex-gap .guest-card > *:last-child { margin-right: 0; }
.nincs-flex-gap .side-item > * { margin-right: 11px; }
.nincs-flex-gap .side-item > *:last-child { margin-right: 0; }
.nincs-flex-gap .side-foot > * { margin-right: 9px; }
.nincs-flex-gap .side-foot > *:last-child { margin-right: 0; }
.nincs-flex-gap .top-left > * { margin-right: 15px; }
.nincs-flex-gap .top-left > *:last-child { margin-right: 0; }
.nincs-flex-gap .top-actions > * { margin-right: 10px; }
.nincs-flex-gap .top-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .location-switch > * { margin-right: 8px; }
.nincs-flex-gap .location-switch > *:last-child { margin-right: 0; }
.nincs-flex-gap .detail-tabs > * { margin-right: 18px; }
.nincs-flex-gap .detail-tabs > *:last-child { margin-right: 0; }
.nincs-flex-gap .detail-bottom > * { margin-right: 9px; }
.nincs-flex-gap .detail-bottom > *:last-child { margin-right: 0; }
.nincs-flex-gap .rich-toolbar > * { margin-right: 6px; }
.nincs-flex-gap .rich-toolbar > *:last-child { margin-right: 0; }
.nincs-flex-gap .buttons > * { margin-right: 9px; margin-bottom: 9px; }
.nincs-flex-gap .buttons > *:last-child { margin-right: 0; }
.nincs-flex-gap .status-row > * { margin-right: 9px; margin-bottom: 9px; }
.nincs-flex-gap .status-row > *:last-child { margin-right: 0; }
.nincs-flex-gap .detail-bottom > * { margin-right: 6px; }
.nincs-flex-gap .detail-bottom > *:last-child { margin-right: 0; }
.nincs-flex-gap .topbar > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .topbar > *:last-child { margin-right: 0; }
.nincs-flex-gap .top-actions > * { margin-right: 8px; }
.nincs-flex-gap .top-actions > *:last-child { margin-right: 0; }
.nincs-flex-gap .action-stack > * { margin-bottom: 12px; }
.nincs-flex-gap .action-stack > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .divider > * { margin-right: 10px; }
.nincs-flex-gap .divider > *:last-child { margin-right: 0; }
.nincs-flex-gap .wizard-steps > * { margin-right: 8px; }
.nincs-flex-gap .wizard-steps > *:last-child { margin-right: 0; }
.nincs-flex-gap .wizard-step > * { margin-right: 8px; }
.nincs-flex-gap .wizard-step > *:last-child { margin-right: 0; }
.nincs-flex-gap .form-actions>div > * { margin-right: 9px; }
.nincs-flex-gap .form-actions>div > *:last-child { margin-right: 0; }
.nincs-flex-gap .detail-actions > * { margin-bottom: 8px; }
.nincs-flex-gap .detail-actions > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .tool-item > * { margin-right: 9px; }
.nincs-flex-gap .tool-item > *:last-child { margin-right: 0; }
.nincs-flex-gap .flash-wrap > * { margin-bottom: 10px; }
.nincs-flex-gap .flash-wrap > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .flash > * { margin-right: 11px; }
.nincs-flex-gap .flash > *:last-child { margin-right: 0; }
.nincs-flex-gap .mezo-hiba > * { margin-right: 6px; }
.nincs-flex-gap .mezo-hiba > *:last-child { margin-right: 0; }
.nincs-flex-gap .lapozo > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .lapozo > *:last-child { margin-right: 0; }
.nincs-flex-gap .lapozo-oldalak > * { margin-right: 5px; }
.nincs-flex-gap .lapozo-oldalak > *:last-child { margin-right: 0; }
.nincs-flex-gap .lapozo-meret > * { margin-right: 8px; }
.nincs-flex-gap .lapozo-meret > *:last-child { margin-right: 0; }
.nincs-flex-gap .modal-gombok > * { margin-bottom: 10px; }
.nincs-flex-gap .modal-gombok > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .public-header > * { margin-right: 18px; }
.nincs-flex-gap .public-header > *:last-child { margin-right: 0; }
.nincs-flex-gap .public-nav > * { margin-right: 6px; }
.nincs-flex-gap .public-nav > *:last-child { margin-right: 0; }

@media (max-width: 1279px) {
.nincs-flex-gap .public-nav > * { margin-right: 4px; }
.nincs-flex-gap .public-nav > *:last-child { margin-right: 0; }
.nincs-flex-gap .public-header > * { margin-right: 12px; }
.nincs-flex-gap .public-header > *:last-child { margin-right: 0; }
}
@media (max-width: 1150px) {
.nincs-flex-gap .public-nav > * { margin-right: 2px; }
.nincs-flex-gap .public-nav > *:last-child { margin-right: 0; }
.nincs-flex-gap .public-header > * { margin-right: 8px; }
.nincs-flex-gap .public-header > *:last-child { margin-right: 0; }
}
@media (max-width: 1023px) {
.nincs-flex-gap .public-header > * { margin-right: 16px; }
.nincs-flex-gap .public-header > *:last-child { margin-right: 0; }
}
@media (max-width: 767px) {
.nincs-flex-gap .side-scroll > * { margin-right: 4px; }
.nincs-flex-gap .side-scroll > *:last-child { margin-right: 0; }
.nincs-flex-gap .topbar > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .topbar > *:last-child { margin-right: 0; }
}
.nincs-flex-gap .social-links > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .social-links > *:last-child { margin-right: 0; }
.nincs-flex-gap .social-btn > * { margin-right: 7px; }
.nincs-flex-gap .social-btn > *:last-child { margin-right: 0; }
.nincs-flex-gap .hirlevel-form > * { margin-bottom: 8px; }
.nincs-flex-gap .hirlevel-form > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .footer-zaro > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .footer-zaro > *:last-child { margin-right: 0; }
.nincs-flex-gap .lepes > * { margin-right: 14px; }
.nincs-flex-gap .lepes > *:last-child { margin-right: 0; }
.nincs-flex-gap .morzsa > * { margin-right: 8px; }
.nincs-flex-gap .morzsa > *:last-child { margin-right: 0; }
.nincs-flex-gap .esemeny-kartya .body > * { margin-bottom: 9px; }
.nincs-flex-gap .esemeny-kartya .body > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .esemeny-cimkek > * { margin-right: 7px; margin-bottom: 7px; }
.nincs-flex-gap .esemeny-cimkek > *:last-child { margin-right: 0; }
.nincs-flex-gap .esemeny-helyszin > * { margin-right: 7px; }
.nincs-flex-gap .esemeny-helyszin > *:last-child { margin-right: 0; }
.nincs-flex-gap .detail-oldalsav > * { margin-bottom: 14px; }
.nincs-flex-gap .detail-oldalsav > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .ar-sor > * { margin-right: 12px; }
.nincs-flex-gap .ar-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .muvelet-blokk > * { margin-bottom: 16px; }
.nincs-flex-gap .muvelet-blokk > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .muvelet-blokk form > * { margin-bottom: 10px; }
.nincs-flex-gap .muvelet-blokk form > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .urlap-oszlop > * { margin-bottom: 12px; }
.nincs-flex-gap .urlap-oszlop > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .elerhetoseg-lista > * { margin-bottom: 11px; }
.nincs-flex-gap .elerhetoseg-lista > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .elerhetoseg-lista li > * { margin-right: 10px; }
.nincs-flex-gap .elerhetoseg-lista li > *:last-child { margin-right: 0; }
.nincs-flex-gap .efh-fejlec-tartalom > * { margin-bottom: 18px; }
.nincs-flex-gap .efh-fejlec-tartalom > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .efh-fo > * { margin-bottom: 22px; }
.nincs-flex-gap .efh-fo > *:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
.nincs-flex-gap .efh-fejlec-tartalom > * { margin-bottom: 12px; }
.nincs-flex-gap .efh-fejlec-tartalom > *:last-child { margin-bottom: 0; }
}
.nincs-flex-gap .ai-javaslat-fejlec > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .ai-javaslat-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .ai-javaslat-vezerlok > * { margin-bottom: 12px; }
.nincs-flex-gap .ai-javaslat-vezerlok > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .ai-javaslat-vezerlok label > * { margin-bottom: 3px; }
.nincs-flex-gap .ai-javaslat-vezerlok label > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .ai-javaslat-muveletek > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .ai-javaslat-muveletek > *:last-child { margin-right: 0; }
.nincs-flex-gap .harang-fejlec > * { margin-right: 8px; }
.nincs-flex-gap .harang-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .fo-menu-nyito > * { margin-right: 10px; }
.nincs-flex-gap .fo-menu-nyito > *:last-child { margin-right: 0; }
.nincs-flex-gap .fo-menu-fejlec > * { margin-right: 8px; }
.nincs-flex-gap .fo-menu-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .fo-menu-lista a > * { margin-right: 8px; }
.nincs-flex-gap .fo-menu-lista a > *:last-child { margin-right: 0; }
.nincs-flex-gap .masolhato-link > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .masolhato-link > *:last-child { margin-right: 0; }
.nincs-flex-gap .masolo-gomb > * { margin-right: 6px; }
.nincs-flex-gap .masolo-gomb > *:last-child { margin-right: 0; }
.nincs-flex-gap .ek-sor > * { margin-bottom: 2px; }
.nincs-flex-gap .ek-sor > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .masolhato-kod > * { margin-right: 7px; }
.nincs-flex-gap .masolhato-kod > *:last-child { margin-right: 0; }
.nincs-flex-gap .bt-nyitas-sor > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .bt-nyitas-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .vg-fej > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .vg-fej > *:last-child { margin-right: 0; }
.nincs-flex-gap .vg-valtok > * { margin-right: 6px; margin-bottom: 6px; }
.nincs-flex-gap .vg-valtok > *:last-child { margin-right: 0; }
.nincs-flex-gap .sablon-torles-sav > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .sablon-torles-sav > *:last-child { margin-right: 0; }
.nincs-flex-gap .korabbi-muveletsor > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .korabbi-muveletsor > *:last-child { margin-right: 0; }
.nincs-flex-gap .kitoltes-muveletek > * { margin-right: 8px; }
.nincs-flex-gap .kitoltes-muveletek > *:last-child { margin-right: 0; }
.nincs-flex-gap .lista-szuro-sav > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .lista-szuro-sav > *:last-child { margin-right: 0; }
.nincs-flex-gap .kedvenc-nev > * { margin-right: 12px; }
.nincs-flex-gap .kedvenc-nev > *:last-child { margin-right: 0; }
.nincs-flex-gap .urlap-mezo-fej > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .urlap-mezo-fej > *:last-child { margin-right: 0; }
.nincs-flex-gap .maximum-lepesek > * { margin-bottom: 2px; }
.nincs-flex-gap .maximum-lepesek > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .maximum-lepes > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .maximum-lepes > *:last-child { margin-right: 0; }
.nincs-flex-gap .maximum-kerdes .checkbox-sor > * { margin-right: 10px; }
.nincs-flex-gap .maximum-kerdes .checkbox-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .maximum-ceg-fejlec > * { margin-right: 16px; margin-bottom: 16px; }
.nincs-flex-gap .maximum-ceg-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .velemeny-osszesito > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .velemeny-osszesito > *:last-child { margin-right: 0; }
.nincs-flex-gap .velemeny-valaszto > * { margin-right: 4px; }
.nincs-flex-gap .velemeny-valaszto > *:last-child { margin-right: 0; }
.nincs-flex-gap .qr-oldal .mobil-cta-sav .cta-sor > * { margin-right: 8px; }
.nincs-flex-gap .qr-oldal .mobil-cta-sav .cta-sor > *:last-child { margin-right: 0; }

@media (max-width: 767px) {
.nincs-flex-gap .app-fejlec-muvelet > * { margin-right: 6px; }
.nincs-flex-gap .app-fejlec-muvelet > *:last-child { margin-right: 0; }
.nincs-flex-gap .app-fejlec-sor > * { margin-right: 8px; }
.nincs-flex-gap .app-fejlec-sor > *:last-child { margin-right: 0; }
}
.nincs-flex-gap .katalogus-vezerlo > * { margin-right: 16px; margin-bottom: 16px; }
.nincs-flex-gap .katalogus-vezerlo > *:last-child { margin-right: 0; }
.nincs-flex-gap .katalogus-muveletek > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .katalogus-muveletek > *:last-child { margin-right: 0; }

@media (max-width: 620px) {
.nincs-flex-gap .katalogus-vezerlo > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .katalogus-vezerlo > *:last-child { margin-right: 0; }
}
.nincs-flex-gap .btn > * { margin-right: 8px; }
.nincs-flex-gap .btn > *:last-child { margin-right: 0; }
.nincs-flex-gap .badge > * { margin-right: 5px; }
.nincs-flex-gap .badge > *:last-child { margin-right: 0; }
.nincs-flex-gap th.rendezheto > a > * { margin-right: 5px; }
.nincs-flex-gap th.rendezheto > a > *:last-child { margin-right: 0; }
.nincs-flex-gap .tabla-vezerlo > * { margin-bottom: 12px; }
.nincs-flex-gap .tabla-vezerlo > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .tabla-vezerlo-bal > *, .nincs-flex-gap .tabla-vezerlo-jobb > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .tabla-vezerlo-bal > *:last-child, .nincs-flex-gap .tabla-vezerlo-jobb > *:last-child { margin-right: 0; }
.nincs-flex-gap .tabla-vezerlo label > * { margin-right: 7px; }
.nincs-flex-gap .tabla-vezerlo label > *:last-child { margin-right: 0; }
.nincs-flex-gap .gantt-sor > * { margin-bottom: 10px; }
.nincs-flex-gap .gantt-sor > *:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
.nincs-flex-gap .gantt-sor > * { margin-bottom: 3px; }
.nincs-flex-gap .gantt-sor > *:last-child { margin-bottom: 0; }
}
.nincs-flex-gap .checkbox-row > * { margin-right: 9px; }
.nincs-flex-gap .checkbox-row > *:last-child { margin-right: 0; }
.nincs-flex-gap .pill-nav > * { margin-right: 7px; margin-bottom: 7px; }
.nincs-flex-gap .pill-nav > *:last-child { margin-right: 0; }
.nincs-flex-gap .rte-toolbar > * { margin-right: 5px; margin-bottom: 5px; }
.nincs-flex-gap .rte-toolbar > *:last-child { margin-right: 0; }
.nincs-flex-gap .product-card .body > * { margin-bottom: 6px; }
.nincs-flex-gap .product-card .body > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .app-fejlec-sor > * { margin-right: 14px; }
.nincs-flex-gap .app-fejlec-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .app-brand > * { margin-right: 12px; }
.nincs-flex-gap .app-brand > *:last-child { margin-right: 0; }
.nincs-flex-gap .app-fejlec-muvelet > * { margin-right: 9px; }
.nincs-flex-gap .app-fejlec-muvelet > *:last-child { margin-right: 0; }
.nincs-flex-gap .app-lablec .container > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .app-lablec .container > *:last-child { margin-right: 0; }
.nincs-flex-gap .app-lablec nav > * { margin-right: 16px; }
.nincs-flex-gap .app-lablec nav > *:last-child { margin-right: 0; }

@media (max-width: 1023px) {
.nincs-flex-gap .dashboard-nav > * { margin-right: 4px; margin-bottom: 4px; }
.nincs-flex-gap .dashboard-nav > *:last-child { margin-right: 0; }
}
.nincs-flex-gap .google-btn > * { margin-right: 10px; }
.nincs-flex-gap .google-btn > *:last-child { margin-right: 0; }
.nincs-flex-gap .cimzett-tipus-radio > *, .nincs-flex-gap .szerkeszto-mod-radio > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .cimzett-tipus-radio > *:last-child, .nincs-flex-gap .szerkeszto-mod-radio > *:last-child { margin-right: 0; }
.nincs-flex-gap .tag-beszuro > * { margin-right: 6px; margin-bottom: 6px; }
.nincs-flex-gap .tag-beszuro > *:last-child { margin-right: 0; }
.nincs-flex-gap .menu-szerkeszto-lista > * { margin-bottom: 6px; }
.nincs-flex-gap .menu-szerkeszto-lista > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .menu-szerkeszto-lista li > * { margin-right: 10px; }
.nincs-flex-gap .menu-szerkeszto-lista li > *:last-child { margin-right: 0; }
.nincs-flex-gap .menu-szerkeszto-btns > * { margin-right: 5px; }
.nincs-flex-gap .menu-szerkeszto-btns > *:last-child { margin-right: 0; }
.nincs-flex-gap .megallito-box-gomb > * { margin-bottom: 8px; }
.nincs-flex-gap .megallito-box-gomb > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .megallito-igazit > * { margin-right: 5px; }
.nincs-flex-gap .megallito-igazit > *:last-child { margin-right: 0; }
.nincs-flex-gap .qr-jogi > * { margin-right: 16px; margin-bottom: 16px; }
.nincs-flex-gap .qr-jogi > *:last-child { margin-right: 0; }
.nincs-flex-gap .oldal-fejlec > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .oldal-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .oldal-fejlec-muveletek > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .oldal-fejlec-muveletek > *:last-child { margin-right: 0; }
.nincs-flex-gap .dashboard-nav a > * { margin-right: 8px; }
.nincs-flex-gap .dashboard-nav a > *:last-child { margin-right: 0; }
.nincs-flex-gap .szin-sor > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .szin-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .szin-sor-cimke > * { margin-bottom: 2px; }
.nincs-flex-gap .szin-sor-cimke > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .szin-sor-vezerlok > * { margin-right: 8px; }
.nincs-flex-gap .szin-sor-vezerlok > *:last-child { margin-right: 0; }
.nincs-flex-gap .szin-elonezet > * { margin-right: 8px; margin-bottom: 8px; }
.nincs-flex-gap .szin-elonezet > *:last-child { margin-right: 0; }
.nincs-flex-gap .szuro-sor > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .szuro-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .szuro-mezo > * { margin-bottom: 4px; }
.nincs-flex-gap .szuro-mezo > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .szuro-datum > * { margin-right: 6px; }
.nincs-flex-gap .szuro-datum > *:last-child { margin-right: 0; }
.nincs-flex-gap .szuro-jelolo > * { margin-right: 7px; }
.nincs-flex-gap .szuro-jelolo > *:last-child { margin-right: 0; }
.nincs-flex-gap .csomag-kartya .body > * { margin-bottom: 10px; }
.nincs-flex-gap .csomag-kartya .body > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .naptar-vezerlo > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .naptar-vezerlo > *:last-child { margin-right: 0; }
.nincs-flex-gap .naptar-nap > * { margin-bottom: 4px; }
.nincs-flex-gap .naptar-nap > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .esemeny-szekcio-cim > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .esemeny-szekcio-cim > *:last-child { margin-right: 0; }

@media (max-width: 760px) {
.nincs-flex-gap .naptar-nap > * { margin-bottom: 3px; }
.nincs-flex-gap .naptar-nap > *:last-child { margin-bottom: 0; }
}
.nincs-flex-gap .jelentkezok-fejlec > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .jelentkezok-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .toolbar > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .toolbar > *:last-child { margin-right: 0; }
.nincs-flex-gap .qr-oldal .mobil-tartalom > * { margin-bottom: 14px; }
.nincs-flex-gap .qr-oldal .mobil-tartalom > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .qr-oldal .mobil-elerhetoseg-sor > * { margin-right: 10px; }
.nincs-flex-gap .qr-oldal .mobil-elerhetoseg-sor > *:last-child { margin-right: 0; }
.nincs-flex-gap .vasarlas-kod-gombok > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .vasarlas-kod-gombok > *:last-child { margin-right: 0; }
.nincs-flex-gap .vasarlas-mezosor > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .vasarlas-mezosor > *:last-child { margin-right: 0; }
.nincs-flex-gap .vasarlas-hely-fejlec > * { margin-right: 12px; margin-bottom: 12px; }
.nincs-flex-gap .vasarlas-hely-fejlec > *:last-child { margin-right: 0; }
.nincs-flex-gap .vasarlas-kod-sor > * { margin-bottom: 14px; }
.nincs-flex-gap .vasarlas-kod-sor > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .rl-toc-lista > * { margin-bottom: 5px; }
.nincs-flex-gap .rl-toc-lista > *:last-child { margin-bottom: 0; }
.nincs-flex-gap .bt-halado-fej > * { margin-right: 12px; }
.nincs-flex-gap .bt-halado-fej > *:last-child { margin-right: 0; }
.nincs-flex-gap .bt-halado-info > * { margin-right: 10px; margin-bottom: 10px; }
.nincs-flex-gap .bt-halado-info > *:last-child { margin-right: 0; }
.nincs-flex-gap .bt-lecke-fej > * { margin-right: 14px; margin-bottom: 14px; }
.nincs-flex-gap .bt-lecke-fej > *:last-child { margin-right: 0; }
.nincs-flex-gap .bt-kesz > * { margin-right: 9px; }
.nincs-flex-gap .bt-kesz > *:last-child { margin-right: 0; }
.nincs-flex-gap .bt-teszt-valaszok > * { margin-bottom: 8px; }
.nincs-flex-gap .bt-teszt-valaszok > *:last-child { margin-bottom: 0; }