/**
 * «Gomb» Elementor widget stílusok — ingatlan-modul.
 *
 * Forrás: sablon/fooldal „rólunk” gombjai (mh-h16 / mh-h17).
 * A plugin CSS-e mindig a téma után (késői prioritással, 100) töltődik, így nem kell
 * !important; a specifikumot a .im-gomb osztályok adják.
 *
 * Színek: #584C45 (tömött háttér) · #AF7366 (tömött hover) · #141210 (sötét szöveg/keret)
 *         · #c9a558 (arany) · #fff.
 *
 * Megj.: a betűméretet az Elementor vezérlő injektálja ({{WRAPPER}} .im-gomb), ami
 * magasabb specificitású, mint az alapszabály — így a felhasználói beállítás nyer.
 */

/* ===== Alap ===== */
.im-gomb {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border-radius: 100px;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 13px;        /* alapértelmezett; az Elementor slider felülírja */
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .3s, color .3s, border-color .3s;
}

/* ===== Stílus 1 — Tömött (Ingyenes konzultáció) ===== */
.im-gomb--tomott {
	padding: 19px 30px;
	background: #584C45;
	color: #fff;
}

.im-gomb--tomott:hover,
.im-gomb--tomott:focus-visible {
	background: #AF7366;
	color: #fff;
}

/* ===== Stílus 2 — Körvonalas (Szolgáltatásaink) ===== */
.im-gomb--korvonalas {
	padding: 19px 30px;
	border: 1px solid rgba(20, 18, 16, 0.2);
	color: #141210;
}

.im-gomb--korvonalas:hover,
.im-gomb--korvonalas:focus-visible {
	border-color: #141210;
	background: rgba(20, 18, 16, 0.04);
}

/* ===== Stílus 2B — Körvonalas fehér (sötét háttérre) =====
   Halvány krémvonal (#f7f4ef33); hoverre teli vonal + finom világos háttér (#f7f4ef0a).
   A lekerekítés/betű a .im-gomb alaposztályból jön. */
.im-gomb--korvonalas_feher {
	padding: 15px 28px;
	border: 1px solid #f7f4ef33;
	color: #f7f4ef;
	transition: border-color 0.3s, background 0.3s;
}

.im-gomb--korvonalas_feher:hover,
.im-gomb--korvonalas_feher:focus-visible {
	border-color: #f7f4ef;
	background: #f7f4ef0a;
}

/* ===== Stílus 3 — Arany (Időpont foglalása, mh-h20) ===== */
.im-gomb--arany {
	padding: 19px 30px;
	gap: 10px;
	background: #584C45;          /* arany háttér */
	color: #ffffff;
	transition: transform .3s, filter .3s;
}

.im-gomb--arany:hover,
.im-gomb--arany:focus-visible {
	filter: brightness(1.07);     /* fényesödés */
	transform: translateY(-2px);  /* finom emelkedés */
}

/* ===== Stílus 4 — Link (Teljes kínálat, aláhúzott szöveg) ===== */
.im-gomb--link {
	padding: 0 0 5px;
	gap: 8px;
	border-radius: 0;
	border-bottom: 1px solid rgba(20, 18, 16, 0.25);
	color: #141210;
	letter-spacing: 0.04em;
}

.im-gomb--link:hover,
.im-gomb--link:focus-visible {
	border-bottom-color: #141210;  /* aláhúzás sötétedik */
}

/* ===== Stílus 5 — Szöveg (sima szöveges link, pl. „vagy hívjon · +36 …") =====
   Sötét háttérre szánt sima szöveges link: nincs háttér/keret/padding, Instrument Sans,
   halvány fehér. A szín + súly + betűtípus itt van (ezeket a Tipográfia slider nem fedi);
   a betűméretet a slider adja — állítsd ~15px-re. */
.im-gomb--szoveg {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	gap: 6px;
	line-height: 1.5;
	font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
	font-size: 15px;          /* alapértelmezett; a Tipográfia slider felülírja */
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.9);
	transition: color .3s, opacity .3s;
}

.im-gomb--szoveg:hover,
.im-gomb--szoveg:focus-visible {
	color: #fff;              /* halvány fehér → teli fehér */
}

/* ===== Nyíl (hoverre finom csúszás jobbra) ===== */
.im-gomb__nyil {
	display: inline-flex;
	transition: transform .3s ease;
}

.im-gomb:hover .im-gomb__nyil,
.im-gomb:focus-visible .im-gomb__nyil {
	transform: translateX(3px);
}

/* ===== Akadálymentesség — látható fókuszjel ===== */
.im-gomb:focus-visible {
	outline: 2px solid #c9a558;
	outline-offset: 3px;
}