/**
 * WPBot – Marketing page skin.
 *
 * Loaded ONLY on the Marketing admin page (see qcld_wb_chatbot_marketing_scripts()).
 * It sits on top of css/admin-style.css (General Settings stylesheet, also
 * enqueued there) and re-uses its tokens (--woobot-*) and values, so the React
 * Marketing app looks like the General Settings page.
 *
 * Values that only exist inline in admin_ui.php (option cards, PRO badge) are
 * copied verbatim from there. Everything is scoped to .qcwpbot-mk-page or
 * body.qcwpbot-marketing-admin so no other page is affected.
 */

/* ------------------------------------------------------------------
 * 0. Font — every piece of AI Marketing content uses DM Sans (loaded by
 *    admin-style.css), including the app's modals, dropdowns and dialogs.
 *    Icon fonts (dashicons) are left alone.
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page,
.qcwpbot-mk-page *:not(.dashicons):not(.dashicons-before):not(.ab-icon),
body.qcwpbot-marketing-admin .components-modal__screen-overlay,
body.qcwpbot-marketing-admin .components-modal__screen-overlay *:not(.dashicons):not(.dashicons-before),
body.qcwpbot-marketing-admin .components-popover,
body.qcwpbot-marketing-admin .components-popover *:not(.dashicons):not(.dashicons-before),
body.qcwpbot-marketing-admin .swal2-container,
body.qcwpbot-marketing-admin .swal2-container *:not(.dashicons):not(.dashicons-before) {
	font-family: "DM Sans", sans-serif !important;
}

/* ------------------------------------------------------------------
 * 1. Page shell
 * ------------------------------------------------------------------ */

body.qcwpbot-marketing-admin #wpcontent {
	background-color: var(--woobot-page-bg);
}

.qcwpbot-mk-page .text-center {
	text-align: center;
}

.qcwpbot-mk-page .mt-5 {
	margin-top: 3rem;
}

/* Align with the header card (margin-right 20px) instead of the 98.7% width
 * admin-style.css gives this notice, which overflows inside .wrap. */
.qcwpbot-mk-page .notice.is-dismissible.qcwpbot-mk-notice {
	width: auto;
	box-sizing: border-box;
	margin-right: 20px !important;
}

.qcwpbot-mk-notice.is-hidden {
	display: none;
}

.qcwpbot-mk-notice .qc-review-text p {
	margin: 0 0 5px;
}

.qcwpbot-mk-notice .qc-review-text a {
	color: var(--woobot-primary);
}

/* Header: keep "WPBot Control Panel" vertically centred next to the logo */
.qcwpbot-mk-page .qcld-wp-chatbot-wrap-header-logo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 12px;
}

.qcwpbot-mk-page a.qcld-wp-chatbot-wrap-site__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1.2;
	text-decoration: none;
}

.qcwpbot-mk-page a.qcld-wp-chatbot-wrap-site__logo img {
	display: block;
	vertical-align: middle;
}

/* Three columns: left tab card | content card | Upgrade To Pro.
 * The React root and its layout wrapper are "display: contents", so the
 * React sidebar and main area become grid items next to the PHP blocks. */
.qcwpbot-mk-layout {
	display: grid;
	grid-template-columns: minmax(240px, 18%) minmax(0, 1fr) minmax(260px, 18%);
	grid-template-rows: max-content 1fr max-content;
	column-gap: 24px;
	row-gap: 0;
	align-items: stretch;
}

.qcwpbot-mk-layout #qcwpbot-app,
.qcwpbot-mk-layout .qcwpbot-marketing-layout {
	display: contents;
}

/* Left card: React sidebar. The Go Premium block (.qcwpbot-mk-nav-footer)
 * is moved inside it by js/marketing-admin.js once React has rendered;
 * before that it sits in its own grid cell below. */
.qcwpbot-mk-layout .qcwpbot-sidebar {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: block;
	align-self: start;
	position: sticky;
	top: 42px;
	width: auto;
	padding: 10px;
	background: #ffffff;
	border: none;
	border-radius: 16px;
	box-sizing: border-box;
}

.qcwpbot-mk-nav-footer {
	grid-column: 1;
	grid-row: 3;
	padding: 10px;
	background: #ffffff;
	border-radius: 16px;
	align-self: start;
}

.qcwpbot-mk-page .qcwpbot-sidebar .qcwpbot-mk-nav-footer {
	width: 100%;
	align-self: stretch;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.qcwpbot-mk-nav-footer,
.qcwpbot-mk-nav-footer * {
	box-sizing: border-box;
}

.qcwpbot-mk-nav-footer .qcld-goPreemium svg {
	display: block;
}

/* Center card: React main area */
.qcwpbot-mk-layout .qcwpbot-main-content {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: start;
	min-width: 0;
	padding: 1em 1em 1.5em;
	background: #ffffff;
	border-radius: 16px;
	/* "clip" (not "auto") so the app's sticky headers still stick to the page */
	overflow-x: clip;
}

/* Right card: Upgrade To Pro (overrides the float layout from admin-style.css) */
.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar {
	grid-column: 3;
	grid-row: 1 / span 3;
	float: none;
	width: auto !important;
	margin: 0 !important;
	align-self: start;
	box-sizing: border-box;
}

.qcwpbot-mk-layout a.wp-chatbot-admin-pro-upgrade-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	font-weight: 600;
	transition: background 0.2s ease;
}

