/* The Laundry Box — booking app */

.tlb-app{
	--tlb-brand:#FF5A1F;
	--tlb-ink:#1A1614;
	--tlb-muted:#7A716C;
	--tlb-line:#EDE7E3;
	--tlb-paper:#FFFFFF;
	--tlb-shell:#F7F4F1;
	--tlb-wash:#FFF1EA;
	--tlb-ok:#128C4A;
	--tlb-r:16px;
	color:var(--tlb-ink);
	font-family:inherit;
	position:relative;
}
.tlb-app *,.tlb-app *::before,.tlb-app *::after{box-sizing:border-box}

/* ---------- contact strip ---------- */
.tlb-contact{
	background:var(--tlb-paper);border:1px solid var(--tlb-line);
	border-radius:var(--tlb-r);padding:6px;display:flex;align-items:stretch;gap:4px;
	margin-bottom:18px;
}
.tlb-act{
	flex:1;display:flex;align-items:center;gap:10px;padding:9px 8px;
	border-radius:10px;text-decoration:none;color:inherit;cursor:pointer;
	transition:background .15s ease;
}
.tlb-act:hover{background:var(--tlb-shell)}
.tlb-act b{display:block;font-size:13.5px;line-height:1.3}
.tlb-act small{display:block;font-size:11.5px;color:var(--tlb-muted);margin-top:1px}
.tlb-divider{width:1px;background:var(--tlb-line);align-self:stretch;margin:6px 0}
.tlb-ic{width:34px;height:34px;border-radius:10px;background:var(--tlb-wash);display:grid;place-items:center;flex:0 0 auto;color:var(--tlb-brand)}
.tlb-contact .tlb-act:first-child .tlb-ic{color:var(--tlb-ok)}
.tlb-ic svg{width:18px;height:18px}

/* ---------- heading ---------- */
.tlb-title{font-size:19px;font-weight:800;margin:0 0 14px;letter-spacing:-.02em}

/* ---------- category tiles ---------- */
.tlb-tiles{
	display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
	background:var(--tlb-paper);border:1px solid var(--tlb-line);
	border-radius:var(--tlb-r);padding:20px 12px;
}
.tlb-tile{
	background:transparent;border:0;padding:2px 0;cursor:pointer;font:inherit;color:inherit;
	display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
}
/* themes love painting <button> states — lock ours down */
.tlb-app .tlb-tile:hover,
.tlb-app .tlb-tile:focus,
.tlb-app .tlb-tile:active{
	background:transparent!important;color:var(--tlb-ink)!important;
	border:0!important;box-shadow:none!important;outline:none;
}
.tlb-app .tlb-tile b,
.tlb-app .tlb-tile:hover b,
.tlb-app .tlb-tile:focus b{color:var(--tlb-ink)}
.tlb-tile:focus-visible{outline:2px solid var(--tlb-brand)!important;outline-offset:4px;border-radius:10px}
.tlb-tile .tlb-sq{
	width:60px;height:60px;border-radius:16px;background:var(--tlb-wash);
	display:grid;place-items:center;flex:0 0 auto;color:var(--tlb-brand);overflow:hidden;
	transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s ease;
}
.tlb-tile .tlb-sq svg{width:33px;height:33px}
.tlb-tile .tlb-sq img{width:100%;height:100%;object-fit:cover}
.tlb-tile:hover .tlb-sq{transform:translateY(-3px);box-shadow:0 10px 20px rgba(26,22,20,.12)}
.tlb-tile:active .tlb-sq{transform:translateY(0) scale(.97);box-shadow:none}
.tlb-tile b{font-weight:600;font-size:11.5px;line-height:1.3}

@media (max-width:520px){
	.tlb-tiles{grid-template-columns:repeat(4,1fr);gap:4px;padding:16px 8px}
	.tlb-tile .tlb-sq{width:54px;height:54px;border-radius:14px}
	.tlb-tile .tlb-sq svg{width:29px;height:29px}
	.tlb-tile b{font-size:10.5px}
}

