/*
"Hire a helper in 3 easy steps" section (template-parts/three-steps.php).
Every rule is scoped to .caremora-three-steps. Colours and padding come
from CSS variables set inline from Caremora Settings → 3 Easy Steps Section.
*/
.caremora-three-steps{
	--cts-bg:#0A9FC7;
	--cts-heading:#FFFFFF;
	--cts-text:#FFFFFF;
	--cts-btn-bg:#14343B;
	--cts-btn-text:#14343B;
	--cts-pt:74px;
	--cts-pb:84px;
	background:var(--cts-bg);
	color:var(--cts-text);
	padding:var(--cts-pt) 0 var(--cts-pb);
	overflow:hidden;
}

/* Heading + underline */
.caremora-three-steps .cts-head{text-align:center;margin-bottom:56px}
.caremora-three-steps .cts-head h2{
	font-family:'Instrument Sans',system-ui,sans-serif;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.05em;
	font-size:clamp(24px,3.6vw,38px);
	line-height:1.2;
	color:var(--cts-heading);
	margin:0 auto;
	display:inline-block;
	max-width:100%;
	overflow-wrap:break-word;
}
.caremora-three-steps .cts-head h2::after{
	content:"";
	display:block;
	width:min(480px,82%);
	height:3px;
	margin:16px auto 0;
	background:var(--cts-heading);
	border-radius:3px;
}
.caremora-three-steps .cts-subtitle{
	color:var(--cts-text);
	opacity:.92;
	font-size:18px;
	max-width:60ch;
	margin:18px auto 0;
}

/* Two columns */
.caremora-three-steps .cts-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:56px;
	align-items:center;
}
.caremora-three-steps.is-image-right .cts-media{order:2}
.caremora-three-steps .cts-media{display:flex;justify-content:center;min-width:0}

/* Steps */
.caremora-three-steps .cts-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.caremora-three-steps .cts-step{display:flex;gap:20px;align-items:flex-start}
.caremora-three-steps .cts-num{
	flex-shrink:0;
	width:52px;
	height:52px;
	border-radius:50%;
	border:2px solid var(--cts-text);
	color:var(--cts-text);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:19px;
	font-weight:600;
	line-height:1;
	margin-top:2px;
}
.caremora-three-steps .cts-num.has-icon{padding:11px}
.caremora-three-steps .cts-num img{width:100%;height:100%;object-fit:contain;display:block}
.caremora-three-steps .cts-step h3{
	font-family:'Instrument Sans',system-ui,sans-serif;
	font-weight:500;
	letter-spacing:0;
	font-size:clamp(23px,2.5vw,30px);
	line-height:1.2;
	color:var(--cts-text);
	margin:0 0 6px;
}
.caremora-three-steps .cts-step p{font-size:clamp(16.5px,1.6vw,19px);line-height:1.5;color:var(--cts-text);margin:0}
.caremora-three-steps .cts-step-body{min-width:0}

/* Button */
.caremora-three-steps .cts-cta{margin-top:40px;padding-left:72px}
.caremora-three-steps .cts-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:260px;
	min-height:56px;
	padding:12px 40px;
	border-radius:100px;
	border:2px solid var(--cts-btn-text);
	font-size:clamp(19px,2vw,24px);
	font-weight:500;
	text-decoration:none;
	transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.caremora-three-steps .cts-btn--outline{background:transparent;color:var(--cts-btn-text)}