.qcwpbot-mk-layout a.wp-chatbot-admin-pro-upgrade-button:hover,
.qcwpbot-mk-layout a.wp-chatbot-admin-pro-upgrade-button:focus {
	background: var(--woobot-primary-dark);
	color: #ffffff;
}

/* ------------------------------------------------------------------
 * 2. Left tab navigation (React .qcwpbot-sidebar) — mirrors
 *    ".wp-chatbot-tabs nav ul li a" from admin-style.css
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-sidebar ul {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.qcwpbot-mk-page .qcwpbot-sidebar li {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0 0 4px;
	padding: 14px 15px;
	border-radius: 8px;
	color: #695d99;
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-sidebar li .dashicons {
	margin: 0;
	width: auto;
	height: auto;
	font-size: 20px;
	color: inherit;
}

.qcwpbot-mk-page .qcwpbot-sidebar li:last-child {
	margin-bottom: 0;
}

.qcwpbot-mk-page .qcwpbot-sidebar li:hover,
.qcwpbot-mk-page .qcwpbot-sidebar li.active {
	background: var(--woobot-primary);
	color: #ffffff;
	box-shadow: none;
}

/* PRO pill — values from the inline badge in admin_ui.php */
.qcwpbot-mk-page .pro-badge,
body.qcwpbot-marketing-admin .components-modal__frame .pro-badge {
	display: inline-block;
	padding: 2px 8px;
	margin-left: auto;
	background: var(--woobot-primary);
	color: #ffffff;
	border-radius: 20px;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.5px;
	line-height: 1.6;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: pointer;
}

.qcwpbot-mk-page .btn-pro .pro-badge {
	margin-left: 8px;
}

.qcwpbot-mk-page .qcwpbot-sidebar li:hover .pro-badge,
.qcwpbot-mk-page .qcwpbot-sidebar li.active .pro-badge {
	background: #ffffff;
	color: var(--woobot-primary);
}

/* ------------------------------------------------------------------
 * 3. Content typography
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-main-content h2 {
	color: var(--woobot-primary) !important;
	font-weight: bold !important;
	font-size: 22px !important;
}

.qcwpbot-mk-page .qcwpbot-main-content .qcwpbot-header,
.qcwpbot-mk-page .qcwpbot-settings-wrap > h2 {
	margin: 4px 0 12px !important;
	padding: 0 0 8px !important;
	border-bottom: 1px solid #eee;
}

.qcwpbot-mk-page .qcwpbot-main-content .qcwpbot-header h2 {
	margin: 0 !important;
}

.qcwpbot-mk-page .qcwpbot-main-content p {
	font-size: 15px;
}

/* ------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------ */

/* Primary — General Settings "Save Settings" (.wp-chatbot-wrap button.btn.btn-primary) */
.qcwpbot-mk-page .qcwpbot-primary-btn,
.qcwpbot-mk-page .components-button.is-primary,
.qcwpbot-mk-page .qcwpbot-settings-wrap .components-button,
body.qcwpbot-marketing-admin .components-modal__frame .qcwpbot-primary-btn,
body.qcwpbot-marketing-admin .components-modal__frame .components-button.is-primary {
	height: auto !important;
	min-height: 40px;
	padding: 10px 20px !important;
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
	border: 1px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
}

.qcwpbot-mk-page .qcwpbot-settings-wrap .components-button {
	padding: 14px 20px !important;
	font-size: 16px !important;
}

.qcwpbot-mk-page .qcwpbot-primary-btn:hover,
.qcwpbot-mk-page .components-button.is-primary:hover:not(:disabled),
.qcwpbot-mk-page .qcwpbot-settings-wrap .components-button:hover:not(:disabled),
body.qcwpbot-marketing-admin .components-modal__frame .qcwpbot-primary-btn:hover,
body.qcwpbot-marketing-admin .components-modal__frame .components-button.is-primary:hover:not(:disabled) {
	background: var(--woobot-primary-dark) !important;
	border-color: var(--woobot-primary-dark) !important;
	color: #ffffff !important;
}

