/* ==========================================================================
   SPT BOOKING – felület
   Minden szín, sarok és sűrűség CSS-változóból jön. A változókat a
   bővítmény beállításai adják, alapból a téma színeit átvéve.
   ========================================================================== */

/* A foglaló saját szélességet és belső margót hoz, hogy bárhova illesztve
   olvasható maradjon – akkor is, ha a befogadó szakasz teljes szélességű. */
.sptbk-app {
	width: 100%;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 28px);
	padding-right: clamp(16px, 4vw, 28px);
}

.sptbk {
	--sptbk-gap: calc(22px * var(--sptbk-space, 1));
	--sptbk-pad: calc(20px * var(--sptbk-space, 1));

	font-family: var(--sptbk-font, inherit);
	font-size: 16px;
	color: var(--sptbk-text, #4A453E);
	line-height: 1.7;
}

/* A burkoló maga is így számoljon, különben a belső margó hozzáadódna
   a szélességéhez, és kilógna a befogadó dobozból. */
.sptbk, .sptbk *, .sptbk *::before, .sptbk *::after { box-sizing: border-box; }

/* --- Lépéssáv --- */
.sptbk-steps { display: flex; gap: 4px; margin-bottom: var(--sptbk-gap); }
.sptbk-step {
	flex: 1; height: 2px; background: var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
}
.sptbk-step.is-on { background: var(--sptbk-acc, #C8A45C); }

.sptbk-stepname {
	font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sptbk-acc-d, #A9884A); margin: 0 0 6px;
}
.sptbk-title {
	font-family: var(--sptbk-font-head, inherit);
	font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
	color: var(--sptbk-head, #1A1815); margin: 0 0 var(--sptbk-gap);
}

/* --- Kategóriakártyák ---
   Kisebbek a kezeléskártyáknál: csak a név és a darabszám van rajtuk,
   így egy sorba több is kifér, és a vendég egy pillantással átlátja,
   mit kínál a szalon. Asztali gépen három, mobilon kettő egy sorban. */
.sptbk-grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.sptbk-tile {
	display: flex; flex-direction: column; justify-content: center;
	min-height: 104px; width: 100%; text-align: left; cursor: pointer;
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: calc(var(--sptbk-pad) * .8);
	font-family: inherit; color: inherit;
	box-shadow: 0 1px 2px rgba(26,24,21,.04);
	transition: border-color .25s ease, box-shadow .25s ease;
}
.sptbk-tile:hover {
	border-color: var(--sptbk-acc, #C8A45C);
	box-shadow: 0 6px 18px rgba(26,24,21,.07);
}
.sptbk-tile-name,
.sptbk-tile-sub { display: block; }
.sptbk-tile-name {
	font-family: var(--sptbk-font-head, inherit);
	font-size: 17px; font-weight: 600; line-height: 1.3;
	color: var(--sptbk-head, #1A1815);
	margin: 0 0 7px;
}
.sptbk-tile-sub {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sptbk-acc-d, #A9884A);
}

/* A kategóriába nem tartozó kezelések a rács alatt, vonallal elválasztva. */
.sptbk-loose {
	display: grid; gap: 10px;
	margin-top: var(--sptbk-gap);
	padding-top: var(--sptbk-gap);
	border-top: 1px solid var(--sptbk-line, #EAE1D0);
}

@media (max-width: 420px) {
	.sptbk-grid { grid-template-columns: repeat(2, 1fr); }
	.sptbk-tile { min-height: 92px; }
	.sptbk-tile-name { font-size: 15.5px; }
}

/* --- Kezeléskártyák --- */
.sptbk-list { display: grid; gap: 10px; }
.sptbk-card {
	width: 100%; text-align: left; cursor: pointer;
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: var(--sptbk-pad);
	font-family: inherit; color: inherit;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sptbk-card { box-shadow: 0 1px 2px rgba(26,24,21,.04); }
.sptbk-card:hover {
	border-color: var(--sptbk-acc, #C8A45C);
	box-shadow: 0 6px 18px rgba(26,24,21,.07);
}
.sptbk-card.is-on {
	border-color: var(--sptbk-acc, #C8A45C);
	box-shadow: 0 0 0 1px var(--sptbk-acc, #C8A45C), 0 8px 22px rgba(26,24,21,.08);
}
/* A kártya elemei külön sorban állnak, akkor is, ha a kártya gomb.
   Enélkül a név, az időtartam és a leírás egybefolyna. */
.sptbk-card-name,
.sptbk-card-meta,
.sptbk-card-text { display: block; }

.sptbk-card-name {
	font-family: var(--sptbk-font-head, inherit);
	font-size: 18.5px; font-weight: 600; line-height: 1.3;
	color: var(--sptbk-head, #1A1815);
	margin: 0 0 8px;
}

/* Az időtartam és az ár külön sorban, elválasztva a leírástól. */
.sptbk-card-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sptbk-acc-d, #A9884A);
	margin: 0 0 12px; padding-bottom: 12px;
	border-bottom: 1px solid var(--sptbk-line, #EAE1D0);
}
.sptbk-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.sptbk-meta-item + .sptbk-meta-item::before {
	content: ""; width: 3px; height: 3px; border-radius: 50%;
	background: var(--sptbk-line, #EAE1D0); margin-right: 8px;
}
.sptbk-meta-price { color: var(--sptbk-head, #1A1815); font-weight: 500; }

.sptbk-card-text {
	font-size: 14.5px; line-height: 1.7; color: var(--sptbk-muted, #837C71); margin: 0;
}
.sptbk-more {
	display: inline-block; margin-top: 10px; background: none; border: 0; padding: 0;
	font: inherit; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sptbk-acc-d, #A9884A); cursor: pointer; text-decoration: underline;
	text-underline-offset: 3px;
}
.sptbk-more:hover { color: var(--sptbk-head, #1A1815); }
.sptbk-full { display: none; }
.sptbk-card.is-open .sptbk-full { display: block; }
.sptbk-card.is-open .sptbk-cut { display: none; }

/* --- Naptár --- */
.sptbk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sptbk-dow {
	text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--sptbk-muted, #837C71); padding-bottom: 6px;
}
.sptbk-day {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	background: var(--sptbk-surface, #fff);
	font: inherit; font-size: 14px; color: var(--sptbk-head, #1A1815);
	cursor: pointer; transition: all .2s ease;
}
.sptbk-day:hover { border-color: var(--sptbk-acc, #C8A45C); }
.sptbk-day.is-on { background: var(--sptbk-acc, #C8A45C); border-color: var(--sptbk-acc, #C8A45C); color: #fff; }
.sptbk-day.is-off { color: var(--sptbk-line, #EAE1D0); cursor: default; background: transparent; border-color: transparent; }
.sptbk-day.is-empty { border: 0; background: none; cursor: default; }

/* --- Időpontok --- */
.sptbk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sptbk-slot {
	padding: 12px 4px; text-align: center;
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	background: var(--sptbk-surface, #fff);
	font: inherit; font-size: 15px; color: var(--sptbk-head, #1A1815);
	cursor: pointer; transition: all .2s ease;
}
.sptbk-slot:hover { border-color: var(--sptbk-acc, #C8A45C); }
.sptbk-slot.is-on { background: var(--sptbk-acc, #C8A45C); border-color: var(--sptbk-acc, #C8A45C); color: #fff; }

/* --- Űrlapmezők --- */
.sptbk-field { margin-bottom: 14px; }
/* A mezőfeliratok olvashatóbbak: nagyobbak, erősebbek, mindig balra zártak. */
.sptbk-label {
	display: block;
	font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sptbk-head, #1A1815);
	text-align: left;
	margin-bottom: 8px;
}
.sptbk-input, .sptbk-area, .sptbk-select {
	width: 100%; font: inherit; font-size: 16px;
	color: var(--sptbk-head, #1A1815);
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: 12px 14px;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.sptbk-area { min-height: 96px; resize: vertical; }
.sptbk-input:focus, .sptbk-area:focus, .sptbk-select:focus {
	outline: none;
	border-color: var(--sptbk-acc, #C8A45C);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sptbk-acc, #C8A45C) 22%, transparent);
}
.sptbk-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.sptbk-check input { margin-top: 3px; accent-color: var(--sptbk-acc, #C8A45C); }
.sptbk-check span { font-size: 14px; color: var(--sptbk-muted, #837C71); line-height: 1.6; }

/* --- Gombok --- */
.sptbk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
	padding: 15px 28px; cursor: pointer;
	border: 1px solid var(--sptbk-acc, #C8A45C);
	border-radius: var(--sptbk-radius, 0);
	background: var(--sptbk-acc, #C8A45C); color: #fff;
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.sptbk-btn:hover { background: var(--sptbk-acc-d, #A9884A); border-color: var(--sptbk-acc-d, #A9884A); color: #fff; }
.sptbk-btn[disabled] { opacity: .45; cursor: default; }
.sptbk-btn--line { background: transparent; color: var(--sptbk-head, #1A1815); border-color: var(--sptbk-line, #EAE1D0); }
.sptbk-btn--line:hover { background: transparent; color: var(--sptbk-acc-d, #A9884A); border-color: var(--sptbk-acc, #C8A45C); }
.sptbk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sptbk-gap); }

/* --- Összegzés --- */
.sptbk-sum {
	background: var(--sptbk-bg, #FDFAF4);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: var(--sptbk-pad);
	box-shadow: 0 1px 2px rgba(26,24,21,.04);
}
.sptbk-sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 15px; }
.sptbk-sum-row + .sptbk-sum-row { border-top: 1px solid var(--sptbk-line, #EAE1D0); }
.sptbk-sum-k { color: var(--sptbk-muted, #837C71); }
.sptbk-sum-v { color: var(--sptbk-head, #1A1815); text-align: right; }

/* --- Üzenetek --- */
.sptbk-msg { padding: 15px 18px; border-left: 2px solid; font-size: 15px; border-radius: var(--sptbk-radius, 0); }
.sptbk-msg--ok { border-color: var(--sptbk-ok, #2E7D53); background: color-mix(in srgb, var(--sptbk-ok, #2E7D53) 8%, transparent); color: var(--sptbk-ok, #2E7D53); }
.sptbk-msg--bad { border-color: var(--sptbk-bad, #A5342B); background: color-mix(in srgb, var(--sptbk-bad, #A5342B) 8%, transparent); color: var(--sptbk-bad, #A5342B); }
.sptbk-empty { color: var(--sptbk-muted, #837C71); font-size: 15px; padding: 22px 0; }

/* --- Elrendezés --- */
.sptbk-wrap { display: grid; grid-template-columns: 1fr 320px; gap: calc(var(--sptbk-gap) * 1.6); align-items: start; }

@media (max-width: 860px) {
	.sptbk-wrap { grid-template-columns: 1fr; }
	.sptbk-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

/* Régebbi böngészőkben a color-mix nem működik, ott sima háttér marad. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.sptbk-msg--ok { background: #EDF5EF; }
	.sptbk-msg--bad { background: #FBEDEB; }
	.sptbk-input:focus, .sptbk-area:focus, .sptbk-select:focus { box-shadow: none; }
}

/* --- Naptár fejléce --- */
.sptbk-calhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sptbk-calmonth {
	font-family: var(--sptbk-font-head, inherit);
	font-size: 18px; color: var(--sptbk-head, #1A1815);
}
.sptbk-calhead .sptbk-btn { padding: 9px 16px; letter-spacing: 0; font-size: 15px; }
.sptbk-dayline {
	font-size: 13px; color: var(--sptbk-muted, #837C71);
	margin: 0 0 12px; text-transform: capitalize;
}
.sptbk-form { max-width: 520px; }
.sptbk-msg-slot:empty { display: none; }
.sptbk-msg-slot { margin: 14px 0; }
.sptbk-app .sptbk-actions:empty { display: none; }

/* Rejtett mező a robotoknak. Ember nem látja, és nem is éri el billentyűzettel.
   Kivágással rejtjük, nem messzire tolással – az utóbbi vízszintes
   görgetést okozhat egyes elrendezésekben. */
.sptbk-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* A rejtett elem maradjon rejtett akkor is, ha saját megjelenítési
   szabálya van – például a gomboknál. */
.sptbk [hidden] { display: none !important; }


/* ==========================================================================
   BELÉPŐOLDAL
   Az alap stíluslapban van, mert a belépéskor a kezelőfelület lapja
   még nem töltődik be.
   ========================================================================== */

.sptbk-login {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.sptbk-loginbox {
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: 40px 36px 36px;
	box-shadow: 0 18px 44px rgba(26, 24, 21, .07);
}

/* A fejrész elválik a mezőktől. */
.sptbk-loginbox .sptbk-stepname { margin-bottom: 4px; }
.sptbk-loginbox .sptbk-title {
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sptbk-line, #EAE1D0);
}

.sptbk-loginbox .sptbk-actions { margin-top: 22px; }
.sptbk-loginbox .sptbk-btn { width: 100%; justify-content: center; }
.sptbk-loginbox .sptbk-actions .sptbk-btn { flex: 1 1 auto; }

.sptbk-loginhelp {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--sptbk-line, #EAE1D0);
	font-size: 13px;
	text-align: center;
}
.sptbk-loginhelp a {
	color: var(--sptbk-muted, #837C71);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sptbk-loginhelp a:hover { color: var(--sptbk-acc-d, #A9884A); }

@media (max-width: 480px) {
	.sptbk-loginbox { padding: 30px 22px 26px; }
}


/* Önálló felület: a képernyők tartalma elkülönül a háttértől. */
.sptbk-card-box {
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: calc(var(--sptbk-pad) * 1.3);
	box-shadow: 0 1px 3px rgba(26,24,21,.05);
}


/* --- Változatok csoportfejléce ---
   A vendégnek egy pillantásból látnia kell, hol ér véget az egyik csoport
   és hol kezdődik a másik – például új szett és töltés között. */
.sptbk-group {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 34px 0 16px;
	font-family: var(--sptbk-font-head, inherit);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sptbk-head, #1A1815);
}
.sptbk-group::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--sptbk-line, #EAE1D0);
}
.sptbk-list > .sptbk-group:first-child { margin-top: 0; }

@media (max-width: 600px) {
	.sptbk-group { font-size: 19px; margin-top: 28px; }
}

/* ==========================================================================
   KÖSZÖNŐOLDAL
   Saját webcíme van, hogy a konverzió oldalbetöltésből mérhető legyen.
   ========================================================================== */

.sptbk-thanks { max-width: 620px; }

.sptbk-thanks-box {
	background: var(--sptbk-surface, #fff);
	border: 1px solid var(--sptbk-line, #EAE1D0);
	border-radius: var(--sptbk-radius, 0);
	padding: 44px 40px 36px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(26, 24, 21, .05);
}

.sptbk-check-mark {
	color: var(--sptbk-ok, #2E7D53);
	margin-bottom: 20px;
	line-height: 0;
}

.sptbk-thanks .sptbk-title {
	margin-bottom: 12px;
}

.sptbk-thanks-lead {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--sptbk-muted, #837C71);
	margin: 0 auto 28px;
	max-width: 420px;
}

/* Az összegzés sorai balra zártak, hogy olvashatóak maradjanak. */
.sptbk-thanks .sptbk-sum { text-align: left; }

.sptbk-thanks .sptbk-actions {
	justify-content: center;
	margin-top: 26px;
}

.sptbk-thanks-foot {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--sptbk-line, #EAE1D0);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--sptbk-muted, #837C71);
}
.sptbk-thanks-foot a {
	color: var(--sptbk-head, #1A1815);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.sptbk-thanks-box { padding: 34px 22px 28px; }
	.sptbk-thanks .sptbk-btn { flex: 1 1 100%; }
}