/* =====================================================================
MOZAIK MED — TELJES REDESIGN (modern, letiszta/világos)
---------------------------------------------------------------------
Készült: 2026-06-23
Cél: TELJES modern arculat. A tartalom (DB-adatok) és a brand szín
(#e70b84 magenta) marad, a teljes vizuális réteg új. Funkció és
a meglévő JS NEM változik — kizárólag megjelenés/markup-stílus.
Hatókör:
1) ÚJ globális keret komponensei (.mm- prefix): navbar, hero, lábléc.
2) A meglévő (legacy) sablon-osztályok agresszív modernizálása, hogy
minden aloldal (webshop, blog, termék, kosár, kapcsolat stb.) is
az új designnyelvet kapja.
Betöltés: a header.php VÉGÉN, az összes régi css UTÁN.
===================================================================== */
/* ============================ BETŰTÍPUS: RUBIK (self-hosted) ============================
Fizikailag letöltött .woff2 fájlok (NINCS CDN-hivatkozás), forrás: View/site_assets/fonts/rubik/.
A Rubik VARIABLE woff2 → EGY fájl fedi a teljes 400–700 súlytartományt (latin + latin-ext).
A DB-ből érkező tartalomra is kikényszerítjük (lásd lentebb a font-family override blokkot).
(A korábbi Poppins fájlok a poppins/ mappában maradnak, de már nincsenek hivatkozva.) */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;
src:url('/View/site_assets/fonts/rubik/rubik-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;
src:url('/View/site_assets/fonts/rubik/rubik-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* ============================ TOKENS ============================ */
:root{
--mm: #e70b84; /* brand magenta */
--mm-dark: #c40a70;
--mm-light: #ff4fac;
--mm-50: #fff0f8; /* nagyon halvány magenta háttér */
--mm-100: #ffe1f1;
--navy: #0c1f34;
--navy-2: #14304f;
--ink: #16202b; /* fő szöveg */
--muted: #667085; /* halvány szöveg */
--line: #ebedf1; /* vonalak/keretek */
--bg: #ffffff;
--bg-soft: #f6f7fb; /* lágy szekció háttér */
--radius: 18px;
--radius-sm: 12px;
--radius-pill: 999px;
--shadow-sm: 0 4px 14px rgba(16,32,52,.06);
--shadow: 0 14px 38px rgba(16,32,52,.10);
--shadow-lg: 0 26px 60px rgba(16,32,52,.16);
--shadow-mm: 0 12px 30px rgba(231,11,132,.30);
--grad: linear-gradient(135deg,var(--mm),var(--mm-dark));
--grad-soft: linear-gradient(135deg,#ff5cb0,var(--mm));
--ease: cubic-bezier(.2,.7,.3,1);
--t: .3s var(--ease);
--container: 1200px;
/* TÖBB fallback kell akkor itt van ->
--font: 'Rubik', system-ui, 'Segoe UI', Roboto, Arial, sans-serif; */
--font: 'Rubik', sans-serif;
}
/* ============================ ALAP ============================ */
html{ scroll-behavior:smooth; }
body{
font-family:var(--font) !important;
color:var(--ink);
background:var(--bg) !important;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.6;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--font) !important;
color:var(--ink);
letter-spacing:-.02em;
line-height:1.2;
}
/* ===== POPPINS MINDENÜTT =====
A body/heading szabály önmagában nem elég: sok legacy (style.css) és .mm- elem
explicit (nem !important) font-family-t ad meg (pl. gombok, navi, badge-ek,
inputok), ami felülírja az öröklött body-fontot. Ezért egy univerzális,
!important szabállyal kényszerítjük ki mindenhol — az ikonfont-osztályokat
(FontAwesome/feather/Flaticon/Bootstrap Icons) kizárva, hogy az ikonok
sértetlenek maradjanak.
FONTOS: a :not() láncnak EGYETLEN, szóköz/sortörés NÉLKÜLI compound selectornak
kell lennie! Ha a :not(...) csoportok közé szóköz/sortörés kerül, a CSS azt
leszármazott-kombinátorként értelmezi (más elemre vonatkozna, mint amire kellene),
és emiatt pl. a "fa fa-map-marker" span-ok is megkapták volna a Poppins-t
(tofu-box lett az ikonokból). EZÉRT NE TÖRD TÖBB SORBA, marad egy sorban. */
body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not([class*="flaticon"]):not([class*="icon-"]):not(.feather):not([class*="bi-"]):not(.mm-nopop){
font-family:var(--font) !important;
}
/* ===== POPPINS KIKÉNYSZERÍTÉSE A DB-BŐL JÖVŐ TARTALOMRA =====
A WYSIWYG-ből érkező szöveg gyakran INLINE style="font-family:..."-t hoz.
Ezt (és CSAK ezt) írjuk felül: az attribútum-szelektor pontosan az inline
font-family-s elemeket célozza, az !important legyőzi az inline (nem !important)
értéket. Az ikonfontokat (FontAwesome/feather/Flaticon) NEM érinti, mert azok
nem inline style-lal, hanem class alapján kapják a betűkészletüket -> az ikonok
sértetlenek maradnak. A body/heading Poppins-t fentebb már beállítottuk. */
[style*="font-family"]{
font-family:var(--font) !important;
}
/* biztonsági öv: ha egy ikon mégis inline font-family-t kapna, ne törjük el */
[style*="font-family"].fa, [style*="font-family"].fas, [style*="font-family"].far,
[style*="font-family"].fab, [style*="font-family"].fal, [style*="font-family"].fad,
[style*="font-family"][class*="fa-"], [style*="font-family"][class*="flaticon"],
[style*="font-family"][class*="icon-"], [style*="font-family"].feather{
font-family:revert !important;
}
a{ transition:color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease); }
img{ max-width:100%; }
/* A régi .wow elemek opacity:0-val indulnak és csak a wow.js animálja láthatóvá
őket görgetésre — ha a JS nem fut le (vagy a tartalom a hajtás felett van),
eltűnik a tartalom. Garantáljuk a láthatóságot: */
.wow{ opacity:1 !important; visibility:visible !important; }
::selection{ background:var(--mm); color:#fff; }
/* a "Tovább" / felső szalag elrejtése a régi sablonból, ha üres teret hagy
(nem törlünk funkciót, csak a régi dekor-elemeket nyugtatjuk) */
.preloader{ display:none !important; }
/* egységes belső konténer-szélesség a régi .auto-container / .container -re */
.auto-container{
max-width:var(--container) !important;
padding-left:20px !important;
padding-right:20px !important;
}
/* ====================================================================
1) ÚJ NAVBAR (.mm-nav — a menu.php új markupjához)
==================================================================== */
.mm-nav{
position:sticky; top:0; z-index:1000;
background:rgba(255,255,255,.85);
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid var(--line);
transition:box-shadow var(--t), background var(--t);
}
.mm-nav.is-scrolled{ box-shadow:var(--shadow-sm); background:rgba(255,255,255,.95); }
.mm-nav__inner{
max-width:var(--container); margin:0 auto;
display:flex; align-items:center; gap:22px;
padding:12px 20px;
}
.mm-nav__logo{ display:flex; align-items:center; flex:0 0 auto; }
.mm-nav__logo img{ height:44px; width:auto; transition:transform var(--t); }
.mm-nav__logo:hover img{ transform:scale(1.05); }
.mm-nav__menu{
list-style:none; margin:0; padding:0;
display:flex; align-items:center; gap:4px;
margin-left:auto;
}
.mm-nav__menu > li{ position:relative; }
.mm-nav__menu > li > a{
display:block; padding:10px 14px;
color:var(--ink); font-weight:600; font-size:15px;
border-radius:var(--radius-pill); text-decoration:none;
white-space:nowrap;
}
.mm-nav__menu > li > a:hover{ color:var(--mm); background:var(--mm-50); }
.mm-nav__menu > li.is-current > a{
color:var(--mm);
background: var(--mm-50);
}
.mm-nav__menu > li.is-current > a::after{
/*
content:"";
display:block;
height:3px;
width:22px;
margin:5px auto 0;
background:var(--grad);
border-radius:3px;
*/
}
/* dropdownok */
.mm-nav__menu li.has-sub > a::after{
content:"\f107"; font-family:FontAwesome; margin-left:7px; font-size:12px; opacity:.6;
}
.mm-sub{
list-style:none; margin:0; padding:8px;
position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
background:#fff; border:1px solid var(--line);
border-radius:var(--radius-sm); box-shadow:var(--shadow);
opacity:0; visibility:hidden; transform:translateY(8px);
transition:var(--t); z-index:50;
}
.mm-nav__menu li:hover > .mm-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.mm-sub li{ position:relative; }
.mm-sub > li > a{
display:block; padding:10px 14px; border-radius:10px;
color:var(--ink); font-size:14px; font-weight:500; text-decoration:none;
}
.mm-sub > li > a:hover{ background:var(--mm-50); color:var(--mm); }
.mm-sub .mm-sub{ top:-8px; left:calc(100% + 8px); }
/* kiemelt CTA menüpontok */
.mm-nav__menu > li.mm-cta > a{
background:var(--grad); color:#fff !important; box-shadow:var(--shadow-mm);
}
.mm-nav__menu > li.mm-cta > a:hover{ transform:translateY(-2px); }
.mm-nav__menu > li.mm-cta--dark > a{ background:linear-gradient(135deg,var(--navy),var(--navy-2)); box-shadow:none; }
/* Edzések — kiemelt rózsaszín menügomb (alapból színes, hogy kilógjon a sorból) */
.mm-nav__menu > li.mm-nav__train > a{
background:var(--grad); color:#fff !important; box-shadow:var(--shadow-mm);
padding-left:18px; padding-right:18px;
}
.mm-nav__menu > li.mm-nav__train > a:hover{ transform:translateY(-2px); color:#fff !important; }
.mm-nav__menu > li.mm-nav__train.is-current > a{ background:var(--grad); color:#fff !important; }
.mm-nav__menu > li.mm-nav__train > a .fa{ margin-right:5px; }
/* Kosár — kör alakú ikongomb az Edzések mellett (2026-07-21).
Csak NYITOTT webshopnál renderelődik (menu.php). A badge a tételszám. */
.mm-nav__menu > li.mm-nav__cart > a{
position:relative; display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; padding:0 !important; border-radius:50%;
background:var(--bg-soft); color:var(--ink) !important;
border:1.5px solid var(--line); transition:var(--t);
}
.mm-nav__menu > li.mm-nav__cart > a:hover{
background:var(--mm-50); color:var(--mm) !important; border-color:var(--mm-100); transform:translateY(-2px);
}
.mm-nav__menu > li.mm-nav__cart.is-current > a{
background:var(--grad); color:#fff !important; border-color:transparent;
}
.mm-nav__menu > li.mm-nav__cart > a .fa{ font-size:17px; margin:0; }
.mm-nav__cartbadge{
position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--radius-pill); background:var(--grad); color:#fff;
font-size:11px; font-weight:800; line-height:1; box-shadow:var(--shadow-sm);
}
@media (max-width:1100px){
/* mobil menüben szövegesen is jelöljük, hogy mi ez */
.mm-nav__menu > li.mm-nav__cart > a{ width:auto; height:auto; border-radius:var(--radius-pill); padding:10px 18px !important; }
.mm-nav__menu > li.mm-nav__cart > a:after{ content:"Kosár"; margin-left:8px; font-weight:600; }
}
/* hamburger */
.mm-burger{
display:none; margin-left:auto;
width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
background:#fff; cursor:pointer; align-items:center; justify-content:center;
flex-direction:column; gap:5px;
}
.mm-burger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:var(--t); }
.mm-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mm-burger.is-open span:nth-child(2){ opacity:0; }
.mm-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1100px){
.mm-burger{ display:flex; }
.mm-nav__menu{
position:fixed; top:69px; right:0; height:calc(100vh - 69px); width:min(360px,86vw);
flex-direction:column; align-items:stretch; gap:2px;
background:#fff; border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
padding:16px; overflow-y:auto;
transform:translateX(105%); transition:transform var(--t);
}
.mm-nav__menu.is-open{ transform:translateX(0); }
.mm-nav__menu > li > a{ border-radius:12px; }
.mm-sub{
position:static; opacity:1; visibility:visible; transform:none;
box-shadow:none; border:none; border-left:2px solid var(--mm-100);
margin:2px 0 6px 12px; padding:2px 0; display:none;
}
.mm-nav__menu li.is-subopen > .mm-sub{ display:block; }
}
/* ====================================================================
2) HERO (.mm-hero — a kezdolap.php új hero markupjához)
==================================================================== */
.mm-hero{
position:relative; overflow:hidden; background:var(--navy);
touch-action:pan-y;
}
.mm-hero__slide{
position:absolute; inset:0; opacity:0; visibility:hidden;
display:flex; align-items:center;
background-size:cover; background-position:center;
transition:opacity .9s var(--ease), visibility .9s var(--ease);
z-index:1;
}
/* a magasságot az első (relatív) slide adja */
.mm-hero__slide:first-child{ position:relative; }
.mm-hero__slide{ min-height:clamp(460px,70vh,720px); }
.mm-hero__slide.is-active{ opacity:1; visibility:visible; z-index:2; }
/* Ken Burns: az aktív slide háttere lassan ráközelít */
.mm-hero__slide::after{
content:""; position:absolute; inset:0; background:inherit; background-size:cover; background-position:center;
transform:scale(1); transition:transform 7s linear; z-index:0;
}
.mm-hero__slide.is-active::after{ transform:scale(1.12); }
.mm-hero__slide::before{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg,rgba(12,31,52,.86),rgba(12,31,52,.45) 55%,rgba(231,11,132,.30));
}
.mm-hero__inner{
position:relative; z-index:3;
max-width:var(--container); margin:0 auto; width:100%;
padding:40px clamp(20px,5vw,40px); color:#fff;
}
/* tartalom fade-up animáció az aktív slide-on */
.mm-hero__slide.is-active .mm-hero__badge{ animation:mmUp .7s .15s var(--ease) both; }
.mm-hero__slide.is-active .mm-hero__title{ animation:mmUp .7s .30s var(--ease) both; }
.mm-hero__slide.is-active .mm-hero__sub{ animation:mmUp .7s .45s var(--ease) both; }
.mm-hero__slide.is-active .mm-hero__inner > a{ animation:mmUp .7s .60s var(--ease) both; }
@keyframes mmUp{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)} }
.mm-hero__badge{
display:inline-block; padding:8px 18px; border-radius:var(--radius-pill);
background:var(--grad); color:#fff; font-weight:700; font-size:13px;
letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; box-shadow:var(--shadow-mm);
}
.mm-hero__title{ color:#fff; font-size:clamp(30px,5.2vw,56px); font-weight:800; max-width:780px; margin:0 0 16px; line-height:1.08; }
.mm-hero__sub{ color:rgba(255,255,255,.92); font-size:clamp(16px,2.2vw,21px); max-width:620px; margin:0 0 28px; }
/* nyilak */
.mm-hero__arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:5;
width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
background:rgba(255,255,255,.14); color:#fff; font-size:20px;
backdrop-filter:blur(6px); transition:var(--t); display:grid; place-items:center;
}
.mm-hero__arrow:hover{ background:var(--grad); box-shadow:var(--shadow-mm); }
.mm-hero__arrow--prev{ left:clamp(12px,3vw,28px); }
.mm-hero__arrow--next{ right:clamp(12px,3vw,28px); }
@media (max-width:640px){ .mm-hero__arrow{ display:none; } }
/* pöttyök autoplay-progresszel */
.mm-hero__dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.mm-hero__dots button{
width:34px; height:5px; border-radius:6px; border:none; cursor:pointer; padding:0;
background:rgba(255,255,255,.35); overflow:hidden; position:relative; transition:var(--t);
}
.mm-hero__dots button::after{
content:""; position:absolute; inset:0; width:0; background:#fff; border-radius:6px;
}
.mm-hero__dots button.is-active::after{ width:100%; transition:width 6s linear; }
/* ====================================================================
3) GOMBOK (új + legacy)
==================================================================== */
.mm-btn,
.light-btn,.dark-btn,.theme-btn,.order-now,.read-more,
.btn-style-one,.btn-style-two,
button.scb_submit,
.btn-primary,
input[type="submit"]{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border-radius:var(--radius-pill) !important;
font-weight:700 !important; letter-spacing:.01em; font-size:15px !important;
padding:14px 30px !important; min-height:52px; line-height:1.2 !important;
border:none !important; cursor:pointer;
transition:transform var(--t), box-shadow var(--t), filter var(--t) !important;
text-decoration:none;
}
.mm-btn{ padding:14px 30px !important; }
.mm-btn--primary,
.light-btn,.theme-btn,.order-now,.btn-style-one,
.btn-primary,
input[type="submit"]{
background:var(--grad) !important; color:#fff !important; box-shadow:var(--shadow-mm);
}
.mm-btn--dark,
.dark-btn,.btn-style-two{
background:linear-gradient(135deg,var(--navy),var(--navy-2)) !important; color:#fff !important;
}
.mm-btn--ghost{
background:#fff !important; color:var(--mm) !important; border:1.5px solid var(--mm) !important; box-shadow:none;
}
.mm-btn:hover,
.light-btn:hover,.dark-btn:hover,.theme-btn:hover,.order-now:hover,
.btn-style-one:hover,.btn-style-two:hover,.btn-primary:hover,
button.scb_submit:hover,
input[type="submit"]:hover{
transform:translateY(-3px); box-shadow:var(--shadow-lg) !important; filter:saturate(1.05);
}
/* ====================================================================
4) SZEKCIÓK / CÍMEK (legacy .sec-title)
==================================================================== */
section{ position:relative; }
.our-offers,.our-team,.plans-pricing,.fact-counter,
.curved-section,#testimonials-page,.client-logos,
.default-section,.content-section{
padding:clamp(48px,7vw,90px) 0;
}
.sec-title{ margin-bottom:42px; text-align:center; }
.sec-title h3{
color:var(--mm) !important; text-transform:uppercase;
letter-spacing:.2em; font-weight:700 !important; font-size:13px !important; margin-bottom:10px;
}
.sec-title h2{
font-size:clamp(26px,3.6vw,40px) !important; font-weight:800 !important;
margin:0; display:inline-block; position:relative; padding-bottom:18px;
}
.sec-title h2::after{
content:""; display:block; width:64px; height:4px; margin:14px auto 0;
border-radius:4px; background:var(--grad);
}
/* ====================================================================
5) KÁRTYÁK — hírek (our-offers), csapat (member), árak (price-table)
==================================================================== */
.our-offers .offer{ transition:transform var(--t); margin-bottom:30px; }
.our-offers .offer .image{
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); position:relative;
}
.our-offers .offer .image img{ width:100%; height:220px; object-fit:cover; transition:transform .6s var(--ease); }
.our-offers .offer:hover{ transform:translateY(-8px); }
.our-offers .offer:hover .image img{ transform:scale(1.07); }
.our-offers .offer .image .price{
background:var(--grad) !important; border-radius:var(--radius-pill) !important;
font-weight:700; padding:6px 14px !important; box-shadow:var(--shadow-mm); top:14px !important; left:14px !important;
}
.our-offers .offer .text{ padding:20px 6px 6px; }
.our-offers .offer .text h3{ font-size:18px; font-weight:700; margin-bottom:8px; }
.our-offers .offer .text p{ color:var(--muted); }
.our-offers .offer .read-more{
background:transparent !important; color:var(--mm) !important; box-shadow:none !important;
padding:0 !important; font-weight:700;
}
.our-offers .offer .read-more:hover{ transform:none; gap:10px; }
/* csapat */
.our-team .member{
background:#fff; border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-sm); transition:var(--t); border:1px solid var(--line);
}
.our-team .member:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.our-team .member .image{ position:relative; }
.our-team .member .image img{ width:100%; height:300px; object-fit:cover; }
.our-team .member .image .curve{ display:none; }
.our-team .member .content{
padding:18px !important; background:#fff !important; min-height:0 !important; text-align:center;
}
.our-team .member .content .info li,
.our-team .member .content .info li strong{ color:var(--ink) !important; }
.our-team .member .content .info li:nth-child(2) strong{ color:var(--mm) !important; }
.our-team .member .social-links{ margin-top:12px; }
.our-team .member .social-links a{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%; background:var(--mm-50); color:var(--mm) !important;
margin:0 3px; transition:var(--t);
}
.our-team .member .social-links a:hover{ background:var(--grad); color:#fff !important; transform:translateY(-3px); }
/* ártáblák */
.plans-pricing .price-table{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--t); margin-bottom:30px;
}
.plans-pricing .price-table:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.price-table .title{ background:var(--grad) !important; padding:22px !important; }
.price-table .title h3{ color:#fff !important; }
.price-table .title .curve{ display:none; }
.price-table .table-inner{ padding:24px !important; }
.price-table .price .big-text{ color:var(--ink); font-weight:800; }
/* ====================================================================
6) STATISZTIKA (fact-counter) — modern sötét blokk
==================================================================== */
.fact-counter{ background-color:var(--navy) !important; }
.fact-counter::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(12,31,52,.82),rgba(12,31,52,.92));
}
.fact-counter .auto-container{ position:relative; z-index:2; }
.fact-counter .sec-title h2{ color:#fff !important; }
.fact-counter .block p{ color:rgba(255,255,255,.85); }
/* ====================================================================
7) VÉLEMÉNYEK
==================================================================== */
#testimonials-page .owl-carousel .item{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:28px !important; margin:10px;
}
#testimonials-page .item .fa-quote-left{ color:var(--mm) !important; font-size:26px; opacity:.4; }
/* ====================================================================
8) PARTNEREK
==================================================================== */
.client-logos{ background:var(--bg-soft); }
.client-logos .title{ background:transparent !important; }
.client-logos .title h2{ color:var(--ink) !important; }
.client-logos .title h2 .small-text{ color:var(--mm) !important; }
.client-logos .slide-item img{ filter:none; opacity:1; transition:var(--t); }
.client-logos .slide-item:hover img{ filter:none; opacity:1; }
/* curved-section (havi termék) modern blokk */
.curved-section{ background:var(--mm-50); }
.curved-section .image .price{ background:var(--grad) !important; border-radius:var(--radius-pill) !important; }
/* ====================================================================
9) LÁBLÉC (.mm-footer új markup + legacy .main-footer)
==================================================================== */
/* ---- VILÁGOS footer (01-es koncepció): a magenta hírlevél-kártya mögött
NINCS sötét háttér; letisztult, világos alap sötét szöveggel. ---- */
.mm-footer,.main-footer{
background:linear-gradient(180deg,#ffffff, var(--mm-50)) !important; color:var(--ink);
padding-top:52px !important; padding-bottom:26px !important;
position:relative; clear:both; margin-top:0 !important;
}
/* concept-01: nincs sötét felső accent-csík — a kártya viszi a hangsúlyt */
.mm-footer::before,.main-footer::before{ content:none !important; }
/* felső "upper" sáv (ha egy oldal használja) */
.main-footer .upper{
border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:30px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.main-footer .upper .img-responsive{ max-height:46px; width:auto; }
/* --- OSZLOP-ELRENDEZÉS --- */
.main-footer .lower{ margin-top:6px; }
.main-footer .lower > .row{ margin-left:0; margin-right:0; }
.main-footer .lower .row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:38px 30px; }
.main-footer .lower .row > div{ float:none !important; }
.main-footer .lower .row > div[class*="col-"]{ padding-left:0; padding-right:0; }
@media (max-width:767px){ .main-footer .lower .row > div{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; } }
/* --- SZEKCIÓFEJLÉCEK: sötét, kis magenta aláhúzással --- */
.main-footer .footer-widget{ margin-bottom:6px; }
.main-footer .footer-widget h2,.mm-footer h2,.mm-footer h3{
color:var(--ink) !important; font-size:17px; font-weight:700; letter-spacing:.2px;
position:relative; padding-bottom:12px; margin-bottom:16px;
}
.main-footer .footer-widget h2::after,.mm-footer .mm-foot-h::after{
content:""; display:block; width:38px; height:3px; margin-top:10px; border-radius:3px; background:var(--grad);
}
/* --- LINKEK --- */
.main-footer a,.mm-footer a{ color:var(--muted); transition:color .18s var(--ease); }
.main-footer a:hover,.mm-footer a:hover{ color:var(--mm); }
/* --- LOGÓ + COPYRIGHT OSZLOP --- */
.main-footer .footer-widget.copyright h2{ padding-bottom:0; margin-bottom:16px; }
.main-footer .footer-widget.copyright h2::after{ display:none !important; }
.main-footer .footer-widget.copyright h2 img{ max-height:60px; width:auto; }
.main-footer .footer-widget.copyright > p{ color:var(--muted); font-size:14px; margin:0 0 14px; }
.main-footer .footer-widget.copyright a{ font-size:13px; text-decoration:none; }
/* --- HÍREK / DOKUMENTUMOK link-pill-ek — világos --- */
.main-footer .popular-tags a{
display:inline-block; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill);
padding:7px 15px; margin:0 6px 8px 0; font-size:13px; color:var(--ink);
box-shadow:var(--shadow-sm);
transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.main-footer .popular-tags a:hover{
background:var(--grad) !important; border-color:transparent; color:#fff !important;
transform:translateY(-2px); box-shadow:var(--shadow-mm);
}
.main-footer .mm-footdocs{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
/* --- KAPCSOLAT: tiszta címke/érték sorok --- */
.main-footer .footer-widget.contact ul{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.main-footer .footer-widget.contact ul li{ display:flex !important; flex-direction:column; gap:3px; }
.main-footer .footer-widget.contact ul li::before,
.main-footer .footer-widget.contact ul li::after{ content:none !important; display:none !important; }
.main-footer .footer-widget.contact ul li strong,
.main-footer .footer-widget.contact ul li .pull-left{
float:none !important; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--muted); margin:0;
}
.main-footer .footer-widget.contact ul li p,
.main-footer .footer-widget.contact ul li .pull-right{
float:none !important; text-align:left !important; margin:0; color:var(--ink); font-size:15px; line-height:1.45; font-weight:500;
}
/* --- ALSÓ SOCIAL + FIZETÉS SÁV (bekeretezett, lekerekített ikon-négyzetek) --- */
.main-footer .mm-footbar{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
width:100%; margin:34px 0 0; padding:24px 0 4px; border-top:1px solid var(--line);
}
.main-footer .mm-footbar__social{ display:flex; gap:10px; }
.main-footer .mm-footbar__social a,
.main-footer .social-links .icon,.mm-footer .mm-soc a{
display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px;
border-radius:12px; border:1px solid var(--line); background:#fff !important; color:var(--ink) !important;
margin:0; transition:var(--t); text-decoration:none;
}
.main-footer .mm-footbar__social a:hover,
.main-footer .social-links .icon:hover,.mm-footer .mm-soc a:hover{
background:var(--grad) !important; color:#fff !important; border-color:transparent;
transform:translateY(-3px); box-shadow:var(--shadow-mm);
}
.main-footer .mm-footbar__pay img{ max-height:30px; width:auto; display:block; opacity:.95; }
@media (max-width:600px){ .main-footer .mm-footbar{ justify-content:center; } }
/* FB oldal-widget (ha megjelenik) ne lógjon ki az oszlopból */
.main-footer .fb-page,
.main-footer .fb-page span,
.main-footer .fb-page iframe{ max-width:100% !important; }
/* --- BACK-TO-TOP --- */
.back-to-top{
background:var(--grad) !important; border-radius:50% !important; color:#fff !important;
box-shadow:var(--shadow-mm); width:48px !important; height:48px !important; line-height:48px !important;
transition:var(--t);
}
.back-to-top:hover{ transform:translateY(-4px); }
/* ====================================================================
10) ŰRLAPOK / INPUTOK / TÁBLÁK / LAPOZÓ (aloldalakhoz)
==================================================================== */
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
input[type="phone"],input[type="number"],input[type="search"],input[type="date"],
select,textarea,.form-control{
border:1.5px solid var(--line) !important; border-radius:var(--radius-sm) !important;
padding:14px 16px !important; min-height:50px; font-size:15px !important; line-height:1.4 !important;
transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
background:var(--bg-soft) !important; color:var(--ink) !important; box-shadow:none !important;
}
textarea.form-control,textarea{ min-height:120px; }
input::placeholder,textarea::placeholder{ color:#9aa3b2 !important; opacity:1; }
input:focus,select:focus,textarea:focus,.form-control:focus{
border-color:var(--mm) !important; background:#fff !important;
box-shadow:0 0 0 4px rgba(231,11,132,.14) !important; outline:none !important;
}
.table,table.table{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.table > thead > tr > th,table.table thead th{
background:var(--bg-soft) !important; border-bottom:2px solid var(--mm) !important;
color:var(--ink) !important; font-weight:700;
}
.table-hover > tbody > tr:hover,table.table tbody tr:hover{ background:var(--mm-50) !important; }
.pagination > li > a,.pagination > li > span{
border:1px solid var(--line) !important; border-radius:10px !important; margin:0 4px; color:var(--ink) !important;
transition:var(--t);
}
.pagination > .active > a,.pagination > .active > span,.pagination > li > a:hover{
background:var(--grad) !important; border-color:transparent !important; color:#fff !important;
}
/* belső oldal fejléc / banner egységes modern megjelenés */
.page-title,.page-banner,.banner-section,.inner-banner{
background:var(--navy) !important; position:relative;
}
.page-title::before,.page-banner::before{
content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,31,52,.85),rgba(231,11,132,.25));
}
.page-title *,.page-banner *{ position:relative; z-index:2; }
.page-title h1,.page-banner h1{ background:transparent !important; color:#fff !important; }
/* webshop / termék rács kártyásítása (legacy .products, .product-block) */
.products .product-block,.products .inner-box,.shop-item,.product-item{
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
border:1px solid var(--line); transition:var(--t); background:#fff;
}
.products .product-block:hover,.shop-item:hover,.product-item:hover{
transform:translateY(-6px); box-shadow:var(--shadow-lg);
}
/* hírlevél popup modern */
.nwsl-holder{
background:var(--grad) !important; border-radius:var(--radius) var(--radius) 0 0 !important;
box-shadow:var(--shadow-lg);
}
.scb_input{ border-radius:var(--radius-pill) !important; border:none !important; }
.scb_submit{ border-radius:var(--radius-pill) !important; background:var(--navy) !important; }
/* lebegő kosár gomb + edzések szalag */
.cartButton{ background:var(--grad) !important; box-shadow:var(--shadow-mm); }
.main-header .open-hours,.open-hours .toggle-open-hours{ background:var(--grad) !important; }
.event-place-items{ background-color:var(--mm) !important; }
.ma{ color:var(--mm) !important; }
blockquote{ border-radius:var(--radius-sm); color:var(--ink) !important; background:var(--bg-soft) !important; padding:16px 22px !important; }
/* a régi idézőjel-ikon (header.php inline \f10d) eltávolítása — a doboz marad */
blockquote:before,blockquote::before{ content:none !important; display:none !important; }
/* ====================================================================
11) RÉGI MAGENTA (#dd1379) → ÚJ BRAND (#e70b84) — teljes lefedés
==================================================================== */
.color-text,.theme-color,.sec-text .read-more{ color:var(--mm) !important; }
.theme-bg{ background-color:var(--mm) !important; }
.main-slider .light-blue,.products .light-blue{ background:var(--mm) !important; }
.why-choose-us .text{ border-left:3px solid var(--mm) !important; }
.main-footer .copyright a{ color:var(--mm) !important; } /* világos footer: jobb kontraszt */
/* segédosztályok az új markuphoz */
.mm-container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.mm-section{ padding:clamp(48px,7vw,90px) 0; }
/*
.mm-section{
padding: clamp(25px, 7vw, 25px) 0;
}
*/
.mm-section--soft{ background:var(--bg-soft); }
.mm-grid{ display:grid; gap:26px; }
.mm-grid--4{ grid-template-columns:repeat(4,1fr); }
.mm-grid--3{ grid-template-columns:repeat(3,1fr); }
.mm-grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:992px){ .mm-grid--4{ grid-template-columns:repeat(2,1fr);} .mm-grid--3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .mm-grid--4,.mm-grid--3,.mm-grid--2{ grid-template-columns:1fr; } }
/* ====================================================================
12) FŐOLDAL — ÚJ, ÖNÁLLÓ BLOKKOK (.mm-* — nem a régi sablon-osztályok)
==================================================================== */
/* --- közös szekciófej --- */
.mm-head{ text-align:center; max-width:720px; margin:0 auto clamp(34px,5vw,56px); }
.mm-head__eyebrow{
display:inline-block; color:var(--mm); font-weight:700; font-size:13px;
letter-spacing:.2em; text-transform:uppercase; margin-bottom:12px;
}
.mm-head__title{ font-size:clamp(26px,3.6vw,40px); font-weight:800; margin:0 0 14px; }
.mm-head__title .mm-hl{ color:var(--mm); }
.mm-head__title::after{ content:""; display:block; width:64px; height:4px; margin:16px auto 0; border-radius:4px; background:var(--grad); }
.mm-head__lead{ color:var(--muted); font-size:17px; margin:0; }
.mm-head--light .mm-head__title{ color:#fff; }
.mm-head--light .mm-head__lead{ color:rgba(255,255,255,.8); }
/* --- bevezető (about) --- */
/* --- bevezető köszöntő (frappáns redesign 2026-07-01) --- */
.mm-about{ }
.mm-about__card{
position:relative; overflow:hidden;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:0 18px 50px -30px rgba(196,10,112,.35);
padding:clamp(28px,4.5vw,52px); font-size:17px; color:var(--ink);
}
/* dekoráció: halvány magenta kör + óriás idézőjel a háttérben */
.mm-about__card::before{
content:""; position:absolute; top:-70px; right:-60px; width:230px; height:230px;
background:var(--mm-50); border-radius:50%; z-index:0;
}
.mm-about__card::after{
content:"\201D"; position:absolute; top:2px; right:40px; z-index:0;
font-family:Georgia,"Times New Roman",serif; font-size:170px; line-height:1; color:#ffd9ee;
pointer-events:none;
}
.mm-about__card > *{ position:relative; z-index:1; }
/* eyebrow címke */
.mm-about__eyebrow{
display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--mm); background:var(--mm-50); padding:7px 14px; border-radius:var(--radius-pill);
}
.mm-about__dot{ width:7px; height:7px; border-radius:50%; background:var(--mm); display:inline-block; }
/* a DB (WYSIWYG) tartalom megszelídítése: elavult inline stílusok felülírása */
.mm-about__body{ max-width:760px; }
.mm-about__body, .mm-about__body *{ font-family:inherit !important; }
/* a Font Awesome ikonok visszakapják a saját fontjukat (különben □ tofu).
A betöltött csomag FontAwesome 5 ("Font Awesome 5 Free/Brands"), a solid a 900-as súly. */
.mm-about__body .fa, .mm-about__body .fas{ font-family:"Font Awesome 5 Free" !important; font-weight:900 !important; }
.mm-about__body .far{ font-family:"Font Awesome 5 Free" !important; font-weight:400 !important; }
.mm-about__body .fab{ font-family:"Font Awesome 5 Brands" !important; font-weight:400 !important; }
.mm-about__body :is(p,h1,h2,h3,h4,li){ text-align:left !important; }
.mm-about__body :is(h1,h2,h3){ margin-top:0; }
.mm-about__body p{ font-size:16.5px; line-height:1.75; color:#4a5560; margin:0 0 16px; }
/* első valódi címsor = a köszöntő → nagy, magenta display heading + accent-csík
(a > kombinátor: csak a body közvetlen gyereke, a lenyíló .mm-about__more nem) */
.mm-about__body > h1:first-of-type{
font-size:clamp(28px,4vw,38px); line-height:1.15; font-weight:800; letter-spacing:-.02em;
color:var(--mm) !important; margin:0 0 22px;
}
.mm-about__body > h1:first-of-type *{ color:var(--mm) !important; }
.mm-about__body > h1:first-of-type::after{
content:""; display:block; width:70px; height:4px; margin-top:22px;
background:var(--grad); border-radius:4px;
}
/* az első bekezdés lead-ként emelkedik ki */
.mm-about__body > p:first-of-type{
font-size:19px; line-height:1.6; font-weight:500; color:#2b3644; margin-bottom:18px;
}
/* "bővebben / kevesebb" — inline link közvetlenül a szöveg után */
.mm-readmore{
display:inline-flex; align-items:center; gap:6px; vertical-align:baseline; padding:0;
background:none; border:none; cursor:pointer; white-space:nowrap;
color:var(--mm) !important; font-weight:700; font-size:inherit; text-decoration:none;
}
.mm-readmore:hover{ color:var(--mm-dark) !important; text-decoration:underline; }
.mm-readmore i{ font-size:.85em; }
.mm-readmore--less{ display:inline-flex; margin-top:14px; font-size:16px; }
.mm-about__more[hidden]{ display:none; }
.mm-about__more{ animation:mmFadeIn .35s var(--ease); }
@keyframes mmFadeIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
/* --- Blog hír-kártya: kategória-badge a thumbnail sarkában (2026-07-17,
nyiregyhaza.hu-stílus). A Blog fejléc-lenyíló megszűnt, a kategória itt látszik. --- */
.mm-blog-thumb{ position:relative; overflow:hidden; border-radius:var(--radius-sm); }
.mm-blog-thumb img{ display:block; border-radius:var(--radius-sm); }
.mm-blog-cat{
position:absolute; top:12px; left:12px; z-index:2;
display:inline-block; padding:5px 12px;
font-size:12px; font-weight:700; line-height:1.2; letter-spacing:.02em;
color:#fff !important; text-decoration:none;
background:var(--grad); border-radius:var(--radius-pill);
box-shadow:var(--shadow-mm); transition:var(--t);
}
.mm-blog-cat:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#fff !important; }
/* --- Közösségi Futásaink támogatói (partners.is_run_finance=2) --- */
/* 2026-07-17: LETISZTÍTOTT megjelenés — nincs kártya-keret/háttér/árnyék (layer),
nincs szürkeárnyalat (a logók SZÍNES PNG-k), nincs belapozó animáció (sallang).
Egyszerű, középre igazított színes logó-sor. */
.mm-supgrid{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:32px 44px;
}
.mm-sup{
display:flex; align-items:center; justify-content:center;
flex:0 0 auto; box-sizing:border-box;
background:none; border:0; border-radius:0;
padding:0; min-height:0; box-shadow:none; transition:var(--t);
}
a.mm-sup:hover{ transform:translateY(-3px); }
.mm-sup img{
max-width:100%; max-height:70px; width:auto; height:auto; object-fit:contain;
filter:none; opacity:1;
}
/* A támogatói logóknál a belapozó reveal kikapcsolva (mindig látszanak, színesben). */
.mm-runsupport .mm-reveal .mm-reveal__item,
.mm-supgrid.mm-reveal .mm-reveal__item{ opacity:1; transform:none; transition:none; }
/* (általános fade-in reveal — máshol maradhat használatban) */
.mm-reveal .mm-reveal__item{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.mm-reveal.is-in .mm-reveal__item{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
.mm-reveal .mm-reveal__item{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* feature chipek */
.mm-about__features{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.mm-about__feat{
display:flex; align-items:center; gap:12px;
background:var(--mm-50); border:1px solid var(--mm-100); border-radius:var(--radius-sm); padding:12px 18px;
}
.mm-about__feat-ic{
width:42px; height:42px; border-radius:12px; background:var(--grad); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;
}
.mm-about__feat-tx{ display:flex; flex-direction:column; line-height:1.25; }
.mm-about__feat-tx strong{ font-size:15px; color:var(--ink); font-weight:700; }
.mm-about__feat-tx small{ font-size:13px; color:var(--muted); }
@media (max-width:560px){
.mm-about__feat{ flex:1 1 100%; }
}
/* 4 kártya esetén kiegyensúlyozott elrendezés: 2×2 rács, széles nézeten egy sor. */
.mm-about__features[data-count="4"] .mm-about__feat{ flex:1 1 calc(50% - 12px); }
@media (min-width:1024px){
.mm-about__features[data-count="4"] .mm-about__feat{ flex:1 1 calc(25% - 12px); }
}
/* --- hírek (news) --- */
.mm-news{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:992px){ .mm-news{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .mm-news{ grid-template-columns:1fr;} }
.mm-card{
display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--t);
}
.mm-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.mm-card__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.mm-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mm-card:hover .mm-card__media img{ transform:scale(1.07); }
.mm-card__tag{
position:absolute; top:12px; left:12px; background:var(--grad); color:#fff;
font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); box-shadow:var(--shadow-mm);
}
.mm-card__body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mm-card__title{ font-size:18px; font-weight:700; margin:0; line-height:1.3; }
.mm-card__text{ color:var(--muted); font-size:14.5px; margin:0; flex:1; }
.mm-card__link{ color:var(--mm); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.mm-card__link:hover{ gap:11px; color:var(--mm-dark); }
/* --- statisztika (stats) — sötét magenta sáv, CSS köríves progress --- */
.mm-stats{
position:relative; background:var(--navy); background-size:cover; background-position:center; overflow:hidden;
}
.mm-stats::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(12,31,52,.92),rgba(196,10,112,.55)); }
.mm-stats .mm-container{ position:relative; z-index:2; }
.mm-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:860px){ .mm-stats__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .mm-stats__grid{ grid-template-columns:1fr;} }
.mm-stat{ text-align:center; color:#fff; }
.mm-stat__ring{
--p:0; width:128px; height:128px; border-radius:50%; margin:0 auto 16px;
background:conic-gradient(var(--mm) calc(var(--p)*1%), rgba(255,255,255,.16) 0);
display:grid; place-items:center;
}
.mm-stat__ring::before{ content:""; grid-area:1/1; width:100px; height:100px; border-radius:50%; background:var(--navy); }
.mm-stat__num{ grid-area:1/1; position:relative; font-family:var(--font); font-weight:800; font-size:26px; }
.mm-stat__label{ color:rgba(255,255,255,.88); font-weight:500; }
/* --- csapat (team) --- */
.mm-team{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:992px){ .mm-team{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .mm-team{ grid-template-columns:1fr;} }
.mm-member{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-sm); transition:var(--t);
}
.mm-member:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.mm-member__media{ aspect-ratio:1/1; overflow:hidden; }
.mm-member__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mm-member:hover .mm-member__media img{ transform:scale(1.06); }
.mm-member__body{ padding:18px; text-align:center; }
.mm-member__name{ font-size:18px; font-weight:800; margin:0; }
.mm-member__role{ color:var(--mm); font-weight:600; font-size:14px; margin:4px 0 8px; }
.mm-member__meta{ color:var(--muted); font-size:13px; margin:0 0 12px; min-height:18px; }
.mm-member__soc a{
display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center;
background:var(--mm-50); color:var(--mm); margin:0 3px; transition:var(--t); text-decoration:none;
}
.mm-member__soc a:hover{ background:var(--grad); color:#fff; transform:translateY(-3px); }
/* --- vélemények (slick-szerű carousel) --- */
.mm-tcar{ position:relative; overflow:hidden; }
.mm-tcar__track{ display:flex; align-items:stretch; will-change:transform; }
.mm-tcar__item{ flex:0 0 33.333%; max-width:33.333%; padding:0 10px; box-sizing:border-box; }
.mm-quote2{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:22px; height:100%;
display:flex; flex-direction:column; gap:12px;
}
.mm-quote2__mark{ color:var(--mm); font-size:24px; line-height:1; opacity:.55; }
.mm-quote2__text{
color:var(--ink);
margin:0; flex:0 0 auto;
font-size:14.5px;
line-height:1.6;
text-align: justify;
}
/* Inline "Tovább olvasom" — folytonosan a szöveg végén, nem új sorban. */
.mm-quote2__more{
display:inline; margin-left:4px; color:var(--mm) !important; font-weight:700; font-size:13.5px;
text-decoration:none; cursor:pointer; transition:var(--t); white-space:nowrap;
}
.mm-quote2__more:hover{ color:var(--mm-dark) !important; text-decoration:underline; }
.mm-quote2__person{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; }
.mm-quote2__person img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.mm-quote2__name{ font-weight:700; color:var(--mm); font-size:14px; }
.mm-tcar__dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; flex-wrap:wrap; }
.mm-tcar__dots button{
width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
background:var(--mm-100); transition:var(--t);
}
.mm-tcar__dots button.is-active{ background:var(--mm); width:26px; border-radius:6px; }
@media (max-width:992px){ .mm-tcar__item{ flex-basis:50%; max-width:50%; } }
@media (max-width:600px){ .mm-tcar__item{ flex-basis:100%; max-width:100%; } }
/* --- kiemelt termék (feature split) --- */
.mm-feature{
display:grid; grid-template-columns:1.1fr .9fr; gap:0; align-items:stretch;
background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
@media (max-width:860px){ .mm-feature{ grid-template-columns:1fr; } }
.mm-feature__text{ padding:clamp(26px,4vw,48px); }
.mm-feature__media{ position:relative; min-height:280px; background-size:cover; background-position:center; }
.mm-feature__price{
position:absolute; top:18px; right:18px; background:var(--grad); color:#fff; font-weight:800;
padding:10px 18px; border-radius:var(--radius-pill); box-shadow:var(--shadow-mm);
}
.mm-feature__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
/* --- árak (pricing) --- */
.mm-pricing{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:992px){ .mm-pricing{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .mm-pricing{ grid-template-columns:1fr;} }
.mm-plan{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-sm); transition:var(--t); display:flex; flex-direction:column;
}
.mm-plan:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.mm-plan__head{ background:var(--grad); color:#fff; padding:22px; text-align:center; }
.mm-plan__name{ font-size:18px; font-weight:800; margin:0; color:#fff !important; }
.mm-plan__body{ padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.mm-plan__price{ text-align:center; }
.mm-plan__price b{ font-size:30px; font-weight:800; color:var(--ink); }
.mm-plan__price sup{ font-size:14px; color:var(--muted); }
.mm-plan__price span{ display:block; color:var(--muted); font-size:14px; }
.mm-plan__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.mm-plan__list li{ padding-left:26px; position:relative; color:var(--ink); font-size:14.5px; }
.mm-plan__list li::before{ content:"\f00c"; font-family:FontAwesome; position:absolute; left:0; color:var(--mm); font-size:12px; }
/* --- partnerek (logók) --- */
.mm-partners{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.mm-partners a{
display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:16px 22px; min-width:150px; min-height:90px; transition:var(--t); box-shadow:var(--shadow-sm);
}
.mm-partners a:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.mm-partners img{ max-height:60px; width:auto; filter:grayscale(100%); opacity:.7; transition:var(--t); }
.mm-partners a:hover img{ filter:none; opacity:1; }
/* ====================================================================
13) BELSŐ OLDALAK (aloldalak) — banner, tartalom, termék, oldalsáv
==================================================================== */
/* --- belső oldal fejléc (page-banner) — KREATÍV, háttér nélküli, balra igazított (2026-07-06) ---
Se navy sáv, se háttérkép: kis nagybetűs magenta "MOZAIK MED" kicker a nagy,
balra igazított navy oldalcím fölött. Kevés függőleges hely felette/alatta.
A kickert CSS ::before adja, így az oldalak markupját (csak ) nem kell módosítani. */
.page-banner{
min-height:0 !important; background:none !important;
display:block; text-align:left;
padding:clamp(26px,3.6vw,24px) 0 clamp(16px,2vw,24px) !important; margin:0 !important;
}
.page-banner::before{ display:none !important; }
.page-banner .auto-container{ position:relative; z-index:2; }
.page-banner h1{
background:transparent !important; color:var(--navy) !important;
font-size:clamp(22px,2.8vw,34px) !important; font-weight:800 !important; line-height:1.15;
letter-spacing:-.015em; margin:0 !important; padding:0 !important;
display:block; position:relative; text-shadow:none !important;
}
/* nagybetűs magenta kicker a cím fölé */
.page-banner h1::before{
content:"Mozaik Med" !important; display:block !important; position:static !important;
font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--mm) !important; background:none !important; width:auto; height:auto;
margin:0 0 10px 0 !important; transform:none !important;
}
.page-banner h1::after{ display:none !important; }
/* --- tartalmi szekciók egységes térköz + olvasható tipográfia --- */
.blog.section,#blog,.two-col,#gallery-page,.default-section,
.contact-page,.content-section,.faq-section{
/* padding:clamp(40px,6vw,80px) 0; */
padding: clamp(40px,6vw,40px) 0;
}
/* EGYETLEN kártya a tartalom körül: a külső .post-item a kártya,
a belső .post / .post-content átlátszó (nincs dupla keret/árnyék). */
.blog .post-item{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:clamp(22px,3.5vw,40px);
}
.blog .post-item .post,
.blog .post-item .post-content{
background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
.post-content{ color:var(--ink); font-size:16.5px; line-height:1.75; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4{ margin:1.4em 0 .6em; }
.post-content h1:first-child,.post-content h2:first-child{ margin-top:0; }
.post-content img{ border-radius:var(--radius-sm); height:auto; }
.post-content a{ color:var(--mm); font-weight:600; }
.post-content ul,.post-content ol{ padding-left:1.3em; }
.post-content blockquote{ border-left:4px solid var(--mm); background:var(--mm-50) !important; padding:16px 22px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
/* --- termékoldal (gallery-page / image-gallery) — 2 oszlopos modern nézet --- */
#gallery-page .sec-title{ text-align:left; margin-bottom:28px; }
#gallery-page .sec-title h2{ display:block; }
#gallery-page .sec-title h2::after{ margin-left:0; }
#image-gallery{ display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:38px; align-items:start; }
@media (max-width:860px){ #image-gallery{ grid-template-columns:1fr; } }
#image-gallery > .col-md-5,
#image-gallery > .col-md-7{ width:auto !important; max-width:none !important; float:none !important; padding:0 !important; }
#image-gallery > .col-md-5{ grid-column:1; grid-row:1; } /* kép mindig balra */
#image-gallery > .col-md-7{ grid-column:2; grid-row:1; } /* infó mindig jobbra */
@media (min-width:861px){ #image-gallery > .col-md-5{ position:sticky; top:90px; } }
@media (max-width:860px){ #image-gallery > .col-md-5,#image-gallery > .col-md-7{ grid-column:1; } }
#image-gallery .col-md-5 a{
display:block; position:relative; border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow); background:#fff;
}
#image-gallery .col-md-5 img{ width:100%; height:auto; display:block; }
#image-gallery .overlay{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(12,31,52,0); opacity:0; transition:var(--t); color:#fff; border-radius:var(--radius);
}
#image-gallery .col-md-5 a:hover .overlay{ opacity:1; background:rgba(12,31,52,.45); }
#image-gallery .overlay .fa{ color:#fff; font-size:30px; }
#image-gallery > .col-md-7{ text-align:left !important; }
#image-gallery .col-md-7 .row{ margin-left:0; margin-right:0; }
#image-gallery .col-md-7 label{ font-weight:600; }
/* méret/szín választó -> pill chipek (rádiók); a színek megtartják színüket */
#image-gallery label:has(> input[type="radio"]){
display:inline-flex; align-items:center; justify-content:center; cursor:pointer; line-height:1; min-width:38px;
border:1.5px solid var(--line); border-radius:var(--radius-pill);
padding:7px 14px !important; margin:0 8px 8px 0; font-weight:600; font-size:13px; transition:var(--t);
}
#image-gallery label:has(> input[type="radio"]) > input{ position:absolute; opacity:0; width:0; height:0; }
#image-gallery label:has(> input[type="radio"]):hover{ border-color:var(--mm); }
#image-gallery label:has(> input[type="radio"]:checked){ border-color:var(--mm); box-shadow:0 0 0 3px rgba(231,11,132,.35); }
/* ár-doboz + akciók */
#gallery-page div[style*="#dd1379"]{ background:var(--grad) !important; border-radius:var(--radius-sm); }
#gallery-page .only-tag{ background:var(--grad) !important; border-radius:var(--radius-pill); }
#gallery-page .btn-danger{ border-radius:var(--radius-pill) !important; }
/* termék ár / kiemelt szám */
.product-price,.prod-price,.price-now,.current-price{
color:var(--mm) !important; font-weight:800 !important; font-size:clamp(22px,3vw,30px);
}
/* --- webshop oldalsáv kategóriák --- */
.category.widget{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:18px 20px; margin-bottom:24px;
}
.category.widget h3,.category.widget h2{ font-size:17px; font-weight:800; margin:0 0 12px; }
.category-list{ list-style:none; margin:0; padding:0; }
.category-list li a{
display:block; padding:9px 12px; border-radius:10px; color:var(--ink); text-decoration:none;
font-weight:500; transition:var(--t);
}
.category-list li a:hover,.category-list li.active a{ background:var(--mm-50); color:var(--mm); }
/* --- kapcsolat / űrlap-szekciók ráhangolása --- */
.contact-page .form-group label,.form-group label{ font-weight:600; color:var(--ink); margin-bottom:6px; }
/* --- profil oldalak: kártyásított blokkok --- */
.dashboard .inner-box,.user-orders .order-block,.profile-box,.account-box{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px;
}
/* --- modálok modernizálása (kosár, jelszó, megrendelés) --- */
.modal-content{ border:none !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-lg) !important; overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--line) !important; background:var(--bg-soft); }
.modal-title{ font-weight:800; }
.modal-footer{ border-top:1px solid var(--line) !important; }
.btn-danger{ background:linear-gradient(135deg,#ef4444,#c81e1e) !important; border:none !important; border-radius:var(--radius-pill) !important; }
.btn-warning{ border-radius:var(--radius-pill) !important; }
/* --- üzenet/cookie sávok --- */
.ck-holder{ background:var(--grad) !important; border-radius:var(--radius) var(--radius) 0 0; box-shadow:var(--shadow-lg); }
.cookie_sbm{ border-radius:var(--radius-pill) !important; background:var(--navy) !important; }
/* ====================================================================
14) EDZÉSNAPTÁR (edzesek) — modern event kártyák
==================================================================== */
.features{
padding:clamp(36px,5vw,70px) 0;
padding:clamp(0px,5vw,0px) 0;
}
.features .auto-container > h3{ font-size:22px; font-weight:800; margin:0 0 14px; }
.features hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }
/* helyszín-szűrő chipek (a régi ferde elemek helyett modern pill) */
.event-place-wrapper,.event-place-container{ height:auto !important; width:auto !important; overflow:visible !important; }
.event-place-items{
display:inline-block !important; background:var(--mm-50) !important; transform:none !important;
border-radius:var(--radius-pill) !important; margin:0 8px 8px 0 !important; padding:0 !important; float:none !important;
}
.event-place-items > div{ transform:none !important; padding:8px 16px; }
.event-place-items a{ color:var(--mm) !important; font-weight:600; text-decoration:none; }
.event-place-items:hover{ background:var(--grad) !important; }
.event-place-items:hover a{ color:#fff !important; }
/* event kártyák — 2 oszlop, világos */
.features .mm-event{
float:left; width:48%; margin:0 1% 26px; box-sizing:border-box;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--t); display:flex; flex-direction:column;
}
.features .mm-event:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
@media (max-width:768px){ .features .mm-event{ width:100%; margin:0 0 22px; } }
.mm-event__head{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
padding:18px 20px; background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.mm-event__when{ display:flex; flex-direction:column; }
.mm-event__date{ color:var(--muted); font-size:13px; font-weight:600; }
.mm-event__time{ color:var(--mm); font-size:26px; font-weight:800; line-height:1; font-family:var(--font); }
.mm-event__badge{ display:inline-block; padding:5px 12px; border-radius:var(--radius-pill); font-size:12px; font-weight:700; color:#fff; }
.mm-event__badge--premium{ background:#09b9e5; }
.mm-event__badge--free{ background:var(--grad); }
.mm-event__badge--full{ background:#94a3b8; }
.mm-event__body{ padding:20px; flex:1; }
.mm-event__title{ font-size:19px; font-weight:800; margin:0 0 6px; }
.mm-event__place{ color:var(--muted); margin:0 0 12px; font-weight:500; }
.mm-event__place .fa{ color:var(--mm); }
/* kis "térkép" link a helyszín mellett → Google Térkép új lapon */
.mm-event__map{
display:inline-flex; align-items:center; gap:5px;
margin-left:8px; padding:2px 9px;
font-size:12px; font-weight:600; line-height:1.6;
color:var(--mm) !important; text-decoration:none;
background:var(--mm-50); border:1px solid var(--mm-100);
border-radius:var(--radius-pill); vertical-align:middle;
transition:var(--t);
}
.mm-event__map:hover{ background:var(--mm); color:#fff !important; }
.mm-event__map .fa{ color:inherit !important; font-size:11px; }
.mm-event__desc{ color:var(--ink); font-size:14.5px; line-height:1.6; }
.mm-event__foot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.mm-event__note{ margin:0; color:var(--ink); font-weight:600; font-size:14px; }
.mm-event__foot .btn,.mm-event__foot .btn-light,.mm-event__foot .btn-danger,.mm-event__foot .btn-dark{
border-radius:var(--radius-pill) !important; padding:12px 26px !important; min-height:48px;
font-weight:700 !important; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center;
}
.mm-event__foot .btn-danger{ background:var(--grad) !important; border:none !important; }
/* ====================================================================
15) BLOG LISTA (hirek + kategóriák) — kompakt modern kártyák
==================================================================== */
.blog .col-md-6 .post-item{
padding:0 !important; overflow:hidden; margin-bottom:26px;
border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
background:#fff; transition:var(--t); height:auto;
}
.blog .col-md-6 .post-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog .col-md-6 .post-item .post{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.blog .col-md-6 .post-item .post > div:first-child{ margin:0 !important; }
.blog .col-md-6 .post-item img{
width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover; display:block;
}
.blog .col-md-6 .post-item .post-content{ padding:18px !important; background:transparent !important; border:none !important; box-shadow:none !important; }
.mm-blog-title{ height:auto !important; margin:0 0 8px !important; font-weight:700; line-height:1.35; }
.mm-blog-title a{ color:var(--ink) !important; text-decoration:none; }
.mm-blog-title a:hover{ color:var(--mm) !important; }
.mm-blog-excerpt{ color:var(--muted); font-size:14px; margin:0 0 10px; }
.blog .post-content .posted-date{ color:var(--mm); font-weight:600; font-size:13px; }
#btnSearchArtical{ background:var(--grad) !important; border:none !important; }
/* OLDALSÁV: a régi 73px felső margó (üres tér) kivéve, kereső tiszta kártyában */
.blog .sidebar{ margin-top:0 !important; margin-left:0 !important; }
.blog .sidebar .search{ margin-bottom:24px !important; width:100%; }
.blog .sidebar .search form{
padding:0 !important; height:auto !important; margin:0 !important;
background:transparent !important; border:none !important; box-shadow:none !important; width:100%;
}
.blog .sidebar .category.widget{ margin-bottom:24px; }
/* Kereső: ikon az inputban (gomb nélkül), Enterrel és ikonnal kereshető */
.mm-search{ position:relative; }
.mm-search input[type="text"]{ width:100% !important; padding-right:50px !important; margin:0 !important; }
.mm-search__btn{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
background:transparent !important; border:none !important; box-shadow:none !important;
color:var(--mm) !important; font-size:18px; cursor:pointer; padding:0 !important; min-height:0 !important;
width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%;
transition:background .2s var(--ease), color .2s var(--ease);
}
.mm-search__btn:hover{ color:var(--mm-dark) !important; background:var(--mm-50) !important; transform:translateY(-50%); box-shadow:none !important; }
.mm-search__btn .fa{ pointer-events:none; }
/* ====================================================================
16) BELÉPÉS / REGISZTRÁCIÓ — modern auth kártyák
==================================================================== */
.mm-auth{ padding:clamp(36px,6vw,72px) 0; }
.mm-auth .auto-container,.mm-auth .container{ max-width:var(--container); }
/* ha a régi belepes markup .col-md-* kártyákat használ, kártyásítjuk */
.login-box,.register-box,.auth-box,
#loginForm,#registrationForm{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow); padding:clamp(22px,3vw,38px);
}
/* Belépés + Regisztráció EGYMÁS MELLETT (két oszlop) nagyobb képernyőn */
.mm-auth-flex .container-fluid{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; }
.mm-auth-flex .container-fluid > .row{ flex:1 1 420px; margin:0 !important; display:block; }
.mm-auth-flex .container-fluid .col-md-3{ display:none !important; }
.mm-auth-flex .container-fluid .col-md-6{
width:100% !important; max-width:none !important; flex:0 0 100% !important;
margin:0 !important; box-shadow:var(--shadow) !important; border-radius:var(--radius) !important;
border:1px solid var(--line); padding:clamp(20px,2.5vw,32px) !important;
}
/* Bootstrap .card (belépés/regisztráció) modern megjelenés */
.card{ border:none !important; border-radius:var(--radius) !important; }
.card-title{ font-weight:800; }
.card-title + hr,hr.w-50{ border:none; border-top:2px solid var(--mm); width:48px !important; margin-left:0; opacity:1; }
/* ====================================================================
17) PROFIL DASHBOARD (profilom, mozaikprofilom, cimeim, jelszó, rendelések)
==================================================================== */
.side-tab{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; max-width:var(--container); margin:0 auto; padding:clamp(30px,5vw,60px) 20px; }
.side-tab > .col-lg-3{ width:300px; max-width:100%; float:none !important; padding:0 !important; }
.side-tab > .col-lg-1{ display:none !important; }
.side-tab > .col-lg-6{ flex:1 1 480px; float:none !important; width:auto !important; max-width:760px; padding:0 !important; }
/* profil fejléc (avatar + név) */
.side-tab .col-lg-3 > h4{
background:var(--grad); color:#fff; border-radius:var(--radius); padding:22px 18px; margin:0 0 16px;
position:relative; text-align:center; font-size:17px; box-shadow:var(--shadow-mm); line-height:1.4;
}
.side-tab .col-lg-3 > h4 img{ border-radius:50% !important; border:3px solid rgba(255,255,255,.65); display:block; margin:0 auto 10px; }
.side-tab .col-lg-3 > h4 .fa-pencil{ color:#fff; }
/* menü lista — felülírja a régi auto-generált magenta hátteret */
.side-tab .col-lg-3 ul{
list-style:none !important; margin:0 !important; padding:0 !important; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}
.side-tab .col-lg-3 ul li{ border-bottom:1px solid var(--line); margin:0 !important; }
.side-tab .col-lg-3 ul li:last-child{ border-bottom:none; }
.side-tab .col-lg-3 ul li a{
display:block !important; background:#fff !important; border:none !important; color:var(--ink) !important;
padding:14px 18px !important; font-weight:600 !important; text-decoration:none !important; transition:var(--t);
border-radius:0 !important;
}
.side-tab .col-lg-3 ul li a:hover{ background:var(--mm-50) !important; color:var(--mm) !important; }
.side-tab .col-lg-3 ul li.active a{ background:var(--grad) !important; color:#fff !important; }
/* tartalmi kártya */
.side-tab .tab-1,
.side-tab .col-lg-6 > .tab-1{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:clamp(20px,3vw,34px);
}
.side-tab h4{ font-weight:800; }
.side-tab hr.w-100,.side-tab hr{ border:none; border-top:1px solid var(--line); }
/* profil gombok: kék (btn-info) -> magenta, egységes pill */
.btn-info{ background:var(--grad) !important; border:none !important; color:#fff !important; border-radius:var(--radius-pill) !important; }
.btn-secondary{ border-radius:var(--radius-pill) !important; }
.btn-info:hover{ filter:saturate(1.05); transform:translateY(-2px); }
/* MM banner (profil tetején) — régi #dd1379 -> brand */
.tab-1 > div[style*="dd1379"],
div[style*="background: #dd1379"]{ background:var(--grad) !important; border-radius:var(--radius); }
/* ====================================================================
18) PARTNER LOGÓ SLIDER (aloldalak) — egysoros, smooth, végtelenített
==================================================================== */
.client-logos{
background:var(--bg-soft);
padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px) clamp(46px,5vw,70px) !important;
overflow:hidden; display:flex; align-items:center; gap:40px; margin:0 !important;
height:auto !important; min-height:0 !important; width:100% !important;
}
/* a régi abszolút pozicionált, ferde magenta címkét statikussá tesszük (flexbe kerül) */
.client-logos .title{
position:static !important; left:auto !important; top:auto !important; height:auto !important;
flex:0 0 auto; width:auto; max-width:240px; background:transparent !important;
text-align:left; margin:0 !important; padding:0 0 0 6px !important; z-index:auto !important;
}
.client-logos .title:after{ display:none !important; }
.client-logos .title h2{
position:static !important; top:auto !important;
color:var(--ink) !important; font-weight:800 !important; font-size:30px !important; line-height:1.15; margin:0 !important;
text-transform:uppercase; letter-spacing:-.01em;
}
.client-logos .title h2 .small-text{ position:static !important; top:auto !important; color:var(--mm) !important; font-size:18px; letter-spacing:.06em; }
@media (max-width:700px){
.client-logos{ flex-direction:column; align-items:stretch; gap:18px; }
.client-logos .title{ max-width:none; text-align:center; }
}
.client-logos .logo-scroller{
flex:1 1 auto; min-width:0;
overflow:hidden; width:100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.client-logos .logo-scroller .slider{
display:flex !important; flex-wrap:nowrap !important; width:max-content !important;
align-items:center; gap:44px; margin:0 !important; padding:10px 0 !important; list-style:none !important;
animation:mm-marquee 60s linear infinite;
}
.client-logos .logo-scroller:hover .slider{ animation-play-state:paused; }
/* a régi bxSlider esetleges maradék wrapperét semlegesítjük */
.client-logos .logo-scroller .bx-wrapper,
.client-logos .logo-scroller .bx-viewport{ max-width:none !important; height:auto !important; overflow:visible !important; }
.client-logos .slide-item{
flex:0 0 auto !important; float:none !important; margin:0 !important; padding:0 !important; list-style:none !important;
display:flex; align-items:center; justify-content:center;
}
.client-logos .slide-item img{
height:64px !important; width:auto !important; margin:0 !important; padding:0 !important;
filter:none; opacity:1; transition:var(--t); /* 2026-07-17: SZÍNES logók (nincs szürkeárnyalat) */
}
.client-logos .slide-item:hover img{ filter:none; opacity:1; }
@keyframes mm-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .client-logos .logo-scroller .slider{ animation:none; } }
/* ====================================================================
19) BELÉPÉS/REGISZTRÁCIÓ — FLIP KÁRTYA + GOOGLE GOMB
==================================================================== */
.mm-auth2{ background:var(--bg-soft); padding-top:clamp(36px,5vw,56px); padding-bottom:clamp(48px,6vw,72px); }
.mm-auth2 .mm-container{ width:100%; }
.mm-auth-msg{
max-width:480px; margin:24px auto 0; background:var(--mm-50); border:1px solid var(--mm-100);
border-radius:var(--radius); padding:16px 20px; text-align:center;
}
.mm-auth-msg h4{ margin:0; font-size:16px; color:var(--mm-dark); }
.mm-flip{ perspective:3000px; width:100%; max-width:760px; margin:0 auto; }
.mm-flip__inner{
position:relative; transform-style:preserve-3d;
transition:transform .7s cubic-bezier(.4,0,.2,1), height .5s ease;
}
.mm-flip.is-flipped .mm-flip__inner{ transform:rotateY(180deg); }
.mm-flip__face{
position:absolute; top:0; left:0; width:100%;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.mm-flip__front{ position:relative; } /* kezdeti magasságot ad */
.mm-flip__back{ transform:rotateY(180deg); }
.mm-authcard{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow); padding:clamp(24px,4vw,40px);
}
.mm-authcard__title{ font-size:24px; font-weight:800; margin:0 0 12px; }
.mm-authcard__line{ display:block; width:48px; height:3px; border-radius:3px; background:var(--grad); margin-bottom:18px; }
.mm-authcard__lead{ color:var(--muted); margin:0 0 16px; }
.mm-authcard .form-group{ margin-bottom:16px; }
.mm-authcard label{ font-weight:600; color:var(--ink); margin-bottom:6px; display:block; }
.mm-authcard__submit{ width:100%; }
.mm-form-row{ display:flex; gap:14px; }
.mm-form-row .form-group{ flex:1; }
@media (max-width:480px){ .mm-form-row{ flex-direction:column; gap:0; } }
.mm-checks label{ font-weight:400; font-size:13.5px; color:var(--muted); display:block; margin-bottom:8px; }
.mm-checks a{ color:var(--mm); font-weight:600; }
.mm-flip__switch{ text-align:center; margin:18px 0 0; color:var(--muted); }
.mm-flip__switch a{ color:var(--mm); font-weight:700; cursor:pointer; }
.mm-flip__switch a:hover{ text-decoration:underline; }
/* Google gomb */
.mm-google-btn{
display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
background:#fff; color:#3c4043; border:1.5px solid var(--line); border-radius:var(--radius-pill);
padding:12px 18px; font-weight:600; font-size:15px; cursor:pointer; transition:var(--t);
}
.mm-google-btn:hover{ box-shadow:var(--shadow-sm); border-color:#cfd4dc; transform:translateY(-1px); }
.mm-or{ display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; margin:18px 0; }
.mm-or::before,.mm-or::after{ content:""; flex:1; height:1px; background:var(--line); }
/* ====================================================================
20) SPORTOLÓ PROFILOK (sportoloink) — kreatív kártyák
==================================================================== */
.mm-athletes{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:992px){ .mm-athletes{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mm-athletes{ grid-template-columns:1fr; } }
.mm-athlete{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-sm); transition:var(--t); display:flex; flex-direction:column; text-align:center;
}
.mm-athlete:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
/* fejléc-sáv + átfedő kör avatar (kis/kör képekhez is szép) */
.mm-athlete__head{
height:84px; background:var(--grad); position:relative;
}
.mm-athlete__avatar{
position:absolute; left:50%; bottom:-44px; transform:translateX(-50%);
width:96px; height:96px; border-radius:50%; padding:4px; background:#fff;
box-shadow:var(--shadow-sm);
}
.mm-athlete__avatar img{
width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
background:var(--bg-soft);
}
.mm-athlete__body{ padding:58px 22px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.mm-athlete__name{ font-size:19px; font-weight:800; margin:0; }
.mm-athlete__role{
display:inline-flex; align-items:center; gap:6px; background:var(--mm-50); color:var(--mm-dark);
font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); border:1px solid var(--mm-100);
}
.mm-athlete__role .fa-bolt{ color:var(--mm); }
.mm-athlete__about{
color:var(--muted); font-size:14px; line-height:1.65; margin:4px 0 0;
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.mm-athlete__best{
display:flex; align-items:flex-start; gap:10px; margin-top:auto; width:100%;
background:var(--mm-50); color:var(--mm-dark); font-weight:600; font-size:13px; line-height:1.5;
padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--mm-100); text-align:left;
}
.mm-athlete__best .fa-trophy{ color:var(--mm); margin-top:2px; flex:0 0 auto; }
.mm-athlete__more{
display:inline; color:var(--mm) !important; font-weight:700; white-space:nowrap;
cursor:pointer; text-decoration:none;
}
.mm-athlete__more:hover{ color:var(--mm-dark) !important; text-decoration:underline; }
/* ====================================================================
21) WEBSHOP — modern termékrács + termékkártya (funkciók változatlanok)
==================================================================== */
.mm-shop{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:24px; }
@media (max-width:540px){ .mm-shop{ grid-template-columns:1fr; } }
.mm-shop-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-sm); transition:var(--t); display:flex; flex-direction:column; height:100%;
}
.mm-shop-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
/* a régi theme-wrapperek átlátszóvá tétele */
.mm-shop-card .post-item,
.mm-shop-card .post{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
/* termékkép */
.mm-shop-card .post > .align-content-center{ position:relative; background:#fff; }
.mm-shop-card .post img{
width:100% !important; height:210px !important; object-fit:contain !important;
background:#fff; padding:16px; display:block;
}
/* nem/gender badge a képre */
.mm-shop-card .gender-div{
position:absolute; top:12px; left:12px; width:auto !important; margin:0 !important;
transform:none !important; border-radius:var(--radius-pill); overflow:hidden;
}
.mm-shop-card .gender-div .retransform-gender,
.mm-shop-card .gender-div p{ transform:none !important; margin:0; padding:4px 12px; font-size:12px; font-weight:700; }
/* tartalom */
.mm-shop-card .post-content{ padding:16px !important; display:flex; flex-direction:column; gap:8px; flex:1; }
.mm-shop-card .post-content h3{ font-size:16px !important; line-height:1.35; text-align:center; margin:0 !important; min-height:0 !important; }
.mm-shop-card .post-content h3 a{ color:var(--ink) !important; text-decoration:none; }
.mm-shop-card .post-content h3 a:hover{ color:var(--mm) !important; }
.mm-shop-card hr{ margin:6px 0 !important; border:none; border-top:1px solid var(--line); }
.mm-shop-card .form-control{ font-size:13px; padding:8px 12px !important; }
.mm-shop-card .posted-date{ margin-top:auto; }
/* gombok */
.mm-shop-card .btn{ border-radius:var(--radius-pill) !important; }
.mm-shop-card .btn-secondary{ background:var(--bg-soft) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }
.mm-shop-card .btn-secondary:hover{ background:var(--mm-50) !important; color:var(--mm) !important; }
/* csak tagoknak (only-tag) — ferde alakzat helyett tiszta pill */
.mm-shop-card .only-tag{
transform:none !important; width:100% !important;
background:var(--grad) !important; border-radius:var(--radius-pill); margin-top:4px;
}
.mm-shop-card .only-tag .retransform{ transform:none !important; padding:8px 12px; text-align:center; }
.mm-shop-card .only-tag a{ color:#fff !important; font-weight:700; }
/* webshop kereső gomb */
#btnSearchProduct{ background:var(--grad) !important; border:none !important; }
#inputProductSearchValue{ border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important; padding:9px 14px !important; }
/* ====================================================================
22) FELÚSZÓ / FADE-IN ANIMÁCIÓK KIKAPCSOLÁSA (wow.js / animate.css + saját)
==================================================================== */
.wow, .animated,
[class*="fadeIn"], [class*="fadeInUp"], [class*="fadeInDown"],
[class*="fadeInLeft"], [class*="fadeInRight"], [class*="zoomIn"], [class*="slideIn"]{
animation:none !important; -webkit-animation:none !important;
opacity:1 !important; transform:none !important; visibility:visible !important;
animation-delay:0s !important;
}
/* saját hero tartalom-felúszás kikapcsolása (csak a tartalom marad, mozgás nélkül) */
.mm-hero__slide.is-active .mm-hero__badge,
.mm-hero__slide.is-active .mm-hero__title,
.mm-hero__slide.is-active .mm-hero__sub,
.mm-hero__slide.is-active .mm-hero__inner > a{ animation:none !important; }
/* ====================================================================
23) FŐOLDAL — EDZÉSHELYSZÍNEK (mm-locations)
==================================================================== */
.mm-locations{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:992px){ .mm-locations{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mm-locations{ grid-template-columns:1fr; } }
.mm-loc{
display:flex; align-items:center; gap:16px; text-decoration:none;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:18px 20px; transition:var(--t);
}
.mm-loc:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--mm-100); }
.mm-loc__pin{
flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--grad);
color:#fff; display:grid; place-items:center; font-size:22px; box-shadow:var(--shadow-mm);
transition:var(--t);
}
.mm-loc:hover .mm-loc__pin{ transform:scale(1.08) rotate(-6deg); }
.mm-loc__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mm-loc__name{ font-family:var(--font); font-weight:800; color:var(--ink); font-size:17px; line-height:1.2; }
.mm-loc__next{ color:var(--mm); font-weight:600; font-size:13px; }
.mm-loc__next .fa{ margin-right:3px; }
.mm-loc__count{ color:var(--muted); font-size:13px; }
.mm-loc__cta{ flex:0 0 auto; color:var(--mm); font-weight:700; font-size:13px; white-space:nowrap; transition:var(--t); }
.mm-loc:hover .mm-loc__cta{ transform:translateX(3px); }
@media (max-width:420px){ .mm-loc__cta{ display:none; } }
.mm-locations__cta{ text-align:center; margin-top:30px; }
/* ====================================================================
24) FOOTER HÍRLEVÉL SÁV (mm-nlbar)
==================================================================== */
.mm-nlbar{
display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap;
padding:8px 0 30px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.10);
}
.mm-nlbar__text h3{ color:#fff !important; margin:0 0 4px; font-size:20px; padding:0 !important; }
.mm-nlbar__text h3:after{ display:none !important; }
.mm-nlbar__text p{ color:rgba(255,255,255,.7); margin:0; font-size:14px; }
.mm-nlbar__form{ flex:1 1 420px; max-width:540px; }
.mm-nlbar__row{ display:flex; gap:10px; }
.mm-nlbar__row input[type="email"]{
flex:1; min-width:0; border:1.5px solid rgba(255,255,255,.18) !important;
background:rgba(255,255,255,.06) !important; color:#fff !important;
border-radius:var(--radius-pill) !important; padding:12px 18px !important; min-height:48px !important;
}
.mm-nlbar__row input[type="email"]::placeholder{ color:rgba(255,255,255,.5) !important; }
.mm-nlbar__row input[type="email"]:focus{
border-color:var(--mm) !important; background:rgba(255,255,255,.10) !important;
box-shadow:0 0 0 3px rgba(231,11,132,.25) !important;
}
.mm-nlbar__row button{
flex:0 0 auto; background:var(--grad) !important; color:#fff !important; border:none !important;
border-radius:var(--radius-pill) !important; padding:12px 24px !important; font-weight:700; cursor:pointer;
box-shadow:var(--shadow-mm); transition:var(--t); white-space:nowrap;
}
.mm-nlbar__row button:hover{ transform:translateY(-2px); }
.mm-nlbar__check{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; color:rgba(255,255,255,.75); font-size:13px; cursor:pointer; }
.mm-nlbar__check input{ margin-top:3px; flex:0 0 auto; }
.mm-nlbar__check a{ color:var(--mm-light) !important; font-weight:600; text-decoration:underline; }
.mm-nlbar__resp{ margin:10px 0 0; font-size:13px; font-weight:600; min-height:1em; }
.mm-nlbar__resp.is-ok{ color:#7ee2a8; }
.mm-nlbar__resp.is-error{ color:#ff9db6; }
@media (max-width:768px){
.mm-nlbar{ flex-direction:column; align-items:stretch; }
/* column irányban a 420px flex-basis MAGASSÁGGÁ válna (nagy üres hely) → nullázzuk */
.mm-nlbar__form{ flex:0 0 auto; max-width:none; }
}
/* ====================================================================
24/b) FOOTER HÍRLEVÉL KÁRTYA (mm-nlcard) — 2026-07-28
Lebegő, lekerekített MAGENTA blokk a footer tetején (01-es koncepció).
A régi .mm-nlbar helyét veszi át; a JS/adatbekötés változatlan.
==================================================================== */
.mm-nlcard{
position:relative; z-index:3;
margin:-6px 0 40px; /* enyhén a footer teteje fölé emelkedik */
border-radius:22px; overflow:hidden;
background:
radial-gradient(120% 140% at 100% 0%, var(--mm-light), var(--mm) 55%);
box-shadow:0 24px 50px -20px rgba(231,11,132,.55);
}
.mm-nlcard::after{ /* dekoratív fényfolt jobb felül */
content:""; position:absolute; top:-60px; right:-40px; width:230px; height:230px;
border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none;
}
.mm-nlcard__inner{
position:relative; display:flex; align-items:center; justify-content:space-between;
gap:30px; flex-wrap:wrap; padding:32px 38px;
}
.mm-nlcard__badge{
display:inline-block; margin-bottom:12px; padding:6px 14px;
background:rgba(255,255,255,.20); color:#fff; font-size:12px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-pill);
}
.mm-nlcard__text h3{ color:#fff !important; margin:0; padding:0 !important; font-size:26px; line-height:1.2; }
.mm-nlcard__text h3:after{ display:none !important; }
.mm-nlcard__text p{ color:rgba(255,255,255,.92); margin:8px 0 0; font-size:14px; max-width:42ch; }
.mm-nlcard__form{ flex:1 1 400px; max-width:520px; }
.mm-nlcard__row{ display:flex; gap:10px; }
.mm-nlcard__row input[type="email"]{
flex:1; min-width:0; border:none !important; background:#fff !important; color:#222 !important;
border-radius:var(--radius-pill) !important; padding:14px 20px !important; min-height:50px !important;
font-size:15px;
}
.mm-nlcard__row input[type="email"]::placeholder{ color:#9a8f95 !important; }
.mm-nlcard__row input[type="email"]:focus{
outline:none !important; box-shadow:0 0 0 3px rgba(255,255,255,.55) !important;
}
.mm-nlcard__row button{
flex:0 0 auto; background:#fff !important; color:var(--mm) !important; border:none !important;
border-radius:var(--radius-pill) !important; padding:14px 26px !important; font-weight:800; cursor:pointer;
transition:var(--t); white-space:nowrap;
}
.mm-nlcard__row button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,.35); }
.mm-nlcard__check{ display:flex; align-items:flex-start; gap:9px; margin-top:13px; color:rgba(255,255,255,.92); font-size:13px; cursor:pointer; }
.mm-nlcard__check input{ margin-top:3px; flex:0 0 auto; accent-color:#fff; }
.mm-nlcard__check a{ color:#fff !important; font-weight:700; text-decoration:underline; }
.mm-nlcard__resp{ margin:11px 0 0; font-size:13px; font-weight:700; min-height:1em; color:#fff; }
.mm-nlcard__resp.is-ok{ color:#eafff2; }
.mm-nlcard__resp.is-error{ color:#fff3c4; }
@media (max-width:768px){
.mm-nlcard__inner{ padding:26px 22px; }
.mm-nlcard__form{ flex:0 0 auto; max-width:none; width:100%; }
.mm-nlcard__text h3{ font-size:22px; }
}
@media (max-width:480px){
.mm-nlcard__row{ flex-direction:column; }
.mm-nlcard__row button{ width:100%; }
}
/* ====================================================================
24/c) FOOTER 4-OSZLOPOS ELRENDEZÉS (01-es koncepció) — 2026-07-29
Logó+bemutatkozó | Hírek | Dokumentumok | Kapcsolat, alul copyright+
jogi linkek / social. A .mm-fgrid a régi bootstrap oszlopokat váltja.
==================================================================== */
.main-footer .mm-fgrid{
display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:38px 30px; align-items:start; padding-top:8px;
}
.main-footer .mm-fcol{ min-width:0; }
.main-footer .mm-flogo{ max-height:60px; width:auto; margin-bottom:18px; }
.main-footer .mm-fabout{ color:var(--muted); font-size:14px; line-height:1.65; max-width:34ch; margin:0; }
.main-footer .mm-feyebrow{
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); margin:0 0 16px;
}
.main-footer .mm-flist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.main-footer .mm-flist a{
color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.35;
transition:color .18s var(--ease), padding-left .18s var(--ease);
}
.main-footer .mm-flist a:hover{ color:var(--mm); padding-left:4px; }
.main-footer .mm-flist--legal{ margin-top:12px; } /* ugyanaz a stílus, csak sortávolság; nincs vonal */
.main-footer .mm-fcontact{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.main-footer .mm-fcontact li{ display:flex; flex-direction:column; gap:3px; }
.main-footer .mm-fcontact span{
font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.main-footer .mm-fcontact a,
.main-footer .mm-fcontact p{ margin:0; color:var(--ink) !important; font-size:15px; text-decoration:none; line-height:1.45; }
.main-footer .mm-fcontact a:hover{ color:var(--mm) !important; }
/* --- alsó sáv --- */
.main-footer .mm-footbar{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
width:100%; margin:38px 0 0; padding:22px 0 4px; border-top:1px solid var(--line);
}
.main-footer .mm-footbar__copy{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.main-footer .mm-footbar__pol{ display:inline-flex; gap:16px; }
.main-footer .mm-footbar__pol a{ color:var(--muted) !important; text-decoration:none; }
.main-footer .mm-footbar__pol a:hover{ color:var(--mm) !important; }
.main-footer .mm-footbar__pay-img{ max-height:26px; width:auto; opacity:.9; }
.main-footer .mm-footbar__social{ display:flex; gap:10px; }
.main-footer .mm-footbar__social a{
display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px;
border-radius:12px; border:1px solid var(--line); background:#fff !important; color:var(--ink) !important;
margin:0 !important; transition:var(--t); text-decoration:none;
}
.main-footer .mm-footbar__social a:hover{
background:var(--grad) !important; color:#fff !important; border-color:transparent;
transform:translateY(-3px); box-shadow:var(--shadow-mm);
}
@media (max-width:900px){
.main-footer .mm-fgrid{ grid-template-columns:1fr 1fr; }
.main-footer .mm-fcol--brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
.main-footer .mm-fgrid{ grid-template-columns:1fr; }
.main-footer .mm-footbar{ justify-content:center; text-align:center; }
.main-footer .mm-footbar__copy{ justify-content:center; }
}
/* ====================================================================
25) PARTNEREINK OLDAL — főoldali logócsempe + infó-ikon + kerekített dialog
==================================================================== */
.mm-partsec{ padding:clamp(48px,7vw,84px) 0; }
.mm-partsec--soft{ background:var(--bg-soft); }
/* csempe-rács — ugyanaz a nyelvezet, mint a főoldali .mm-partners */
.mm-ptiles{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.mm-ptile{
position:relative; display:grid; place-items:center; background:#fff; border:1px solid var(--line);
border-radius:var(--radius-sm); padding:18px 24px; min-width:160px; min-height:96px;
transition:var(--t); box-shadow:var(--shadow-sm);
}
.mm-ptile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.mm-ptile img{ max-height:60px; max-width:150px; width:auto; filter:grayscale(100%); opacity:.75; transition:var(--t); }
.mm-ptile:hover img{ filter:none; opacity:1; }
/* jobb felső sarok — kerek "i" infó gomb */
.mm-ptile__info{
position:absolute; top:-10px; right:-10px; width:32px; height:32px; padding:0; border-radius:50%;
background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); cursor:pointer; z-index:2;
display:flex; align-items:center; justify-content:center; color:var(--mm); transition:var(--t);
}
.mm-ptile__info span.mm-nopop{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:800; font-size:15px; line-height:1; }
.mm-ptile__info:hover{ background:var(--grad); border-color:transparent; color:#fff; transform:scale(1.08); }
.mm-ptile__info:focus{ outline:none; box-shadow:0 0 0 3px rgba(231,11,132,.25); }
.mm-partempty{ text-align:center; color:var(--muted); padding:20px; width:100%; }
/* dialog fejléc — csak a bezárás gomb, fehér, egybefüggő a tartalommal (nincs border/háttérváltás) */
.mm-pmodal__header{
background:#fff !important; border-bottom:none !important; padding-bottom:0 !important;
}
/* dialog tartalma (Bootstrap .modal-content-en belül): kép fent, alatta név, alatta szöveg */
.mm-pmodal__media{ text-align:center; padding:10px 30px 0; }
.mm-pmodal__media a{ display:inline-block; }
.mm-pmodal__media img{ max-height:110px; max-width:100%; width:auto; object-fit:contain; }
.mm-pmodal__name{
text-align:center; font-family:var(--font); font-weight:800;
font-size:20px; color:var(--ink); margin:18px 0 2px;
}
.mm-pmodal__body{
padding:8px 30px 30px; color:var(--muted); font-size:15.5px; line-height:1.7;
word-break:break-word; overflow-wrap:anywhere;
}
.mm-pmodal__body,.mm-pmodal__body *{ font-family:inherit !important; }
.mm-pmodal__body :is(p,li,span){ text-align:left !important; color:var(--muted) !important; }
.mm-pmodal__body :is(h1,h2,h3,h4){ font-size:16px !important; color:var(--ink) !important; margin:0 0 8px; }
.mm-pmodal__body p{ margin:0 0 10px; }
.mm-pmodal__body img{ display:none; } /* a beágyazott logót a fejléc adja */
.mm-pmodal__foot{ text-align:center; padding:0 30px 30px; }
/* mobilon kisebb, kompaktabb dialog-tartalom */
@media (max-width:480px){
.mm-pmodal__media{ padding:6px 22px 0; }
.mm-pmodal__media img{ max-height:80px; }
.mm-pmodal__name{ font-size:17px; margin:14px 0 2px; }
.mm-pmodal__body{ padding:6px 22px 20px; font-size:13.5px; line-height:1.6; }
.mm-pmodal__body :is(h1,h2,h3,h4){ font-size:14px !important; }
.mm-pmodal__foot{ padding:0 22px 22px; }
.mm-pmodal__foot .mm-btn{ font-size:13.5px !important; padding:11px 18px !important; white-space:normal; }
}
/* =====================================================================
ESEMÉNY-BANNEREK (.mm-ebanner*) — 2026-07-02 (v2)
Megjelenés + viselkedés a great-wall-marathon.com "notice" sávja alapján:
sötét navy sáv, középre zárt cím + alcím + fehér "pill" gomb (→),
jobb felül ↑ nyíl, ami ÖSSZECSUKJA/kinyitja a tartalmat (slideToggle-szerű).
2 aktív => egymás mellett, 1 aktív => teljes szélesség.
===================================================================== */
.mm-ebanners{
position:relative;
display:flex;
flex-wrap:wrap;
background:var(--navy);
}
.mm-ebanner{
flex:1 1 0;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:18px 60px;
background:var(--navy);
color:#fff;
text-align:center;
}
.mm-ebanner + .mm-ebanner{ border-left:1px solid rgba(255,255,255,.10); }
.mm-ebanners--single .mm-ebanner{ flex:1 1 100%; }
.mm-ebanner__inner{ display:flex; flex-direction:column; align-items:center; gap:6px; max-width:640px; }
.mm-ebanner__title{
margin:0 !important;
font-weight:700; font-size:19px; line-height:1.25; letter-spacing:.3px;
color:inherit !important; text-transform:uppercase; /* a banner szövegszínét örökli (adminból állítható) */
cursor:pointer; user-select:none;
}
/* összecsukható rész (alcím + dátum + gomb) */
.mm-ebanner__collapse{
display:flex; flex-direction:column; align-items:center; gap:8px;
max-height:260px; overflow:hidden; opacity:1;
transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease), padding .4s var(--ease);
margin-top:6px;
}
.mm-ebanner__date{ margin:0; font-size:13.5px; color:var(--mm-light); font-weight:600; }
.mm-ebanner__date i{ margin-right:5px; }
.mm-ebanner__desc{ margin:0; font-size:14px; color:inherit; opacity:.85; } /* a banner szövegszínét örökli */
.mm-ebanner__btn{
display:inline-flex; align-items:center; gap:10px;
margin-top:4px; padding:9px 22px;
background:#fff; color:var(--navy) !important;
border-radius:var(--radius-pill); font-size:12.5px; font-weight:700;
letter-spacing:.6px; text-transform:uppercase; text-decoration:none !important;
transition:all .2s var(--ease);
}
.mm-ebanner__btn:hover{ background:var(--mm); color:#fff !important; box-shadow:var(--shadow-mm); }
.mm-ebanner__btn-arrow{ display:inline-flex; transition:transform .2s var(--ease); }
.mm-ebanner__btn:hover .mm-ebanner__btn-arrow{ transform:translateX(3px); }
/* ↑ összecsukó nyíl jobb felül */
.mm-ebanners__toggle{
position:absolute; top:16px; right:20px;
width:36px; height:36px; border-radius:50%;
border:0; background:transparent; color:inherit; cursor:pointer; /* a szekció szövegszínét örökli */
display:flex; align-items:center; justify-content:center; font-size:18px;
transition:transform .35s var(--ease), background .2s var(--ease); z-index:3;
}
.mm-ebanners__toggle:hover{ background:rgba(255,255,255,.12); }
.mm-ebanners__toggle i{ transition:transform .35s var(--ease); }
/* ÖSSZECSUKOTT állapot: eltűnik az alcím+gomb, a nyíl elfordul (lefelé mutat) */
.mm-ebanners.is-collapsed .mm-ebanner__collapse{
max-height:0; opacity:0; margin-top:0;
}
.mm-ebanners.is-collapsed .mm-ebanners__toggle i{ transform:rotate(180deg); }
/* első betöltéskor (mentett állapot) ne animáljon */
.mm-ebanners.no-anim .mm-ebanner__collapse,
.mm-ebanners.no-anim .mm-ebanners__toggle i{ transition:none !important; }
@media (max-width:720px){
.mm-ebanners{ flex-direction:column; }
.mm-ebanner{ flex:1 1 100% !important; padding:16px 54px; }
.mm-ebanner + .mm-ebanner{ border-left:0; border-top:1px solid rgba(255,255,255,.10); }
.mm-ebanner__title{ font-size:16.5px; }
}
/* =====================================================================
FUTÓNAGYKÖVETEK — bio "bővebben/kevesebb" + "Eredmény" gombok (2026-07-02)
===================================================================== */
.mm-athlete__about.mm-clamp{
/* felülírja az alap .mm-athlete__about webkit-line-clamp:5-öt (5 sornál levágná
a szöveget FÜGGETLENÜL a max-height-tól/is-open-től) — itt kizárólag a
max-height + gradiens adja a "levágást", ill. nyitáskor a teljes eloldást */
display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset;
position:relative;
max-height:4.8em; /* ~3 sor */
overflow:hidden;
transition:max-height .35s var(--ease);
text-align: justify;
}
.mm-athlete__about.mm-clamp::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2.2em;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bg));
pointer-events:none; transition:opacity .3s var(--ease);
}
.mm-athlete__about.mm-clamp.is-open{ max-height:1400px; overflow:visible; }
.mm-athlete__about.mm-clamp.is-open::after{ opacity:0; }
.mm-athlete__actions{
display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.mm-athlete__btn{
display:inline-flex; align-items:center; gap:7px;
padding:8px 16px; border-radius:var(--radius-pill);
font-size:13.5px; font-weight:600; cursor:pointer;
border:1.5px solid var(--mm); transition:all .2s var(--ease);
}
.mm-athlete__btn--ghost{ background:transparent; color:var(--mm); }
.mm-athlete__btn--ghost:hover{ background:var(--mm-50); }
.mm-athlete__btn--solid{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--shadow-mm); }
.mm-athlete__btn--solid:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.mm-athlete__trophy{
display:inline-flex; align-items:center; justify-content:center;
width:72px; height:72px; border-radius:50%; margin:8px auto 0;
background:var(--mm-50); color:var(--mm); font-size:30px;
}
/* =====================================================================
BEJELENTKEZÉSI POPUP (.mm-loginmodal*) — 2026-07-02
===================================================================== */
.mm-loginmodal__body{ padding:8px 28px 28px; }
.mm-loginmodal__lead{ color:var(--muted); font-size:15px; margin-bottom:18px; text-align:center; }
.mm-loginmodal__switch{ text-align:center; margin-top:14px; font-size:14px; color:var(--muted); }
.mm-loginmodal__switch a{ color:var(--mm); font-weight:600; }
/* ===== Másodlagos aloldal-navigáció (generikus oldalak, testvér almenüpontok) =====
Világosszürke sáv a title-banner alatt, a pontok egymás mellett; aktív kiemelve.
Mobilon vízszintesen görgethető (nem törik szét). Minta: icemarathon /itinerary. */
.mm-subnav{
background:#eef0f4; border-bottom:1px solid var(--line, #e3e6ec);
width:100%;
}
.mm-subnav__inner{
max-width:1200px; margin:0 auto; padding:0 20px;
display:flex; flex-wrap:wrap; align-items:stretch; gap:4px;
overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mm-subnav__link{
display:inline-flex; align-items:center; white-space:nowrap;
padding:16px 18px; font-size:14px; font-weight:600; letter-spacing:.02em;
color:var(--mm, #e70b84) !important; text-decoration:none; text-transform:uppercase;
border-bottom:3px solid transparent; transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.mm-subnav__link:hover{ color:var(--mm, #e70b84); background:rgba(231,11,132,.05); }
.mm-subnav__link.is-active{
color:var(--muted, #e70b84) !important;
/*
border-bottom-color:var(--mm, #e70b84);
background:#fff;
*/
}
@media (max-width:640px){
.mm-subnav__inner{ flex-wrap:nowrap; gap:0; }
.mm-subnav__link{ padding:13px 14px; font-size:13px; }
}
@media only screen and (max-width: 767px) {
section#blog, section.single.blog {
padding-top: 20px !important;
}
}
/* ======================= REDESIGN VÉGE ======================= */
/* =====================================================================
24) FOOLDAL - KOVETKEZO EDZESEK (mm-nexttrain) - 2026-07-16
Bal: varosvalaszto lista; jobb: a kivalasztott varos kovetkezo edzese
+ gyorsjelentkezes. Tabvaltas: .is-active (kezdolap.php inline JS).
===================================================================== */
.mm-nexttrain{ display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:stretch; }
@media (max-width:900px){ .mm-nexttrain{ grid-template-columns:1fr; } }
/* 2026-07-17: a bal (városlista) és jobb (kártya) blokk EGYMAGAS — a városgombok
egyenletesen kitöltik a jobb kártya magasságát (grid stretch + flex:1 a gombokon). */
.mm-nexttrain__cities{ display:flex; flex-direction:column; gap:12px; height:100%; }
.mm-nexttrain__city{
display:flex; align-items:center; gap:12px; width:100%; text-align:left;
flex:1 1 0; min-height:64px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:14px 16px; cursor:pointer; transition:var(--t); font-family:var(--font);
}
.mm-nexttrain__city:hover{ border-color:var(--mm-100); box-shadow:var(--shadow-sm); }
.mm-nexttrain__city.is-active{
border-color:var(--mm); background:var(--mm-50); box-shadow:var(--shadow-sm);
}
.mm-nexttrain__cityname{ flex:1; font-weight:800; color:var(--ink); font-size:16px; }
.mm-nexttrain__cityname .fa{ color:var(--mm); margin-right:6px; }
.mm-nexttrain__citynext{ color:var(--muted); font-size:13px; white-space:nowrap; }
.mm-nexttrain__city.is-active .mm-nexttrain__citynext{ color:var(--mm-dark); font-weight:600; }
.mm-nexttrain__cityarrow{ color:var(--muted); transition:var(--t); }
.mm-nexttrain__city.is-active .mm-nexttrain__cityarrow{ color:var(--mm); transform:translateX(3px); }
.mm-nexttrain__panels{ position:relative; }
.mm-nexttrain__panel{
display:none; height:100%; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow-sm);
}
.mm-nexttrain__panel.is-active{ display:flex; flex-direction:column; gap:10px; animation:mmNtIn .25s ease; }
@keyframes mmNtIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.mm-nexttrain__when{ display:flex; align-items:center; gap:14px; }
.mm-nexttrain__datebox{
flex:0 0 auto; width:64px; text-align:center; border-radius:var(--radius-sm);
overflow:hidden; border:1px solid var(--mm-100); background:#fff; box-shadow:var(--shadow-sm);
}
.mm-nexttrain__mon{ display:block; background:var(--grad); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; padding:3px 0; }
.mm-nexttrain__day{ display:block; font-size:26px; font-weight:800; color:var(--ink); padding:4px 0 6px; line-height:1; }
.mm-nexttrain__timing{ display:flex; flex-direction:column; gap:4px; }
.mm-nexttrain__timing strong{ color:var(--ink); font-size:17px; font-weight:700; }
.mm-nexttrain__badge{
align-self:flex-start; font-style:normal; background:var(--mm-50); color:var(--mm-dark);
font-size:12px; font-weight:700; padding:3px 12px; border-radius:var(--radius-pill);
}
.mm-nexttrain__title{ font-family:var(--font); font-weight:800; color:var(--ink); font-size:26px; margin:8px 0 0; }
.mm-nexttrain__place{ color:var(--muted); font-size:15px; margin:0; }
.mm-nexttrain__place .fa{ color:var(--mm); margin-right:5px; }
.mm-nexttrain__cnt{ color:var(--muted); font-size:14px; margin:0; }
.mm-nexttrain__cnt .fa{ color:var(--mm); margin-right:5px; }
.mm-nexttrain__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:auto; padding-top:16px; }
@media (max-width:600px){
.mm-nexttrain__panel{ padding:20px 18px; }
.mm-nexttrain__title{ font-size:22px; }
}
/* =====================================================================
25) MODAL FIX (2026-07-16): gorgetheto dialog kis kijelzon + close (x)
gomb fixen jobb felul (belepes/reg/confirm modalok).
A Bootstrap/style.css ellen !important-tal, mert a lanc vegen vagyunk.
===================================================================== */
.modal-header{
display:flex !important; align-items:center !important;
justify-content:space-between !important; position:relative;
}
.modal-header .close{
float:none !important; margin:0 0 0 auto !important; padding:4px 8px !important;
order:2; line-height:1 !important; font-size:24px !important;
opacity:.6; transition:var(--t);
}
.modal-header .close:hover{ opacity:1; }
/* a dialog sose logjon ki a viewportbol: a content max-magassaga korlatozott,
a torzs (mm-loginmodal__body) gorog, a fejlec fixen latszik */
#mmLoginModal .modal-content,
#mmRegModal .modal-content,
#mmPendingSubModal .modal-content{
max-height:calc(100vh - 56px);
display:flex; flex-direction:column;
}
#mmLoginModal .mm-loginmodal__body,
#mmRegModal .mm-loginmodal__body,
#mmPendingSubModal .mm-loginmodal__body{
overflow-y:auto; -webkit-overflow-scrolling:touch;
}
/* a centered dialog kis kepernyon is ferjen el es maga a modal is gorgetheto
maradjon vesztartaleknak */
#mmLoginModal, #mmRegModal, #mmPendingSubModal{ overflow-y:auto !important; }
#mmLoginModal .modal-dialog-centered,
#mmRegModal .modal-dialog-centered,
#mmPendingSubModal .modal-dialog-centered{
min-height:calc(100% - 56px);
}
/* =====================================================================
26) KARTYAS ALOLDAL-NAVIGACIO (mm-pagecards) - 2026-07-21
Ott hasznaljuk, ahol NINCS page-banner/breadcrumb (pl. Kozosseg ->
Csapatunk oldalai), a szekcio-fejlec (.mm-head) FOLOTT, kozepen.
Partial: View/pages/mm_teamnav_cards.php (adat: sub_menu_child testverek).
Vizualis minta: a fooldal varoskartyai (.mm-nexttrain__city).
===================================================================== */
.mm-pagecards{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px; max-width:900px; margin:0 auto 38px; justify-content:center;
}
.mm-pagecards:has(> :nth-child(4)){ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); max-width:1160px; }
.mm-pagecard{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:13px;
padding:15px 16px; text-decoration:none !important;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
transition:var(--t);
}
/* felso vekony akcent-csik: inaktivnal rejtve, hoverre/aktivnal beuszik */
.mm-pagecard:before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:var(--grad); transform:scaleX(0); transform-origin:left center;
transition:transform .3s ease;
}
.mm-pagecard:hover{ border-color:var(--mm-100); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.mm-pagecard:hover:before{ transform:scaleX(1); }
.mm-pagecard__icon{
flex:0 0 auto; width:44px; height:44px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
background:var(--mm-50); color:var(--mm); font-size:18px; transition:var(--t);
}
.mm-pagecard__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mm-pagecard__title{
font-weight:800; font-size:16px; color:var(--ink); line-height:1.25;
overflow:hidden; text-overflow:ellipsis;
}
.mm-pagecard__note{ font-size:12.5px; color:var(--muted); letter-spacing:.01em; }
.mm-pagecard__arrow{ margin-left:auto; color:var(--muted); font-size:18px; transition:var(--t); }
.mm-pagecard:hover .mm-pagecard__arrow{ color:var(--mm); transform:translateX(3px); }
/* AKTIV (a most nezett oldal) */
.mm-pagecard.is-active{
border-color:var(--mm); background:var(--mm-50); box-shadow:var(--shadow-sm);
cursor:default; transform:none;
}
.mm-pagecard.is-active:before{ transform:scaleX(1); }
.mm-pagecard.is-active .mm-pagecard__icon{ background:var(--grad); color:#fff; }
.mm-pagecard.is-active .mm-pagecard__note{ color:var(--mm-dark); font-weight:600; }
.mm-pagecard.is-active .mm-pagecard__arrow{ color:var(--mm); transform:none; }
@media (max-width:860px){
.mm-pagecards{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); margin-bottom:28px; }
}
@media (max-width:560px){
.mm-pagecards{ grid-template-columns:1fr; gap:10px; }
.mm-pagecard{ padding:13px 14px; }
.mm-pagecard__icon{ width:38px; height:38px; font-size:16px; }
.mm-pagecard__title{ font-size:15px; }
}
/* =====================================================================
27) TERMEKOLDAL KEPGALERIA (mm-gallery) + LIGHTBOX - 2026-07-21
Fo kep + belyegkep-sor + teljes kepernyos nagyitas. Partial:
View/pages/mm_product_gallery.php (adat: product_images tabla).
Kulso konyvtar NELKUL (nincs swiper/fancybox).
===================================================================== */
.mm-gallery{ width:100%; }
.mm-gallery__stage{
position:relative; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.mm-gallery__main{
width:100% !important; height:420px !important; object-fit:contain !important;
display:block; background:#fff; padding:18px; cursor:zoom-in; transition:var(--t);
}
.mm-gallery__stage:hover .mm-gallery__main{ transform:scale(1.02); }
.mm-gallery__zoom{
position:absolute; right:12px; bottom:12px; width:40px; height:40px; border:none;
border-radius:50%; background:rgba(255,255,255,.92); color:var(--mm); cursor:pointer;
box-shadow:var(--shadow-sm); font-size:16px; transition:var(--t);
}
.mm-gallery__zoom:hover{ background:var(--grad); color:#fff; }
.mm-gallery__count{
position:absolute; left:12px; top:12px; padding:4px 11px; border-radius:var(--radius-pill);
background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:700; letter-spacing:.03em;
}
.mm-gallery__thumbs{
display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px;
-webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.mm-gallery__thumb{
flex:0 0 auto; width:76px; height:76px; padding:4px; cursor:pointer;
background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
transition:var(--t);
}
.mm-gallery__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mm-gallery__thumb:hover{ border-color:var(--mm-100); }
.mm-gallery__thumb.is-active{ border-color:var(--mm); box-shadow:var(--shadow-sm); }
/* ---- lightbox ---- */
.mm-lightbox{
position:fixed; inset:0; z-index:2147483000; background:rgba(12,16,26,.94);
display:flex; align-items:center; justify-content:center;
}
.mm-lightbox[hidden]{ display:none; }
.mm-lightbox__img{
max-width:90vw; max-height:86vh; object-fit:contain;
border-radius:var(--radius-sm); box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff;
}
.mm-lightbox__close{
position:absolute; top:18px; right:24px; width:44px; height:44px; border:none;
background:transparent; color:#fff; font-size:38px; line-height:1; cursor:pointer; opacity:.75;
}
.mm-lightbox__close:hover{ opacity:1; }
.mm-lightbox__nav{
position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
font-size:26px; cursor:pointer; transition:var(--t);
}
.mm-lightbox__nav:hover{ background:var(--grad); }
.mm-lightbox__nav--prev{ left:22px; }
.mm-lightbox__nav--next{ right:22px; }
.mm-lightbox__count{
position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
color:#fff; font-size:13px; font-weight:600; letter-spacing:.05em; opacity:.8;
}
@media (max-width:767px){
.mm-gallery__main{ height:300px !important; padding:12px; }
.mm-gallery__thumb{ width:62px; height:62px; }
.mm-lightbox__nav{ width:42px; height:42px; font-size:22px; }
.mm-lightbox__nav--prev{ left:8px; }
.mm-lightbox__nav--next{ right:8px; }
}
/* =====================================================================
28) WEBSHOP LISTA - FELSO ESZKOZSOR + 4 OSZLOPOS RACS - 2026-07-21
A bal oldali kategoria-sidebar helyett: kereso + kategoria dropdown +
rendezes egy sorban. A racs teljes szelessegu, 4 termek/sor.
===================================================================== */
.mm-shopbar{
display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:16px 18px; margin-bottom:26px;
}
.mm-shopbar__search{ flex:1 1 320px; min-width:240px; margin:0; }
.mm-shopbar .mm-search{ margin:0; }
/* --- egyedi select (a natív nyíl elrejtve, sajat SVG chevron) --- */
.mm-select{ flex:0 1 230px; min-width:190px; display:flex; flex-direction:column; gap:5px; }
.mm-select__label{
font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); margin:0;
}
.mm-select__input{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:100%; padding:11px 38px 11px 14px;
font-family:var(--font); font-size:14px; font-weight:600; color:var(--ink);
background-color:#fff; border:1.5px solid var(--line) !important;
border-radius:var(--radius-pill) !important; cursor:pointer; transition:var(--t);
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e70b84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center;
}
.mm-select__input:hover{ border-color:var(--mm-100) !important; }
.mm-select__input:focus{
outline:none; border-color:var(--mm) !important; box-shadow:0 0 0 3px var(--mm-50);
}
.mm-select__input optgroup{ font-weight:800; color:var(--muted); font-style:normal; }
.mm-select__input option{ font-weight:500; color:var(--ink); padding:6px; }
/* --- 4 termek / sor --- */
.mm-shop{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1200px){ .mm-shop{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .mm-shop{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:540px){ .mm-shop{ grid-template-columns:1fr; } }
/* --- a kartyan BELULI meret/szin legordulok: aranyos, nem er vegig --- */
.mm-shop-card .post-content select,
.mm-shop-card select.form-control{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:100% !important; height:auto !important;
padding:8px 32px 8px 12px !important;
font-size:13px !important; font-weight:600; color:var(--ink) !important;
background-color:#fff !important;
border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important;
box-shadow:none !important; transition:var(--t); cursor:pointer;
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e70b84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:right 12px center !important;
}
.mm-shop-card .post-content select:hover{ border-color:var(--mm-100) !important; }
.mm-shop-card .post-content select:focus{
outline:none; border-color:var(--mm) !important; box-shadow:0 0 0 3px var(--mm-50) !important;
}
/* a legordulok koze egyenletes koz (a regi
/margin helyett) */
/*
.mm-shop-card .post-content select + select,
.mm-shop-card .post-content select{ margin:0 0 8px !important; }
*/
@media (max-width:640px){
.mm-shopbar{ padding:14px; gap:10px; }
.mm-select{ flex:1 1 100%; }
}
/* =====================================================================
29) TERMEKOLDAL (PDP) REDESIGN - 2026-07-21
TISZTAN CSS: a termekleiras.php markupja VALTOZATLAN, hogy a JS-horgok
(prodSizeSelect, prodColorSelect, himzesSelect, quantityCount,
addToCartInContent) egytol egyig mukodjenek. Ezert :has() alapu
szelektorokkal formazunk. A #gallery-page mindket agra (type==2 es a
masik) egyszerre hat.
===================================================================== */
/* --- szekcio kerete --- */
#gallery-page{ background:var(--bg-soft); padding:44px 0 56px; }
/*
#gallery-page .sec-title{ text-align:center; margin-bottom:30px; }
*/
#gallery-page .sec-title{
text-align: left;
margin-bottom:30px;
}
#gallery-page .sec-title h3{
font-size:12.5px !important; font-weight:800 !important; letter-spacing:.16em;
text-transform:uppercase; color:var(--mm) !important; margin:0 0 8px !important;
}
#gallery-page .sec-title h2{
font-family:var(--font); font-size:38px !important; font-weight:800 !important;
color:var(--ink) !important; margin:0 !important; line-height:1.15;
}
@media (max-width:767px){ #gallery-page .sec-title h2{ font-size:27px !important; } }
/* --- ket hasab: galeria | vasarlopanel --- */
#gallery-page #image-gallery{ display:flex; flex-wrap:wrap; gap:34px; align-items:flex-start; }
#gallery-page #image-gallery > .col-md-5,
#gallery-page #image-gallery > .col-md-7{
float:none !important; width:auto !important; padding:0 !important; margin:0 !important;
}
#gallery-page #image-gallery > .col-md-5{ flex:1 1 420px; min-width:300px; }
#gallery-page #image-gallery > .col-md-7{
flex:1 1 460px; min-width:300px; text-align:left !important;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
/* 2026-07-31: a panel valós belső paddingja (bal/jobb + alul is), a 2315-ös
padding:0!important reset felülírásához !important kell */
box-shadow:var(--shadow-sm); padding:28px 30px !important;
}
@media (max-width:900px){ #gallery-page #image-gallery > .col-md-7{ padding:22px 20px !important; } }
/* a panelen beluli regi bootstrap sorok kilapitasa */
#gallery-page .col-md-7 .row{ margin:0 !important; display:block; }
#gallery-page .col-md-7 .row > [class*="col-"]{
float:none !important; width:auto !important; padding:0 !important; display:block;
}
#gallery-page .col-md-7 .row.text-right{ text-align:left !important; margin-top:22px !important; }
/* a DB-bol jovo leiras */
#gallery-page .col-md-7 .col-sm-12 > p,
#gallery-page .col-md-7 .col-sm-12 > ul{ color:var(--muted); font-size:15px; line-height:1.75; }
/* --- csoportcimkek ("Termek meretenek kivalasztasa*") --- */
#gallery-page label:not(:has(input)){
display:block; font-size:12px !important; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted) !important; margin:22px 0 10px !important;
}
/* --- MERET: pill-chipek radio helyett --- */
#gallery-page label:has(input[name^="prodSizeSelect"]){
display:inline-flex; align-items:center; justify-content:center;
min-width:52px; padding:9px 16px; margin:0 8px 8px 0 !important;
background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-pill);
font-size:14px !important; font-weight:700; color:var(--ink) !important;
text-transform:none !important; letter-spacing:0 !important;
cursor:pointer; transition:var(--t); user-select:none;
}
#gallery-page label:has(input[name^="prodSizeSelect"]):hover{
border-color:var(--mm-100); background:var(--mm-50);
}
#gallery-page label:has(input[name^="prodSizeSelect"]:checked){
border-color:var(--mm); background:var(--grad); color:#fff !important;
box-shadow:var(--shadow-mm);
}
/* a radio-gomb maga rejtve (a chip allapota jelzi a valasztast) */
#gallery-page input[name^="prodSizeSelect"],
#gallery-page input[name^="prodColorSelect"]{
position:absolute; opacity:0; width:0; height:0; margin:0;
}
/* --- SZIN: szines pill, a sajat inline background-coloraval --- */
#gallery-page label:has(input[name^="prodColorSelect"]){
position:relative; display:inline-flex; align-items:center;
padding:9px 15px !important; margin:0 8px 8px 0 !important;
border:2px solid transparent; border-radius:var(--radius-pill);
font-size:13px !important; font-weight:700; color:#fff !important;
text-shadow:0 1px 2px rgba(0,0,0,.35);
text-transform:none !important; letter-spacing:0 !important;
cursor:pointer; transition:var(--t); user-select:none;
}
#gallery-page label:has(input[name^="prodColorSelect"]):hover{ transform:translateY(-2px); }
#gallery-page label:has(input[name^="prodColorSelect"]:checked){
border-color:var(--ink); box-shadow:0 0 0 3px var(--mm-50);
}
/* pipa a kivalasztott szinen */
#gallery-page label:has(input[name^="prodColorSelect"]:checked):after{
content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
margin-left:8px; font-size:11px;
}
/* --- nem-jelolo (Ferfi / Noi) --- */
#gallery-page .gender-div{
display:inline-block; width:auto !important; margin:14px 0 0 !important;
border-radius:var(--radius-pill); overflow:hidden;
}
#gallery-page .gender-div p{ margin:0; padding:5px 16px; font-size:12px; letter-spacing:.06em; }
/* --- himzes select + szovegmezok --- */
#gallery-page select[id^="himzesSelect"]{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
max-width:340px; padding:11px 38px 11px 15px !important; height:auto !important;
font-family:var(--font); font-size:14px !important; font-weight:600; color:var(--ink) !important;
background-color:#fff !important; border:1.5px solid var(--line) !important;
border-radius:var(--radius-pill) !important; box-shadow:none !important; cursor:pointer;
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e70b84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:right 15px center !important;
}
#gallery-page select[id^="himzesSelect"]:focus{
outline:none; border-color:var(--mm) !important; box-shadow:0 0 0 3px var(--mm-50) !important;
}
#gallery-page input[id^="product_words"]{
max-width:340px; padding:10px 15px !important; height:auto !important;
border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important;
font-size:14px !important; box-shadow:none !important;
}
#gallery-page input[id^="product_words"]:focus{
outline:none; border-color:var(--mm) !important; box-shadow:0 0 0 3px var(--mm-50) !important;
}
#gallery-page [id^="himzesSzovegKeret"] p{
font-size:13px; color:var(--muted); margin:12px 0 6px;
}
/* --- ARBLOKK (a regi inline rozsaszin sav helyett) --- */
#gallery-page div:has(> h4 > b > span[id^="priceOfProd"]){
background:var(--mm-50) !important; color:var(--ink) !important;
border:1px solid var(--mm-100); border-radius:var(--radius) !important;
text-align:left !important; width:100% !important;
margin:22px 0 0 !important; padding:18px 20px !important;
}
#gallery-page span[id^="priceOfProd"]{
font-family:var(--font); font-size:32px; font-weight:800; color:var(--mm-dark);
letter-spacing:-.01em;
}
#gallery-page div:has(> h4 > b > span[id^="priceOfProd"]) h4{ margin:0 !important; }
#gallery-page div:has(> h4 > b > span[id^="priceOfProd"]) span[style*="line-through"]{
display:block; margin-top:6px; color:var(--muted) !important; font-size:13px;
}
/* --- darabszam + kosarba gomb egy sorban --- */
#gallery-page label:has(input[id^="quantityCount"]){
width:auto !important; display:inline-block; margin:16px 12px 0 0 !important;
}
#gallery-page input[id^="quantityCount"]{
width:88px !important; padding:11px 12px !important; height:auto !important; text-align:center;
font-size:15px !important; font-weight:700; color:var(--ink) !important;
border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important;
box-shadow:none !important;
}
#gallery-page input[id^="quantityCount"]:focus{
outline:none; border-color:var(--mm) !important; box-shadow:0 0 0 3px var(--mm-50) !important;
}
#gallery-page button[onclick^="addToCartInContent"]{
display:inline-flex; align-items:center; gap:10px; vertical-align:top;
margin-top:16px; padding:13px 30px !important;
background:var(--grad) !important; border:none !important;
border-radius:var(--radius-pill) !important; box-shadow:var(--shadow-mm);
font-family:var(--font); font-size:15px; font-weight:700; color:#fff !important;
transition:var(--t); cursor:pointer;
}
#gallery-page button[onclick^="addToCartInContent"]:hover{
transform:translateY(-2px); box-shadow:var(--shadow-lg);
}
#gallery-page button[onclick^="addToCartInContent"] img{
filter:brightness(0) invert(1); width:19px !important; height:19px !important;
}
/* --- "csak tagoknak" savbol tiszta info-kartya --- */
#gallery-page .only-tag{
background:var(--grad) !important; color:#fff !important;
border-radius:var(--radius) !important; margin-top:18px; padding:4px;
}
#gallery-page .only-tag p{ margin:10px; font-weight:700; }
#gallery-page .only-tag a{ text-decoration:underline; }
/* --- belepteto gomb --- */
#gallery-page button[onclick*="/belepes/"]{
padding:13px 30px !important; background:var(--grad) !important; border:none !important;
border-radius:var(--radius-pill) !important; font-weight:700; color:#fff !important;
box-shadow:var(--shadow-mm);
}
/* =====================================================================
30) WEBSHOP TERMEKKARTYA - KOMPAKTABB - 2026-07-21
A kartyan belul ures elemek feszitettek szet (responsepi-p es a
letiltott kosar miatt ures .posted-date), plusz a regi
margok.
===================================================================== */
/* ures hibauzenet-bekezdes: csak akkor foglaljon helyet, ha a JS beleir */
.mm-shop-card .post-content p[id^="responsepi"]:empty{ display:none !important; }
/* ures meta-blokk (letiltott kosarnal semmi sincs benne) */
.mm-shop-card .posted-date:not(:has(*)){ display:none !important; }
/* szellosseg vissza */
.mm-shop-card .post-content{ padding:14px !important; gap:0 !important; }
.mm-shop-card .post-content > *{ margin-bottom:0 !important; }
/* cim */
.mm-shop-card .post-content h3{
font-size:18px !important; margin:0 0 10px !important; min-height:38px;
display:flex; align-items:center; justify-content:center;
}
.mm-shop-card hr{ margin:0 0 10px !important; }
/* legordulok: egyenletes, kicsi koz */
.mm-shop-card .post-content select,
.mm-shop-card select.form-control{ margin:0 0 8px !important; }
.mm-shop-card .post-content select:last-of-type{ margin-bottom:0 !important; }
/* a Reszletek gombot tarto bekezdes: nincs sajat marg, a gomb teljes szeles */
.mm-shop-card .post-content > p.font-weight-bold{
margin:12px 0 0 !important; padding:0 !important; border:none !important;
margin-top:auto !important; /* mindig a kartya aljara */
}
.mm-shop-card .post-content > p.font-weight-bold > span{ display:block; }
/* Reszletek — tiszta outline pill, teljes szelessegben */
.mm-shop-card a.btn-secondary{
display:block !important; width:100%; text-align:center;
padding:9px 14px !important; font-size:13px !important; font-weight:700 !important;
background:#fff !important; color:var(--ink) !important;
border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important;
transition:var(--t);
}
.mm-shop-card a.btn-secondary:hover{
background:var(--mm-50) !important; color:var(--mm) !important;
border-color:var(--mm-100) !important;
}
/* kosaras sor (ha a rendeles ujra engedelyezve van): egy sorban, rendezetten */
.mm-shop-card .posted-date .text-right{
display:flex; align-items:center; gap:8px; margin-top:10px;
}
.mm-shop-card .posted-date input[id^="quantityCount"]{
width:64px !important; flex:0 0 auto; text-align:center;
padding:8px 6px !important; height:auto !important; font-weight:700;
border:1.5px solid var(--line) !important; border-radius:var(--radius-pill) !important;
}
.mm-shop-card .posted-date a.btn-danger{
flex:1; float:none !important; margin:0 !important;
padding:9px 14px !important; font-size:13px !important; font-weight:700 !important;
background:var(--grad) !important; border:none !important;
border-radius:var(--radius-pill) !important; color:#fff !important;
box-shadow:var(--shadow-mm); transition:var(--t);
}
.mm-shop-card .posted-date a.btn-danger:hover{ transform:translateY(-1px); }
/* kep egy kicsit alacsonyabb -> tomorebb kartya */
.mm-shop-card .post img{ height:190px !important; padding:12px !important; }
@media (max-width:540px){
.mm-shop-card .post img{ height:220px !important; }
.mm-shop-card .post-content h3{ min-height:0; }
}
/* =====================================================================
31) LEGORDULO PANEL (dropdown) DESIGN - 2026-07-21
A natív