/* Secondary — outlined purple (header "Upgrade To Pro" button style) */
.qcwpbot-mk-page .components-button.is-secondary,
.qcwpbot-mk-page .qcwpbot-secondary-btn,
body.qcwpbot-marketing-admin .components-modal__frame .components-button.is-secondary {
	height: auto !important;
	min-height: 40px;
	padding: 8px 18px !important;
	background: #ffffff !important;
	color: var(--woobot-primary) !important;
	border: 2px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.qcwpbot-mk-page .components-button.is-secondary:hover:not(:disabled),
.qcwpbot-mk-page .qcwpbot-secondary-btn:hover,
body.qcwpbot-marketing-admin .components-modal__frame .components-button.is-secondary:hover:not(:disabled) {
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
}

.qcwpbot-mk-page .components-button.is-secondary:hover .pro-badge {
	background: #ffffff;
	color: var(--woobot-primary);
}

/* Date range pills (Analytics) — like .qcld-main-wrapper .nav-tab */
.qcwpbot-mk-page .date-filters {
	gap: 6px;
	padding: 0;
	background: transparent;
}

.qcwpbot-mk-page .date-filters button {
	padding: 8px 16px;
	background: #ffffff;
	color: var(--woobot-primary);
	border: 1px solid var(--woobot-primary);
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.qcwpbot-mk-page .date-filters button:hover,
.qcwpbot-mk-page .date-filters button.active {
	background: var(--woobot-primary);
	color: #ffffff;
	box-shadow: none;
}

/* ------------------------------------------------------------------
 * 5. Form controls
 * ------------------------------------------------------------------ */

/* Bordered input group — ".wp-chatbot-wrap .form-group" + "h4.qc-opt-title" */
.qcwpbot-mk-page .qcwpbot-settings-wrap .components-base-control:not(.components-toggle-control),
.qcwpbot-mk-page .qcwpbot-field-group {
	margin-bottom: 15px;
	padding: 12px;
	border: 1px solid #E5E6F2;
	border-radius: 8px;
	background: #ffffff;
}

.qcwpbot-mk-page .components-base-control__label,
.qcwpbot-mk-page .components-input-control__label,
.qcwpbot-mk-page .qcwpbot-field-group > label,
body.qcwpbot-marketing-admin .components-modal__frame .components-base-control__label,
body.qcwpbot-marketing-admin .components-modal__frame .components-input-control__label {
	color: var(--woobot-primary) !important;
	font-size: 14px !important;
	font-weight: bold !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.qcwpbot-mk-page .components-text-control__input,
.qcwpbot-mk-page .components-textarea-control__input,
.qcwpbot-mk-page .qcwpbot-main-content input[type="text"],
.qcwpbot-mk-page .qcwpbot-main-content input[type="email"],
.qcwpbot-mk-page .qcwpbot-main-content input[type="number"],
.qcwpbot-mk-page .qcwpbot-main-content input[type="url"],
.qcwpbot-mk-page .qcwpbot-main-content textarea,
body.qcwpbot-marketing-admin .components-modal__frame .components-text-control__input,
body.qcwpbot-marketing-admin .components-modal__frame .components-textarea-control__input {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #E5E6F2 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--woobot-text);
	font-size: 14px;
}

.qcwpbot-mk-page .components-text-control__input:focus,
.qcwpbot-mk-page .components-textarea-control__input:focus,
.qcwpbot-mk-page .qcwpbot-main-content input:focus,
.qcwpbot-mk-page .qcwpbot-main-content textarea:focus,
body.qcwpbot-marketing-admin .components-modal__frame .components-text-control__input:focus,
body.qcwpbot-marketing-admin .components-modal__frame .components-textarea-control__input:focus {
	border-color: #e1dbff !important;
	box-shadow: 0 0 0 4px #e1dbff, 0 1px 2px 0 #1018280d !important;
	outline: none !important;
}

/* Helper text — "label.qcld_label_width_full.qcld_label_width_half" */
.qcwpbot-mk-page .components-base-control__help,
body.qcwpbot-marketing-admin .components-modal__frame .components-base-control__help {
	margin: 0;
	padding: 6px 0 0;
	color: var(--woobot-muted);
	font-size: 12px;
	font-style: normal;
}

/* Selects — same as the plain WP admin selects used for "Select Intent" / "Bot Response Delay" */
.qcwpbot-mk-page .qcwpbot-main-content select,
.qcwpbot-mk-page .components-select-control__input,
body.qcwpbot-marketing-admin .components-modal__frame select {
	min-height: 30px;
	padding: 0 24px 0 8px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #2c3338;
	font-size: 14px;
	line-height: 2;
	background-color: #ffffff;
}

.qcwpbot-mk-page .components-select-control .components-input-control__backdrop,
body.qcwpbot-marketing-admin .components-modal__frame .components-select-control .components-input-control__backdrop {
	border-color: #8c8f94 !important;
	border-radius: 4px !important;
}

.qcwpbot-mk-page .qcwpbot-main-content select:focus,
.qcwpbot-mk-page .components-select-control__input:focus {
	border-color: var(--woobot-primary);
	box-shadow: 0 0 0 1px var(--woobot-primary);
	outline: none;
}

/* ------------------------------------------------------------------
 * 6. Settings screen: inner tabs ("General" / "Sending & Tracking")
 *    — same pills as ".qcld-main-wrapper .nav-tab"
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-mk-subtabs {
	gap: 8px;
	padding: 15px 20px !important;
	border-bottom: 1px solid #eee !important;
}

.qcwpbot-mk-page .qcwpbot-mk-subtabs > button {
	padding: 10px 20px !important;
	background: #ffffff !important;
	color: var(--woobot-primary) !important;
	border: 1px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
}

.qcwpbot-mk-page .qcwpbot-mk-subtabs > button:hover,
.qcwpbot-mk-page .qcwpbot-mk-subtabs > button.is-active {
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
}

.qcwpbot-mk-page .qcwpbot-settings-wrap > div {
	border-color: #E5E6F2 !important;
	border-radius: 16px !important;
}

/* ------------------------------------------------------------------
 * 7. Accordion — mirrors the General Settings ".panel-default > .panel-heading"
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-mk-accordion {
	margin-bottom: 15px !important;
	border: none !important;
	border-radius: 0 !important;
}

.qcwpbot-mk-page .qcwpbot-mk-accordion > .qcwpbot-mk-accordion__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 12px !important;
	background: #ffffff;
	color: var(--woobot-primary);
	border: 2px solid var(--woobot-primary) !important;
	border-radius: 8px;
	font-size: 16px !important;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-accordion > .qcwpbot-mk-accordion__head:hover,
.qcwpbot-mk-page .qcwpbot-mk-accordion > .qcwpbot-mk-accordion__head:focus {
	background: var(--woobot-primary);
	color: #ffffff;
	outline: none;
}

.qcwpbot-mk-accordion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-left: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	transition: transform 0.3s ease;
}

.qcwpbot-mk-accordion__head[aria-expanded="true"] .qcwpbot-mk-accordion__icon {
	transform: rotate(45deg);
}

/* Collapsed body stays hidden even when it is also the option-card grid
 * (which forces display: grid over React's inline display: flex). */
.qcwpbot-mk-page .qcwpbot-mk-accordion:not(.is-open) > .qcwpbot-mk-accordion__body {
	display: none !important;
}

/* Body — ".panel-collapse > .panel-body" */
.qcwpbot-mk-page .qcwpbot-mk-accordion > .qcwpbot-mk-accordion__body {
	margin: 15px 0 0;
	background: linear-gradient(178deg, #ffffff 70%, #e9e4ff 96%);
	border: 1px solid #E5E6F2;
	border-radius: 16px;
}

/* ------------------------------------------------------------------
 * 8. Option cards (ToggleControl -> card). Values from the
 *    ".wpbot-checkbox-card" block in admin_ui.php.
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-mk-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px !important;
	flex-direction: initial !important;
}

.qcwpbot-mk-page .qcwpbot-mk-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	margin: 0 !important;
	padding: 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-card:hover {
	border-color: rgba(var(--woobot-primary-rgb), 0.55);
	box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
	transform: translateY(-2px);
}

.qcwpbot-mk-page .qcwpbot-mk-card.is-selected {
	border-color: var(--woobot-primary);
	background: #eff6ff;
	box-shadow: 0 0 0 1px var(--woobot-primary), 0 8px 24px rgba(37, 99, 235, 0.15);
}

/* Icon box (top-left) */
.qcwpbot-mk-page .qcwpbot-mk-card::before {
	content: attr(data-qcwpbot-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #64748b;
	font-family: dashicons;
	font-size: 24px;
	line-height: 1;
	transition: all 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-card.is-selected::before {
	border-color: #e0e7ff;
	background: #f0fdf4;
	color: var(--woobot-primary);
}

/* Description */
.qcwpbot-mk-page .qcwpbot-mk-card::after {
	content: attr(data-qcwpbot-desc);
	display: block;
	margin-top: 8px;
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-base-control__field {
	margin: 0;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-base-control__field > * {
	display: block;
}

/* Title */
.qcwpbot-mk-page .qcwpbot-mk-card .components-toggle-control__label {
	display: block;
	margin: 0;
	padding-right: 32px;
	color: #1e293b;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 1.4;
	cursor: pointer;
}

/* Check circle (top-right) — the real toggle, restyled */
.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle {
	position: absolute !important;
	top: 30px;
	right: 16px;
	z-index: 2;
	width: 24px;
	height: 24px;
	margin: 0 !important;
	box-sizing: border-box;
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle .components-form-toggle__track,
.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle .components-form-toggle__thumb {
	display: none !important;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2L6.2 9.4L10 5' fill='none' stroke='%23e2e8f0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	pointer-events: none;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle.is-checked {
	background: var(--woobot-primary);
	border-color: var(--woobot-primary);
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle.is-checked::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2L6.2 9.4L10 5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle__input:focus-visible + .components-form-toggle__track,
.qcwpbot-mk-page .qcwpbot-mk-card .components-form-toggle:focus-within {
	box-shadow: 0 0 0 4px #e1dbff;
}

/* Divider between card groups — ".wpbot-cards-grid-divider" */
.qcwpbot-mk-page .wpbot-cards-grid-divider {
	height: 1px;
	width: 100%;
	margin: 20px 0;
	background: #eee;
}

/* ------------------------------------------------------------------
 * 8b. AI Tools screen — tool boxes as option cards (same values as
 *     ".wpbot-checkbox-card" in admin_ui.php). Locked (PRO) cards are
 *     faded, carry the PRO pill and open the upgrade dialog on click.
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-mk-tools-head {
	margin: 4px 0 20px !important;
	padding: 0 0 8px;
	border-bottom: 1px solid #eee;
}

.qcwpbot-mk-page .qcwpbot-mk-tools-head h2 {
	margin: 0 0 4px !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tools-head p {
	color: var(--woobot-muted) !important;
	font-size: 14px !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tools-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	align-items: stretch;
}

.qcwpbot-mk-page .qcwpbot-mk-tool {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box;
	height: 100% !important;
	padding: 20px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	overflow: visible !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-tool:hover,
.qcwpbot-mk-page .qcwpbot-mk-tool:focus-within {
	border-color: rgba(var(--woobot-primary-rgb), 0.55) !important;
	box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
	transform: translateY(-2px);
}

/* Icon box */
.qcwpbot-mk-page .qcwpbot-mk-tool::before {
	content: attr(data-qcwpbot-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: var(--woobot-primary);
	font-family: dashicons;
	font-size: 24px;
	line-height: 1;
}

/* Title + description */
.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__title {
	display: block !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: none !important;
	color: #1e293b !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__title[data-qcwpbot-desc]::after {
	content: attr(data-qcwpbot-desc);
	display: block;
	margin-top: 6px;
	color: #64748b;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__badge {
	display: none !important;
}

/* Body */
.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool label {
	color: var(--woobot-primary) !important;
	font-size: 13px !important;
	font-weight: bold !important;
	text-transform: lowercase !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool label::first-letter {
	text-transform: uppercase;
}

.qcwpbot-mk-page .qcwpbot-mk-tool input,
.qcwpbot-mk-page .qcwpbot-mk-tool textarea {
	background: #ffffff !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .components-base-control__field {
	margin-bottom: 0;
}

/* Action button — sits at the bottom of every card */
.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__body > div:last-child {
	margin-top: auto !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__body .components-button {
	height: auto !important;
	min-height: 40px;
	padding: 10px 20px !important;
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
	border: 1px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	transition: background 0.2s ease !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__body .components-button:hover:not(:disabled) {
	background: var(--woobot-primary-dark) !important;
	border-color: var(--woobot-primary-dark) !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__body .components-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Locked (PRO) */
.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked {
	cursor: pointer;
}

.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked::after {
	content: "PRO";
	position: absolute;
	top: -9px;
	left: 16px;
	z-index: 3;
	padding: 2px 8px;
	background: var(--woobot-primary);
	color: #ffffff;
	border-radius: 20px;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.5px;
	line-height: 1.6;
}

.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked::before,
.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked .qcwpbot-mk-tool__body {
	opacity: 0.6;
}

.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked .qcwpbot-mk-tool__body * {
	pointer-events: none;
}

.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px #e1dbff;
}

/* Locked footer: hide the duplicate PRO tag, keep one outlined Upgrade button */
.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__footer {
	justify-content: flex-start !important;
	margin-top: 16px !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__footer > span {
	display: none !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool .qcwpbot-mk-tool__footer .components-button {
	height: auto !important;
	min-height: 36px;
	padding: 8px 16px !important;
	background: #ffffff !important;
	color: var(--woobot-primary) !important;
	border: 2px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
}

.qcwpbot-mk-page .qcwpbot-mk-tool.is-locked:hover .qcwpbot-mk-tool__footer .components-button {
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
}

@media (max-width: 1280px) {
	.qcwpbot-mk-page .qcwpbot-mk-tools-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 782px) {
	.qcwpbot-mk-page .qcwpbot-mk-tools-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* SMTP screen: use the full content width (the app sets max-width: 800px inline) */
.qcwpbot-mk-page .qcwpbot-smtp-wrap {
	max-width: none !important;
}

/* ------------------------------------------------------------------
 * 8c. Import / Export screen
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-import-export-wrap {
	gap: 24px !important;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card {
	position: relative;
	border: 1px solid #E5E6F2 !important;
	border-radius: 16px !important;
	box-shadow: none;
	overflow: visible !important;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card .qcwpbot-mk-ie-card__title {
	display: flex !important;
	align-items: center;
	padding: 18px 20px 12px !important;
	margin: 0 20px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-bottom: 1px solid #eee !important;
	color: var(--woobot-primary) !important;
	font-size: 18px !important;
	font-weight: bold !important;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card label {
	color: var(--woobot-primary) !important;
	font-size: 14px !important;
	font-weight: bold !important;
	text-transform: lowercase;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card label::first-letter {
	text-transform: uppercase;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card p {
	color: var(--woobot-muted) !important;
	font-size: 15px !important;
}

/* PRO pill (replaces the orange tag) — values from admin_ui.php */
.qcwpbot-mk-page .qcwpbot-mk-pro-pill {
	display: inline-block !important;
	margin-left: 8px !important;
	padding: 2px 8px !important;
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
	border-radius: 20px !important;
	font-size: 9px !important;
	font-weight: bold !important;
	letter-spacing: 0.5px;
	line-height: 1.6 !important;
}

/* Buttons */
.qcwpbot-mk-page .qcwpbot-mk-ie-card .components-button:not(.is-secondary) {
	height: auto !important;
	min-height: 40px;
	padding: 10px 20px !important;
	background: var(--woobot-primary) !important;
	color: #ffffff !important;
	border: 1px solid var(--woobot-primary) !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	transition: background 0.2s ease !important;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card .components-button:not(.is-secondary):hover:not(:disabled) {
	background: var(--woobot-primary-dark) !important;
	border-color: var(--woobot-primary-dark) !important;
}

/* Locked export box */
.qcwpbot-mk-page .qcwpbot-mk-ie-card.is-locked {
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card.is-locked:hover {
	border-color: rgba(var(--woobot-primary-rgb), 0.55) !important;
	box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card.is-locked > div {
	opacity: 0.6;
}

.qcwpbot-mk-page .qcwpbot-mk-ie-card.is-locked > div * {
	pointer-events: none;
}

/* Validation & cleanup — info box look (".cxsc-settings-blocks-notic") */
.qcwpbot-mk-page .qcwpbot-mk-validation {
	padding: 20px !important;
	background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%) !important;
	border: 1px solid #E5E6F2;
	border-radius: 16px !important;
}

.qcwpbot-mk-page .qcwpbot-mk-validation .qcwpbot-mk-validation__title {
	margin: 0 0 16px !important;
	color: var(--woobot-primary) !important;
	font-size: 15px !important;
	font-weight: bold !important;
	text-transform: lowercase;
}

.qcwpbot-mk-page .qcwpbot-mk-validation .qcwpbot-mk-validation__title::first-letter {
	text-transform: uppercase;
}

.qcwpbot-mk-page .qcwpbot-mk-check-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 18px 14px !important;
}

/* Option card (CheckboxControl) — same values as the toggle cards */
.qcwpbot-mk-page .qcwpbot-mk-check {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	margin: 0 !important;
	padding: 16px 48px 16px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-check:hover {
	border-color: rgba(var(--woobot-primary-rgb), 0.55);
	box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
	transform: translateY(-2px);
}

.qcwpbot-mk-page .qcwpbot-mk-check.is-selected {
	border-color: var(--woobot-primary);
	background: #eff6ff;
	box-shadow: 0 0 0 1px var(--woobot-primary), 0 8px 24px rgba(37, 99, 235, 0.15);
}

.qcwpbot-mk-page .qcwpbot-mk-check .components-base-control__field,
.qcwpbot-mk-page .qcwpbot-mk-check .components-base-control__field > * {
	display: block;
	margin: 0;
}

.qcwpbot-mk-page .qcwpbot-mk-check label,
.qcwpbot-mk-page .qcwpbot-mk-check label span {
	display: block;
	margin: 0 !important;
	color: #1e293b !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	text-transform: none !important;
	cursor: pointer;
}

.qcwpbot-mk-page .qcwpbot-mk-check label::first-letter {
	text-transform: none;
}

/* Circular check indicator (the real checkbox, restyled) */
.qcwpbot-mk-page .qcwpbot-mk-check .components-checkbox-control__input-container {
	position: absolute !important;
	top: 50%;
	right: 14px;
	width: 24px !important;
	height: 24px !important;
	margin: -12px 0 0 !important;
}

.qcwpbot-mk-page .qcwpbot-mk-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
	margin: 0 !important;
	box-sizing: border-box;
	background: #f8fafc center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2L6.2 9.4L10 5' fill='none' stroke='%23e2e8f0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	border: 2px solid #e2e8f0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-mk-check input[type="checkbox"]:checked {
	background-color: var(--woobot-primary) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2L6.2 9.4L10 5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	border-color: var(--woobot-primary) !important;
}

.qcwpbot-mk-page .qcwpbot-mk-check input[type="checkbox"]::before,
.qcwpbot-mk-page .qcwpbot-mk-check .components-checkbox-control__checked {
	display: none !important;
}

.qcwpbot-mk-page .qcwpbot-mk-check input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 4px #e1dbff !important;
}

/* Locked (PRO) option */
.qcwpbot-mk-page .qcwpbot-mk-check.is-locked .qcwpbot-mk-pro-pill {
	display: none !important;
}

.qcwpbot-mk-page .qcwpbot-mk-check.is-locked::after {
	content: "PRO";
	position: absolute;
	top: -9px;
	left: 14px;
	padding: 2px 8px;
	background: var(--woobot-primary);
	color: #ffffff;
	border-radius: 20px;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.5px;
	line-height: 1.6;
}

.qcwpbot-mk-page .qcwpbot-mk-check.is-locked .components-base-control__field {
	opacity: 0.6;
}

.qcwpbot-mk-page .qcwpbot-mk-check.is-locked * {
	pointer-events: none;
}

@media (max-width: 1280px) {
	.qcwpbot-mk-page .qcwpbot-import-export-wrap {
		flex-direction: column;
		align-items: stretch !important;
	}
}

/* ------------------------------------------------------------------
 * 9. Cards, tables, empty states
 * ------------------------------------------------------------------ */

.qcwpbot-mk-page .qcwpbot-empty-state-card,
.qcwpbot-mk-page .qcwpbot-table-container {
	border-color: #E5E6F2;
	border-radius: 16px;
	box-shadow: none;
}

.qcwpbot-mk-page .qcwpbot-empty-state-card {
	background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%);
}

.qcwpbot-mk-page .qcwpbot-table th {
	background: var(--woobot-primary-soft);
	color: var(--woobot-primary);
}

.qcwpbot-mk-page .qcwpbot-table td {
	color: var(--woobot-text);
}

/* Email Analytics — KPI tiles (Total Subscribers / Emails Sent / Opened).
 * Markup comes from the React build: .qcwpbot-stats-grid > .stat-card > h3 + p.
 * Icons are inline SVG backgrounds so the JS build stays untouched. */
.qcwpbot-mk-page .qcwpbot-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 4px;
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card {
	--qc-stat: var(--woobot-primary-rgb);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 22px 24px 24px 24px;
	background: #ffffff;
	border: 1px solid #E5E6F2;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:nth-child(2) { --qc-stat: 14, 165, 233; }
.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:nth-child(3) { --qc-stat: 16, 185, 129; }

/* Accent bar along the top edge. */
.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: rgb(var(--qc-stat));
}

/* Icon badge. */
.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	border-radius: 12px;
	background-color: rgba(var(--qc-stat), 0.12);
	background-image: var(--qc-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:nth-child(1) {
	--qc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b4ac6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:nth-child(2) {
	--qc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}
.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:nth-child(3) {
	--qc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/%3E%3Cpath d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/%3E%3C/svg%3E");
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card h3 {
	order: 2;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--woobot-muted, #6b7280);
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card p {
	order: 1;
	margin: 0;
	padding: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--woobot-text, #1f2937);
	font-variant-numeric: tabular-nums;
}

.qcwpbot-mk-page .qcwpbot-stats-grid .stat-card:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--qc-stat), 0.45);
	box-shadow: 0 10px 24px rgba(var(--qc-stat), 0.12);
}

/* Other .stat-card uses (outside the analytics grid) keep the old look. */
.qcwpbot-mk-page .stat-card {
	border-radius: 12px;
}

.qcwpbot-mk-page .import-option:hover,
body.qcwpbot-marketing-admin .components-modal__frame .import-option:hover {
	border-color: var(--woobot-primary);
	background: #eff6ff;
}

/* ------------------------------------------------------------------
 * 10. Modals
 *  - React (wp.components Modal): restyled to match the plugin's
 *    SweetAlert2 dialogs; ESC / overlay / × are handled by Modal itself.
 *  - Page-level dialogs (upgrade, notices) use SweetAlert2 (js/sweetalrt.js).
 * ------------------------------------------------------------------ */

@keyframes qcwpbot-mk-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes qcwpbot-mk-scale-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}

body.qcwpbot-marketing-admin .components-modal__screen-overlay {
	background-color: rgba(0, 0, 0, 0.4);
	animation: qcwpbot-mk-fade-in 0.2s ease-out both;
}

body.qcwpbot-marketing-admin .components-modal__frame {
	border: none;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(45, 42, 58, 0.25);
	font-family: "DM Sans", sans-serif;
	animation: qcwpbot-mk-scale-in 0.25s ease-out both;
}

body.qcwpbot-marketing-admin .components-modal__header {
	border-bottom: 1px solid #eee;
}

body.qcwpbot-marketing-admin .components-modal__header-heading,
body.qcwpbot-marketing-admin .components-modal__frame h2,
body.qcwpbot-marketing-admin .components-modal__frame h3 {
	color: var(--woobot-primary) !important;
	font-weight: bold;
}

body.qcwpbot-marketing-admin .components-modal__header .components-button.has-icon {
	color: var(--woobot-muted);
	border-radius: 50%;
	transition: color 0.2s ease, background 0.2s ease;
}

body.qcwpbot-marketing-admin .components-modal__header .components-button.has-icon:hover {
	color: var(--woobot-primary);
	background: var(--woobot-primary-soft);
}

body.qcwpbot-marketing-admin .components-modal__frame .modal-actions {
	border-top-color: #eee;
}

/* SweetAlert2 dialogs opened by js/marketing-admin.js */
body.qcwpbot-marketing-admin .swal2-container.swal2-backdrop-show {
	background: rgba(0, 0, 0, 0.4);
}

body.qcwpbot-marketing-admin .swal2-popup.qcwpbot-mk-swal {
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(45, 42, 58, 0.25);
	font-family: "DM Sans", sans-serif;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-title {
	color: var(--woobot-primary);
	font-size: 22px;
	font-weight: bold;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-html-container {
	color: var(--woobot-text);
	font-size: 15px;
	line-height: 1.6;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-close:hover {
	color: var(--woobot-primary);
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-actions {
	gap: 10px;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-styled {
	margin: 0;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	box-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-styled.swal2-confirm {
	background: var(--woobot-primary);
	border: 2px solid var(--woobot-primary);
	color: #ffffff;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-styled.swal2-confirm:hover {
	background: var(--woobot-primary-dark);
	border-color: var(--woobot-primary-dark);
	background-image: none;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-styled.swal2-cancel {
	background: #ffffff;
	border: 2px solid var(--woobot-primary);
	color: var(--woobot-primary);
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-styled.swal2-cancel:hover {
	background: var(--woobot-primary);
	color: #ffffff;
	background-image: none;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal ul.qcwpbot-mk-swal-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal ul.qcwpbot-mk-swal-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0;
	font-size: 14px;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal ul.qcwpbot-mk-swal-list li img {
	width: 16px;
}

/* ------------------------------------------------------------------
 * 11. Responsive
 * ------------------------------------------------------------------ */

/* Tablet: Pro sidebar drops below, option cards in 2 columns */
@media (max-width: 1280px) {
	.qcwpbot-mk-layout {
		grid-template-columns: minmax(220px, 26%) minmax(0, 1fr);
		grid-template-rows: max-content 1fr max-content auto;
	}

	.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 24px !important;
	}

	.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar img.wp-chatbot-admin-banner {
		display: block;
		max-width: 320px;
		margin: 0 auto;
	}

	.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar ul.feature-list {
		column-count: 2;
		column-gap: 24px;
	}

	.qcwpbot-mk-page .qcwpbot-mk-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: one column — tabs, content, then Pro sidebar */
@media (max-width: 782px) {
	.qcwpbot-mk-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: auto;
		row-gap: 0;
	}

	.qcwpbot-mk-layout .qcwpbot-sidebar {
		grid-column: 1;
		grid-row: 1;
		position: static;
		margin-bottom: 20px;
	}

	.qcwpbot-mk-nav-footer {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 20px;
	}

	.qcwpbot-mk-layout .qcwpbot-main-content {
		grid-column: 1;
		grid-row: 4;
	}

	.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar {
		grid-column: 1;
		grid-row: 5;
		margin-top: 20px !important;
	}

	.qcwpbot-mk-page .qcwpbot-mk-cards-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.qcwpbot-mk-layout .wp-chatbot-admin-upgrade-pro-sidebar ul.feature-list {
		column-count: 1;
	}

	.qcwpbot-mk-page .qcwpbot-settings-wrap [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
	}

	.qcwpbot-mk-page .qcwpbot-settings-wrap > div > div:nth-child(2) {
		padding: 15px !important;
	}

	.qcwpbot-mk-page .qcwpbot-mk-accordion > .qcwpbot-mk-accordion__body {
		padding: 12px !important;
	}

	.qcwpbot-mk-page .qcwpbot-mk-subtabs {
		flex-wrap: wrap;
		padding: 12px !important;
	}

	.qcwpbot-mk-page .qcwpbot-settings-wrap [style*="max-width: 50%"] {
		max-width: 100% !important;
	}

	.qcwpbot-mk-page .qcwpbot-header {
		flex-wrap: wrap;
		gap: 12px;
	}

	.qcwpbot-mk-page .qcwpbot-header .header-actions {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qcwpbot-mk-page *,
	body.qcwpbot-marketing-admin .components-modal__frame,
	body.qcwpbot-marketing-admin .components-modal__screen-overlay {
		animation: none !important;
		transition: none !important;
	}
}

/* SweetAlert2 show / hide animation (fade + slight scale) */
@keyframes qcwpbot-mk-scale-out {
	from { opacity: 1; transform: scale(1); }
	to { opacity: 0; transform: scale(0.96); }
}

body.qcwpbot-marketing-admin .swal2-popup.qcwpbot-mk-swal-in {
	animation: qcwpbot-mk-scale-in 0.25s ease-out both;
}

body.qcwpbot-marketing-admin .swal2-popup.qcwpbot-mk-swal-out {
	animation: qcwpbot-mk-scale-out 0.15s ease-in both;
}

body.qcwpbot-marketing-admin .qcwpbot-mk-swal .swal2-close:focus {
	box-shadow: none;
	color: var(--woobot-primary);
}