/* ---------- sheets ---------- */
.tlb-sheet{
	position:fixed;inset:0;z-index:99990;display:none;
	justify-content:center;background:rgba(26,22,20,.45);
}
.tlb-sheet.is-open{display:flex}
.tlb-sheet-in{
	width:100%;max-width:520px;background:var(--tlb-shell);
	height:100%;display:flex;flex-direction:column;
	animation:tlb-in .28s cubic-bezier(.22,1,.36,1);
}
@keyframes tlb-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.tlb-sheet-top{
	padding:16px 18px 14px;border-bottom:1px solid var(--tlb-line);
	background:var(--tlb-paper);display:flex;align-items:center;gap:12px;flex:0 0 auto;
	padding-top:calc(16px + env(safe-area-inset-top));
}
.tlb-sheet-top h3{font-size:17px;font-weight:800;margin:0;letter-spacing:-.02em}
.tlb-sheet-top small{display:block;font-size:11.5px;color:var(--tlb-muted)}
.tlb-back{
	border:0;background:var(--tlb-shell);width:34px;height:34px;border-radius:50%;
	font-size:22px;line-height:0;padding:0 0 3px;cursor:pointer;color:var(--tlb-ink);flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
}
.tlb-app .tlb-back:hover,
.tlb-app .tlb-back:focus{background:var(--tlb-wash)!important;color:var(--tlb-brand)!important;border:0!important;box-shadow:none!important;outline:none}
.tlb-back:focus-visible{outline:2px solid var(--tlb-brand)!important}
.tlb-sheet-top>div{min-width:0}
.tlb-sheet-top h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlb-sheet-body{overflow-y:auto;padding:4px 18px 110px;-webkit-overflow-scrolling:touch;flex:1}

