/* =========================================================================
   MIMPI HEADSPA — WhatsApp booking form + booking popup
   Loaded by inc/booking-form.php and inc/booking-modal.php.
   Shared with mockup.html.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BOOKING FORM  ([mimpi_booking])
   ---------------------------------------------------------------------- */
.mb-book{ font-family:var(--mimpi-font-body); color:var(--mimpi-text,#24261F); }
.mb-intro{ color:var(--mimpi-muted,#8A8578); font-size:14px; margin:0 0 20px; }
.mb-warn{ background:#fff3cd; border:1px solid #ffe08a; color:#7a5b00; padding:12px 14px; border-radius:12px; font-size:13px; }
.mb-sec{ margin-bottom:22px; }
.mb-h{ font-family:var(--mimpi-font-body); font-size:15px; font-weight:800; margin:0 0 12px; color:var(--mimpi-text,#24261F); }

/* Category accordion */
.mb-cats{ display:flex; flex-direction:column; gap:10px; }
.mb-cat{ background:var(--mimpi-card,#FBF8F1); border:1px solid var(--mimpi-border,#E7DECF); border-radius:16px; overflow:hidden; }
.mb-cat.has-sel{ border:2px solid var(--mimpi-green,#264033); }
.mb-cat__head{
	width:100%; display:flex; align-items:center; gap:12px; cursor:pointer;
	background:none; border:0; padding:15px 16px; text-align:left; font-family:inherit; color:inherit;
}
.mb-cat__thumb{
	width:46px; height:46px; flex:none; border-radius:12px;
	background:var(--mimpi-grad-card) center/cover no-repeat;
}
.mb-cat__text{ flex:1; display:block; }
.mb-cat__name{ display:block; font-weight:700; font-size:15px; }
.mb-cat__tag{ display:block; font-size:12px; color:var(--mimpi-muted,#8A8578); margin-top:2px; }
.mb-cat__meta{ display:flex; align-items:center; gap:10px; flex:none; }
.mb-cat__from{ font-size:13px; font-weight:800; color:var(--mimpi-green,#264033); }
.mb-cat__chev{ width:18px; height:18px; color:var(--mimpi-muted,#8A8578); transition:transform .2s ease; }
.mb-cat.is-open .mb-cat__chev{ transform:rotate(180deg); }
.mb-cat__body{ display:none; padding:0 12px 12px; }
.mb-cat.is-open .mb-cat__body{ display:block; }

/* Packages */
.mb-pkg{ display:block; margin-top:8px; }
.mb-pkg input{ position:absolute; opacity:0; pointer-events:none; }
.mb-pkg__in{
	display:flex; align-items:center; gap:12px; cursor:pointer;
	background:var(--mimpi-bg,#F1ECE1); border:1px solid var(--mimpi-border-2,#E2D9C8);
	border-radius:13px; padding:12px 14px; transition:border-color .15s ease;
}
.mb-pkg__in:hover{ border-color:var(--mimpi-green,#264033); }
.mb-pkg input:checked + .mb-pkg__in{ border:2px solid var(--mimpi-green,#264033); padding:11px 13px; background:#fff; }
.mb-pkg__main{ flex:1; }
.mb-pkg__name{ display:block; font-weight:700; font-size:14px; }
.mb-pkg__desc{ display:block; font-size:12px; color:var(--mimpi-muted,#8A8578); margin-top:3px; line-height:1.45; }
.mb-pkg__side{ text-align:right; flex:none; }
.mb-pkg__dur{ display:block; font-size:11.5px; color:var(--mimpi-muted,#8A8578); }
.mb-pkg__price{ display:block; font-weight:800; color:var(--mimpi-green,#264033); font-size:15px; margin-top:2px; }

/* Chips (dates + times) */
.mb-dates,.mb-times{ display:flex; flex-wrap:wrap; gap:9px; }
.mb-dates{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.mb-dates::-webkit-scrollbar{ height:0; }
.mb-chip input{ position:absolute; opacity:0; pointer-events:none; }
.mb-chip > span{
	display:block; cursor:pointer; text-align:center;
	background:var(--mimpi-card,#FBF8F1); border:1px solid var(--mimpi-border,#E7DECF);
	border-radius:13px; padding:11px 16px; font-size:13.5px; font-weight:600; white-space:nowrap;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.mb-chip > span:hover{ border-color:var(--mimpi-green,#264033); }
.mb-chip input:checked + span{ background:var(--mimpi-green,#264033); color:var(--mimpi-on-green,#f1ece1); border-color:var(--mimpi-green,#264033); }
.mb-chip--date > span{ min-width:58px; padding:10px 12px; }
.mb-chip--date b{ display:block; font-size:17px; font-weight:800; line-height:1.2; }
.mb-chip--date i{ display:block; font-style:normal; font-size:10.5px; opacity:.75; }

/* Fields */
.mb-fields{ display:flex; flex-direction:column; gap:10px; }
.mb-fields input,.mb-fields textarea{
	width:100%; box-sizing:border-box; background:var(--mimpi-card,#FBF8F1);
	border:1px solid var(--mimpi-border,#E7DECF); border-radius:13px; padding:14px;
	font-size:14px; font-family:inherit; color:inherit; resize:vertical;
}
.mb-fields input:focus,.mb-fields textarea:focus{ outline:none; border-color:var(--mimpi-green,#264033); }
.mb-fields .mb-err{ border-color:#c0563f; background:#fdf3f1; }

/* Footer */
.mb-foot{ display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.mb-total{ display:flex; flex-direction:column; }
.mb-total span{ font-size:11px; color:var(--mimpi-muted,#8A8578); font-weight:600; }
.mb-total strong{ font-family:var(--mimpi-font-head); font-size:22px; color:var(--mimpi-green,#264033); }
.mb-go{ flex:1; min-width:220px; }
.mb-note{ font-size:11.5px; color:var(--mimpi-muted,#8A8578); margin:10px 0 0; text-align:center; }
@media (max-width:520px){ .mb-go{ width:100%; } }

/* -------------------------------------------------------------------------
   2. BOOKING SUCCESS PAGE  ([mimpi_booking_success])
   ---------------------------------------------------------------------- */
.mbs{ max-width:560px; margin:0 auto; padding:20px; text-align:center; }
.mbs__tick{
	width:96px; height:96px; border-radius:50%; margin:0 auto 24px;
	background:var(--mimpi-green,#264033); color:var(--mimpi-on-green,#f1ece1);
	display:flex; align-items:center; justify-content:center;
	animation:mbsPop .45s cubic-bezier(.2,.8,.3,1) both;
}
.mbs__tick svg{ width:46px; height:46px; }
@keyframes mbsPop{ from{ transform:scale(.85); opacity:0 } to{ transform:none; opacity:1 } }
.mbs__title{ font-family:var(--mimpi-font-head); font-weight:400; font-size:32px; margin:0 0 10px; }
.mbs__sub{ color:var(--mimpi-text-2,#5c5a51); line-height:1.6; margin:0 0 22px; font-size:15px; }
.mbs__ref{
	display:inline-flex; align-items:center; gap:10px;
	background:var(--mimpi-accent-soft,#E7DCC9); color:var(--mimpi-green,#264033);
	border-radius:100px; padding:9px 16px 9px 18px; margin:0 0 26px;
}
.mbs__ref-label{ font-size:12px; font-weight:600; letter-spacing:.3px; }
.mbs__ref-code{
	font-family:var(--mimpi-font-head,serif); font-size:17px; font-weight:400; letter-spacing:1px;
	background:var(--mimpi-green,#264033); color:var(--mimpi-on-green,#f1ece1);
	padding:3px 12px; border-radius:100px;
}
.mbs__blocked{
	background:#fff3cd; border:1px solid #ffe08a; color:#7a5b00;
	padding:13px 15px; border-radius:14px; font-size:13.5px; line-height:1.5;
	margin:0 0 20px; text-align:left;
}
.mbs__card{
	background:var(--mimpi-card,#FBF8F1); border:1px solid var(--mimpi-border,#E7DECF);
	border-radius:20px; padding:8px 18px; text-align:left; margin-bottom:24px;
}
.mbs__row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--mimpi-divider,#ece4d4); font-size:14px; }
.mbs__row:last-child{ border-bottom:0; }
.mbs__row span{ color:var(--mimpi-muted,#8A8578); flex:none; }
.mbs__row b{ font-weight:700; text-align:right; }
.mbs__row--total b{ color:var(--mimpi-green,#264033); font-size:16px; }
.mbs__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mbs__note{ font-size:12.5px; color:var(--mimpi-muted,#8A8578); margin:22px 0 0; }
@media (max-width:768px){
	.mbs__title{ font-size:26px; }
	.mbs__tick{ width:80px; height:80px; margin-bottom:20px; }
	.mbs__tick svg{ width:38px; height:38px; }
	.mbs__actions .mimpi-btn{ width:100%; }
}

/* -------------------------------------------------------------------------
   3. MODAL SHELL  (booking popup + treatment package popup)
   ---------------------------------------------------------------------- */
.mimpi-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:24px; }
.mimpi-modal[hidden]{ display:none; }
.mimpi-modal__backdrop{ position:absolute; inset:0; background:rgba(19,30,24,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.mimpi-modal__panel{
	position:relative; width:100%; max-width:620px; max-height:90vh; overflow-y:auto;
	background:var(--mimpi-bg,#F1ECE1); border-radius:24px; padding:30px;
	box-shadow:0 40px 90px -30px rgba(19,30,24,.6);
	animation:mimpiModalIn .22s ease both;
}
@keyframes mimpiModalIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.mimpi-modal__title{ font-family:var(--mimpi-font-head); font-weight:400; font-size:26px; margin:0 0 6px; }
.mimpi-modal__close{
	position:absolute; top:14px; right:14px; z-index:2;
	width:40px; height:40px; border-radius:50%; cursor:pointer;
	border:1px solid var(--mimpi-border,#E7DECF); background:var(--mimpi-card,#FBF8F1);
	color:var(--mimpi-green,#264033); display:flex; align-items:center; justify-content:center;
}
.mimpi-modal__close:hover{ background:var(--mimpi-accent-soft,#E7DCC9); }
.mimpi-modal__close svg{ width:20px; height:20px; }
body.mimpi-modal-open{ overflow:hidden; }
@media (max-width:768px){
	.mimpi-modal{ padding:0; }
	.mimpi-modal__panel{ max-width:none; max-height:100vh; height:100vh; border-radius:0; padding:60px 18px 28px; }
}