/* =====================================================================
 * FAQ (Advanced step)  ·  mpwpb-faq-modern.css
 * Pure visual reskin of the classic FAQ accordion (Admin/settings/Faq.php)
 * to match the row-list design language used elsewhere in the modern
 * editor (Categories & Services / Extra Service). Deliberately NOT a
 * rebuild: the classic markup, AJAX handlers (mpwpb_faq_data_save/_update/
 * _delete_item/_sort_faq), TinyMCE-backed Add/Edit modal and jQuery UI
 * sortable all stay untouched — every add/update/delete/sort action
 * re-renders `.mpwpb-faq-items` with the SAME classic HTML fragment, so a
 * from-scratch JS rebuild (like Extra Service's) would fight its own
 * server responses. These selectors just restyle that fragment wherever
 * it appears, inside the modern shell only (scoped under .mpwpb-sme).
 * ===================================================================== */

.mpwpb-sme.mpwpb_style .mpwpb-faq-section{padding:0;}
.mpwpb-sme.mpwpb_style .mpwpb-faq-items{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;}

.mpwpb-sme.mpwpb_style .mpwpb-faq-items:empty{
	display:block;padding:28px 16px;text-align:center;
	border:1px dashed var(--line);border-radius:12px;
}
.mpwpb-sme.mpwpb_style .mpwpb-faq-items:empty::after{content:"No FAQs added yet.";font-size:12.5px;color:var(--muted);}

.mpwpb-sme.mpwpb_style .mpwpb-faq-item{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;}
.mpwpb-sme.mpwpb_style .mpwpb-faq-item.ui-sortable-helper{box-shadow:0 8px 24px rgba(15,23,42,.14);}

.mpwpb-sme.mpwpb_style .faq-header{cursor:pointer;}
.mpwpb-sme.mpwpb_style .faq-header .label.label{margin:0 !important;padding:12px 14px;}
.mpwpb-sme.mpwpb_style .faq-header .label p{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);padding-right:96px;}

.mpwpb-sme.mpwpb_style .faq-header .faq-action{
	position:absolute;top:50%;right:14px;transform:translateY(-50%);
	display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s;
}
.mpwpb-sme.mpwpb_style .mpwpb-faq-item:hover .faq-action{opacity:1;}
.mpwpb-sme.mpwpb_style .faq-header .faq-action > span{
	width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.15s;
}
.mpwpb-sme.mpwpb_style .faq-header .faq-action > span:hover{border-color:var(--brand);color:var(--brand);}
.mpwpb-sme.mpwpb_style .faq-header .faq-action > span.mpwpb-faq-item-delete:hover{border-color:#fecaca;background:#fee2e2;color:#dc2626;}
.mpwpb-sme.mpwpb_style .faq-header .faq-action > span i{font-size:11px;}

.mpwpb-sme.mpwpb_style .faq-content{
	display:none;padding:0 14px 14px;margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);
	border-top:1px solid var(--band-line);
}
.mpwpb-sme.mpwpb_style .faq-content.mActive{padding-top:12px;}

.mpwpb-sme.mpwpb_style button.mpwpb-faq-item-new{
	display:inline-flex;align-items:center;gap:6px;
	padding:0px 15px;border-radius:10px;border:0;background:var(--brand);color:#fff;
	font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;
}
.mpwpb-sme.mpwpb_style button.mpwpb-faq-item-new:hover{filter:brightness(1.08);}

/* -------------------------------------------------------------------- *
 *  Add/Edit FAQ modal — reskin the classic slide-in-from-the-right
 *  sidebar panel into a centered overlay modal, matching the "Service
 *  adding" modal style used elsewhere (Categories & Services / Extra
 *  Service's .mpwpb-csm__modal). Pure CSS: the .open class toggle,
 *  TinyMCE-backed editor and all save/update/close JS (mpwpb_admin.js)
 *  are entirely unchanged. Scoped to this specific modal's
 *  data-modal-target (not the bare .mpwpb-modal-container class, which a
 *  couple of OTHER classic sections also use) so nothing else is affected
 *  even if one of those ever renders inside the modern shell.
 * -------------------------------------------------------------------- */
/* Defensive: a `transform`/`filter`/`perspective`/`will-change` on ANY
   ancestor turns it into the containing block for the modal's
   position:fixed below, breaking viewport-relative centering. Neutralize
   the whole plausible ancestor chain (the step panel's own fade-in
   animation was one confirmed case — fixed separately by dropping its
   transform — this covers anything else along the same path). */
.mpwpb-sme.mpwpb_style .mpwpb-sme__panel,
.mpwpb-sme.mpwpb_style .mpwpb-sme__main,
.mpwpb-sme.mpwpb_style .mpwpb-sme__postfields,
.mpwpb-sme.mpwpb_style .mpwpb-sme__postfields-body,
.mpwpb-sme.mpwpb_style .tabsItem,
.mpwpb-sme.mpwpb_style .mpwpb-faq-section{
	transform:none !important;filter:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
	perspective:none !important;will-change:auto !important;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"]{
	position:fixed !important;inset:0 !important;
	width:auto !important;height:auto !important;margin:0 !important;
	display:none !important;align-items:center !important;justify-content:center !important;
	background:rgba(15,23,42,.45);z-index:100010;padding:16px;transition:none !important;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"].open{display:flex !important;}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .mpwpb-modal-content{
	position:relative !important;top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;
	width:100%;max-width:500px;height:auto !important;max-height:86vh;margin:0;
	border-radius:14px;box-shadow:0 20px 60px rgba(15,23,42,.25);padding:0 !important;
	display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',system-ui,sans-serif;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .title{
	position:relative;z-index:1;padding:18px 44px 18px 22px;margin:0;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .title h3{
	font-size:16px;font-weight:700;color:var(--ink);margin:0;padding:0;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .mpwpb-modal-close{
	position:absolute !important;top:16px !important;right:18px !important;left:auto !important;bottom:auto !important;
	z-index:5;font-size:14px;color:var(--muted);
	background:transparent;padding:5px;border-radius:6px;line-height:1;cursor:pointer;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .mpwpb-modal-close:hover{background:var(--band);color:var(--ink);}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .content{
	height:auto;overflow-y:auto;padding:20px 22px;flex:1 1 auto;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] label{
	display:block;justify-content:normal;align-items:normal;flex-direction:row;
	font-size:13px;font-weight:600;color:var(--ink-2);gap:0;margin:0 0 16px;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] input[type=text]{
	width:100%;display:block;font-weight:400;font-size:14px;padding:10px 15px;margin-top:6px;
	border:1px solid var(--line);border-radius:10px;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] input[type=text]:focus{
	outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .content > .mT{margin-top:6px;}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] #wp-mpwpb_faq_content-wrap{border-color:var(--line);}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .mpwpb_faq_save_buttons p,
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .mpwpb_faq_update_buttons p{
	display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .button{
	border:0;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;
	background:var(--band);color:var(--ink-2);box-shadow:none;text-shadow:none;height:auto;line-height:1.4;
}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .button:hover{background:var(--line);}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .button-primary{background:var(--brand);color:#fff;}
.mpwpb-sme.mpwpb_style .mpwpb-modal-container[data-modal-target="mpwpb-faq-item-new"] .button-primary:hover{filter:brightness(1.06);}