.caremora-three-steps .cts-btn--outline:hover{background:var(--cts-btn-bg);border-color:var(--cts-btn-bg);color:#fff;transform:translateY(-1px)}
.caremora-three-steps .cts-btn--solid{background:var(--cts-btn-bg);border-color:var(--cts-btn-bg);color:var(--cts-btn-text)}
.caremora-three-steps .cts-btn--solid:hover{filter:brightness(1.08);transform:translateY(-1px)}
.caremora-three-steps .cts-btn:focus-visible{outline:3px solid var(--cts-heading);outline-offset:3px}

/* Built-in phone illustration (shown when no image is uploaded) */
.caremora-three-steps .cts-phones{position:relative;width:100%;max-width:470px;height:430px}
.caremora-three-steps .cts-phone{
	position:absolute;
	background:#1B1E22;
	border-radius:30px;
	padding:9px;
	box-shadow:0 22px 50px rgba(8,40,52,.35);
}
.caremora-three-steps .cts-phone--front{left:50%;top:0;width:200px;height:420px;transform:translateX(-50%);z-index:2}
.caremora-three-steps .cts-phone--back{top:34px;width:176px;height:364px;opacity:.97}
.caremora-three-steps .cts-phone--left{left:0}
.caremora-three-steps .cts-phone--right{right:0}
.caremora-three-steps .cts-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:76px;height:16px;background:#1B1E22;border-radius:0 0 12px 12px;z-index:1}
.caremora-three-steps .cts-screen{
	background:#fff;
	color:#14343B;
	border-radius:22px;
	height:100%;
	padding:30px 12px 14px;
	display:flex;
	flex-direction:column;
	gap:8px;
	font-size:11px;
	line-height:1.3;
	overflow:hidden;
}
.caremora-three-steps .cts-phone--back .cts-screen{padding-top:20px}
.caremora-three-steps .cts-phone--left .cts-screen{padding-right:44px}
.caremora-three-steps .cts-phone--right .cts-screen{padding-left:44px}
/* Uploaded screenshot fills the phone screen, anchored to the top */
.caremora-three-steps .cts-phone .cts-screen.cts-screen--image{padding:0;display:block;background:#fff}
.caremora-three-steps .cts-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.caremora-three-steps .cts-screen-title{font-weight:600;font-size:12.5px;text-align:center;margin:0 0 4px}
.caremora-three-steps .cts-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.caremora-three-steps .cts-tile{
	aspect-ratio:1;
	border:1.5px solid #CFE7EE;
	background:#F1F9FB;
	border-radius:9px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	font-size:19px;
}
.caremora-three-steps .cts-tile small{font-size:8.5px;font-weight:600;color:#3F6670}
.caremora-three-steps .cts-tile.is-active{background:var(--cts-bg);border-color:var(--cts-bg)}
.caremora-three-steps .cts-tile.is-active small{color:#fff}
.caremora-three-steps .cts-selected{text-align:center;font-weight:600;font-size:11px;margin:6px 0 0}
.caremora-three-steps .cts-chip,.caremora-three-steps .cts-slot{
	display:flex;
	justify-content:space-between;
	gap:6px;
	border:1px solid #DCE7EA;
	border-radius:8px;
	padding:7px 8px;
	font-size:10px;
}
.caremora-three-steps .cts-chip.is-active,.caremora-three-steps .cts-slot.is-active{background:var(--cts-bg);border-color:var(--cts-bg);color:#fff}
.caremora-three-steps .cts-field-label{font-size:9.5px;font-weight:600;color:#3F6670;margin-top:4px}
.caremora-three-steps .cts-field{height:44px;border:1px solid #DCE7EA;border-radius:8px;background:#FAFCFC}
.caremora-three-steps .cts-field--short{height:30px}
.caremora-three-steps .cts-next{
	margin-top:auto;
	align-self:center;
	background:var(--cts-bg);
	color:#fff;
	font-weight:600;
	font-size:11px;
	border-radius:7px;
	padding:7px 26px;
}

/* Tablet */
@media (max-width:1024px){
	.caremora-three-steps .cts-grid{gap:36px}
	.caremora-three-steps .cts-phones{transform:scale(.9);transform-origin:center}
	.caremora-three-steps .cts-cta{padding-left:0}
}

/* Phone / small tablet: stack, image first */
@media (max-width:900px){
	.caremora-three-steps{padding:calc(var(--cts-pt) * .66) 0 calc(var(--cts-pb) * .66)}
	.caremora-three-steps .cts-head{margin-bottom:36px}
	.caremora-three-steps .cts-grid{grid-template-columns:1fr;gap:40px}
	.caremora-three-steps.is-image-right .cts-media{order:0}
	.caremora-three-steps .cts-phones{transform:none}
	.caremora-three-steps .cts-content{max-width:560px;margin:0 auto;width:100%}
	.caremora-three-steps .cts-cta{text-align:center}
}
@media (max-width:520px){
	.caremora-three-steps .cts-phones{height:360px;max-width:340px}
	.caremora-three-steps .cts-phone--front{width:170px;height:356px}
	.caremora-three-steps .cts-phone--back{top:30px;width:140px;height:300px}
	.caremora-three-steps .cts-tile{font-size:16px}
	.caremora-three-steps .cts-step{gap:16px}
	.caremora-three-steps .cts-num{width:44px;height:44px;font-size:17px}
	.caremora-three-steps .cts-btn{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){
	.caremora-three-steps .cts-btn{transition:none}
	.caremora-three-steps .cts-btn:hover{transform:none}
}