/* ===================================================================== * Modern Service Editor · mpwpb-service-edit-modern.css * Scoped under .mpwpb-sme (shell) or body.mpwpb-sme-active (WP chrome * takeover) so the classic editor and the rest of wp-admin are never * affected. * * The shell reuses the existing classic section markup for the step * bodies. That markup also carries the legacy `mpwpb_style` class (on the * root) so classic JS (tabs, collapse, sortable, datepicker, icon/image * picker) keeps working; therefore rules that restyle reused elements are * prefixed `.mpwpb-sme.mpwpb_style` to win specificity over the legacy * `div.mpwpb_style ...` rules in mpwpb_plugin_global.css. * ===================================================================== */ .mpwpb-sme{ --bg:#eef1f6; --surface:#fff; --inset:#f8fafc; --band:#f1f5f9; --band-line:#e6ebf2; --ink:#0f172a; --ink-2:#475569; --muted:#94a3b8; --line:#e4e9f0; --brand:#2451e0; --brand-600:#1d3fb8; --brand-soft:#eaf0ff; --brand-ring:rgba(36,81,224,.16); --blue:#2451e0; --blue-soft:#eaf0ff; --ok:#16a34a; --ok-soft:#ecfdf3; --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04); --radius:14px; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink-2);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;background:var(--bg);margin:0; } div#mpwpb-sme{background:#F8FAFC;} .mpwpb-sme *, .mpwpb-sme *::before, .mpwpb-sme *::after{box-sizing:border-box;} .mpwpb-sme h1,.mpwpb-sme h2,.mpwpb-sme h3,.mpwpb-sme h4{ font-family:'Plus Jakarta Sans','Inter',sans-serif;color:var(--ink);margin:0; } /* -------------------------------------------------------------------- * * Full-screen takeover (only when modern editor is active) — hides ALL * WP chrome so the editor takes over the screen edge to edge. * -------------------------------------------------------------------- */ html.mpwpb-sme-html.wp-toolbar{padding-top:0 !important;} html.mpwpb-sme-html, body.mpwpb-sme-active{background:#eef1f6 !important;} body.mpwpb-sme-active #wpadminbar, body.mpwpb-sme-active #adminmenumain, body.mpwpb-sme-active #adminmenuback, body.mpwpb-sme-active #adminmenuwrap, body.mpwpb-sme-active #screen-meta, body.mpwpb-sme-active #screen-meta-links, body.mpwpb-sme-active #wpfooter, body.mpwpb-sme-active .wrap > h1.wp-heading-inline, body.mpwpb-sme-active .wrap > .page-title-action, body.mpwpb-sme-active .wrap > hr.wp-header-end, body.mpwpb-sme-active #post-body-content, body.mpwpb-sme-active #postbox-container-1, body.mpwpb-sme-active #poststuff #postbox-container-2 .postbox:not(#mpwpb_sme_meta_box_panel){ display:none !important; } body.mpwpb-sme-active #titlediv{position:absolute;left:-9999px;top:-9999px;} body.mpwpb-sme-active #wpcontent{margin-left:0 !important;padding-left:0 !important;} body.mpwpb-sme-active #wpbody-content{padding:0 !important;float:none;} body.mpwpb-sme-active div.wrap{margin:0 !important;padding:0 !important;max-width:none !important;} body.mpwpb-sme-active #poststuff{margin:0 !important;padding:0 !important;min-width:0;} body.mpwpb-sme-active #poststuff .stuffbox>h3, body.mpwpb-sme-active #poststuff h2, body.mpwpb-sme-active #poststuff h3.hndle{padding:8px 0px;} body.mpwpb-sme-active #post-body{margin:0 !important;padding:0 !important;} body.mpwpb-sme-active #post-body.columns-2 #postbox-container-2{width:100% !important;float:none !important;margin:0 !important;} body.mpwpb-sme-active #mpwpb_sme_meta_box_panel{border:0;background:transparent;box-shadow:none;margin:0;} body.mpwpb-sme-active #mpwpb_sme_meta_box_panel > .postbox-header{display:none;} body.mpwpb-sme-active #mpwpb_sme_meta_box_panel > .inside{margin:0;padding:0;} /* ==================================================================== * * SHELL (unique class names — no conflict with classic) * ==================================================================== */ /* Topbar */ .mpwpb-sme__topbar{ position:sticky;top:0;z-index:30; background:rgba(255,255,255,.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:12px 26px; } .mpwpb-sme__back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500;font-size:13.5px;padding:7px 11px;border-radius:9px;text-decoration:none;} .mpwpb-sme__back:hover{background:var(--band);color:var(--ink);} .mpwpb-sme__back .dashicons{font-size:17px;width:17px;height:17px;} .mpwpb-sme.mpwpb_style .mpwpb-sme__topbar input.mpwpb-sme__ttl-input{ justify-self:center;width:460px;min-width:160px;text-align:center; font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink); background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 12px;transition:.15s;box-shadow:none;min-height:0;height:auto; } .mpwpb-sme.mpwpb_style .mpwpb-sme__topbar input.mpwpb-sme__ttl-input:hover{background:var(--band);} .mpwpb-sme.mpwpb_style .mpwpb-sme__topbar input.mpwpb-sme__ttl-input:focus{outline:none;background:#fff;border-color:var(--line);box-shadow:0 0 0 3px var(--brand-ring);text-transform:none;letter-spacing:normal;} /* Required-field guard (submitForm()'s validateRequiredFields()) -- applied to the topbar/inline title inputs and the Featured Image rail card. */ input.mpwpb-sme__field-invalid, textarea.mpwpb-sme__field-invalid{ border-color:#dc2626 !important; background:#fef2f2 !important; box-shadow:0 0 0 3px rgba(220,38,38,.12) !important; } .mpwpb-sme__rail-card.mpwpb-sme__field-invalid{ border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.12) !important; } .mpwpb-sme__acts{justify-self:end;display:flex;align-items:center;gap:10px;} .mpwpb-sme__local-save{ display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 11px; border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#64748b; font-size:11.5px;font-weight:650;line-height:1.2;white-space:nowrap;box-sizing:border-box; } .mpwpb-sme__local-save-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.14);} .mpwpb-sme__local-save.is-saving{border-color:#fde7b2;background:#fffbeb;color:#9a6700;} .mpwpb-sme__local-save.is-saving .mpwpb-sme__local-save-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15);animation:mpwpbSmeLocalSaving 1s ease-in-out infinite;} .mpwpb-sme__local-save.is-saved{border-color:#ccebd9;background:#f0fdf4;color:#167447;} .mpwpb-sme__local-save.is-saved .mpwpb-sme__local-save-dot{background:#22a861;box-shadow:0 0 0 3px rgba(34,168,97,.14);} .mpwpb-sme__local-save.is-error{border-color:#fecaca;background:#fef2f2;color:#b42318;} .mpwpb-sme__local-save.is-error .mpwpb-sme__local-save-dot{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12);} @keyframes mpwpbSmeLocalSaving{50%{opacity:.38;transform:scale(.82);}} .mpwpb-sme__status-pill{display:inline-flex;align-items:center;line-height:1.2;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:999px;box-sizing:border-box;} .mpwpb-sme__status-pill.is-published{background:var(--ok-soft);color:var(--ok);} .mpwpb-sme__status-pill.is-draft{background:#f1f5f9;color:var(--muted);} .mpwpb-sme__btn{ font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:10px; padding:9px 16px;border:1px solid var(--line);background:#fff;color:var(--ink-2); display:inline-flex;align-items:center;gap:7px;transition:.15s;line-height:1.2;text-decoration:none;height:auto; } .mpwpb-sme__btn:hover{background:var(--band);color:var(--ink);} .mpwpb-sme__btn:disabled{opacity:.45;cursor:not-allowed;} .mpwpb-sme__btn--primary, .mpwpb-sme__btn--primary:hover{ background:linear-gradient(135deg,var(--brand),var(--brand-600));color:#fff;border-color:transparent;box-shadow:0 6px 16px var(--brand-ring); } .mpwpb-sme__btn--primary:hover{filter:brightness(1.05);} /* Update/Publish split button — primary action + caret opening one status-flip option ("Switch to Draft" / "Save Draft") + Classic editor. */ .mpwpb-sme__split{position:relative;display:inline-flex;} .mpwpb-sme__split .mpwpb-sme__btn--primary{border-radius:10px 0 0 10px;} button.mpwpb-sme__btn.mpwpb-sme__btn--primary.mpwpb-sme__split-caret{border-radius:0 10px 10px 0;} .mpwpb-sme__split-caret{padding:9px 10px;border-left:1px solid rgba(255,255,255,.35);} .mpwpb-sme__split-caret .dashicons{font-size:16px;width:16px;height:16px;} .mpwpb-sme__split-menu{ position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:180px; background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(15,23,42,.14); padding:6px; } .mpwpb-sme__split-menu[hidden]{display:none;} .mpwpb-sme__split-menu-item{ display:block;width:100%;text-align:left;font-family:inherit;font-size:13px;font-weight:600; padding:9px 12px;border-radius:7px;border:none;background:transparent;color:var(--ink-2);cursor:pointer; } .mpwpb-sme__split-menu-item:hover{background:var(--band);color:var(--ink);} /* Wrap + stepper */ .mpwpb-sme__wrap{max-width:1440px;margin:0 auto;padding:26px;} .mpwpb-sme__stepper{display:flex;align-items:flex-start;justify-content:center;background:#FEFEFF;border-bottom:1px solid var(--line);padding:14px 26px;margin:0;position:sticky;top:57px;z-index:29;box-shadow:0 4px 20px -2px rgba(0,0,0,0.03);} .mpwpb-sme__payment-notice{text-align:center;background:#fef3c7;color:#b45309;font-size:13px;font-weight:600;padding:10px 26px;} .mpwpb-sme__payment-notice-link{color:#b45309;text-decoration:underline;} .mpwpb-sme__payment-notice-link:hover{color:#92400e;} .mpwpb-sme__rail-payment-warning{margin:12px 0 0;padding:5px 20px !important;border-radius:10px;border:1px solid #ddd;background:#fef3c7;color:#b45309;font-size:12px;font-weight:600;line-height:1.5;text-align:right;width:100%;} .mpwpb-sme__rail-payment-warning a{color:#b45309;text-decoration:underline;font-weight:700;} .mpwpb-sme__rail-payment-warning a:hover{color:#92400e;} .mpwpb-sme__rail-payment-link{display:block !important;margin:12px 0 0 auto !important;padding:5px 20px !important;border-radius:10px;border:1px solid #ddd;background:#f6f7f7;font-size:12px;font-weight:600;line-height:1.5;text-align:right !important;width:70% !important;} .mpwpb-sme__rail-payment-link a{color:var(--brand,#2451e0);text-decoration:underline;font-weight:700;} .mpwpb-sme__rail-payment-link a:hover{color:#1a3aa8;} .mpwpb-sme__payment-modal{position:fixed;inset:0;background:rgba(15,23,42,.68);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100001;align-items:center;justify-content:center;padding:24px;} .mpwpb-sme__payment-modal-box{position:relative;background:#f8fafc;border:1px solid rgba(255,255,255,.72);border-radius:20px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(15,23,42,.32),0 8px 24px rgba(15,23,42,.16);} .mpwpb-sme__payment-modal-box::before{content:"";position:absolute;top:0;left:0;right:0;z-index:3;height:5px;background:linear-gradient(90deg,#315bdc 0%,#6366f1 52%,#8b5cf6 100%);} .mpwpb-sme__payment-modal-head{display:flex;align-items:center;justify-content:space-between;padding:23px 26px 19px;border-bottom:1px solid #e5eaf2;position:sticky;top:0;background:linear-gradient(145deg,#f8faff 0%,#fff 70%);z-index:2;} .mpwpb-sme__payment-modal-head h2{margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:17px;font-weight:750;color:#172033;letter-spacing:-.01em;} .mpwpb-sme__payment-modal-close{display:grid;place-items:center;width:34px;height:34px;min-height:0;border:1px solid #dce3ee;border-radius:10px;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:#64748b;padding:0;transition:.15s;} .mpwpb-sme__payment-modal-close:hover{border-color:#cbd5e1;background:#f3f6fa;color:#172033;transform:rotate(4deg);} .mpwpb-sme__payment-modal-body{padding:24px;background:#f8fafc;} @media(max-width:760px){.mpwpb-sme__payment-modal{padding:12px;}.mpwpb-sme__payment-modal-head{padding:20px 18px 16px;}.mpwpb-sme__payment-modal-body{padding:16px;}} .mpwpb-sme__step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;text-align:center;cursor:pointer;} .mpwpb-sme__num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:#d1d5db;border:none;color:#fff;transition:.2s;} .mpwpb-sme__lab{font-size:12px;font-weight:500;color:#9ca3af;margin-top:2px;} .mpwpb-sme__step.done .mpwpb-sme__num{background:var(--brand);color:#fff;} .mpwpb-sme__step.done .mpwpb-sme__lab{color:#374151;} .mpwpb-sme__step.active .mpwpb-sme__num{background:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--brand-ring);} .mpwpb-sme__step.active .mpwpb-sme__lab{color:#111827;font-weight:600;} .mpwpb-sme__conn{flex:0 0 150px;height:2px;background:#d1d5db;margin-top:17px;} .mpwpb-sme__conn.done{background:var(--brand);} /* Panels + cards */ .mpwpb-sme__panel{display:none;} .mpwpb-sme__panel.active{display:block;animation:mpwpbSmeFade .25s ease;} /* Opacity-only (no transform): a transformed ancestor becomes the containing block for any position:fixed descendant (e.g. the FAQ modal's centered overlay), which would break its viewport-relative centering for the animation's duration. */ @keyframes mpwpbSmeFade{from{opacity:0;}to{opacity:1;}} .mpwpb-sme__postfields{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:visible;margin-bottom:22px;} .mpwpb-sme__postfields-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--band-line);background:#e7f0fd;border-radius:var(--radius) var(--radius) 0 0;} .mpwpb-sme__postfields-header-text{min-width:0;} .mpwpb-sme__postfields-header-title{font-size:15px;font-weight:700;color:var(--ink);} .mpwpb-sme__postfields-header-sub{font-size:12.5px;color:var(--muted);margin-top:3px;} .mpwpb-sme__postfields-header-actions{flex:0 0 auto;} .mpwpb-sme__postfields-header-actions:empty{display:none;} .mpwpb-sme__postfields-body{padding:20px 24px;} /* Basic Information (title / Service Title / Service Sub Title / Service Overview) subsection */ .mpwpb-sme__subsection-label{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;} .mpwpb-sme__subsection-label label{font-size:13.5px;font-weight:700;color:var(--ink);} .mpwpb-sme__subsection-label ~ .mpwpb-sme__subsection-label{margin-top:18px;} .mpwpb-sme__postfields-body #mpwpb-sme-title-inline{width:100%;} .mpwpb-sme__content-slot{margin-top:4px;} .mpwpb-sme__content-slot #wp-mpwpb_service_overview_content-wrap{border-color:var(--line);} /* Service Title / Service Sub Title — the classic input/textarea carry no .formControl class (untouched shared markup), so styled by name here. */ .mpwpb-sme__field-slot{margin-top:4px;} .mpwpb-sme__field-slot input[name="mpwpb_shortcode_title"], .mpwpb-sme__field-slot textarea[name="mpwpb_shortcode_sub_title"]{ width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 15px; font-size:14px;font-family:inherit;line-height:1.4;color:var(--ink);background:#fff;box-shadow:none; } .mpwpb-sme__field-slot textarea[name="mpwpb_shortcode_sub_title"]{resize:vertical;min-height:70px;} .mpwpb-sme__field-slot input[name="mpwpb_shortcode_title"]:focus, .mpwpb-sme__field-slot textarea[name="mpwpb_shortcode_sub_title"]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);} /* The modern editor doesn't use WordPress' native post_content editor (Service Overview above replaces it in this UI) — hidden via CSS so there's no flash of the un-styled native editor before JS relocates the rest of the panel. Classic mode still renders/edits it normally. */ body.mpwpb-sme-active #postdivrich{display:none;} /* Body = main column + sticky preview rail */ .mpwpb-sme__body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start;} .mpwpb-sme__main{min-width:0;} .mpwpb-sme__rail{position:sticky;top:84px;z-index:5;display:flex;flex-direction:column;gap:18px;} .mpwpb-sme__rail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;} /* Featured Image card — title, big preview, text-link actions. */ .mpwpb-sme__feat-head{padding:16px 16px 0;font-size:15px;font-weight:800;color:var(--ink);} .mpwpb-sme__feat-preview{position:relative;margin:14px 16px 0;height:180px;min-height:140px;border-radius:12px;border:1px solid var(--line);background:#ebebeb;display:grid;place-items:center;color:#cbd5e1;overflow:hidden;} .mpwpb-sme__feat-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .mpwpb-sme__rail-hero-ph{font-size:46px;width:46px;height:46px;opacity:.7;} .mpwpb-sme__feat-acts{display:flex;align-items:center;gap:22px;padding:14px 16px 18px;} .mpwpb-sme__feat-link{font-family:inherit;font-size:12px !important;font-weight:600;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;} .mpwpb-sme__feat-link:hover{text-decoration:underline;} .mpwpb-sme__feat-link--rm{color:var(--brand);} /* Gallery Images card — light header band (title + subtitle + real MPWPB_Custom_Layout::switch_button() toggle), then the classic mpwpb_add_multi_image() thumbnail row + "+ Add Image" pill, restyled to match this card's look. Markup/click handlers are the untouched classic ones (mp_global/assets/admin/mpwpb_admin_settings.js) — only appearance is overridden here, scoped to this card so the classic Gallery tab's own look elsewhere is unaffected. */ .mpwpb-sme__gallery-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px;background:linear-gradient(180deg,#fbfcfe,var(--band));border-bottom:1px solid var(--band-line); } .mpwpb-sme__gallery-head .mpwpb-sme__feat-head{padding:0;} .mpwpb-sme__gallery-sub{margin:2px 0 0;font-size:12.5px;font-weight:500;color:#333;} .mpwpb-sme__gallery-head .roundSwitch{width:40px;height:22px;} .mpwpb-sme__gallery-head .roundSwitch::before{height:18px;width:18px;} .mpwpb-sme__gallery-head .roundSwitchLabel input:checked + .roundSwitch{background-color:var(--brand);} .mpwpb-sme__gallery-head .roundSwitchLabel input:checked + .roundSwitch::before{transform:translateX(18px);} .mpwpb-sme__gallery-body{padding:16px;} .mpwpb-sme__gallery-body .mpwpb_multi_image{ display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px; } .mpwpb-sme__gallery-body .mpwpb_multi_image_item{ position:relative;width:calc(25% - 8px);min-width:0;aspect-ratio:1;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line); } .mpwpb-sme__gallery-body .mpwpb_multi_image_item img{width:100%;height:100%;object-fit:cover;display:block;} .mpwpb-sme__gallery-body .mpwpb_multi_image_item .mpwpb_remove_multi_image{ position:absolute;top:4px;right:4px;width:18px;height:18px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(15,23,42,.65);color:#fff;font-size:9px;opacity:0;transition:.15s; } .mpwpb-sme__gallery-body .mpwpb_multi_image_item:hover .mpwpb_remove_multi_image{opacity:1;} .mpwpb-sme__gallery-body .add_multi_image{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink); font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer; } .mpwpb-sme__gallery-body .add_multi_image:hover{border-color:var(--brand);color:var(--brand);} .mpwpb-sme__gallery-body .add_multi_image .fa-images{ display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:5px;background:var(--ink);color:#fff;font-size:10px;margin:0 !important; } /* Rail cards gated by step, via the shell's data-step attribute (set in mpwpb-service-edit-modern.js). data-sme-step-only holds a SPACE-SEPARATED list of step ids (e.g. "pricing advanced"), matched with ~= (token match). */ .mpwpb-sme__rail-card[data-sme-step-only]{display:none;} .mpwpb-sme[data-step="general"] .mpwpb-sme__rail-card[data-sme-step-only~="general"], .mpwpb-sme[data-step="availability"] .mpwpb-sme__rail-card[data-sme-step-only~="availability"], .mpwpb-sme[data-step="pricing"] .mpwpb-sme__rail-card[data-sme-step-only~="pricing"], .mpwpb-sme[data-step="advanced"] .mpwpb-sme__rail-card[data-sme-step-only~="advanced"]{display:block;} .mpwpb-sme__rail-info-list{padding:6px 16px 14px;} .mpwpb-sme__rail-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--band-line);} .mpwpb-sme__rail-info-row:last-child{border-bottom:0;} .mpwpb-sme__rail-info-row > span:first-child{font-size:12px;color:var(--muted);font-weight:600;} .mpwpb-sme__rail-info-row strong{font-size:13px;color:var(--ink);font-weight:700;text-align:right;} .mpwpb-sme__rail-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;} .mpwpb-sme__rail-pill.is-on{color:var(--ok);background:var(--ok-soft);} .mpwpb-sme__rail-pill.is-off{color:var(--muted);background:var(--inset);} /* Shortcode & Template rail card — Add To Cart shortcode display + the classic mpwpb_template