/* =====================================================================
 * Front-end single service page — modern redesign
 * mpwpb-service-page-modern.css
 *
 * Visual redesign of the "static" front-end template's hero, tab bar,
 * Overview/FAQ/Details sections. Reuses the existing markup produced by
 * Frontend/MPWPB_Static_Template.php and templates/themes/static.php —
 * only new sub-sections added there (stats/how-it-works/checklist/
 * guarantee/hours) are net-new markup; the FAQ accordion's real
 * slideToggle behavior (assets/frontend/mpwpb_registration.js:751-756)
 * and the booking widget/popup are completely untouched by this file.
 * Uses the plugin's own configurable --mpwpb_color_theme (default
 * #00685f, a dark teal) as the accent, so this adapts to whatever brand
 * color a site has configured rather than hardcoding one.
 * Scoped under .mpwpb-static-template so the (separate, older)
 * .mpwpb-default-template layout is not affected.
 * ===================================================================== */

.mpwpb-static-template{--mpwpb-sp-radius:14px;}
.mpwpb-static-template *,
.mpwpb-static-template *::before,
.mpwpb-static-template *::after{box-sizing:border-box;}

/* -------------------------------------------------------------------- *
 *  Hero
 * -------------------------------------------------------------------- */
.mpwpb-static-template.mpwpb_registration > header{
	background-color:var(--mpwpb_color_theme);background-size:cover;background-position:center;position:relative;overflow:hidden;
}
.mpwpb-static-template.mpwpb_registration > header::before{
	background:linear-gradient(120deg,var(--mpwpb_color_theme_ee,rgba(0,0,0,.75)) 20%,var(--mpwpb_color_theme_cc,rgba(0,0,0,.55)) 70%);
}
.mpwpb-static-template .mpwpb-hero-eyebrow{
	display:inline-flex;align-items:center;gap:8px;color:#fff;
	font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
	background:var(--mpwpb_color_theme);padding:7px 16px;border-radius:999px;margin-bottom:4px;
}
.mpwpb-static-template.mpwpb_registration > header h2{
	font-size:clamp(28px,4vw,44px);font-weight:800;margin:14px 0 10px;line-height:1.15;max-width:640px;
}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-subtext{
	max-width:520px;margin:0 0 18px;color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.6;
}
.mpwpb-static-template .ratings{
	background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.3);
	backdrop-filter:blur(4px);font-size:13px !important;
}
.mpwpb-static-template.mpwpb_registration > header ul.features{
	display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;column-gap:32px;margin:8px 0 22px !important;max-width:none;
}
.mpwpb-static-template.mpwpb_registration > header ul.features li{
	display:flex;align-items:center;gap:10px;font-size:13.5px !important;font-weight:700;margin:0 !important;white-space:nowrap;
}
.mpwpb-static-template.mpwpb_registration > header ul.features li i{
	display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;
	border-radius:999px;border:1.5px solid rgba(45,212,191,.6);background:rgba(45,212,191,.12);
	font-size:11px;margin-right:0 !important;color:#2dd4bf;
}
.mpwpb-static-template.mpwpb_registration > header .view_more{
	font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;opacity:.9;cursor:pointer;
}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-rating-row{
	display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:13px;
}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-stars{color:#fbbf24;font-size:13px;letter-spacing:1px;}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-stars .fa-star,
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-stars .fa-star-half-alt{color:#fbbf24;}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-stars .fa-star.far{color:rgba(255,255,255,.35);}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-rating-value{color:#fff;font-size:14px;}
.mpwpb-static-template.mpwpb_registration > header .mpwpb-hero-rating-text{color:rgba(255,255,255,.65);}

@media(max-width:640px){
	.mpwpb-static-template.mpwpb_registration > header ul.features{column-gap:20px;row-gap:10px;}
}

/* -------------------------------------------------------------------- *
 *  Tab bar — reused .mpwpb-details-page-tab / nav markup, restyled as a
 *  sticky pill switcher; the active tab is now driven by real JS
 *  (mpwpb-service-page-modern.js) instead of the previously-dead handler.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .mpwpb-details-page-tab,
.mpwpb-static-template nav.mpwpb-details-page-tab{
	position:sticky;top:8px;z-index:0;background:#fff !important;border:1px solid #eef1f6;
	border-radius:12px;box-shadow:0 1px 3px rgba(15,23,42,.06);padding:6px !important;margin-bottom:24px !important;
}
.mpwpb-static-template nav ul{gap:4px !important;}
.mpwpb-static-template nav ul li{flex:1;font-size:13.5px !important;}
.mpwpb-static-template nav ul li a{
	border-radius:9px;padding:10px 14px !important;font-weight:600;color:#475569;transition:.15s;
}
.mpwpb-static-template nav ul li a:hover{background:#f8fafc;color:var(--mpwpb_color_theme);}
.mpwpb-static-template nav ul li.active a,
.mpwpb-static-template nav ul li a.mpwpb-tab-active{
	background-color:var(--mpwpb_color_theme) !important;color:#fff !important;
}

/* Sidebar sticks on scroll the same way the tab bar above does. Only at
   >=1024px, where .main/.sidebar actually sit side by side (see
   .mpwpb_registration main in mpwpb_registration.css) -- align-self:flex-start
   is required alongside position:sticky here because that flex row's default
   align-items:stretch would otherwise stretch .sidebar to .main's full height,
   leaving no room for it to visibly stick as the page scrolls.
   z-index is required too: the "Our Past Work" gallery (#service-gallery) is a
   sibling that starts right after </main> closes, full-width. While .main's
   content (FAQ/Details) is short, there's a scroll range where <main> hasn't
   fully scrolled past yet (so .sidebar is still stuck) while the gallery below
   has already scrolled into the same viewport. Without an explicit z-index,
   .sidebar (position:sticky, z-index:auto) can lose to the carousel's own
   internally-positioned stage/items, which sit later in DOM order — so the
   gallery painted over the still-stuck sidebar. An explicit z-index always
   beats a z-index:auto sibling regardless of DOM order, so this fixes it. */
@media (min-width:1024px){
	.mpwpb-static-template .sidebar{position:sticky;top:8px;align-self:flex-start;z-index:5;}
}

/* -------------------------------------------------------------------- *
 *  Section shells
 * -------------------------------------------------------------------- */
.mpwpb-static-template section#service-overview,
.mpwpb-static-template section#service-faq,
.mpwpb-static-template section#service-details,
.mpwpb-static-template section#service-reviews{scroll-margin-top:80px;}
.mpwpb-static-template section#service-overview > h2,
.mpwpb-static-template section#service-faq > h2,
.mpwpb-static-template section#service-details > h2,
.mpwpb-static-template section#service-reviews .mpwpb-reviews-head > h2{
	font-size:19px !important;font-weight:800;color:var(--mpwpb_color_theme) !important;border-bottom:0 !important;margin-bottom:10px !important;
}
section#service-overview ol{
	padding-left:0px !important;
	margin:10px 0 0 0 !important;
}
#service-staff h2{font-size:16px !important;}

/* Title + "Write a Review" trigger, same row, button pinned top-right. */
.mpwpb-reviews-head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;
}
.mpwpb-write-review-btn{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:none;border-radius:999px;
	background:var(--mpwpb_color_theme);color:#fff;font-size:12.5px;font-weight:700;
	padding:9px 16px;cursor:pointer;transition:.15s;
}
.mpwpb-write-review-btn:hover{filter:brightness(.92);}

/* -------------------------------------------------------------------- *
 *  Reviews: approved-review list + the logged-in submission form
 * -------------------------------------------------------------------- */
