/**
 * FrontBlocks PRO - Advanced Cookie Consent Styles
 *
 * The "Customize" button reuses .frbl-cookie-notice__button(--reject/--accept)
 * from the free plugin's own stylesheet (frontblocks-cookie-notice.css),
 * which is always enqueued first when this module is active — only the
 * categories dialog itself needs its own styles here.
 *
 * @package FrontBlocksPro
 * @version 1.0.0
 */

.frbl-cookie-notice__button--customize {
	background-color: transparent;
	border: 1px solid var(--frbl-cookie-accent-on-light, #687df9);
	color: var(--frbl-cookie-accent-on-light, #687df9);
}

/* PRO adds a third action to the free popup. Its labels may be wider than the
   dialog, so keep every action visible instead of allowing the flex row to
   expand the panel past its configured maximum width. */
.frbl-cookie-notice--popup .frbl-cookie-notice__actions {
	flex-direction: column;
	width: 100%;
}

.frbl-cookie-notice--popup .frbl-cookie-notice__button {
	width: 100%;
	text-align: center;
}

.frblp-cookie-categories-modal {
	--frbl-cookie-accent: #687df9;

	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(15, 23, 42, 0.5);
	box-sizing: border-box;
	font-family: inherit;
	line-height: 1.5;
}

.frblp-cookie-categories-modal[hidden] {
	display: none;
}

.frblp-cookie-categories-modal * {
	box-sizing: border-box;
}

.frblp-cookie-categories-modal__panel {
	background-color: #ffffff;
	color: #1f2937;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	max-width: 480px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px;
}

.frblp-cookie-categories-modal__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: #1f2937;
}

.frblp-cookie-categories-modal__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.frblp-cookie-category {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px 16px;
}

.frblp-cookie-category__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.frblp-cookie-category__label {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.frblp-cookie-category__desc {
	margin: 8px 0 0;
	font-size: 13px;
	color: #4b5563;
}

.frblp-cookie-categories-modal__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}

/* Toggle switch — scoped to this module's frontend dialog; the admin's own
   .frbl-toggle styles (Settings.php) don't load on the frontend. */
.frblp-cookie-categories-modal .frbl-toggle {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.frblp-cookie-categories-modal .frbl-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.frblp-cookie-categories-modal .frbl-toggle span {
	position: absolute;
	inset: 0;
	background-color: #d1d5db;
	border-radius: 999px;
	transition: background-color 0.15s ease;
	cursor: pointer;
}

.frblp-cookie-categories-modal .frbl-toggle span::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.frblp-cookie-categories-modal .frbl-toggle input:checked + span {
	background-color: var(--frbl-cookie-accent);
}

.frblp-cookie-categories-modal .frbl-toggle input:checked + span::before {
	transform: translateX(18px);
}

.frblp-cookie-categories-modal .frbl-toggle input:disabled + span {
	cursor: not-allowed;
	opacity: 0.6;
}

.frblp-cookie-categories-modal .frbl-toggle input:focus-visible + span {
	outline: 2px solid var(--frbl-cookie-accent);
	outline-offset: 2px;
}