/* =========================================================================
   MIMPI HEADSPA — Treatments page (category cards + package popup)
   Loaded by inc/treatments.php. Shared with mockup.html.
   ========================================================================= */

.mt-wrap{ max-width:1200px; margin:0 auto; padding:56px 40px 20px; }
.mt-head h1{ font-family:var(--mimpi-font-head); font-weight:400; font-size:40px; margin:0 0 8px; }
.mt-head p{ font-size:16px; color:var(--mimpi-muted,#8A8578); margin:0 0 36px; }

.mt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mt-card{
	background:var(--mimpi-card,#FBF8F1); border:1px solid var(--mimpi-border,#E7DECF);
	border-radius:24px; padding:16px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
	display:flex; flex-direction:column;
}
.mt-card:hover,.mt-card:focus{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(38,64,51,.5); outline:none; }
/* Gradient is the fallback; an image URL on the category line overrides it. */
.mt-card__img{
	height:220px; border-radius:18px; position:relative; overflow:hidden;
	background:var(--mimpi-grad-card); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.mt-dur{ position:absolute; left:14px; top:14px; background:rgba(19,30,24,.5); color:var(--mimpi-on-green,#f1ece1); font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; }
.mt-tag{ position:absolute; right:14px; top:14px; background:var(--mimpi-accent-soft,#E7DCC9); color:var(--mimpi-green,#264033); font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; }
.mt-card__body{ padding:16px 8px 4px; display:flex; flex-direction:column; flex:1; }
.mt-card__body h3{ font-family:var(--mimpi-font-head); font-weight:400; font-size:21px; margin:0 0 8px; }
.mt-card__body p{ font-size:13.5px; line-height:1.55; color:var(--mimpi-muted,#8A8578); margin:0 0 16px; flex:1; }
.mt-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mt-price{ font-size:22px; font-weight:800; color:var(--mimpi-green,#264033); white-space:nowrap; }
.mt-price span{ font-size:12px; font-weight:600; color:var(--mimpi-muted,#8A8578); display:block; line-height:1; }
.mt-view{ padding:11px 20px; font-size:13.5px; white-space:nowrap; }

/* Details popup */
.mt-detail__img{
	height:170px; border-radius:16px; margin:0 0 18px;
	background:var(--mimpi-grad-card) center/cover no-repeat;
}
.mt-detail__tag{ color:var(--mimpi-muted,#8A8578); font-size:14px; margin:0 0 20px; }
.mt-pkgs{ display:flex; flex-direction:column; gap:12px; }
.mt-pkg{
	display:flex; align-items:center; gap:16px;
	background:var(--mimpi-card,#FBF8F1); border:1px solid var(--mimpi-border,#E7DECF);
	border-radius:16px; padding:16px;
}
.mt-pkg__main{ flex:1; }
.mt-pkg__main h4{ font-size:15px; font-weight:700; margin:0 0 4px; font-family:var(--mimpi-font-body); }
.mt-pkg__main p{ font-size:13px; color:var(--mimpi-muted,#8A8578); margin:0 0 6px; line-height:1.5; }
.mt-pkg__dur{ font-size:11.5px; color:var(--mimpi-muted,#8A8578); background:var(--mimpi-bg,#F1ECE1); padding:3px 9px; border-radius:100px; }
.mt-pkg__side{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.mt-pkg__price{ font-size:19px; font-weight:800; color:var(--mimpi-green,#264033); }
.mt-book{ padding:10px 22px; font-size:13.5px; }

/* ---- Home band variant (mh-tcard fed by the same categories) ------------ */
.mh-tcard{ cursor:pointer; }
.mh-tcard .mh-price{ display:flex; flex-direction:column; line-height:1.1; }
.mh-tcard .mh-price__from{ font-size:11px; font-weight:600; color:var(--mimpi-muted,#8A8578); }
.mh-tcard__more{ font-size:13px; font-weight:700; color:var(--mimpi-green,#264033); white-space:nowrap; }

@media (max-width:1024px){ .mt-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
	.mt-wrap{ padding:24px 20px 12px; }
	.mt-head h1{ font-size:30px; }
	.mt-head p{ margin-bottom:22px; }
	.mt-grid{ grid-template-columns:1fr; }
	.mt-card__img{ height:180px; }
	.mt-pkg{ flex-direction:column; align-items:flex-start; }
	.mt-pkg__side{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}