.mpwpb-reviews-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.mpwpb-no-reviews{font-size:13.5px;color:#8892a4;}
.mpwpb-review-item{border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius);background:#fff;padding:16px;}
.mpwpb-review-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.mpwpb-review-stars{color:#fbbf24;font-size:13px;letter-spacing:1px;}
.mpwpb-review-stars .far.fa-star{color:#e2e8f0;}
.mpwpb-review-author{font-size:13.5px;font-weight:700;color:#1e293b;}
.mpwpb-review-date{font-size:12px;color:#94a3b8;margin-left:auto;}
.mpwpb-review-title{margin:0 0 4px;font-size:14px;font-weight:700;color:#1e293b;}
.mpwpb-review-item h4.mpwpb-review-title{font-size:15px !important;}
.mpwpb-review-content{margin:0;font-size:13.5px;color:#475569;line-height:1.6;}

.mpwpb-review-form-wrap{padding-top:2px;}
.mpwpb-review-login-notice{font-size:13.5px;color:#64748b;}
.mpwpb-review-login-notice a{color:var(--mpwpb_color_theme);font-weight:700;}

/* -------------------------------------------------------------------- *
 *  "Write a Review" popup -- overrides the generic .mpwpb_popup chrome
 *  scoped to .mpwpb-review-popup only so the gallery lightbox / features
 *  popup elsewhere in this template keep their own look untouched.
 *  !important is required throughout this block: mpwpb_registration.css
 *  has bare, UNSCOPED rules (.mpwpb_popup_header{background-color:var(
 *  --mpwpb_color_theme)}, .mpwpb_popup_body{background:#f5f7fa}) that
 *  apply to every popup on the page, and mp_global's shared stylesheet
 *  styles every <label> and .mpwpb_popup_main_area via `div.mpwpb_style
 *  label` / `div.mpwpb_popup .mpwpb_popup_main_area` -- selectors that
 *  beat a plain class-only override like `.mpwpb-review-popup X` on
 *  specificity alone (type+class outranks two classes), independent of
 *  source order. Without !important here, the base 700px width, the
 *  theme-green header, the #f5f7fa body tint, and label{align-items:
 *  center} (which squashes the Title/Review fields to a centered column
 *  instead of stretching them) all silently win. */
.mpwpb-review-popup .mpwpb_popup_main_area{
	min-width:0 !important;width:92vw !important;max-width:440px !important;
	min-height:0 !important;max-height:90vh !important;
	background:#fff !important;border:none !important;border-radius:16px !important;
	box-shadow:0 20px 50px rgba(15,23,42,.25) !important;
}
.mpwpb-review-popup .mpwpb_popup_header{
	display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
	padding:18px 22px !important;border-bottom:1px solid #e5e9f0 !important;background:#fff !important;
}
.mpwpb-review-popup .mpwpb_popup_header h3{margin:0 !important;font-size:17px !important;font-weight:800 !important;color:#1e293b !important;}
.mpwpb-review-popup .mpwpb_popup_close{
	position:static !important;top:auto !important;right:auto !important;width:26px !important;height:26px !important;
	background:transparent !important;color:#94a3b8 !important;font-size:15px !important;border-radius:50% !important;
}
.mpwpb-review-popup .mpwpb_popup_close:hover{background:#f1f5f9 !important;color:#1e293b !important;}
.mpwpb-review-popup .mpwpb_popup_body{padding:20px 22px !important;background:#fff !important;}

.mpwpb-review-rating-group{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:8px !important;}
.mpwpb-review-rating-label{font-size:12.5px !important;font-weight:700 !important;color:#64748b !important;text-transform:uppercase !important;letter-spacing:.03em !important;}

#mpwpb-review-form{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:18px !important;}
.mpwpb-star-input{font-size:26px !important;color:#d8dee8 !important;cursor:pointer;letter-spacing:8px;}
.mpwpb-star-input .fas.fa-star{color:#fbbf24 !important;}
.mpwpb-review-field{
	display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:6px !important;
	font-size:12.5px !important;font-weight:700 !important;color:#64748b !important;text-transform:uppercase !important;letter-spacing:.03em !important;
}
.mpwpb-review-field input,
.mpwpb-review-field textarea{
	font-family:inherit;font-size:13.5px !important;font-weight:400 !important;text-transform:none !important;letter-spacing:normal !important;color:#1e293b !important;
	width:auto !important;min-height:0 !important;
	border:1px solid transparent !important;border-radius:10px !important;background:#f1f4f8 !important;padding:11px 13px !important;resize:vertical;
}
.mpwpb-review-field input::placeholder,
.mpwpb-review-field textarea::placeholder{color:#94a3b8;}
.mpwpb-review-field input:focus,
.mpwpb-review-field textarea:focus{outline:none !important;border-color:var(--mpwpb_color_theme) !important;background:#fff !important;}

.mpwpb-review-actions{
	display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
	margin-top:4px;padding-top:18px;border-top:1px solid #e5e9f0;
}
.mpwpb-review-cancel,
.mpwpb-review-submit{
	border-radius:10px;font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer;transition:.15s;
}
.mpwpb-review-cancel{background:#fff;border:1px solid var(--mpwpb_color_theme);color:var(--mpwpb_color_theme);}
.mpwpb-review-cancel:hover{background:#f6f8ff;}
.mpwpb-review-submit{border:none;background:var(--mpwpb_color_theme);color:#fff;}
.mpwpb-review-submit:hover{filter:brightness(.92);}
.mpwpb-review-submit:disabled{opacity:.6;cursor:default;}
.mpwpb-review-msg{font-size:13px;}
.mpwpb-review-msg.success{color:#16a34a;}
.mpwpb-review-msg.error{color:#dc2626;}

/* Stats cards */
.mpwpb-overview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0;}
/* "Bookings completed" is omitted entirely (not just blanked) when there are
   no bookings yet -- the remaining two stats then split the row evenly. */
.mpwpb-overview-stats.mpwpb-overview-stats--two{grid-template-columns:repeat(2,1fr);}
.mpwpb-overview-stat{
	text-align:center;padding:16px 10px;border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius);background:#E5EEFF;
}
.mpwpb-overview-stat-num{margin:0;font-size:20px;font-weight:800;color:var(--mpwpb_color_theme);}
.mpwpb-overview-stat-label{margin:4px 0 0;font-size:11.5px;color:#8892a4;}

.mpwpb-overview-subhead{font-size:14.5px;font-weight:700;color:#1e293b;margin:28px 0 12px;}

/* How it works */
.mpwpb-how-it-works{border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius);overflow:hidden;background:#fff;}
.mpwpb-how-step{display:flex;gap:14px;padding:16px;border-bottom:1px solid #f1f4f9;}
.mpwpb-how-step:last-child{border-bottom:0;}
.mpwpb-how-step-num{
	flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:999px;background:var(--mpwpb_color_theme);color:#fff;font-weight:800;font-size:13px;
}
.mpwpb-how-step-title{margin:0;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#1e293b;}
.mpwpb-how-step-title i{color:var(--mpwpb_color_theme);font-size:13px;}
.mpwpb-how-step-desc{margin:4px 0 0;font-size:13px;color:#64748b;line-height:1.5;}

/* Included checklist */
.mpwpb-included-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.mpwpb-included-item{
	display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e5e9f0;border-radius:10px;background:#fff;
	font-size:13.5px;color:#334155;
}
.mpwpb-included-item i{
	flex:0 0 auto;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:999px;background:var(--mpwpb_color_theme_88,rgba(0,0,0,.1));color:var(--mpwpb_color_theme);font-size:10px;
}

/* Guarantee banner */
.mpwpb-guarantee-banner{
	display:flex;align-items:center;gap:16px;margin-top:28px;padding:18px;border-radius:var(--mpwpb-sp-radius);
	background:var(--mpwpb_color_theme);color:#fff;
}
.mpwpb-guarantee-icon{
	flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:999px;background:rgba(255,255,255,.16);font-size:19px;
}
.mpwpb-guarantee-title{margin:0;font-size:14px;font-weight:800;}
.mpwpb-guarantee-text{margin:3px 0 0;font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.5;}

/* Hours */
.mpwpb-hours-strip{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;
	padding:13px 16px;border:1px solid #e5e9f0;border-radius:12px;background:#E5EEFF;
}
.mpwpb-hours-open{margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#334155;}
.mpwpb-hours-open i{color:var(--mpwpb_color_theme);}
.mpwpb-hours-time{margin:0;font-size:13px;color:#64748b;}

/* -------------------------------------------------------------------- *
 *  FAQ — reused .mpwpb-serivice-faq / .faq-header / .faq-content markup
 *  and the existing slideToggle behavior, restyled as row cards with a
 *  circular +/- badge.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .mpwpb-serivice-faq{
	border:1px solid #e5e9f0;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:10px;
}
.mpwpb-static-template .mpwpb-serivice-faq .faq-header{
	display:flex;align-items:center;gap:12px;padding:15px 16px !important;margin:0 !important;font-size:13.5px;font-weight:700;color:#1e293b;
}
.mpwpb-static-template .mpwpb-serivice-faq .faq-header i{
	flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:999px;background:var(--mpwpb_color_theme_88,rgba(0,0,0,.1));color:#fff;font-size:10px;margin:0 !important;
}
.mpwpb-static-template .mpwpb-serivice-faq .faq-content{
	padding:0 16px 16px 50px !important;font-size:13px;color:#64748b;line-height:1.6;
}

/* -------------------------------------------------------------------- *
 *  Details — free-text WYSIWYG block; just tighten typography.
 * -------------------------------------------------------------------- */
.mpwpb-static-template #service-details{font-size:13.5px;color:#475569;line-height:1.6;}
#service-details h3{ font-size: 16px !important; margin: 15px 0; }

/* -------------------------------------------------------------------- *
 *  "Our Past Work" gallery — images uploaded via the admin "Gallery
 *  Images" field (mpwpb_slider_images), rendered 4-up and driven as an
 *  owl carousel (mp_global's bundled Owl Carousel 2, already enqueued
 *  plugin-wide) so any images beyond the first 4 stay reachable via the
 *  prev/next controls instead of growing the section's height. Default
 *  owl nav/dots are hidden by the shared .mpwpb_style .owl-nav rule
 *  (mp_global/assets/mp_style/mpwpb_plugin_global.css) — only the custom
 *  round prev/next buttons here are shown, same as the date carousel.
 * -------------------------------------------------------------------- */
/* Now a sibling of <main> (moved there in static.php), not a flex child of
   it -- <main> itself is the .main(60%)/.sidebar(40%) flex row (see
   .mpwpb_registration main in mpwpb_registration.css), and putting this
   inside that row as a 3rd item (even with flex-wrap) knocked .sidebar onto
   its own line too, since .main + gap + .sidebar's hypothetical size already
   slightly exceeds 100% before shrinking is applied. Sitting outside <main>
   avoids that flex math entirely; the same max-width/centering/padding as
   .mpwpb_registration main is repeated here so it still lines up visually. */
.mpwpb-static-template .mpwpb-gallery-section{
	max-width:1440px;width:100%;margin:28px auto 0;padding:0 10px;box-sizing:border-box;scroll-margin-top:80px;
}
.mpwpb-static-template .mpwpb-gallery-head{
	display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.mpwpb-static-template .mpwpb-gallery-section h2{
	font-size:19px !important;font-weight:800;color:var(--mpwpb_color_theme) !important;border-bottom:0 !important;margin:0 !important;
}
.mpwpb-static-template .mpwpb-gallery-sub{margin:4px 0 0;font-size:13px;color:#64748b;}
.mpwpb-static-template .mpwpb-gallery-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:2px;}
.mpwpb-static-template .mpwpb-gallery-nav .prev,
.mpwpb-static-template .mpwpb-gallery-nav .next{
	width:30px;height:30px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;border:1px solid #e5e9f0;color:var(--mpwpb_color_theme);font-size:12px;cursor:pointer;transition:.15s;
}
.mpwpb-static-template .mpwpb-gallery-nav .prev:hover,
.mpwpb-static-template .mpwpb-gallery-nav .next:hover{background:#F0FDFA;}
/* mpwpb-owl-carousel is a custom stand-in for the library's own
   ".owl-carousel" class (never added to the markup here, matching the
   existing .mpwpb_date_carousel widget in mpwpb_registration.css) — the
   library's float-based layout rules are all scoped under ".owl-carousel"
   so they never apply; the same flex-based replacement rules used there
   are repeated here for this section. */
.mpwpb-static-template .mpwpb-gallery-section .mpwpb-owl-carousel{overflow:hidden;}
.mpwpb-static-template .mpwpb-gallery-section .mpwpb-owl-carousel .owl-stage{display:flex;}
.mpwpb-static-template .mpwpb-gallery-section .mpwpb-owl-carousel .owl-item{display:flex;padding:0 6px;}
.mpwpb-static-template .mpwpb-gallery-item{
	position:relative;width:100%;border-radius:var(--mpwpb-sp-radius);overflow:hidden;aspect-ratio:4/3;
	border:1px solid #e5e9f0;background:#f1f4f9;cursor:zoom-in;
}
.mpwpb-static-template .mpwpb-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;}
.mpwpb-gallery-item img:not(.mp_wp_editor img) {height: 100% !important; }
.mpwpb-static-template .mpwpb-gallery-item:hover img{transform:scale(1.05);}
.mpwpb-static-template .mpwpb-gallery-zoom{
	position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:rgba(15,23,42,.55);color:#fff;font-size:11px;opacity:0;transition:opacity .15s;
}
.mpwpb-static-template .mpwpb-gallery-item:hover .mpwpb-gallery-zoom{opacity:1;}

/* -------------------------------------------------------------------- *
 *  "Our Past Work" click-to-zoom lightbox — reuses the plugin's existing
 *  generic popup mechanism (.mpwpb_popup + data-target-popup/data-popup,
 *  document-delegated open/close in mp_global/assets/mp_style/
 *  mpwpb_plugin_global.js) purely for show/hide; everything below just
 *  restyles that mechanism's default 500-700px bordered white card
 *  (meant for text content) into a full-viewport dark image viewer.
 * -------------------------------------------------------------------- */
.mpwpb-gallery-lightbox .mpwpb_popup_main_area{
	min-width:0;max-width:min(92vw,1100px);width:auto;min-height:0;max-height:90vh;height:auto;
	background:transparent;border:0;box-shadow:none;
}
.mpwpb-gallery-lightbox .mpwpb_popup_close{
	top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(15,23,42,.65);font-size:16px;
	box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.mpwpb-gallery-lightbox .mpwpb_popup_close:hover{background:rgba(15,23,42,.85);}
.mpwpb-gallery-lightbox-body{position:relative;display:flex;align-items:center;justify-content:center;}
.mpwpb-gallery-lightbox-img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:8px;display:block;}
/* Sit just outside the image itself (not overlapping it) whenever there's
   room, so the dark-on-dark/light-on-light contrast of the button never
   depends on what's near the edge of the photo underneath. */
.mpwpb-gallery-lightbox-prev,
.mpwpb-gallery-lightbox-next{
	position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:rgba(15,23,42,.65);color:#fff;font-size:16px;cursor:pointer;transition:.15s;
	box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.mpwpb-gallery-lightbox-prev:hover,
.mpwpb-gallery-lightbox-next:hover{background:rgba(15,23,42,.85);}
.mpwpb-gallery-lightbox-prev{left:-56px;}
.mpwpb-gallery-lightbox-next{right:-56px;}
@media(max-width:900px){
	.mpwpb-gallery-lightbox-prev{left:10px;}
	.mpwpb-gallery-lightbox-next{right:10px;}
}
.mpwpb-gallery-lightbox-counter{margin-top:10px;text-align:center;color:rgba(255,255,255,.8);font-size:13px;}

/* -------------------------------------------------------------------- *
 *  "Our services" sidebar tree (templates/registration/
 *  category_selection_static.php). Leaf rows keep the classic
 *  .mpwpb_item_box class/data-attributes so the existing click handler
 *  (mpwpb_registration.js:290-309) still opens the booking popup/drawer
 *  and simulates the real selection click inside it — this stylesheet
 *  and mpwpb-service-tree.js only add the always-expanded tree look and
 *  its own local expand/collapse state, nothing selection-related.
 * -------------------------------------------------------------------- */
/* Bleeds to the card's edges -- .mpwpb_static (the white card, mpwpb_registration.css)
   has padding:15px, so a matching -15px on left/right/top cancels that inset
   exactly instead of leaving a gap around this banner. Top corners are
   reduced to nest inside the card's own 10px radius/1px border; bottom
   corners are square since this banner's bottom edge sits mid-card, not
   against a rounded card edge. */
.mpwpb-tree-header{
	margin:-15px -15px 14px -15px;padding:16px 18px;
	border-radius:9px 9px 0 0;background:var(--mpwpb_color_theme);
}
.mpwpb-tree-header h4{margin:0;font-size:16px;font-weight:800;color:#fff;padding-bottom:0px !important;}
.mpwpb-tree-header p{margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.8);line-height:1.4;}
.mpwpb_static_area .mpwpb_static_registration h4{padding-bottom:0px !important;}

.mpwpb-service-tree{display:flex;flex-direction:column;gap:6px;padding-right:10px;}
.mpwpb-tree-row{
	display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:9px;cursor:pointer;user-select:none;
}
.mpwpb-tree-cat-row{font-weight:700;color:#1e293b;background:#F0FDFA;border:1px solid #ede7e7;margin-top:5px;}
.mpwpb-tree-cat-row:hover{background:#F0FDFA;}
.mpwpb-tree-folder-icon{color:var(--mpwpb_color_theme);font-size:14px;flex:0 0 auto;}
.mpwpb-tree-name{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpwpb-tree-count{flex:0 0 auto;font-size:11px;color:#94a3b8;font-weight:600;}
.mpwpb-tree-chevron{flex:0 0 auto;font-size:11px;color:#94a3b8;transition:transform .15s;}
.mpwpb-tree-cat.is-open > .mpwpb-tree-cat-row .mpwpb-tree-chevron,
.mpwpb-tree-subcat.is-open > .mpwpb-tree-subcat-row .mpwpb-tree-chevron{transform:rotate(180deg);}
.mpwpb-tree-children{display:none;padding-left:0px;margin-top:2px;}
/* Continuous vertical guide running the full height of everything nested
   under this category (own services + sub-categories alike) -- anchored to
   the category row above via this border, rather than each row drawing its
   own disconnected stub, so it visibly connects back up to the category. */
.mpwpb-tree-cat.is-open > .mpwpb-tree-children{
	display:block;margin-left:15px;padding-left:14px;border-left:1px dotted #d5d7d7;
}
.mpwpb-tree-subcat.is-open > .mpwpb-tree-children{display:block;}

.mpwpb-tree-subcat-row{position:relative;font-size:13px;font-weight:600;color:#334155;border:1px solid #ddd;margin-top:10px;margin-bottom:10px;padding:8px 20px 10px 10px;background:#F0FDFA;}
.mpwpb-tree-subcat-row:hover{background:#d5f7ef;}
/* Horizontal tick on the LEFT side of the row, reaching back to meet the
   vertical guide line on .mpwpb-tree-children above (left:-14px == the
   guide's own position, since that container's padding-left is 14px). */
.mpwpb-tree-subcat-row::before{
	content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:14px;height:2px;background:#d5d7d7;
}

.mpwpb-tree-service{
	/* Everything (checkbox, name, duration, price, tap-hint) now sits on a
	   single line, so plain vertical centering is correct here. line-height:1
	   here overrides whatever taller line-height this row would otherwise
	   inherit, so it can't throw off the centering of any child text/icon. */
	display:flex;align-items:center;line-height:1;gap:10px;padding:11px 12px;margin-bottom:6px;
	border-bottom:1px solid #e5e9f0;border-radius:10px;background:#fff;cursor:pointer;transition:.15s;
}
.mpwpb-tree-service:last-child{margin-bottom:0;}
.mpwpb-tree-service:hover{border-color:var(--mpwpb_color_theme);background:var(--mpwpb_color_theme_88,#f8fafc);}
.mpwpb-tree-service.mpActive{border-color:var(--mpwpb_color_theme);background:var(--mpwpb_color_theme_88,#f6fbfa);}

/* Quick-add checkbox -- proxies to the real service's own button
   (mpwpb-service-tree.js), state mirrored via the .mpActive class this
   script adds to .mpwpb-tree-service itself. */
.mpwpb-tree-checkbox{
	position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;
	border:2px solid #cbd5e1;background:#fff;transition:.15s;
}
.mpwpb-tree-service.mpActive .mpwpb-tree-checkbox{
	border-color:var(--mpwpb_color_theme);background:var(--mpwpb_color_theme);
}
.mpwpb-tree-service.mpActive .mpwpb-tree-checkbox::after{
	content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:#fff;font-size:10px;
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

.mpwpb-tree-service-main{flex:0 1 auto;min-width:0;display:flex;align-items:center;line-height:1;gap:8px;overflow:hidden;}
.mpwpb-tree-service-icon{flex:0 0 auto;color:var(--mpwpb_color_theme);font-size:13px;line-height:1;}
.mpwpb-tree-service-name{flex:0 1 auto;min-width:0;font-size:13px;font-weight:600;line-height:1.3;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:normal;}
span.mpwpb-tree-service-name{padding-left:5px;}
/* line-height:1 on both the wrapper and the icon keeps the clock glyph
   from sitting a few px higher/lower than the "1h 30m" text baseline --
   the default line-height a browser gives a small icon font can otherwise
   throw it out of line with plain text next to it. */
.mpwpb-tree-duration{flex:0 0 auto;display:inline-flex;align-items:center;line-height:1;gap:4px;font-size:10.5px;color:#94a3b8;white-space:nowrap;}
/* The icon is turned into its own small centered flex box (fixed width/
   height, glyph centered inside via its own flex context) rather than
   relying on inline-text metrics -- icon fonts carry built-in
   ascent/descent padding that inline/vertical-align tweaks don't fully
   cancel out, which is what kept nudging it off the "1h 30m" baseline. */
.mpwpb-tree-duration i{
	color:#94a3b8 !important;font-size:8px;line-height:1;
	display:inline-flex !important;align-items:center;justify-content:center;
	width:9px;height:9px;flex:0 0 auto;
}

/* margin-left:auto pushes price + tap-hint flush right on the same line
   as the checkbox/name/duration, instead of stacking below them. */
.mpwpb-tree-service-side{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:8px;}
.mpwpb-tree-price{font-size:13px;font-weight:800;color:var(--mpwpb_color_theme);white-space:nowrap;}
.mpwpb-tree-tap-hint{font-size:10px;color:#94a3b8;white-space:nowrap;}

/* Sidebar-wide CTA below the tree -- opens the same booking popup as tapping
   any individual service (data-target-popup is handled generically by
   mp_global/assets/mp_style/mpwpb_plugin_global.js, no dedicated JS needed
   here). */
.mpwpb-tree-cta-footer{margin-top:20px;text-align:center;}
.mpwpb-tree-cta-btn{
	display:block;width:100%;border:none;border-radius:15px !important;background:var(--mpwpb_color_theme);
	color:#fff;font-size:15px;font-weight:700;padding:14px 20px;cursor:pointer;transition:.15s;
}
.mpwpb-tree-cta-btn:hover{filter:brightness(0.92);}

/* Trust badges under the CTA -- static reassurance copy, no interaction. */
.mpwpb-tree-trust{
	margin-top:14px;border:none;border-radius:10px;background:#fff;overflow:hidden;
}
.mpwpb-tree-trust-item{
	display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:12.5px;font-weight:600;color:#475569;
}
.mpwpb-tree-trust-item + .mpwpb-tree-trust-item{border-top:1px solid #e5e9f0;}
.mpwpb-tree-trust-item i{flex:0 0 auto;width:16px;text-align:center;color:var(--mpwpb_color_theme);font-size:13px;}

/* No click action anymore -- description shows as a small CSS tooltip on
   hover instead (mpwpb-booking-tree.js sets data-tooltip to the text). */
.mpwpb-tree-view-details{
	position:relative;display:inline-block;cursor:help;
	color:#94a3b8;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;
	transition:color .15s;
}
.mpwpb-tree-view-details:hover{color:var(--mpwpb_color_theme);}
/* :not([data-tooltip=""]) guards against an empty box with no text ever
   showing (e.g. if a description somehow came through blank). */
.mpwpb-tree-view-details:not([data-tooltip=""]):hover::after{
	content:attr(data-tooltip);
	position:absolute;left:0;top:100%;margin-top:6px;z-index:20;
	display:block;width:max-content;max-width:220px;white-space:normal;
	background:#1e293b;color:#fff !important;font-size:11px;font-weight:400;line-height:1.4;
	text-decoration:none;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);
	pointer-events:none;
}

.mpwpb-service-tree--flat .mpwpb-tree-service{margin-bottom:8px;}

@media(max-width:640px){
	.mpwpb-overview-stats,
	.mpwpb-overview-stats.mpwpb-overview-stats--two,
	.mpwpb-included-grid{grid-template-columns:1fr;}
}

@media only screen and (min-width: 10px) {
	div.mpwpb_item_box {
		border: none;
	}
}

/* -------------------------------------------------------------------- *
 *  Native checkout, embedded in the booking popup's own "Checkout" step
 *  (.mpwpb_order_proceed_area) instead of a separate page -- only active
 *  when Custom Payment is enabled and WooCommerce is off
 *  (assets/frontend/mpwpb_registration.js, mpwpb_load_native_checkout_form).
 * -------------------------------------------------------------------- */
.mpwpb-checkout-embed{display:flex;flex-direction:column;gap:16px;}

.mpwpb-checkout-slot{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius,14px);background:#fff;padding:16px 18px;
	box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 10px rgba(15,23,42,.05);
}
.mpwpb-checkout-slot-main{flex:1 1 auto;min-width:0;}
.mpwpb-checkout-slot-eyebrow{
	display:block;margin-bottom:6px;
	font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mpwpb_color_theme);
}
.mpwpb-checkout-slot-change{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;
	font-size:12.5px;font-weight:600;color:var(--mpwpb_color_theme);padding:6px 8px;white-space:nowrap;
}
.mpwpb-checkout-slot-change:hover{text-decoration:underline;}
.mpwpb-checkout-slot-change i{font-size:11px;}
.mpwpb-checkout-slot-date{font-size:17px;font-weight:800;color:#1e293b;line-height:1.25;}
.mpwpb-checkout-slot-dates{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:180px;overflow-y:auto;}
.mpwpb-checkout-slot-dates li{font-size:14.5px;font-weight:700;color:#1e293b;line-height:1.3;padding-left:14px;position:relative;}
.mpwpb-checkout-slot-dates li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--mpwpb_color_theme);}
.mpwpb-checkout-slot-location{margin-top:2px;font-size:13px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpwpb-checkout-slot-icon{
	flex:0 0 auto;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:14px;background:var(--mpwpb_color_theme_88,rgba(0,0,0,.06));color:var(--mpwpb_color_theme);font-size:20px;
}

.mpwpb-checkout-summary{
	border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius,14px);background:#fafbfc;padding:14px 16px;
	box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.mpwpb-checkout-summary-label{
	font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:10px;
}
.mpwpb-checkout-summary-subhead{
	font-size:11px;font-weight:700;color:var(--mpwpb_color_theme);margin:12px 0 6px;
}
.mpwpb-checkout-summary-subhead:first-of-type{margin-top:0;}
.mpwpb-checkout-summary-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;}
.mpwpb-checkout-summary-list li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#334155;}
.mpwpb-checkout-summary-list li .fa-check-circle{flex:0 0 auto;color:var(--mpwpb_color_theme);font-size:12px;}
.mpwpb-checkout-summary-list li .fa-plus-circle{flex:0 0 auto;color:#94a3b8;font-size:12px;}
.mpwpb-checkout-summary-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpwpb-checkout-summary-qty{flex:0 0 auto;font-size:12px;font-weight:600;color:#94a3b8;}
.mpwpb-checkout-summary-price{flex:0 0 auto;font-weight:700;color:#1e293b;}
.mpwpb-checkout-recurring-breakdown{
	margin-top:6px;padding-top:10px;border-top:1px dashed #e5e9f0;display:flex;flex-direction:column;gap:6px;
}
.mpwpb-checkout-recurring-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#64748b;}
.mpwpb-checkout-recurring-row span:last-child{font-variant-numeric:tabular-nums;}
.mpwpb-checkout-recurring-discount{color:#0d9488;}
.mpwpb-checkout-total{
	display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #e5e9f0;
	font-size:14px;font-weight:700;color:#1e293b;
}
.mpwpb-checkout-total strong{color:var(--mpwpb_color_theme);font-size:17px;}
.mpwpb-checkout-empty{color:#64748b;font-size:13.5px;}
.mpwpb-checkout-error{
	margin:0;padding:10px 14px;border-radius:9px;background:#fdecea;color:#b32d2e;font-size:13px;font-weight:600;
}
.mpwpb-checkout-form{display:flex;flex-direction:column;gap:14px;}

.mpwpb-checkout-card{
	border:1px solid #e5e9f0;border-radius:var(--mpwpb-sp-radius,14px);background:#fff;overflow:hidden;
	box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 10px rgba(15,23,42,.05);
}
.mpwpb-checkout-card-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #f1f5f9;}
.mpwpb-checkout-card-icon{
	flex:0 0 auto;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;border:1.5px solid var(--mpwpb_color_theme);color:var(--mpwpb_color_theme);font-size:10px;
}
.mpwpb-checkout-card-title{margin:0;font-size:14px;font-weight:700;color:#1e293b;}
.mpwpb-checkout-card h3.mpwpb-checkout-card-title{font-size:14px !important;}
.mpwpb-checkout-card-body{display:flex;flex-direction:column;gap:10px;padding:14px;}

.mpwpb-checkout-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mpwpb-checkout-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:#64748b;}
label.mpwpb-checkout-field{display:inline-block;}
.mpwpb-checkout-field > span{padding-left:0;}
@media only screen and (min-width: 10px) {
	.mpwpb-checkout-field > span{
		white-space:nowrap !important;
		padding-bottom:10px !important;
	}
	/* Scoped version of the shared .mpwpb_style small/span/strong utility
	   rule (mp_global/assets/mp_style/mpwpb_plugin_global.css:309-310, which
	   sets display:inline-block plugin-wide) -- deliberately only applied
	   inside the checkout/confirmation section rather than changed globally,
	   so nothing elsewhere in the plugin is affected. */
	.mpwpb-checkout-embed .dInlineBlock, .mpwpb-checkout-embed [class*="_dInlineBlock"],
	.mpwpb-checkout-embed small, .mpwpb-checkout-embed span, .mpwpb-checkout-embed strong {
		display:flex;
	}
}
.mpwpb-checkout-field input{
	font-size:13px;font-weight:400;padding:8px 10px;border:1px solid #e5e9f0;border-radius:7px;
	background:#f8fafc;color:#1e293b;transition:.15s;box-sizing:border-box;width:100%;
}
.mpwpb-checkout-field input::placeholder{color:#a3adba;}
.mpwpb-checkout-field input:focus{
	outline:none;background:#fff;border-color:var(--mpwpb_color_theme);box-shadow:0 0 0 3px var(--mpwpb_color_theme_88,rgba(0,0,0,.08));
}
.mpwpb-checkout-gateways{display:flex;flex-direction:column;gap:8px;}
.mpwpb-checkout-gateways label{padding:10px !important;}
.mpwpb-checkout-gateways-label{font-size:12.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;}
.mpwpb-checkout-gateway{
	display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#334155;cursor:pointer;
	padding:10px;border:1px solid #e5e9f0;border-radius:10px;background:#fff;transition:.15s;
}
.mpwpb-checkout-gateway:hover{border-color:var(--mpwpb_color_theme);}
.mpwpb-checkout-gateway:has(input:checked){
	padding:10px;border-color:var(--mpwpb_color_theme);background:var(--mpwpb_color_theme_88,#f6fbfa);
}
.mpwpb-checkout-gateway input{accent-color:var(--mpwpb_color_theme);width:15px;height:15px;flex:0 0 auto;}
.mpwpb-checkout-submit{
	display:block;width:100%;border:none;border-radius:999px;background:var(--mpwpb_color_theme);
	color:#fff;font-size:15px;font-weight:700;padding:13px 20px;cursor:pointer;transition:.15s;
}
.mpwpb-checkout-submit:hover{filter:brightness(0.92);}
.mpwpb-checkout-submit:disabled{opacity:.6;cursor:default;}
.mpwpb-checkout-retry-link{display:inline-block;width:auto;text-decoration:none;padding:11px 28px;}
.mpwpb-checkout-gdpr-consent{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px;}
.mpwpb-checkout-consent-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#475569;cursor:pointer;line-height:1.5;}
.mpwpb-checkout-consent-row input{margin-top:2px;accent-color:var(--mpwpb_color_theme);flex:0 0 auto;}
.mpwpb-checkout-consent-row a{color:var(--mpwpb_color_theme);font-weight:600;text-decoration:underline;}

@media(max-width:480px){
	.mpwpb-checkout-row{grid-template-columns:1fr;}
}

/* -------------------------------------------------------------------- *
 *  Booking confirmation ([mpwpb_booking_confirmation] shortcode /
 *  MPWPB_Native_Checkout::render_thank_you()). This can be dropped onto
 *  ANY page in ANY theme, so .mpwpb-confirmation-wrap carries its own
 *  box-sizing reset and width cap instead of depending on an ancestor
 *  (e.g. .mpwpb-static-template) that may not be present there -- nothing
 *  here is unscoped/tag-level, so it can't leak onto surrounding theme
 *  content either way.
 * -------------------------------------------------------------------- */
.mpwpb-confirmation-wrap,
.mpwpb-confirmation-wrap *,
.mpwpb-confirmation-wrap *::before,
.mpwpb-confirmation-wrap *::after{box-sizing:border-box;}
/* The no-Confirmation-Page-configured fallback (MPWPB_Native_Checkout::
   filter_checkout_content()) renders .mpwpb_native_checkout as ordinary
   page content inside whatever theme/template the site's front page uses
   -- wide enough here to fit render_cart_and_form()'s two-column
   form+summary grid (960px) without cramping it, unlike
   .mpwpb-confirmation-wrap's narrower single-column flow. */
.mpwpb_native_checkout,
.mpwpb_native_checkout *,
.mpwpb_native_checkout *::before,
.mpwpb_native_checkout *::after{box-sizing:border-box;}
.mpwpb_native_checkout{
	max-width:1000px;margin:40px auto;padding:0 16px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.mpwpb-confirmation-wrap{
	max-width:640px;margin:0 auto;padding:24px 16px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	text-align:left;
}
.mpwpb-confirmation-banner{text-align:center;margin-bottom:20px;}
.mpwpb-confirmation-icon{
	display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:14px;
	border-radius:50%;background:#eafaf0;color:#1c9a5b;font-size:30px;
}
.mpwpb-confirmation-icon--warn{background:#fff6dd;color:#b8860b;}
.mpwpb-confirmation-title{margin:0 0 6px;font-size:22px;font-weight:800;color:#1e293b;line-height:1.3;}
.mpwpb-confirmation-ref{margin:0;font-size:13.5px;color:#64748b;}
.mpwpb-checkout-info{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:#64748b;}
.mpwpb-checkout-info strong{font-size:13.5px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* -------------------------------------------------------------------- *
 *  Booking popup -> right-side slide-in drawer.
 *  Scoped to .mpwpb-static-template .sidebar .mpwpb_popup (the exact
 *  precedent already used by mpwpb_registration.css for this popup).
 *  Only restyles the existing overlay/main-area/header/body/footer
 *  boxes into a docked full-height panel; the show/hide mechanism
 *  itself (display:none -> .in{display:flex}, mp_global/assets/
 *  mp_style/mpwpb_plugin_global.js) and every inner picker/date-time/
 *  cart/checkout element are completely untouched.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .sidebar .mpwpb_popup{
	align-items:stretch !important;justify-content:flex-end !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_main_area{
	margin:0 !important;width:100% !important;max-width:560px !important;min-width:0 !important;
	top:30px !important;
	height:100vh !important;max-height:96vh !important;border-radius:0 !important;
	box-shadow:-8px 0 30px rgba(15,23,42,.18) !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup.in .mpwpb_popup_main_area{
	animation:mpwpbDrawerIn .32s cubic-bezier(.16,1,.3,1);
}
@keyframes mpwpbDrawerIn{
	from{transform:translateX(36px);opacity:0;}
	to{transform:translateX(0);opacity:1;}
}

.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_header{
	position:relative;border-radius:0 !important;padding:22px 46px 18px 22px !important;flex:0 0 auto;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_header h5{font-size:19px !important;text-align:left !important;font-weight:800;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_header p{font-size:12.5px !important;text-align:left !important;opacity:.85;margin-top:4px !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_close{
	/* Pushed down past the WordPress admin toolbar (fixed at the very top
	   of the viewport, same as this drawer) so it doesn't sit hidden/half
	   -covered behind it for logged-in users. */
	position:absolute !important;top:30px !important;right:16px !important;width:30px !important;height:30px !important;
	border-radius:999px !important;background:rgba(255,255,255,.18) !important;font-size:13px !important;color:#fff;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_close:hover{background:rgba(255,255,255,.3) !important;}

.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_body{
	/* flex-grow:0 (not 1) so short content isn't stretched to fill the full
	   100vh drawer -- that left a large dead area painted in this element's
	   own #f5f7fa background before the docked footer. flex-shrink stays so
	   long content still yields to the header/footer and scrolls internally. */
	flex:0 1 auto !important;min-height:0 !important;padding:0 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_body .mpwpb-popup-content{
	flex-direction:column !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .service-items{width:100% !important;padding:16px !important;}
/* Redundant now: the unified tree already shows checked state inline and
   the footer already shows the live total + "N selected" -- this separate
   list of every possible service (shown/hidden via inline style as each is
   toggled) is pure visual duplication in the new design, not a data source
   anything else reads. */
.mpwpb-static-template .sidebar .mpwpb_popup .service-cart{display:none !important;}

/* Step indicator -- plain 3-segment bar instead of numbered circles +
   labels + arrows: each step becomes a thin rounded track, filled solid
   for the active step, empty gray for the rest. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_wrapper{
	background:#fff !important;padding:25px 20px 0px 20px !important;gap:8px !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_step{
	position:relative;flex:1;height:4px !important;border-radius:999px;background:#e2e8f0;overflow:visible;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_step.active{
	background:var(--mpwpb_color_theme);
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_circle{display:none !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_arrow{display:none !important;}
/* Only the active step's name shows, as a small caption sitting above its
   own segment of the bar (tracks left-to-right as the active step moves
   from Service -> Date & Time -> Checkout). */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_label{display:none !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_step.active .mpwpb_cart_progress_label{
	display:block !important;position:absolute;left:0;bottom:100%;margin-bottom:6px;
	font-size:12px;font-weight:700;color:var(--mpwpb_color_theme);white-space:nowrap;
}

.mpwpb-static-template .sidebar .mpwpb_popup .selection-header h3{font-size:15px !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .selection-header p{font-size:12.5px !important;}

/* "What you've picked" summary -- one row per currently-selected main/
   extra service (name, qty if >1, price), built entirely client-side
   (updateSelectedSummary() in mpwpb-booking-tree.js, called from
   mpwpb_price_calculation() on every selection/qty change, and from the
   load_*_tab() step switchers in mpwpb_registration.js). Lives inside
   .popupFooter now (static_registration.php), so no side margin needed --
   the footer's own padding (mp_global/mpwpb_plugin_global.css,
   div.mpwpb_popup .popupFooter) already insets it. Hidden by default; JS
   only shows it on the Date & Time / Checkout steps once at least one row
   exists (deliberately not on the Service step -- the tree above it
   already shows what's selected there, this would be pure duplication). */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary{
	display:none;flex:0 0 auto;margin:0 0 10px;border:1px solid #e5e9f0;border-radius:10px;
	background:#E5EEFF;overflow:hidden;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-row{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:5px 14px;font-size:12.5px;color:#334155;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-row + .mpwpb-selected-summary-row{
	border-top:1px solid #e5e9f0;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-name{
	flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-name em{
	font-style:normal;color:#94a3b8;font-weight:600;margin-left:4px;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-price{
	flex:0 0 auto;font-weight:700;color:var(--mpwpb_color_theme);white-space:nowrap;
}
/* "View N more" toggle -- sits in the same row slot, expands the rest of
   the list inline (slideToggle in mpwpb-booking-tree.js) instead of
   growing the visible list past 3 rows by default. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-more-btn{
	display:flex;align-items:center;gap:6px;width:100%;border:none;background:transparent;cursor:pointer;
	padding:9px 14px;font-size:12px;font-weight:700;color:var(--mpwpb_color_theme);text-align:left;
	border-top:1px solid #e5e9f0;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-more-btn:hover{background:#f0fdfa;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-more-btn i{font-size:10px;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-more-rows .mpwpb-selected-summary-row{
	border-top:1px solid #e5e9f0;
}

.mpwpb-static-template .sidebar .mpwpb_popup .popupFooter{
	flex:0 0 auto !important;background:#fff !important;
	/* Docks the footer (and the Continue button after it) to the bottom of
	   the drawer when content is shorter than the viewport, instead of the
	   body stretching to push it there (see .mpwpb_popup_body above). */
	margin-top:auto !important;
	border-top:2px solid #ddd !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpd_btn_proceed{
	flex:0 0 auto;background:var(--mpwpb_color_theme) !important;opacity:1 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpd_btn_proceed:hover{filter:brightness(.92);}

@media(max-width:640px){
	.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_main_area{max-width:100vw !important;}
}

/* -------------------------------------------------------------------- *
 *  Popup's inner picker -> unified checkbox-tree (mpwpb-booking-tree.js).
 *  The old two-stage category-card + flat-service-list markup is left
 *  completely intact for its real click handlers/hidden inputs -- it is
 *  just hidden here. Real .mpwpb_service_item nodes get relocated (not
 *  duplicated) into the tree built by that script and gain the
 *  .mpwpb-tree-service-row class restyled below; the tree's own header
 *  rows reuse the .mpwpb-tree-* rules already defined above for the
 *  sidebar tree, for visual consistency between sidebar and popup.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_category_area,
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_without_cat_service_area,
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_service_area,
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_selected_control{
	display:none !important;
}

.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-booking-tree{margin-top:14px;}

.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-quick-options{margin-top:10px;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-quick-label{
	font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;
	padding:6px 8px 4px;
}

/* Relocated real .mpwpb_service_item, restyled as a flat checkbox row.
   Its old card CSS (border/background/padding scoped through the now-
   hidden .mpwpb_service_area ancestor) no longer applies once moved out,
   so this is a from-scratch look rather than an override. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row{
	position:relative;display:flex !important;align-items:center;gap:10px;
	margin:0 0 9px 5px;padding:10px 12px !important;border:1px dotted #e1e2e5;border-radius:10px;background:#fff;
	box-shadow:none;
	transition:.15s;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row:last-child{margin-bottom:0;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row.mpActive{
	/* color override needed here: div.mpwpb_item_box.mpActive (mpwpb_registration.css,
	   global/unscoped) sets color:var(--mpwpb_color_theme_alter) -- a near-white
	   meant for its own solid dark-green active background -- which these rows
	   also pick up (they still carry the base .mpwpb_item_box class) and would
	   otherwise inherit onto the name text, making it nearly invisible against
	   this light background. */
	border-color:#b6b9b9;background:#EFF4FF;color:#1e293b;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row > ._dFlex{width:100%;display:flex !important;align-items:center;gap:10px;cursor:pointer;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row h6{font-size:13px;margin:0;font-weight:600;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .quantity-box{gap:8px;}
/* The real button now sits at the front of the row (relocateService() in
   mpwpb-booking-tree.js), no longer a DOM sibling of the qty stepper --
   the real click handler's $this.siblings('.mpwpb_service_inc_dec_holder')
   reveal no longer finds it, so visibility is driven directly off this
   row's own .mActive class instead (set correctly regardless of the
   button's position, since it's added via .closest('.mpwpb_service_item')). */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb_service_inc_dec_holder{
	display:none !important;min-width:0 !important;width:auto !important;margin:0 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row.mpActive .mpwpb_service_inc_dec_holder{
	display:block !important;
}
/* Rounded pill stepper (-  qty  +), overriding the base bordered/divided
   groupContent look for a compact, seamless capsule matching the mockup. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .qtyIncDec{
	display:flex !important;align-items:center;width:auto !important;max-width:none !important;
	border:1px solid var(--mpwpb_color_theme) !important;border-radius:999px !important;
	background:#fff !important;padding:0px !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .qtyIncDec > *{
	border-left:0 !important;margin:0 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .addonGroupContent{
	width:20px !important;height:20px;min-width:20px !important;flex:0 0 auto;
	display:flex !important;align-items:center;justify-content:center;
	border-radius:50% !important;background:transparent !important;color:var(--mpwpb_color_theme) !important;
	font-size:9px;cursor:pointer;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .addonGroupContent:hover{
	background:var(--mpwpb_color_theme_88,#f0f9f8) !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .qtyIncDec label{margin:0 !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .inputIncDec{
	width:24px !important;height:20px;min-height:24px;border:0 !important;background:transparent !important;
	text-align:center !important;font-size:12px;font-weight:700;color:#1e293b;padding:0 !important;
}

/* The real Add/Added button, restyled into a small circular checkbox --
   same element, same .mpwpb_service_button click handler and .mActive
   toggle from mpwpb_registration.js, moved to the front of the row (see
   relocateService() in mpwpb-booking-tree.js) and purely reskinned here. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb_service_button{
	width:20px !important;height:20px;min-width:0 !important;padding:0 !important;flex:0 0 auto;
	border-radius:50% !important;border:2px solid #c3c5c7 !important;background:#fff !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb_service_button span{display:none !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb_service_button.mActive{
	border-color:var(--mpwpb_color_theme) !important;background:var(--mpwpb_color_theme) !important;position:relative;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb_service_button.mActive::after{
	content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:#fff;font-size:10px;
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

/* Footer: "N selected" label + relabelled Continue button. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-selected-label{
	display:none;font-size:16px;font-weight:600;color:#64748b;margin-right:8px;
}
.mpwpb-static-template .sidebar .mpwpb_popup .next_service_area .justifyBetween{flex-wrap:wrap;}
.mpwpb-static-template .sidebar .mpwpb_popup .next_service_area h3{font-size:16px;display:flex;align-items:center;flex-wrap:wrap;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_service_next{
	background-color:var(--mpwpb_color_theme) !important;border-radius:999px !important;
}

/* Styling only -- visibility is driven entirely by mpwpb_registration.js's
   .hide()/.fadeIn() calls (NOT forced here anymore: for a service with staff
   selection enabled, this button must stay hidden in favor of "Next Staff
   Member" until the staff step is actually reached, so a blanket
   `display:flex !important` here would show Checkout too early and let
   customers skip picking a staff member entirely). It's greyed out and
   non-interactive-looking by default and only turns solid once a date/time
   is actually selected (.mpwpb-cta-ready, toggled in mpwpb-booking-tree.js)
   -- the real validation on click (its existing data-alert) is untouched
   either way. */
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_date_time_next_btn_id{
	border-radius:10px !important;
	background-color:#00685f !important;opacity:.5;
}
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_date_time_next_btn_id.mpwpb-cta-ready{
	background-color:var(--mpwpb_color_theme) !important;opacity:1;
}

button._mpBtn.mActive.booked{
	background-color:#cbcfcf !important;color:#262626 !important;
}

h4.alignCenter.mpwpb-total{font-size:16px !important;}

/* -------------------------------------------------------------------- *
 *  Date picker -> wrapped 2-row grid (8 dates per page) instead of a
 *  sliding owl-carousel. Static-template-only (date_time_select.php
 *  outputs .mpwpb-date-grid instead of .mpwpb-owl-carousel for it -- the
 *  default template's carousel is untouched). The prev/next arrows are
 *  kept, now paging between groups of 8 instead of sliding one at a time
 *  (see initDateGridPagination() in mpwpb-booking-tree.js); hidden
 *  automatically when everything already fits on one page.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area{
	display:flex !important;align-items:center;
}
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area h4{
	margin:0 !important;width:auto !important;justify-content:flex-end !important;gap:10px;
}
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area .prev,
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area .next{
	width:26px;height:26px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;border:1px solid #e5e9f0;color:var(--mpwpb_color_theme);font-size:11px;cursor:pointer;
}
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area .prev:hover,
.mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_carousel_area .next:hover{background:#F0FDFA;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid{
	display:flex !important;flex-wrap:wrap;gap:8px;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_date_time_line{
	flex:1 1 calc(25% - 6px);width:auto !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date,
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_close_date,
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_passed{
	display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:4px;
	min-height:0 !important;height:100%;padding:12px 6px !important;border:1px solid #e5e9f0 !important;border-radius:12px;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mptrs_day_with_date{font-size:11.5px;font-weight:600;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb-date-number{font-size:18px;font-weight:800;color:#1e293b;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_selected .mpwpb-date-number{color:#fff !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_close_date{font-size:11px;color:#94a3b8;text-align:center;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_passed{
	background-color:#f8fafc !important;cursor:not-allowed !important;opacity:.6;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_passed .mptrs_day_with_date{color:#94a3b8 !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_passed .mpwpb-date-number{color:#94a3b8 !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_get_date_passed .mpwpb_date_passed_label{
	font-size:10px;font-weight:600;color:#cbcfcf;text-transform:uppercase;letter-spacing:.02em;
}
@media(max-width:420px){
	.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-date-grid .mpwpb_date_time_line{flex-basis:calc(33.33% - 6px);}
}

/* -------------------------------------------------------------------- *
 *  "Choose Extra Features" (extra_services.php) -- now pixel-for-pixel
 *  matching .mpwpb-tree-service-row's design and behavior: same card
 *  look/active state, same circular checkbox Add button moved to the
 *  front of the row (relocateExtraServiceButton() in mpwpb-booking-
 *  tree.js), same click-anywhere-selects-it row handler, same hidden-
 *  until-active qty stepper. .mpwpb_extra_service_item only ever got
 *  .mActive on its *button* from the generic data-add-class mechanism
 *  (mp_global/assets/mp_style/mpwpb_plugin_global.js) -- never on the
 *  item itself -- so mpwpb-booking-tree.js also now mirrors that onto
 *  the item as .mpActive, exactly like the real .mpwpb_service_button
 *  click handler already does for .mpwpb_service_item.
 * -------------------------------------------------------------------- */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_area{
	background:transparent !important;box-shadow:none !important;margin-top:16px !important;padding:0 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_area > h5{
	font-size:11px !important;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
	color:#94a3b8;margin:0 0 8px !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item{
	position:relative;display:flex !important;align-items:center;gap:10px;cursor:pointer;
	background:#fff;border:1px solid #e1e2e5;border-radius:10px;
	padding:10px 12px !important;margin:0 0 9px 5px;
	box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 10px rgba(15,23,42,.06);
	transition:.15s;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item:last-child{margin-bottom:0;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item.mpActive{
	/* Same color override as .mpwpb-tree-service-row.mpActive above, and for
	   the same reason: div.mpwpb_item_box.mpActive (mpwpb_registration.css)
	   is a global unscoped rule this item also matches. */
	border-color:#b6b9b9;background:#EFF4FF;color:#1e293b;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .alignCenter > .fas:first-child{
	flex:0 0 auto;width:26px;height:26px;display:inline-flex !important;align-items:center;justify-content:center;
	border-radius:50%;background:#F0FDFA;color:var(--mpwpb_color_theme) !important;font-size:11px;margin-right:0 !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item h6{font-size:13px;margin:0;font-weight:600;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item ._textTheme_min_100{
	color:var(--mpwpb_color_theme) !important;font-weight:800;font-size:13px;white-space:nowrap;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .quantity-box{gap:8px;}

/* Hidden until the item is added -- same as .mpwpb_service_inc_dec_holder
   on the main row. No !important here (unlike that main-row rule): this
   holder is still shown/hidden by the generic [data-collapse-target]/
   slideToggle mechanism (mp_global/assets/mp_style/mpwpb_plugin_global.js,
   wired via the Add button's existing data-collapse-target attribute), so
   its own inline styles need to stay able to override this default. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpd_ex_service_qty_inc_dec_holder{
	display:none;min-width:0 !important;width:auto !important;margin:0 !important;
}

/* Qty pill -- same look as the main list's, but scoped to this section's
   own inner classes (.incQty/.decQty here, not .service_incQty/_decQty). */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .qtyIncDec{
	display:flex !important;align-items:center;width:auto !important;max-width:none !important;
	border:1px solid var(--mpwpb_color_theme) !important;border-radius:999px !important;
	background:#fff !important;padding:0px !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .qtyIncDec > *{border-left:0 !important;margin:0 !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .addonGroupContent{
	width:20px !important;height:20px;min-width:20px !important;
	display:flex !important;align-items:center;justify-content:center;
	border-radius:50% !important;background:transparent !important;color:var(--mpwpb_color_theme) !important;
	font-size:9px;cursor:pointer;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .addonGroupContent:hover{background:#F0FDFA !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .qtyIncDec label{margin:0 !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .inputIncDec{
	width:24px !important;height:20px;border:0 !important;background:transparent !important;
	text-align:center !important;font-size:12px;font-weight:700;color:#1e293b;padding:0 !important;
}

/* "Add" -- same circular checkbox as the main row's .mpwpb_service_button,
   moved to the front of the row by relocateExtraServiceButton(). */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpb_ex_service_button{
	width:26px !important;height:26px;min-width:0 !important;padding:0 !important;flex:0 0 auto;
	display:inline-flex !important;align-items:center;justify-content:center;
	border-radius:50% !important;border:2px solid #c3c5c7 !important;background:#fff !important;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpb_ex_service_button span{display:none !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpb_ex_service_button.mActive{
	border-color:var(--mpwpb_color_theme) !important;background:var(--mpwpb_color_theme) !important;position:relative;
}
button._mpBtn_btLight_2_min_150.mpwpb_price_calculation.mpwpb_ex_service_button {
    margin-right: 10px;
}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpb_ex_service_button.mActive::after{
	content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:#fff;font-size:10px;
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

/* "View Details" -- same hover-tooltip treatment as the main list
   (.mpwpb-tree-view-details, added by initExtraServiceDetails() in
   mpwpb-booking-tree.js); the old inline description is hidden outright. */
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .service-details{display:none !important;}
.mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .mpwpb-tree-view-details{font-size:11px;}

/* "Details" toggle on each service item card -- keep it small/secondary.
   No longer offset with padding-left: the service icon it used to align
   past (mR_xs gap) was removed from service_selection.php/
   category_selection.php, so the name now starts flush with the card's
   left edge and this toggle should too. */
.mpwpb_service_item .mpwpb_service_details_toggle{
	font-size:10px;
	padding-left:0;
}
.mpwpb_service_item .mpwpb_service_details_toggle span[data-text]{
	font-size:10px;
	color:#4e4d4d;
}
.mpwpb_service_item .mpwpb_service_duration.textTheme{
	font-size:10px;
	color:#4e4d4d;
}
.mpwpb_service_item .mpwpb_service_duration .fa-clock{
	font-weight:400;color:#b0b3b8;
}