's own 10px padding (.main > section{margin:20px 32px !important} below, mpwpb_registration.css's main{padding:10px}) -- .template-header (mpwpb_registration.css, shared with the default template) only ever had that outer 10px, so the hero's title/eyebrow/rating started 32px to the left of where Overview/FAQ/Details text starts right under it. Matching that same 32px here, scoped to this template only, lines the hero's left edge up with the content area instead of touching it in the shared file. */ .mpwpb-static-template.mpwpb_registration > header .template-header .header-content{ padding:0 32px; } /* -------------------------------------------------------------------- * * Inline WooCommerce checkout * -------------------------------------------------------------------- */ .mpwpb-static-template .mpwpb-inline-wc-checkout-form{display:none;margin:0 !important;padding:0 18px 24px;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form [hidden]{display:none !important;} .mpwpb-static-template .mpwpb-inline-checkout-notices:empty{display:none;} .mpwpb-static-template .mpwpb-inline-checkout-notices{margin:0 0 14px;} .mpwpb-static-template .mpwpb-inline-checkout-notices .woocommerce-error, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-error{ display:block;margin:0 0 14px !important;padding:12px 14px !important;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#991b1b;font-size:13px; } .mpwpb-static-template .mpwpb-inline-checkout-heading{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px; margin:10px 0 0px;padding-bottom:14px;border-bottom:1px solid #e5e7eb; } .mpwpb-static-template .mpwpb-inline-checkout-heading-icon{ flex:0 0 auto;width:40px;height:40px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--mpwpb_color_theme) 10%, white);color:var(--mpwpb_color_theme);font-size:16px; } .mpwpb-static-template .mpwpb-inline-checkout-heading-text{flex:1 1 auto;min-width:0;} .mpwpb-static-template .mpwpb-inline-checkout-heading h3{margin:0 0 4px !important;color:#0f172a;font-size:18px !important;font-weight:800;} .mpwpb-static-template .mpwpb-inline-checkout-heading p{margin:0 !important;color:#64748b;font-size:12.5px;} .mpwpb-static-template .mpwpb-inline-checkout-heading-badge{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; font-size:11px;font-weight:700;color:var(--mpwpb_color_theme); background:color-mix(in srgb, var(--mpwpb_color_theme) 10%, white); border-radius:999px;padding:5px 11px;white-space:nowrap; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form .col2-set, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .col-1, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .col-2{float:none !important;width:100% !important;margin:0 !important;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-billing-fields > h3, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-additional-fields > h3, .mpwpb-static-template .mpwpb-inline-wc-checkout-form #order_review_heading{ margin:12px 0 !important;color:var(--mpwpb_color_theme);font-size:15px !important;font-weight:800; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-billing-fields__field-wrapper, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-shipping-fields__field-wrapper{ dis:grid;grid-template-columns:1fr 1fr;gap:12px; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form .form-row{float:none !important;width:100% !important;margin:0 0 12px !important;padding:0 !important;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .form-row-wide{grid-column:1/-1;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form label{display:block !important;margin:0 0 6px;color:#334155;font-size:12px;font-weight:700;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form input.input-text, .mpwpb-static-template .mpwpb-inline-wc-checkout-form textarea, .mpwpb-static-template .mpwpb-inline-wc-checkout-form select, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .select2-selection{ box-sizing:border-box;width:100% !important;min-height:42px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;font-size:13px; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form textarea{min-height:78px;resize:vertical;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-invalid input, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-invalid select{border-color:#dc2626 !important;box-shadow:0 0 0 2px rgba(220,38,38,.1);} .mpwpb-static-template .mpwpb-inline-stage-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:15px;border-top:1px solid #e5e7eb;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form button.button{ min-height:40px;padding:9px 16px !important;border:1px solid var(--mpwpb_color_theme) !important;border-radius:9px !important;background:#fff !important;color:var(--mpwpb_color_theme) !important;font-size:13px !important;font-weight:700; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form button.button.alt, .mpwpb-static-template .mpwpb-inline-wc-checkout-form #place_order{ background:var(--mpwpb_color_theme) !important;color:#fff !important; } .mpwpb-static-template .mpwpb-inline-wc-checkout-form table.shop_table{width:100%;margin:0 0 15px;border:1px solid #e2e8f0;border-collapse:separate;border-spacing:0;border-radius:10px;font-size:12.5px;overflow:hidden;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form table.shop_table th, .mpwpb-static-template .mpwpb-inline-wc-checkout-form table.shop_table td{padding:10px;border-bottom:1px solid #edf2f7;text-align:left;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form #payment{border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:14px;} .mpwpb-static-template .mpwpb-inline-coupon{margin:0 0 14px;padding:12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;} .mpwpb-static-template .mpwpb-inline-coupon > div{display:flex;gap:8px;} .mpwpb-static-template .mpwpb-inline-coupon input{min-width:0;flex:1;} .mpwpb-static-template .mpwpb-inline-coupon-message{display:block !important;margin-top:6px;font-size:11.5px;} .mpwpb-static-template .mpwpb-inline-coupon-message.is-error{color:#b91c1c;} .mpwpb-static-template .mpwpb-inline-coupon-message.is-success{color:#047857;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form #payment ul.payment_methods{margin:0 0 14px !important;padding:0 !important;list-style:none !important;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form #payment li{display:block !important;margin:0 0 10px !important;padding:10px !important;border:1px solid #dbe3ec;border-radius:9px;background:#fff;list-style:none !important;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form #payment label{display:inline-flex !important;align-items:center;gap:7px;margin:0;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .payment_box{margin-top:9px;padding:10px;border-radius:8px;background:#f1f5f9;font-size:12px;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .place-order{margin:0 !important;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form #place_order{float:none;width:100%;margin-top:12px !important;} .mpwpb-static-template .mpwpb-inline-checkout-footer-hidden{display:none !important;} .mpwpb-static-template .mpwpb-inline-confirmation{padding:8px 18px 28px;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-order-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 !important;padding:0 !important;list-style:none !important;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-order-overview li{margin:0 !important;padding:11px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;list-style:none !important;font-size:11px;} .mpwpb-static-template .mpwpb-inline-confirmation table{width:100%;font-size:12px;} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-inline-confirmation-summary{ margin:0 0 18px;padding:18px;border:1px solid var(--mpwpb-tint-line);border-radius:14px;background:linear-gradient(135deg,var(--mpwpb-tint-bg),var(--mpwpb-tint-soft));box-shadow:0 8px 24px rgba(5,150,105,.08); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-inline-confirmation-summary::before{ content:'\2713';display:grid;width:42px;height:42px;margin-bottom:12px;place-items:center;border-radius:50%;background:#059669;color:#fff;font-size:23px;font-weight:800;box-shadow:0 7px 18px rgba(5,150,105,.24); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-inline-confirmation-summary h2{margin:0 0 8px !important;color:var(--mpwpb-shade) !important;font-size:20px !important;line-height:1.25;} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-inline-confirmation-summary p{margin:3px 0 !important;color:#475569;font-size:12.5px;} .mpwpb-static-template .mpwpb-inline-confirmation > .woocommerce-order > p.woocommerce-notice{margin:0 0 14px !important;padding:12px 14px;border-radius:10px;background:#f8fafc;color:#334155;font-size:13px;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-order-details, .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-customer-details{margin:20px 0 0;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-order-details__title, .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-column__title, .mpwpb-static-template .mpwpb-inline-confirmation > h2{ margin:22px 0 10px !important;padding:0 0 9px;border-bottom:1px solid #e2e8f0;color:var(--mpwpb_color_theme) !important;font-size:18px !important;font-weight:800;line-height:1.3; } .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details{ width:100%;margin:0 !important;border:1px solid #e2e8f0;border-collapse:separate;border-spacing:0;border-radius:12px;background:#fff;overflow:hidden; } .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details th, .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details td{padding:11px 12px !important;border:0;border-bottom:1px solid #edf2f7;vertical-align:top;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details th{color:#334155;font-weight:700;text-align:left;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details td{color:#475569;text-align:right;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details tr:last-child th, .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details tr:last-child td{border-bottom:0;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details tr:has(.order-actions-button){display:grid;grid-template-columns:1fr;gap:8px;padding:12px;background:#f8fafc;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details tr:has(.order-actions-button) th, .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-table--order-details tr:has(.order-actions-button) td{display:flex !important;width:100%;padding:0 !important;border:0;flex-wrap:wrap;gap:8px;justify-content:flex-start;white-space:normal;} .mpwpb-static-template .mpwpb-inline-confirmation a.order-actions-button{ display:inline-flex !important;min-height:38px;margin:0 !important;padding:9px 13px !important;align-items:center;border:1px solid #cbd5e1 !important;border-radius:9px !important;background:#fff !important;color:#334155 !important;font-size:12px !important;font-weight:700 !important;line-height:1.2;text-decoration:none !important;box-shadow:none !important; } .mpwpb-static-template .mpwpb-inline-confirmation a.order-actions-button:hover{border-color:var(--mpwpb-tint-line) !important;background:var(--mpwpb-tint-soft) !important;color:var(--mpwpb-shade) !important;} .mpwpb-static-template .mpwpb-inline-confirmation a.order-actions-button.mpwpb_cancel{border-color:#fecdd3 !important;background:#fff1f2 !important;color:#be123c !important;} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions{ dis:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 18px;padding:16px;border:1px solid #dbe4ee;border-radius:14px;background:linear-gradient(180deg,#f8fafc,#fff);box-shadow:0 6px 18px rgba(15,23,42,.05); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions .mpwpb-btn{ dis:inline-flex;min-height:42px;margin:0 !important;padding:10px 12px;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font-size:12px;font-weight:750;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions .mpwpb-reschedule-btn{border-color:var(--mpwpb-tint-line);background:var(--mpwpb-tint-soft);color:var(--mpwpb-shade);} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions .mpwpb-cancel-btn{border-color:#fecdd3;background:#fff1f2;color:#be123c;} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions .mpwpb-reorder-btn{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-customer-details address{padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;color:#475569;font-size:12.5px;font-style:normal;line-height:1.65;} /* These modal fragments are printed by the order-details hook. They must stay out of document flow until their dashboard JavaScript explicitly opens one. */ .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-modal{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:100000;overflow:auto;background:rgba(15,23,42,.68);backdrop-filter:blur(4px);} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal .mpwpb-modal-content{width:min(480px,calc(100% - 28px));margin:7vh auto;padding:24px;border:1px solid #dbe4ee;border-radius:16px;background:#fff;box-shadow:0 28px 70px rgba(15,23,42,.28);} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal h3{margin:0 0 18px;padding:0 38px 12px 0;border-bottom:1px solid #e2e8f0;color:#0f172a;font-size:20px;} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal .mpwpb-form-group{margin:0 0 14px;} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal label{display:block;margin:0 0 6px;color:#334155;font-size:12px;font-weight:700;} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal select{box-sizing:border-box;width:100%;min-height:42px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;} .mpwpb-static-template .mpwpb-inline-confirmation #mpwpb-reschedule-modal .mpwpb-submit-btn{width:100%;margin:4px 0 0;padding:11px;border:0;border-radius:9px;background:var(--mpwpb_color_theme);color:#fff;font-weight:750;} @media(max-width:600px){ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_step.active .mpwpb_cart_progress_label{font-size:10px;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-billing-fields__field-wrapper, .mpwpb-static-template .mpwpb-inline-wc-checkout-form .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr;} .mpwpb-static-template .mpwpb-inline-wc-checkout-form .form-row-wide{grid-column:auto;} .mpwpb-static-template .mpwpb-inline-checkout-stage-actions{align-items:stretch;flex-direction:column-reverse;} .mpwpb-static-template .mpwpb-inline-checkout-stage-actions button{width:100%;} .mpwpb-static-template .mpwpb-inline-confirmation .woocommerce-order-overview{grid-template-columns:1fr;} .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-wc-account-actions{grid-template-columns:1fr;} } .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 #fff;background:rgba(45,212,191,.12); font-size:11px;margin-right:0 !important;color:#fff; } .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;} } /* -------------------------------------------------------------------- * * Feature Highlights popup — deliberately scoped to .popup-features. * The popup is moved beneath by mpwpb-service-page-modern.js, so * selectors must not depend on the original service-header ancestry. * !important overrides the plugin's older shared popup frame without * changing booking, review, gallery, or admin popups. * -------------------------------------------------------------------- */ div.mpwpb_popup.popup-features{ box-sizing:border-box;padding:24px;background:rgba(15,23,42,.72) !important; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } div.mpwpb_popup.popup-features .mpwpb_popup_main_area{ box-sizing:border-box;min-width:0 !important;width:min(92vw,520px) !important;max-width:520px !important; min-height:0 !important;height:auto !important;max-height:calc(100vh - 48px) !important; overflow:hidden;background:#fff !important;border:0 !important;border-radius:20px !important; box-shadow:0 28px 80px rgba(15,23,42,.34) !important; } div.mpwpb_popup.popup-features.in .mpwpb_popup_main_area{ animation:mpwpb-feature-popup-in .2s ease-out both; } @keyframes mpwpb-feature-popup-in{ from{opacity:0;transform:translateY(12px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} } div.mpwpb_popup.popup-features .mpwpb_popup_header{ display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:20px !important; padding:24px 26px !important;border:0 !important;background:var(--mpwpb_color_theme) !important; } div.mpwpb_popup.popup-features .mpwpb-feature-popup-heading{ display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:5px; } div.mpwpb_popup.popup-features .mpwpb-feature-popup-kicker{ color:rgba(255,255,255,.72);font-size:10.5px;font-weight:800;line-height:1.2; letter-spacing:.11em;text-transform:uppercase; } div.mpwpb_popup.popup-features .mpwpb_popup_header h3{ margin:0 !important;color:#fff !important;font-size:22px !important;font-weight:800 !important;line-height:1.25 !important; } div.mpwpb_popup.popup-features .mpwpb_popup_header p{ margin:1px 0 0 !important;color:rgba(255,255,255,.8) !important;font-size:13px !important;line-height:1.5 !important;text-align:left !important; } div.mpwpb_popup.popup-features .mpwpb_popup_close{ position:static !important;inset:auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important; box-sizing:border-box;width:34px !important;height:34px !important;min-width:34px !important;margin:0 !important;padding:0 !important; border:1px solid rgba(255,255,255,.28) !important;border-radius:999px !important; background:rgba(255,255,255,.12) !important;color:#fff !important;font-size:14px !important;line-height:1 !important; box-shadow:none !important;cursor:pointer;transition:background .16s ease,transform .16s ease; } div.mpwpb_popup.popup-features .mpwpb_popup_close:hover, div.mpwpb_popup.popup-features .mpwpb_popup_close:focus-visible{ background:rgba(255,255,255,.24) !important;color:#fff !important;transform:rotate(4deg); } div.mpwpb_popup.popup-features .mpwpb_popup_close:focus-visible{outline:2px solid #fff !important;outline-offset:2px;} div.mpwpb_popup.popup-features .mpwpb_popup_close i{margin:0 !important;color:inherit !important;} div.mpwpb_popup.popup-features .mpwpb_popup_body{ box-sizing:border-box;padding:22px 26px 26px !important;overflow:auto !important;background:#fff !important; } div.mpwpb_popup.popup-features ul.features{ display:grid !important;grid-template-columns:1fr;gap:10px !important; margin:0 !important;padding:0 !important;list-style:none !important; } div.mpwpb_popup.popup-features ul.features li{ display:flex !important;align-items:center !important;gap:12px !important;box-sizing:border-box; margin:0 !important;padding:12px 14px !important;border:1px solid #e6ebf1 !important;border-radius:12px !important; background:#f8fafc !important;color:#263548 !important;font-size:13.5px !important;font-weight:650 !important;line-height:1.45 !important; } div.mpwpb_popup.popup-features .mpwpb-feature-popup-icon{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px; border-radius:999px;background:var(--mpwpb_color_theme);color:#fff;font-size:10px; box-shadow:0 4px 10px rgba(15,118,110,.16); } div.mpwpb_popup.popup-features .mpwpb-feature-popup-icon i{margin:0 !important;color:inherit !important;} div.mpwpb_popup.popup-features .mpwpb-feature-popup-label{min-width:0;overflow-wrap:anywhere;} @media(max-width:520px){ div.mpwpb_popup.popup-features{padding:14px;} div.mpwpb_popup.popup-features .mpwpb_popup_main_area{width:100% !important;max-height:calc(100vh - 28px) !important;border-radius:16px !important;} div.mpwpb_popup.popup-features .mpwpb_popup_header{gap:14px !important;padding:20px !important;} div.mpwpb_popup.popup-features .mpwpb_popup_header h3{font-size:19px !important;} div.mpwpb_popup.popup-features .mpwpb_popup_body{padding:16px !important;} div.mpwpb_popup.popup-features ul.features li{padding:11px 12px !important;font-size:13px !important;} } @media(prefers-reduced-motion:reduce){ div.mpwpb_popup.popup-features.in .mpwpb_popup_main_area{animation:none;} } /* -------------------------------------------------------------------- * * 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:none; border-radius:999px;box-shadow:0 1px 3px rgba(20,32,27,.06);padding:5px !important;margin:0 32px 24px !important; display:inline-flex !important;width:auto !important; } .mpwpb-static-template nav ul{gap:4px !important;} .mpwpb-static-template nav ul li{flex:0 0 auto;font-family:'Sora','Segoe UI',sans-serif;font-size:13px !important;} .mpwpb-static-template nav ul li a{ display:inline-flex;align-items:center;border-radius:999px;padding:10px 18px !important;font-weight:600;color:#5B6763;transition:.15s; } .mpwpb-static-template nav ul li a:hover{background:#F3F5F4;color:#15202B;} .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;font-weight:700; } /* Only logged-in users see WordPress's fixed admin bar, so this sticky tab bar's plain top:8px put it right underneath it once scrolled -- same fix as the popup's .mpwpb_popup_main_area below (32px/46px mirror WP core's own html{margin-top} values at the same 782px breakpoint). */ .admin-bar .mpwpb-static-template .mpwpb-details-page-tab, .admin-bar .mpwpb-static-template nav.mpwpb-details-page-tab{ top:40px; } @media screen and (max-width:782px){ .admin-bar .mpwpb-static-template .mpwpb-details-page-tab, .admin-bar .mpwpb-static-template nav.mpwpb-details-page-tab{ top:54px; } } /* 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

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. This z-index also matters for a completely different reason: .sidebar, by becoming position:sticky + z-index here, establishes its own stacking context -- so the booking popup nested inside it (.mpwpb_popup, z-index:100000 in mpwpb-booking-widget-reskin.css) is only ever compared at THIS z-index:5 level against anything outside .sidebar, no matter how high the popup's own z-index is set; a z-index only has meaning within its parent stacking context. The theme's own site header (a sibling far up the tree, outside .sidebar entirely) was outranking that whole stacking context and painting over the open drawer's header/close button as a result. Matching the popup's own convention (999999, one below WordPress's admin-bar-safe 100000 the popup itself uses, high enough to beat any normal page content) fixes it without touching the popup's own rule. */ @media (min-width:1024px){ .mpwpb-static-template .sidebar{position:sticky;top:8px;align-self:flex-start;z-index:1;} /* Only while the Popup Modal drawer is actually open: everything inside .sidebar is stacked at .sidebar's own z-index against the rest of the page, so at z-index:1 the theme's site header painted over the open drawer's title. Raised just for that state -- closed, it stays at 1. */ .mpwpb-static-template .sidebar:has(.mpwpb_popup.in:not(.mpwpb-popup-inline)){z-index:999999;} } /* -------------------------------------------------------------------- * * 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;} /* Every section in the content column -- Overview/FAQ/Details/Gallery/ Reviews -- shares the SAME outer box: a 56px/32px margin (replacing the blanket 30px from .mpwpb_registration section, mpwpb_registration.css; scoped to .main's direct section children so the booking drawer is unaffected). That's the full story for Overview/Details/Reviews, which stay on the plain ivory page background per the Service Page Content Column design artifact. FAQ and Gallery alternate with a mint panel INSTEAD -- same box, same width as every other section (no bleeding wider; earlier attempts tried to make the panel wider via negative margins cancelling .main's own padding, which needed near-identical selectors fighting for specificity and kept losing for one section or another), just with its own background/border/radius and extra internal padding layered on top so the panel reads as a frame around its content rather than changing the section's actual size or position. */ .mpwpb-static-template .main{padding:0;box-sizing:border-box;} .mpwpb-static-template .main > section{margin:20px 32px !important;} .mpwpb-static-template .main > section#service-faq, .mpwpb-static-template .main > .mpwpb-gallery-section{ background:var(--mpwpb-tint-bg);border:1px solid var(--mpwpb-tint-border);border-radius:28px;padding:48px 32px !important; } /* Every section heading on this page is now overridden individually, each next to its own section's rules below (kicker pill + 26px dark-ink heading) -- Overview/FAQ/Details/Reviews all follow the same pattern, so there's no shared heading rule left to keep here. */ /* Overview kicker pill + section-specific heading, same pattern as the FAQ section below -- the shared rule above still covers Details/ Reviews/the rest of this page's headings; only #service-overview's own heading is bumped up and recoloured, by source order. */ .mpwpb-static-template .mpwpb-overview-kicker{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme); font-family:'Sora','Segoe UI',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; } .mpwpb-static-template section#service-overview > h2{ font-size:26px !important;color:#15202B !important;margin-bottom:0 !important; } .mpwpb-static-template .mpwpb-overview-head{ display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px; } .mpwpb-static-template .mpwpb-overview-rating{ display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #ECECE6;border-radius:999px;background:#fff; box-shadow:0 1px 3px rgba(20,32,27,.05);flex:0 0 auto; } .mpwpb-static-template .mpwpb-overview-rating-stars{display:inline-flex;gap:1px;color:#F0A93B;font-size:13px;} .mpwpb-static-template .mpwpb-overview-rating-num{font-family:'Sora','Segoe UI',sans-serif;font-weight:700;font-size:13.5px;color:#15202B;} .mpwpb-static-template .mpwpb-overview-rating-text{font-family:'Work Sans',sans-serif;font-size:12.5px;color:#5B6763;} /* User-authored (WYSIWYG) overview content, restyled as a 2-up grid of * cards (checkmark badge + bold label + description) matching the * Service Overview design artifact. The shared `.mpwpb_style small/ * span/strong{display:flex}` utility (mpwpb_plugin_global.css) is meant * for the plugin's button/menu chrome but leaks into this rich text -- * overridden below. This assumes the admin's authored content is a *

Labeldescription

list (the actual * shape saved for this service); a differently-shaped WYSIWYG block * still renders (just without the badge-above-label split) since * nothing here requires that shape. */ .mpwpb-static-template #service-overview .mpwpb-overview-content small, .mpwpb-static-template #service-overview .mpwpb-overview-content span, .mpwpb-static-template #service-overview .mpwpb-overview-content b, .mpwpb-static-template #service-overview .mpwpb-overview-content em, .mpwpb-static-template #service-overview .mpwpb-overview-content i{ display:inline !important; } .mpwpb-static-template #service-overview .mpwpb-overview-content ol, .mpwpb-static-template #service-overview .mpwpb-overview-content ul{ display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important; margin:0 0 28px 0 !important;padding-left:0 !important;list-style:none !important; } .mpwpb-static-template #service-overview .mpwpb-overview-content li{ display:block !important; margin:0 !important;background:#fff;border:1px solid #ECECE6;border-radius:18px;box-shadow:0 1px 3px rgba(20,32,27,.05);padding:20px; } .mpwpb-static-template #service-overview .mpwpb-overview-content li::before{ content:"\2713";display:flex !important;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;background:var(--mpwpb_color_theme);color:#fff; font-size:15px;font-weight:700;margin-bottom:12px; } .mpwpb-static-template #service-overview .mpwpb-overview-content li strong{ display:block !important;font-family:'Sora','Segoe UI',sans-serif;font-weight:700;font-size:14.5px;color:#15202B;margin-bottom:6px; } .mpwpb-static-template #service-overview .mpwpb-overview-content{ font-family:'Work Sans',sans-serif;font-size:13px;line-height:1.65;color:#5B6763; } /* Details kicker pill + heading, same pattern as Overview/FAQ/Gallery. */ .mpwpb-static-template .mpwpb-details-kicker{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme); font-family:'Sora','Segoe UI',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; } .mpwpb-static-template section#service-details > h2{ font-size:26px !important;color:#15202B !important;margin-bottom:16px !important; } /* Service Details is also administrator-authored rich text -- could be a plain paragraph or a list, so instead of assuming either shape it's wrapped in one card (matching the other sections' card language) rather than restructured. Keep its inline formatting and list structure from being changed by shared UI utilities. */ .mpwpb-static-template #service-details .mpwpb-service-details-content{ background:#fff;border:1px solid #ECECE6;border-radius:18px;box-shadow:0 1px 3px rgba(20,32,27,.05);padding:22px 24px; font-family:'Work Sans',sans-serif;font-size:13.5px;line-height:1.75;color:#5B6763; } .mpwpb-static-template #service-details .mpwpb-service-details-content small, .mpwpb-static-template #service-details .mpwpb-service-details-content span, .mpwpb-static-template #service-details .mpwpb-service-details-content strong, .mpwpb-static-template #service-details .mpwpb-service-details-content b, .mpwpb-static-template #service-details .mpwpb-service-details-content em, .mpwpb-static-template #service-details .mpwpb-service-details-content i{ display:inline !important; } .mpwpb-static-template #service-details .mpwpb-service-details-content ol, .mpwpb-static-template #service-details .mpwpb-service-details-content ul{ margin:10px 0 0 0 !important; padding-left:22px !important; } .mpwpb-static-template #service-details .mpwpb-service-details-content ol{list-style:decimal outside !important;} .mpwpb-static-template #service-details .mpwpb-service-details-content ul{list-style:disc outside !important;} .mpwpb-static-template #service-details .mpwpb-service-details-content li{ display:list-item !important; margin:0 0 6px !important; } #service-staff h2{font-size:16px !important;} /* Reviews kicker pill + heading (left block) with the "Write a Review" button pinned top-right -- same header layout as the Gallery section. */ .mpwpb-reviews-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 22px;flex-wrap:wrap; } .mpwpb-reviews-kicker{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme); font-family:'Sora','Segoe UI',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; } .mpwpb-static-template section#service-reviews .mpwpb-reviews-head h2{ font-size:26px !important;color:#15202B !important;margin:0 0 10px !important; } /* Average-rating line under the heading -- reuses the same mpwpb_service_review_ratings/_rating_text meta the hero section's own rating display already reads (MPWPB_Reviews_Admin::update_service_rating() keeps both current on every approval/status change), so it always matches what's actually approved below. Hidden entirely when there are no approved reviews yet (show_service_reviews() in Frontend/MPWPB_Static_Template.php). */ .mpwpb-reviews-summary{display:flex;align-items:center;gap:8px;} .mpwpb-reviews-summary-stars{display:inline-flex;gap:1px;color:#F0A93B;font-size:13px;} .mpwpb-reviews-summary-num{font-family:'Sora','Segoe UI',sans-serif;font-weight:700;font-size:13.5px;color:#15202B;} .mpwpb-reviews-summary-count{font-family:'Work Sans',sans-serif;font-size:13px;color:#5B6763;} /* mp_global/assets/mp_style/mpwpb_plugin_global.css has unscoped .mpwpb_style button rules (display:flex+justify-content:center, border-radius:var(--mpwpb_dbr), font-size/weight, a hover background that swaps to var(--mpwpb_color_theme_cc)) that all out-specify a plain single-class selector like this one (class+tag beats class alone). !important throughout is required to actually win -- same reason every button in the booking drawer reskin already needs it. */ .mpwpb-write-review-btn{ flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;justify-content:flex-start !important; gap:9px !important;border:none !important;border-radius:999px !important; background:var(--mpwpb_color_theme) !important;color:#fff !important;font-family:'Sora','Segoe UI',sans-serif !important; font-size:13px !important;font-weight:700 !important;text-transform:none !important; padding:12px 20px 12px 14px !important;cursor:pointer;box-shadow:0 6px 16px rgba(14,85,75,.25);transition:filter .15s; } .mpwpb-write-review-btn:hover, .mpwpb-write-review-btn:focus{ filter:brightness(.93);opacity:1 !important;background-color:var(--mpwpb_color_theme) !important;color:#fff !important; } .mpwpb-write-review-icon{ display:inline-flex !important;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50% !important; background:rgba(255,255,255,.18);font-size:11px; } /* -------------------------------------------------------------------- * * 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-family:'Work Sans',sans-serif;font-size:13.5px;color:#5B6763;} .mpwpb-review-item{border:1px solid #ECECE6;border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(20,32,27,.05);padding:20px 22px;} .mpwpb-review-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;} .mpwpb-review-stars{color:#fbbf24;font-size:13px;letter-spacing:1px;} .mpwpb-review-stars .far.fa-star{color:#E2E6E4;} .mpwpb-review-author{font-family:'Sora','Segoe UI',sans-serif;font-size:13.5px;font-weight:700;color:#15202B;} .mpwpb-review-date{font-family:'Work Sans',sans-serif;font-size:12px;color:#9AA3A0;margin-left:auto;} .mpwpb-review-title{margin:0 0 4px;font-family:'Sora','Segoe UI',sans-serif;font-size:14px;font-weight:700;color:#15202B;} .mpwpb-review-item h4.mpwpb-review-title{font-size:15px !important;} .mpwpb-review-content{margin:0;font-family:'Work Sans',sans-serif;font-size:13.5px;color:#5B6763;line-height:1.7;} .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 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:14px;margin:10px 0 15px;} /* "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{ display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--mpwpb-tint-border);border-radius:16px;background:var(--mpwpb-tint-bg); } .mpwpb-overview-stat-icon{ flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border-radius:12px;background:#fff;color:var(--mpwpb_color_theme);font-size:16px; } .mpwpb-overview-stat-num{margin:0 0 1px;font-family:'Sora','Segoe UI',sans-serif;font-size:22px;font-weight:800;color:var(--mpwpb_color_theme);line-height:1.1;} .mpwpb-overview-stat-label{margin:0;font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:500;color:#5B6763;} p.mpwpb-overview-stat-label{margin-left:10px !important;} /* Category preview chips */ .mpwpb-overview-categories{margin:0 0 28px;} .mpwpb-overview-subhead{margin:0 0 10px;font-family:'Work Sans',sans-serif;font-size:12.5px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;} .mpwpb-overview-cat-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;} .mpwpb-overview-cat-chip{ display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border:1px solid var(--mpwpb-tint-border);border-radius:999px;background:#fff; } .mpwpb-overview-cat-chip-icon{ flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme);font-size:12px; } .mpwpb-overview-cat-chip-name{font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600;color:#15202B;} .mpwpb-overview-cat-chip-count{font-family:'Sora','Segoe UI',sans-serif;font-size:12px;font-weight:700;color:var(--mpwpb_color_theme);} .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-card{ padding:18px 20px;border:1px solid #ECECE6;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(20,32,27,.05); display:flex;flex-direction:column;gap:14px; } .mpwpb-hours-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;} .mpwpb-hours-status{margin:0;display:flex;align-items:center;gap:8px;font-family:'Sora','Segoe UI',sans-serif;font-size:13px;font-weight:700;color:#15202B;} .mpwpb-hours-status-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#9ca3af;} .mpwpb-hours-status.is-open .mpwpb-hours-status-dot{background:#3fae6a;} .mpwpb-hours-status.is-closed .mpwpb-hours-status-dot{background:#cb5a5a;} .mpwpb-hours-time{ margin:0;display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:var(--mpwpb-tint); font-family:'Sora','Segoe UI',sans-serif;font-size:12.5px;font-weight:700;color:var(--mpwpb_color_theme);white-space:nowrap; } .mpwpb-hours-week{display:flex;gap:8px;} .mpwpb-hours-day{ flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 9px; border-radius:12px;border:1px solid var(--mpwpb-tint-border);background:#fff; } .mpwpb-hours-day-label{font-family:'Sora','Segoe UI',sans-serif;font-size:11px;font-weight:700;color:#15202B;} .mpwpb-hours-day-dot{width:6px;height:6px;border-radius:50%;background:var(--mpwpb_color_theme);} .mpwpb-hours-day.is-off{background:#FAFAF8;border-color:#EFEFE9;} .mpwpb-hours-day.is-off .mpwpb-hours-day-label{font-weight:500;color:#B0AEA5;} .mpwpb-hours-day.is-off .mpwpb-hours-day-dot{background:#D8D6CC;} .mpwpb-hours-day.is-today{background:var(--mpwpb_color_theme);border-color:var(--mpwpb_color_theme);} .mpwpb-hours-day.is-today .mpwpb-hours-day-label{color:#fff;} .mpwpb-hours-day.is-today .mpwpb-hours-day-dot{background:#fff;} .mpwpb-hours-open{margin:0;display:flex;align-items:center;gap:12px;font-family:'Work Sans',sans-serif;font-size:13px;font-weight:500;color:#15202B;} .mpwpb-hours-open i{ flex-shrink:0;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme);font-size:13px; } /* -------------------------------------------------------------------- * * FAQ — reused .mpwpb-serivice-faq / .faq-header / .faq-content markup * and the existing slideToggle behavior (mpwpb_registration.js toggles * .fa-plus/.fa-minus on click -- used directly below as the open/closed * state hook instead of adding a new class), restyled as cards with a * pastel icon badge that fills solid on open and a soft shadow lift, * matching the Service FAQ design artifact. The kicker pill + larger * dark-ink heading + subtitle (new markup, show_service_faq() in * Frontend/MPWPB_Static_Template.php) are specific to this section -- * every other section heading stays the shared smaller theme-colour * style below (same selector, same specificity, just later in the * file, so only #service-faq's own heading is overridden). */ .mpwpb-static-template .mpwpb-faq-kicker{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme); font-family:'Sora','Segoe UI',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; } .mpwpb-static-template section#service-faq > h2{ font-size:26px !important;color:#15202B !important;margin-bottom:8px !important; } .mpwpb-static-template .mpwpb-faq-subtitle{ font-family:'Work Sans',sans-serif;font-size:13.5px;color:#5B6763;line-height:1.6;margin:0 0 20px; } .mpwpb-static-template .mpwpb-serivice-faq{ border:1px solid #ECECE6;border-radius:20px;overflow:hidden;background:#fff;margin-top:15px;margin-bottom:16px; box-shadow:0 1px 3px rgba(20,32,27,.06);transition:box-shadow .2s ease; } .mpwpb-static-template .mpwpb-serivice-faq:has(.faq-header i.fa-minus){ box-shadow:0 10px 24px rgba(20,32,27,.1); } .mpwpb-static-template .mpwpb-serivice-faq .faq-header{ display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px !important;margin:0 !important;cursor:pointer; font-family:'Sora','Segoe UI',sans-serif;font-size:16px;font-weight:700;color:#15202B; } .mpwpb-static-template .mpwpb-serivice-faq .faq-header i{ flex:0 0 auto;order:2;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:#F0F4F3;color:var(--mpwpb_color_theme);font-size:13px;margin:0 !important; transition:background .2s ease,color .2s ease; } .mpwpb-static-template .mpwpb-serivice-faq .faq-header i.fa-minus{ background:var(--mpwpb_color_theme);color:#fff; } /* The header's icon markup comes BEFORE the title text node in the PHP (... Title) -- `order` above visually moves the badge to the end, after the text's own anonymous flex item, without touching the template, matching the design's title-left/badge-right layout. */ /* Font Awesome's plus/minus toggle (mpwpb_registration.js) only ever swaps between a plus and a flat minus glyph; the design calls for an actual close "x" once open, so the open state's icon content is swapped at the font level instead of touching the toggle's classes. */ .mpwpb-static-template .mpwpb-serivice-faq .faq-header i.fa-minus::before{ content:"\f00d"; } .mpwpb-static-template .mpwpb-serivice-faq .faq-content{ padding:0 24px 22px !important;font-family:'Work Sans',sans-serif;font-size:14px;color:#5B6763;line-height:1.75; } /* -------------------------------------------------------------------- * * 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. * -------------------------------------------------------------------- */ /* A normal flex child of .main now (static.php renders it between Details and Reviews, inside the same 70%-wide content column as every other section) -- no special width/centering of its own needed any more. */ .mpwpb-static-template .mpwpb-gallery-section{ scroll-margin-top:80px; } .mpwpb-static-template .mpwpb-gallery-kicker{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--mpwpb-tint);color:var(--mpwpb_color_theme); font-family:'Sora','Segoe UI',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; } .mpwpb-static-template .mpwpb-gallery-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap; } .mpwpb-static-template .mpwpb-gallery-section h2{ font-size:26px !important;font-weight:800;color:#15202B !important;border-bottom:0 !important;margin:0 0 6px !important; font-family:'Sora','Segoe UI',sans-serif; } .mpwpb-static-template .mpwpb-gallery-sub{margin:0;font-family:'Work Sans',sans-serif;font-size:13.5px;color:#5B6763;} .mpwpb-static-template .mpwpb-gallery-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto;} .mpwpb-static-template .mpwpb-gallery-nav .prev, .mpwpb-static-template .mpwpb-gallery-nav .next{ width:38px;height:38px;display:flex;align-items:center;justify-content:center; border-radius:50%;border:none;font-size:13px;cursor:pointer;transition:background .15s,filter .15s; } .mpwpb-static-template .mpwpb-gallery-nav .prev{background:#F3F5F4;color:#15202B;} .mpwpb-static-template .mpwpb-gallery-nav .prev:hover{background:#E2E6E4;} .mpwpb-static-template .mpwpb-gallery-nav .next{background:var(--mpwpb_color_theme);color:#fff;} .mpwpb-static-template .mpwpb-gallery-nav .next:hover{filter:brightness(.92);} /* 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:18px;overflow:hidden;aspect-ratio:4/3; border:1px solid var(--mpwpb-tint-border);background:#fff;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;right:10px;bottom:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(255,255,255,.92);color:var(--mpwpb_color_theme);font-size:12px;opacity:0;transition:opacity .15s; } .mpwpb-static-template .mpwpb-gallery-item:hover .mpwpb-gallery-zoom{opacity:1;} /* Owl's own dot pager -- only .owl-nav is hidden by the shared .mpwpb_style rule (mpwpb_plugin_global.css), so .owl-dots already renders, just unstyled; pill-shaped to match the gallery design. */ .mpwpb-static-template .mpwpb-gallery-section .owl-dots{ display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px; } .mpwpb-static-template .mpwpb-gallery-section .owl-dot span{ display:block;width:6px;height:6px;border-radius:999px;background:#E2E6E4;transition:width .2s ease,background .2s ease; } .mpwpb-static-template .mpwpb-gallery-section .owl-dot.active span{ width:18px;background:var(--mpwpb_color_theme); } /* -------------------------------------------------------------------- * * "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; } /* Each top-level category is now its own bordered card (was just a teal-tinted header row + a dotted hanging-indent line) -- clearer separation once there's more than one or two categories. Sub-categories keep their existing nested header + connector-line treatment below unchanged, just inset inside this outer card now instead of the page. */ .mpwpb-tree-cat{border:1px solid var(--mpwpb-tint-border);border-radius:14px;overflow:hidden;margin-bottom:10px;background:#fff;} .mpwpb-tree-cat:last-child{margin-bottom:0;} .mpwpb-tree-cat > .mpwpb-tree-cat-row{margin-top:0;border:0;border-radius:0;} .mpwpb-tree-cat-row{font-weight:700;color:#1e293b;background:var(--mpwpb-tint-soft);border:1px solid #ede7e7;margin-top:5px;} .mpwpb-tree-cat-row:hover{background:var(--mpwpb-tint-soft);} .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:0;padding:8px 12px 12px;border-left:0; } .mpwpb-tree-subcat.is-open > .mpwpb-tree-children{display:block;} /* No more ::before connector tick -- the category's own outer card border (above) replaced the vertical guide line it used to point back to, so a lone horizontal tick with nothing to connect to would look orphaned. */ .mpwpb-tree-subcat-row{font-size:13px;font-weight:600;color:#334155;border:1px solid #ddd;margin-top:10px;margin-bottom:10px;padding:8px 20px 10px 10px;background:var(--mpwpb-tint-soft);} .mpwpb-tree-subcat-row:hover{background:#d5f7ef;} .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). */ /* Live "N selected · total", built entirely from the real relocated rows (mpwpb-service-tree.js:updateSidebarSummary) -- hidden until at least one service is selected. */ .mpwpb-tree-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 10px;padding:0 2px;font-size:12.5px;color:#94a3b8;} .mpwpb-tree-summary-total{font-size:14px;font-weight:800;color:#1e293b;} .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;} /* Inline display mode's copy of this row -- sits inside the (now non-modal) popup card itself instead of in the sidebar wrapper that's skipped entirely for this mode, so it needs its own side margin to match the card's padding instead of the sidebar's. */ .mpwpb-tree-trust--inline{margin:0 20px 20px;border:1px solid #e5e9f0;} /* 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:var(--mpwpb-shade);} .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;} /* Shown in the checkout step when no payment method is configured (see the has_payment_method guard in mpwpb_registration.js). */ .mpwpb-checkout-nopay{ display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center; margin:8px 0;padding:26px 20px;border:1px solid #fde68a;border-radius:12px; background:linear-gradient(135deg,#fffbeb,#fffdf7);color:#7c5a1b; } .mpwpb-checkout-nopay i{ font-size:38px;color:#e9a008; } .mpwpb-checkout-nopay p{margin:0;font-size:13.5px;font-weight:600;line-height:1.5;max-width:420px;} /* Customer-facing variant: calm/neutral, no "misconfiguration" alarm colour. */ .mpwpb-checkout-nopay:not(.mpwpb-checkout-nopay--admin){ border-color:#e5e9f0;background:#f8fafc;color:#475569; } .mpwpb-checkout-nopay:not(.mpwpb-checkout-nopay--admin) i{color:var(--mpwpb_color_theme);} .mpwpb-checkout-nopay-btn{ display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:11px 20px;border-radius:10px; background:var(--mpwpb_color_theme);color:#fff !important;font-size:13px;font-weight:700;text-decoration:none; transition:filter .12s ease; } .mpwpb-checkout-nopay-btn:hover{filter:brightness(.92);color:#fff !important;} .mpwpb-checkout-nopay-btn i{font-size:12px;} .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:760px !important;min-width:0 !important; /* Dock the drawer to the full visible viewport height. 100dvh (dynamic viewport height) is preferred over 100vh so the docked footer/Continue button can never end up hidden behind a mobile browser's collapsing address bar -- 100vh there resolves to the *largest* possible viewport (toolbar retracted), pushing the bottom of the drawer below the fold, whereas 100dvh always tracks the currently visible height. The plain 100vh line is kept first as the fallback for browsers without dvh. The previous `top:30px` + `max-height:96vh` combo offset the whole panel down while still sizing it ~full height, so its bottom (footer + action button) was clipped off-screen -- most visibly on phones/tablets. */ top:0 !important; height:100vh !important;height:100dvh !important; max-height:100vh !important;max-height:100dvh !important;border-radius:0 !important; box-shadow:-8px 0 30px rgba(15,23,42,.18) !important; /* Base CSS lays this column out with justify-content:space-between. While the footer is visible its margin-top:auto soaks up the spare height, so that never showed -- but on the Checkout/Confirmation steps the footer is hidden (.mpwpb-inline-checkout-footer-hidden), leaving just header + body, and space-between then pushed the body to the bottom: a big empty block between the header and the step indicator. */ justify-content:flex-start !important; } /* Only logged-in users see WordPress's fixed admin bar (front-end visitors never do), so offset the drawer below it just for them -- otherwise the header/close would sit hidden behind the bar. 32px on desktop and 46px on the <=782px admin-bar layout mirror WP core's own html{margin-top} values. */ .admin-bar .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_main_area{ top:32px !important; height:calc(100vh - 32px) !important;height:calc(100dvh - 32px) !important; max-height:calc(100vh - 32px) !important;max-height:calc(100dvh - 32px) !important; } @media screen and (max-width:782px){ .admin-bar .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_main_area{ top:46px !important; height:calc(100vh - 46px) !important;height:calc(100dvh - 46px) !important; max-height:calc(100vh - 46px) !important;max-height:calc(100dvh - 46px) !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{ /* Sits inside the drawer header (which now already starts below the WP admin bar via the main-area offset above), aligned with the title. 34px keeps it a comfortable tap target on touch devices. */ position:absolute !important;top:16px !important;right:14px !important;width:34px !important;height:34px !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); } /* Steps already completed stay filled (in the theme colour) but faded, so the bar reads as real progress -- earlier steps done, current step highlighted, later steps still grey. Driven by mpwpb_set_progress() in mpwpb_registration.js (.is-done on every step before the active one). */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_step.is-done{ background:var(--mpwpb_color_theme);opacity:.45; } .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 #e7ecf0;border-radius:14px; background:color-mix(in srgb, var(--mpwpb_color_theme) 6%, white);overflow:hidden; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-header{ display:flex;align-items:center;justify-content:space-between;padding:11px 14px 7px; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-title{ font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-count{ font-size:11px;font-weight:800;color:#fff;background:var(--mpwpb_color_theme); border-radius:999px;padding:1px 8px;line-height:1.5;min-width:16px;text-align:center; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-row{ display:flex;align-items:center;gap:8px; padding:7px 14px;font-size:12.5px;color:#334155;border-top:1px solid rgba(15,23,42,.06); } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-check{ width:16px;height:16px;border-radius:50%;background:var(--mpwpb_color_theme); flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px; } .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-qty{ flex:0 0 auto;font-size:10.5px;font-weight:700;color:#64748b;background:#eef2f6; border-radius:999px;padding:1px 7px; } .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:var(--mpwpb-tint-soft);} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-selected-summary-more-btn i{font-size:10px;} .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);} /* -------------------------------------------------------------------- * * Responsive drawer — tablets & phones * The drawer stays a right-docked 560px panel from tablet up; at <=640px * it goes edge-to-edge full-screen. These blocks size the header, the * footer action bar, tap targets and iOS safe-area padding so the whole * booking wizard is comfortable to operate on every device. * -------------------------------------------------------------------- */ /* Give the footer's Total/Continue row a comfortable touch height on any device narrow enough to plausibly be a tablet or phone. Kept as flex so min-height reliably centers the label (buttons are inline-block by default, where min-height alone would not). */ @media(max-width:768px){ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_service_next, /* Only the buttons JS is actually showing -- the `:not(display:none)` guard stops this !important flex rule from overriding the inline display:none that JS/PHP use to keep the second "Back", "Next Staff Member" and "Proceed to Checkout" hidden until their step. Without it, all of them render at once on mobile (the "double Back" bug). */ .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area ._mpBtn_dBR:not([style*="display: none"]):not([style*="display:none"]){ display:inline-flex !important;align-items:center;justify-content:center;min-height:46px; } .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area .justifyBetween, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area .justifyBetween{ gap:10px;align-items:center; } } /* Phones: full-screen drawer, tightened header, stacked full-width action button, and safe-area padding so the primary CTA clears the iOS home indicator instead of sitting under it. */ @media(max-width:640px){ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_main_area{ width:100vw !important;width:100dvw !important; max-width:100vw !important;max-width:100dvw !important; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_header{padding:18px 54px 14px 18px !important;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_header h5{font-size:17px !important;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_popup_close{ top:14px !important;right:12px !important;width:38px !important;height:38px !important;font-size:14px !important; } .mpwpb-static-template .sidebar .mpwpb_popup .service-items{padding:14px !important;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_cart_progress_wrapper{padding:22px 16px 0 16px !important;} /* Footer keeps the docked look but adds the home-indicator inset. */ .mpwpb-static-template .sidebar .mpwpb_popup .popupFooter{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 12px) !important; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpd_btn_proceed{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important; } /* Service step: Total on its own line, Continue full-width below it. A thin divider under the Total row (instead of them just floating in the same gap) keeps the small label/amount from reading as loose, disconnected text sitting above the button. */ .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area .justifyBetween{flex-wrap:wrap;gap:14px;} .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area h3{ flex:1 1 100%;justify-content:flex-start;font-size:15px; padding-bottom:12px;border-bottom:1px solid #eef1f4; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_service_next{flex:1 1 100%;min-height:48px;} /* Date & Time step: Back + Total share the top line, Checkout full-width below. flex-wrap lets them reflow instead of overflowing the panel. */ .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area .justifyBetween{flex-wrap:wrap;gap:14px;} .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area h4.mpwpb-total{flex:1 1 auto;justify-content:flex-end;font-size:15px !important;} .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_date_time_next_btn_id, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_show_hide_staff_member{ flex:1 1 100%;min-height:48px; } } /* Inline display mode (Admin/MPWPB_Settings.php:mpwpb_booking_display_mode, templates/registration/static_registration.php) -- same popup markup, same step-flow JS (nothing reimplemented), rendered server-side with the `in` class already on it instead of waiting for a click. It just needs to stop LOOKING like a fixed/docked drawer and sit in the sidebar column's normal page flow as an embedded card instead -- placed after every drawer/admin-bar/phone rule above (same or lower specificity) so this reliably wins regardless of viewport or login state. */ .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline{ position:static !important;display:block !important;inset:auto !important; background:transparent !important;z-index:auto !important;overflow:visible !important; align-items:unset !important;justify-content:unset !important; } .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .mpwpb_popup_main_area{ position:static !important;margin:0 !important; width:100% !important;max-width:none !important;min-width:0 !important; top:auto !important;height:auto !important;max-height:none !important; border-radius:16px !important;box-shadow:-8px 0 30px rgba(15, 23, 42, .18) !important; animation:none !important; } /* Popup Modal display mode only (not Inline), and only once the service list is short enough to stay single-column (.is-dense not present -- see initBookingTree() in mpwpb-booking-tree.js, >8 items) -- a narrower 760px drawer with a short list reads as mostly empty space, so it docks at a slimmer 560px instead. A dense (>8 items) list keeps the wider 760px drawer from the base rule above so its 2-column grid has room. */ .mpwpb-static-template .sidebar .mpwpb_popup:not(.mpwpb-popup-inline):not(:has(.mpwpb-booking-tree.is-dense)) .mpwpb_popup_main_area{ max-width:560px !important; } .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .mpwpb_popup_body{ max-height:none !important; } /* Inline mode sits inside the sidebar column's own width, which can be much narrower than the @media(max-width:640px) wrap rules above ever check -- those only fire at an actual small viewport, so a desktop-width viewport with a narrow sidebar column never got them and the Checkout/Continue button overflowed past the card's right edge. Same stack treatment as that phone breakpoint (Total on its own line, CTA full-width below), just unconditional here since inline's width constraint isn't tied to the viewport at all. */ .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_service_area .justifyBetween{flex-wrap:wrap;gap:14px;} /* A thin divider under the (now full-width) Total row keeps the small label/amount from reading as loose, disconnected text floating above the button -- matches the same ≤640px Popup Modal treatment above. */ .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_service_area h3{ flex:1 1 100%;padding-bottom:12px;border-bottom:1px solid #eef1f4; } .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .mpwpb_service_next{flex:1 1 100%;min-height:48px;} .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_date_area .justifyBetween{flex-wrap:wrap;gap:14px;} .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_date_area h4.mpwpb-total{flex:1 1 auto;} .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_date_area #mpwpb_date_time_next_btn_id, .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .next_date_area #mpwpb_show_hide_staff_member{ flex:1 1 100%;min-height:48px; } /* -------------------------------------------------------------------- * * 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;} /* Two columns only once there's enough width AND enough services to actually benefit from it -- .is-dense is added by initBookingTree() (mpwpb-booking-tree.js) when more than 8 real services (counted across every category combined, not per-category) are on this page; 8 or fewer stays single-column even at this width, since splitting a short list in two just makes it feel sparse/unbalanced rather than denser. */ @media (min-width:1024px){ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-booking-tree.is-dense{ display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-booking-tree.is-dense .mpwpb-tree-cat{margin-bottom:0;} } /* Inline display mode always stays single column, same list style as the default Popup Modal view -- no 2-column split regardless of item count or viewport width, so it doesn't fight the sidebar column's own width. */ .mpwpb-static-template .sidebar .mpwpb_popup.mpwpb-popup-inline .mpwpb-booking-tree{ display:block !important; } .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 solid #e4e0e0;border-radius:10px;background:#fff; box-shadow:none; } .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:var(--mpwpb-tint-soft);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;min-width:0;} .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 .mpwpb_service_duration{white-space:nowrap;margin-right:10px;} /* The row ran out of horizontal room once duration (above) could no longer wrap to absorb the squeeze -- without this, the qty stepper (flex-shrink:0 below) got pushed past the row's own right edge instead. This lets the name/details/duration/price block shrink and, if still tight, wrap onto a second line as a whole group, so the stepper always stays inside the card. */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row ._dFlex_justifyBetween_fullWidth{min-width:0;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row ._fdColumn_fullWidth{min-width:0;flex:1 1 auto;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row ._equalChild{flex-wrap:wrap;row-gap:4px;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .quantity-box{gap:8px;flex-shrink:0;} /* 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; } /* "Tap to add" hint (relocateService() in mpwpb-booking-tree.js) -- same toggle as the qty-stepper above, opposite state: visible while unselected, hidden once the qty stepper takes its place. */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row .mpwpb-tree-tap-hint{ display:inline; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-service-row.mpActive .mpwpb-tree-tap-hint{ display:none; } /* 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 (superseded by the selected-summary card's own count badge above -- see .mpwpb-selected-summary-count -- so hidden here rather than removed from the DOM, since relabelContinueButton() still needs somewhere to prepend it; the !important is required to beat the inline display jQuery's .show()/.hide() sets on it in updateSelectedFooter()) + the stacked "Total" label/amount + relabelled Continue button. */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-tree-selected-label{ display:none !important; } .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area .justifyBetween{flex-wrap:wrap;} .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area h3, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area h4.mpwpb-total{ display:flex;flex-direction:row;align-items:center;gap:6px;margin:0; } .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area h4.mpwpb-total{flex:1 1 auto;} .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-footer-total-label{ font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8; } .mpwpb-static-template .sidebar .mpwpb_popup .next_service_area .mpwpb_total_bill, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area .mpwpb_total_bill{ font-size:19px;font-weight:800; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_service_next{ background-color:var(--mpwpb_color_theme) !important;border-radius:999px !important; } /* Back buttons (Date & Time step) -- a muted ghost pill instead of the solid theme-color fill the shared .mActive utility class (mp_global/mpwpb_plugin_global.css) would otherwise give them, so they read as a secondary action next to the accent-colored Continue/Checkout CTA. */ .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_display_date_time, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_display_service_btn{ background-color:#f1f5f9 !important;border-color:transparent !important;color:#0f172a !important; border-radius:10px !important;font-weight:700; } .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_display_date_time:hover, .mpwpb-static-template .sidebar .mpwpb_popup .next_date_area #mpwpb_display_service_btn:hover{ background-color:#e6ebf0 !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 a neutral grey pill and non-interactive-looking by default and only turns solid accent 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:999px !important; background-color:#cbd5e1 !important;color:#64748b !important;opacity:1; } .mpwpb-static-template .sidebar .mpwpb_popup #mpwpb_date_time_next_btn_id.mpwpb-cta-ready{ background-color:var(--mpwpb_color_theme) !important;color:#fff !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:var(--mpwpb-tint-soft);} .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-summary-header{ display:flex;align-items:center;justify-content:space-between;gap:10px; } .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; } /* Live "N added · +" chip, appended next to the h5 by initExtraServiceSummary()/updateExtraServiceSummary() (mpwpb-booking- tree.js) -- same running-subtotal idea as .mpwpb-selected-summary-count above, scoped to just this section's own add-ons rather than the whole booking. */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb-extra-summary-chip{ display:none;flex:0 0 auto;font-size:11px;font-weight:700;color:var(--mpwpb_color_theme); white-space:nowrap;margin-bottom:8px; } .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:16px; padding:12px 14px !important;margin:0 0 12px 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;} /* Accent bar down the left edge, shown only once the item is added -- same signal as the color wash below, just visible at a glance without reading the checkbox/border color. */ .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item::before{ content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px; border-radius:0 3px 3px 0;background:transparent; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item.mpActive::before{ background:var(--mpwpb_color_theme); } .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:var(--mpwpb_color_theme);background:color-mix(in srgb, var(--mpwpb_color_theme) 6%, white);color:#1e293b; } .mpwpb-static-template .sidebar .mpwpb_popup .mpwpb_extra_service_item .alignCenter > .fas:first-child{ flex:0 0 auto;width:40px;height:40px;display:inline-flex !important;align-items:center;justify-content:center; border-radius:12px;background:color-mix(in srgb, var(--mpwpb_color_theme) 12%, white);color:var(--mpwpb_color_theme) !important;font-size:16px;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:var(--mpwpb-tint-soft) !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; } /* Reorder recovery feedback remains visible while the wizard advances from Services to Date & Time. It is deliberately matched by the popup itself, not an outer page wrapper, so shortcode/theme variations cannot strip the spacing and leave this as the plain edge-to-edge sentence it replaced. */ div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice{ box-sizing:border-box;display:flex !important;align-items:flex-start;gap:11px; margin:12px 16px 4px !important;padding:12px 14px !important; border:1px solid #f5d98b !important;border-left:4px solid #e9a008 !important; border-radius:10px !important;background:linear-gradient(135deg,#fffbeb 0%,#fffdf7 100%) !important; box-shadow:0 4px 14px rgba(146,95,10,.08);color:#6b4508 !important; font-size:12.5px;line-height:1.45;text-align:left; } div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice-icon{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px; width:26px;height:26px;margin-top:1px;border-radius:50%; background:#fef0bd;color:#a86403;font-size:11px; } div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice-content{ dis:flex;flex-direction:column;min-width:0;gap:2px; } div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice strong{ dis:block;color:#6b4508 !important;font-size:12.5px;font-weight:800;line-height:1.35; } div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice-message{ dis:block;color:#7c5a1b;font-size:12px;line-height:1.45;overflow-wrap:anywhere; } @media (max-width:480px){ div.mpwpb_popup[data-popup="#mpwpb_static_popup"] .mpwpb-reorder-notice{ margin:10px 12px 2px !important;padding:11px 12px !important;gap:9px; } } /* Recurring appointment series inside the inline WooCommerce confirmation. The account-page component normally has four wide columns; this scoped layout keeps its counters and controls aligned in the narrower drawer. */ .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account{ margin:18px 0;border-radius:16px; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__header{ display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:12px; padding:20px 18px;background:linear-gradient(135deg,var(--mpwpb-tint-soft) 0%,#f8fafc 100%); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__header::before{ background:var(--mpwpb_color_theme); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__eyebrow{ background:var(--mpwpb-tint-soft);color:var(--mpwpb_color_theme); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__count{ display:grid !important;place-items:center !important;align-self:center; box-sizing:border-box;width:38px;height:38px;min-width:38px;margin:0;padding:0; border-radius:11px;background:var(--mpwpb_color_theme);color:#fff; box-shadow:0 8px 18px rgba(15,118,110,.22);font-size:15px;line-height:1;text-align:center; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__list{ gap:10px;padding:16px; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence{ grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto; gap:7px 10px;padding:13px 12px 13px 15px; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence::before{ background:var(--mpwpb_color_theme); } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence__number{ display:grid !important;grid-column:1;grid-row:1 / span 2;place-items:center !important; align-self:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;margin:0;padding:0; border:1px solid var(--mpwpb_color_theme);border-radius:9px;background:var(--mpwpb-tint-soft); color:var(--mpwpb_color_theme);font-size:12px;line-height:1;text-align:center; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence > div:not(.mpwpb-recurring-occurrence__actions){ grid-column:2;grid-row:1 / span 2; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence .mpwpb-status{ grid-column:3;grid-row:1;padding:5px 9px;font-size:9.5px; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence__actions{ grid-column:3;grid-row:2;justify-self:end;gap:5px !important; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-occurrence__actions .mpwpb-btn{ min-height:28px;margin:0 !important;padding:5px 8px !important;font-size:10px !important;line-height:1.1; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__actions{ display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; align-items:stretch;padding:12px; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__actions .mpwpb-btn{ display:inline-flex !important;align-items:center;justify-content:center;gap:4px; box-sizing:border-box;width:100% !important;min-width:0;min-height:32px;margin:0 !important; padding:6px 5px !important;border-radius:8px;font-size:9.5px !important;font-weight:700; line-height:1.15;text-align:center;white-space:normal; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__actions .mpwpb-recurring-add{ border-color:var(--mpwpb_color_theme) !important;background:var(--mpwpb_color_theme) !important;color:#fff !important; } .mpwpb-static-template .mpwpb-inline-confirmation .mpwpb-recurring-account__actions .mpwpb-reorder-btn{ border-color:var(--mpwpb_color_theme) !important;background:#fff !important;color:var(--mpwpb_color_theme) !important; } /* Inline WooCommerce recovery state: scoped to the booking checkout drawer. */ .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-preparing{ margin:0;padding:210px 20px 24px;color:#64748b;font-size:12px;text-align:center; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-recovery{ display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center; margin:18px;padding:16px;border:1px solid #bae6e1;border-radius:12px; background:linear-gradient(135deg,var(--mpwpb-tint-soft),#f8fafc);color:#334155; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-recovery > .fas{ display:grid !important;width:38px;height:38px;place-items:center;border-radius:10px; background:var(--mpwpb_color_theme);color:#fff;font-size:14px; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-recovery strong{ display:block;color:var(--mpwpb-shade);font-size:13px;line-height:1.35; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-recovery p{ margin:3px 0 0 !important;color:#64748b;font-size:11.5px;line-height:1.45; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-inline-retry-checkout{ min-height:34px;margin:0 !important;padding:7px 12px !important;border:0 !important;border-radius:8px !important; background:var(--mpwpb_color_theme) !important;color:#fff !important;font-size:11px !important;font-weight:700; } @media(max-width:480px){ .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-checkout-recovery{ grid-template-columns:34px minmax(0,1fr);margin:12px;padding:13px; } .mpwpb-static-template .mpwpb_order_proceed_area .mpwpb-inline-retry-checkout{grid-column:1/-1;width:100%;} } /* -------------------------------------------------------------------- * * Date picker -> full month calendar ("Date Picker Layout" = Full * Calendar, Settings > Global). display_booking_date() emits one * .mpwpb-date-calendar-month per month in the booking window, each a * real 7-column grid; initDateCalendarPagination() in * mpwpb-booking-tree.js shows one month at a time and turns the header * arrows into month navigation. * * Deliberately NOT scoped to the static template / sidebar popup the way * the .mpwpb-date-grid rules above are: this layout is a global setting, * so it has to look right in every template and in the popup alike. * -------------------------------------------------------------------- */ .mpwpb_style .mpwpb-date-calendar{display:block !important;width:100%;} .mpwpb_style .mpwpb-date-calendar .mpwpb-date-calendar-month{display:block;width:100%;} .mpwpb_style .mpwpb-date-calendar .mpwpb-date-month-label{ font-size:15px;font-weight:700;color:#1e293b;text-align:center;margin:0 0 10px;text-transform:capitalize; } .mpwpb_style .mpwpb-date-calendar .mpwpb-date-weekday-row, .mpwpb_style .mpwpb-date-calendar .mpwpb-date-month-days{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px; } .mpwpb_style .mpwpb-date-calendar .mpwpb-date-weekday-row{margin-bottom:6px;} .mpwpb_style .mpwpb-date-calendar .mpwpb-date-weekday-row span{ font-size:11px;font-weight:700;color:#94a3b8;text-align:center;text-transform:uppercase;letter-spacing:.02em; } .mpwpb_style .mpwpb-date-calendar .mpwpb-date-blank{ display:flex;align-items:center;justify-content:center;min-height:38px; font-size:13px;color:#e2e8f0; } .mpwpb_style .mpwpb-date-calendar .mpwpb_date_time_line{ width:auto !important;flex:none !important;margin:0 !important; } /* The weekday is already the column header here, so the per-cell "Mon / Today" label would only repeat it and force the cells taller. */ .mpwpb_style .mpwpb-date-calendar .mptrs_day_with_date{display:none !important;} .mpwpb_style .mpwpb-date-calendar .mpwpb_get_date, .mpwpb_style .mpwpb-date-calendar .mpwpb_get_close_date, .mpwpb_style .mpwpb-date-calendar .mpwpb_get_date_passed{ display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:2px; width:100%;height:100%;min-height:38px !important;padding:6px 2px !important; border:1px solid #e5e9f0 !important;border-radius:10px;margin:0 !important; } .mpwpb_style .mpwpb-date-calendar .mpwpb-date-number{font-size:15px;font-weight:700;color:#1e293b;line-height:1.1;} .mpwpb_style .mpwpb-date-calendar .mpwpb_get_date_selected .mpwpb-date-number{color:#fff !important;} .mpwpb_style .mpwpb-date-calendar .mpwpb_get_close_date, .mpwpb_style .mpwpb-date-calendar .mpwpb_get_date_passed{ background-color:#f8fafc !important;cursor:not-allowed !important;opacity:.6; } .mpwpb_style .mpwpb-date-calendar .mpwpb_get_close_date .mpwpb-date-number, .mpwpb_style .mpwpb-date-calendar .mpwpb_get_date_passed .mpwpb-date-number{color:#94a3b8 !important;} /* "Closed"/"Passed" spelled out does not fit a calendar cell -- the greyed cell already says it, and the title attribute carries the full date. */ .mpwpb_style .mpwpb-date-calendar .mpwpb_close_date, .mpwpb_style .mpwpb-date-calendar .mpwpb_date_passed_label{ font-size:8px;font-weight:600;color:#cbcfcf;text-transform:uppercase;line-height:1; white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%; } @media(max-width:420px){ .mpwpb_style .mpwpb-date-calendar .mpwpb-date-weekday-row, .mpwpb_style .mpwpb-date-calendar .mpwpb-date-month-days{gap:4px;} .mpwpb_style .mpwpb-date-calendar .mpwpb_close_date, .mpwpb_style .mpwpb-date-calendar .mpwpb_date_passed_label{display:none;} } /* Staff step: shown in place of the staff cards when nobody is free for the picked slot (mpwpb_recurring_booking.js) -- Proceed to Checkout stays hidden until another time with available staff is chosen. */ .mpwpb-static-template .mpwpb_no_staff_notice{ margin:6px 0 0;padding:12px 14px;border:1px solid #fde68a;border-radius:10px; background:#fffbeb;color:#92400e;font-size:13px;font-weight:600;line-height:1.5; } /* -------------------------------------------------------------------- * * Staff step -- selectable staff cards (markup: render_staff_cards() in * Frontend/MPWPB_Staff_Booking.php; selection: the .mpwp_select_staff_card * click handler in mpwpb_registration.js toggles .selected). Two-column * card grid with avatar / name / status / tick, selected state in the * Theme Color with a pale tint background (--mpwpb-tint-* defined at the * top of this file), replacing the old strip of bare avatars with a fixed * green ring. !important where mpwpb_registration.css's unscoped staff * rules or the plugin-wide button/span rules would otherwise win. * -------------------------------------------------------------------- */ .mpwpb-static-template .mpwpb_staff_step_summary{ background:var(--mpwpb-tint-bg) !important;border:1px solid var(--mpwpb-tint-border) !important;border-radius:12px !important; } .mpwpb-static-template .mpwpb_staff_step_summary_row i{color:var(--mpwpb_color_theme) !important;} .mpwpb-static-template .mpwp_select_staff_grid{ display:grid !important;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px !important; overflow:visible !important;padding:2px 0 6px !important; } .mpwpb-static-template .mpwp_select_staff_card{ display:flex !important;align-items:center;gap:12px;width:auto !important;min-width:0;margin:0 !important; padding:14px !important;border:1.5px solid #E2E6E4 !important;border-radius:14px !important; background:#fff !important;color:#15202B !important;text-align:left !important;cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04) !important;transition:border-color .15s, background-color .15s, box-shadow .15s; font:inherit !important;line-height:1.3 !important;text-transform:none !important; } .mpwpb-static-template .mpwp_select_staff_card:hover{border-color:var(--mpwpb-tint-line) !important;} .mpwpb-static-template .mpwp_select_staff_card:focus-visible{outline:2px solid var(--mpwpb_color_theme);outline-offset:2px;} .mpwpb-static-template .mpwp_select_staff_card.selected{ border-color:var(--mpwpb_color_theme) !important;background:var(--mpwpb-tint-soft) !important; box-shadow:0 0 0 3px var(--mpwpb-tint) !important; } .mpwpb-static-template .mpwp_select_staff_avatar{ flex:0 0 auto;width:44px !important;height:44px !important;margin:0 !important;border-radius:50% !important; border:0 !important;object-fit:cover;display:flex !important;align-items:center;justify-content:center; background:var(--mpwpb-tint) !important;color:var(--mpwpb_color_theme); } .mpwpb-static-template .mpwp_select_staff_avatar--initial{ font-family:'Sora','Segoe UI',sans-serif;font-weight:700;font-size:17px; } .mpwpb-static-template .mpwp_select_staff_text{ flex:1 1 auto;min-width:0;display:flex !important;flex-direction:column;gap:2px; } .mpwpb-static-template .mpwp_select_staff_name{ display:block !important;font-size:14px !important;font-weight:700 !important;color:#15202B !important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mpwpb-static-template .mpwp_select_staff_meta{display:block !important;font-size:12px;font-weight:500;color:#5B6763;} .mpwpb-static-template .mpwp_select_staff_radio{ flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex !important;align-items:center;justify-content:center; border:2px solid #CBD0D6;background:#fff;color:transparent; } .mpwpb-static-template .mpwp_select_staff_card.selected .mpwp_select_staff_radio{ border-color:var(--mpwpb_color_theme);background:var(--mpwpb_color_theme);color:#fff; } @media (max-width:420px){ .mpwpb-static-template .mpwp_select_staff_grid{grid-template-columns:minmax(0, 1fr);} }