/* ---------- service rows ---------- */
.tlb-grp{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tlb-brand);font-weight:700;margin:20px 0 8px}
.tlb-item{
	background:var(--tlb-paper);border:1px solid var(--tlb-line);border-radius:12px;
	padding:11px 13px;display:flex;align-items:center;gap:10px;margin-bottom:8px;
	transition:border-color .15s ease;
}
.tlb-item.is-on{border-color:var(--tlb-brand)}
.tlb-item [hidden]{display:none!important}
.tlb-cat-panel[hidden]{display:none}
.tlb-item .tlb-nm{flex:1;min-width:0}
.tlb-item .tlb-nm b{font-size:13.5px;font-weight:600;display:block;line-height:1.3}
.tlb-item .tlb-nm span{font-size:12.5px;color:var(--tlb-brand);font-weight:700}
.tlb-step{
	display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
	background:var(--tlb-paper);border:1px solid var(--tlb-line);border-radius:9px;padding:2px;
}
.tlb-app .tlb-step button{
	width:27px!important;height:27px!important;min-width:0!important;min-height:0!important;
	margin:0!important;padding:0 0 2px!important;border:0!important;border-radius:7px!important;
	background:transparent!important;color:var(--tlb-brand)!important;box-shadow:none!important;
	font:inherit!important;font-size:16px!important;font-weight:700!important;line-height:1!important;
	display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.tlb-app .tlb-step button:hover,
.tlb-app .tlb-step button:focus{background:var(--tlb-wash)!important;color:var(--tlb-brand)!important;outline:none}
.tlb-step .tlb-q{min-width:24px;text-align:center;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tlb-ink)}
.tlb-add{
	border:1px solid var(--tlb-brand);background:transparent;color:var(--tlb-brand);
	font:inherit;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:9px;cursor:pointer;flex:0 0 auto;
}
.tlb-add:hover{background:var(--tlb-brand);color:#fff}
/* keep theme focus styles off every control in the app */
.tlb-app .tlb-add:focus{background:transparent;color:var(--tlb-brand);border-color:var(--tlb-brand);box-shadow:none;outline:none}
.tlb-app .tlb-add:focus:hover{background:var(--tlb-brand);color:#fff}
.tlb-app .tlb-step button:focus{background:transparent;color:var(--tlb-brand);box-shadow:none;outline:none}
.tlb-app .tlb-btn:focus{background:var(--tlb-brand);color:#fff;box-shadow:none;outline:none}
.tlb-app .tlb-btn.tlb-wa:focus{background:var(--tlb-ok)}

/* ---------- checkout ---------- */
.tlb-card{background:var(--tlb-paper);border:1px solid var(--tlb-line);border-radius:var(--tlb-r);padding:14px 16px;margin-bottom:12px}
.tlb-line{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:7px 0}
.tlb-line span:first-child{color:var(--tlb-muted)}
.tlb-line b{font-variant-numeric:tabular-nums}
.tlb-line em{font-style:normal;font-size:11px;opacity:.7}
.tlb-line .tlb-amt{white-space:nowrap}
.tlb-line span:first-child b{color:var(--tlb-ink)}
.tlb-line.tlb-big{border-top:1px solid var(--tlb-line);margin-top:6px;padding-top:12px;font-size:15px}
.tlb-line.tlb-big b{font-size:19px;font-weight:800;color:var(--tlb-brand)}
.tlb-trash{border:0;background:transparent;color:var(--tlb-muted);cursor:pointer;font-size:15px;padding:0 2px}
.tlb-empty{text-align:center;color:var(--tlb-muted);font-size:13px;padding:30px 0;margin:0}

.tlb-app label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tlb-muted);font-weight:700;margin:12px 0 6px}
.tlb-app input,.tlb-app select,.tlb-app textarea{
	width:100%;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--tlb-line);
	border-radius:10px;background:var(--tlb-shell);color:var(--tlb-ink);
}
.tlb-app textarea{resize:vertical;min-height:62px}
.tlb-app input:focus,.tlb-app select:focus,.tlb-app textarea:focus{outline:2px solid var(--tlb-brand);outline-offset:1px;background:#fff}
.tlb-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tlb-mt{margin-top:8px}

.tlb-phone{display:flex;align-items:center;background:var(--tlb-shell);border:1px solid var(--tlb-line);border-radius:10px;overflow:hidden}
.tlb-phone:focus-within{outline:2px solid var(--tlb-brand);outline-offset:1px;background:#fff}
.tlb-phone .tlb-cc{padding:11px;font-size:14px;font-weight:700;color:var(--tlb-muted);border-right:1px solid var(--tlb-line);flex:0 0 auto}
.tlb-phone input{border:0;background:transparent;border-radius:0;letter-spacing:.04em}
.tlb-phone input:focus{outline:none;background:transparent}

.tlb-fe{color:#C22;font-size:11.5px;font-weight:600;margin:5px 0 0;display:none}
.tlb-fe.is-show{display:block}
.tlb-err{color:#C22;font-size:12px;margin:10px 0 0;display:none}
.tlb-err.is-show{display:block}
.tlb-app .is-bad,.tlb-phone.is-bad{border-color:#E06B5A;background:#FEF6F4}

.tlb-locrow{display:flex;gap:8px;margin-top:9px}
.tlb-loc{
	flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
	border:1px solid var(--tlb-brand);background:var(--tlb-wash);color:var(--tlb-brand);
	font:inherit;font-size:12.5px;font-weight:700;padding:10px 12px;border-radius:10px;
	cursor:pointer;text-decoration:none;
}
.tlb-loc svg{width:15px;height:15px}
.tlb-loc:hover{background:var(--tlb-brand);color:#fff}
.tlb-loc.tlb-ghost{flex:0 0 auto;background:transparent;border-color:var(--tlb-line);color:var(--tlb-muted);font-weight:600}
.tlb-loc.tlb-ghost:hover{background:var(--tlb-shell);color:var(--tlb-ink)}
.tlb-loc:disabled{opacity:.6;cursor:wait}
.tlb-pinned{display:none;margin:9px 0 0;font-size:12px;font-weight:600;color:var(--tlb-ok);align-items:center;gap:6px}
.tlb-pinned.is-show{display:flex}
.tlb-pinned.is-warn{color:#C22}
.tlb-pinned a{color:var(--tlb-brand)}
.tlb-map{height:190px;margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid var(--tlb-line);background:var(--tlb-shell);z-index:0}
.tlb-map.is-off{display:none}

/* map lives above everything when fullscreen */
.tlb-map.tlb-map-full{
	position:fixed;inset:0;z-index:100000;height:100%!important;
	margin:0;border-radius:0;border:0;
}
.tlb-noscroll{overflow:hidden}

/* fullscreen button */
.tlb-app .tlb-mfull{
	width:34px;height:34px;border:1px solid var(--tlb-line)!important;border-radius:9px!important;
	background:#fff!important;color:var(--tlb-ink)!important;cursor:pointer;
	font-size:16px!important;line-height:1!important;padding:0!important;margin:0!important;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 2px 8px rgba(26,22,20,.14)!important;
}
.tlb-app .tlb-mfull:hover,
.tlb-app .tlb-mfull:focus{background:var(--tlb-wash)!important;color:var(--tlb-brand)!important;outline:none}

/* search inside the map */
.tlb-msearch{position:relative;width:min(260px,62vw)}
.tlb-map.tlb-map-full .tlb-msearch{width:min(380px,80vw)}
.tlb-msearch input{
	width:100%;font:inherit;font-size:13px;padding:9px 12px;
	border:1px solid var(--tlb-line);border-radius:9px;background:#fff;color:var(--tlb-ink);
	box-shadow:0 2px 8px rgba(26,22,20,.14);
}
.tlb-msearch input:focus{outline:2px solid var(--tlb-brand);outline-offset:1px}
.tlb-msearch-list{
	position:absolute;top:calc(100% + 5px);left:0;right:0;
	background:#fff;border:1px solid var(--tlb-line);border-radius:10px;overflow:hidden;
	box-shadow:0 10px 26px rgba(26,22,20,.18);max-height:220px;overflow-y:auto;
}
.tlb-msearch-list[hidden]{display:none}
.tlb-app .tlb-msearch-list button{
	display:block;width:100%;text-align:left;border:0!important;background:#fff!important;
	color:var(--tlb-ink)!important;font:inherit!important;font-size:12.5px!important;line-height:1.4!important;
	padding:9px 12px!important;margin:0!important;cursor:pointer;border-radius:0!important;box-shadow:none!important;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tlb-app .tlb-msearch-list button+button{border-top:1px solid var(--tlb-line)!important}
.tlb-app .tlb-msearch-list button:hover,
.tlb-app .tlb-msearch-list button:focus{background:var(--tlb-wash)!important;color:var(--tlb-ink)!important;outline:none}
.tlb-msearch-none{display:block;padding:10px 12px;font-size:12.5px;color:var(--tlb-muted)}
.tlb-hint{font-size:11px;color:var(--tlb-muted);margin:7px 0 0;line-height:1.4}

/* ---------- cart bar ---------- */
.tlb-bar{
	position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(130%);
	width:100%;max-width:520px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
	background:var(--tlb-paper);border-top:1px solid var(--tlb-line);z-index:99995;
	display:flex;align-items:center;gap:12px;transition:transform .26s cubic-bezier(.22,1,.36,1);
	box-shadow:0 -6px 22px rgba(26,22,20,.08);
}
.tlb-bar.is-show{transform:translateX(-50%) translateY(0)}
.tlb-tot b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.tlb-tot small{display:block;font-size:11.5px;color:var(--tlb-muted)}
.tlb-btn{
	margin-left:auto;border:0;background:var(--tlb-brand);color:#fff;font:inherit;font-weight:700;
	font-size:14px;padding:13px 22px;border-radius:11px;cursor:pointer;
	display:flex;align-items:center;gap:8px;
}
.tlb-btn:hover{filter:brightness(.93)}
.tlb-btn.tlb-wa{background:var(--tlb-ok)}
.tlb-btn svg{width:17px;height:17px}
.tlb-btn:disabled{opacity:.7;cursor:wait}

@media (prefers-reduced-motion:reduce){
	.tlb-app *{animation:none!important;transition:none!important}
}

/* ==================================================== desktop */

@media (min-width:768px){

	/* heading & contact strip breathe more */
	.tlb-title{font-size:26px;margin-bottom:20px}
	.tlb-contact{padding:8px;margin-bottom:24px}
	.tlb-act{padding:12px 14px;gap:12px}
	.tlb-act b{font-size:15px}
	.tlb-act small{font-size:12.5px}
	.tlb-ic{width:42px;height:42px;border-radius:11px}
	.tlb-ic svg{width:21px;height:21px}

	/* category tiles — hover lifts only the icon card, no box behind it */
	.tlb-tiles{padding:30px 20px;gap:14px}
	.tlb-tile{gap:12px;padding:6px 0}
	.tlb-tile .tlb-sq{width:78px;height:78px;border-radius:18px}
	.tlb-tile .tlb-sq svg{width:42px;height:42px}
	.tlb-tile b{font-size:14px}

	/* sheets go full screen on desktop too, with the content in a centred column */
	.tlb-sheet{align-items:stretch;padding:0}
	.tlb-sheet-in{
		height:100%;max-height:none;max-width:none;width:100%;
		border-radius:0;box-shadow:none;
		animation:tlb-pop .22s ease;
	}
	.tlb-sheet-top{
		padding:16px max(28px, calc(50% - 460px));
		align-items:center;
	}
	.tlb-sheet-top h3{font-size:20px;line-height:1.25}
	.tlb-sheet-top small{font-size:12.5px;margin-top:1px}
	.tlb-back{width:38px;height:38px;font-size:22px}
	.tlb-sheet-body{padding:10px max(28px, calc(50% - 460px)) 120px}
	.tlb-sheet-body::-webkit-scrollbar{width:5px}
	.tlb-sheet-body::-webkit-scrollbar-track{background:transparent}
	.tlb-sheet-body::-webkit-scrollbar-thumb{background:var(--tlb-line);border-radius:99px}
	.tlb-sheet-body::-webkit-scrollbar-thumb:hover{background:var(--tlb-muted)}

	/* checkout form stays a comfortable single column in the middle */
	[data-tlb-co] .tlb-sheet-body{padding-left:max(28px, calc(50% - 310px));padding-right:max(28px, calc(50% - 310px))}

	/* service list in two columns so long lists stay short */
	.tlb-cat-panel{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;align-content:start}
	.tlb-cat-panel[hidden]{display:none}
	.tlb-grp{grid-column:1/-1;margin:16px 0 2px}
	.tlb-grp:first-child{margin-top:8px}
	.tlb-item{margin-bottom:0;padding:13px 15px}
	.tlb-item .tlb-nm b{font-size:14px}
	.tlb-item .tlb-nm span{font-size:13px}

	/* checkout stays single column */
	.tlb-card{padding:18px 20px}
	.tlb-map{height:240px}
	.tlb-line{font-size:14px}
	.tlb-line.tlb-big b{font-size:21px}

	/* cart bar floats above the page */
	.tlb-bar{
		bottom:22px;width:calc(100% - 48px);max-width:600px;
		border:1px solid var(--tlb-line);border-radius:16px;
		padding:14px 20px;
		box-shadow:0 18px 44px rgba(26,22,20,.18);
	}
	.tlb-tot b{font-size:21px}
	.tlb-btn{font-size:15px;padding:14px 26px}
}

@media (min-width:1100px){
	.tlb-tiles{padding:36px 26px}
	.tlb-tile .tlb-sq{width:86px;height:86px;border-radius:20px}
	.tlb-tile .tlb-sq svg{width:46px;height:46px}
	.tlb-cat-panel{grid-template-columns:repeat(3,1fr)}
}

@keyframes tlb-pop{
	from{transform:translateY(14px);opacity:0}
	to{transform:translateY(0);opacity:1}
}