/* Ready Patterns Library — editor-only modal chrome.
   Design mirrors wp-carousel-pro's Ready Patterns library, recolored to the
   Real Testimonials brand via --sp-real-primary-color (tints via color-mix). */

/* ===================== Header-toolbar launcher button ===================== */
.sp-real-patterns-toolbar-design-library {
	.popup-button {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		height: 36px;
		padding: 12px;
		gap: 8px;
		border-radius: 2px;
		background: var(--sp-real-primary-color);
		color: #fff;
		font-size: 13px;
		line-height: 14px;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
		transition: all 0.3s ease-in-out;
		margin: 0 6px;

		&:hover {
			background: var(--sp-real-primary-color-hover, var(--sp-real-primary-color));
		}
	}
}

/* ===================== Modal shell ===================== */
.sp-real-ready-patterns-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px);
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
		sans-serif;
}

.sp-real-ready-patterns-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1840px;
	max-height: 100%;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.sp-real-ready-patterns-header {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0 24px;
	background: color-mix(in srgb, var(--sp-real-primary-color) 8%, #fff);
	border-bottom: 1px solid color-mix(in srgb, var(--sp-real-primary-color) 22%, #fff);
}

.sp-real-ready-patterns-brand {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	gap: 10px;
	padding: 21px 0;

	svg {
		width: 28px;
		height: 28px;
	}
}

.sp-real-ready-patterns-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #2f2f2f;
}

.sp-real-ready-patterns-header-actions {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: flex-end;
}

.sp-real-ready-patterns-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #334155;
	cursor: pointer;

	.dashicons {
		font-size: 22px;
		width: 22px;
		height: 22px;
	}

	&:hover {
		background: color-mix(in srgb, var(--sp-real-primary-color) 12%, transparent);
		color: #1e293b;
	}
}

/* ===================== Body / sidebar / main ===================== */
.sp-real-ready-patterns-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.sp-real-ready-patterns-sidebar {
	width: 260px;
	flex-shrink: 0;
	padding: 20px 16px;
	border-right: 1px solid #e2e8f0;
	overflow-y: auto;
}

.sp-real-ready-patterns-sidebar-heading {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}

.sp-real-ready-patterns-tier {
	display: flex;
	gap: 4px;
	padding: 5px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.sp-real-ready-patterns-tier-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 1;
	padding: 8px 6px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;

	&.is-active {
		background: var(--sp-real-primary-color);
		color: #fff;

		.sp-real-ready-patterns-tier-count {
			color: rgba(255, 255, 255, 0.85);
		}
	}
}

.sp-real-ready-patterns-tier-count {
	font-size: 11px;
	font-weight: 500;
	color: #94a3b8;

	&::before {
		content: "(";
	}

	&::after {
		content: ")";
	}
}

.sp-real-ready-patterns-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin-bottom: 16px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #94a3b8;

	.dashicons {
		font-size: 18px;
		width: 18px;
		height: 18px;
	}

	.sp-real-ready-patterns-search-input {
		border: none;
		padding: 0;
		min-height: 36px;

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
}

.sp-real-ready-patterns-search-input {
	flex: 1;
	border: 0;
	outline: none;
	font-size: 13px;
	background: transparent;
	color: #1e293b;
}

.sp-real-ready-patterns-categories {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 20px;
}

.sp-real-ready-patterns-category {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: 13px;
	color: #334155;
	text-align: left;
	cursor: pointer;

	&.is-active {
		background: color-mix(in srgb, var(--sp-real-primary-color) 12%, #fff);
		color: var(--sp-real-primary-color);
		font-weight: 600;
	}
}

.sp-real-ready-patterns-category-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-real-ready-patterns-badge {
	margin-left: auto;
	min-width: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f1f5f9;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-align: center;
	line-height: 20px;

	.is-active & {
		background: var(--sp-real-primary-color);
		color: #fff;
	}
}

.sp-real-ready-patterns-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 20px 24px;
	overflow-y: auto;
}

/* ===================== Toolbar ===================== */
.sp-real-ready-patterns-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.sp-real-ready-patterns-toolbar-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sp-real-ready-patterns-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 36px;
	padding: 6px 8px 6px 12px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: #fff;

	&:hover {
		border-color: #c6c6c6;
	}
}

.sp-real-ready-patterns-sort-label {
	font-size: 14px;
	font-weight: 500;
	color: #2f2f2f;
}

.sp-real-ready-patterns-sort-chevron {
	display: inline-flex;
	color: #2f2f2f;
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.sp-real-ready-patterns-sort-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sp-real-ready-patterns-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sp-real-ready-patterns-density {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sp-real-ready-patterns-density-btn,
.sp-real-ready-patterns-favorites-btn,
.sp-real-ready-patterns-refresh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #757575;
	cursor: pointer;

	svg,
	.dashicons {
		width: 18px;
		height: 18px;
		font-size: 18px;
	}

	&:hover {
		border-color: var(--sp-real-primary-color);
		color: var(--sp-real-primary-color);
	}
}

.sp-real-ready-patterns-density-btn.is-active {
	border-color: transparent;
	background: var(--sp-real-primary-color);
	color: #fff;

	&:hover {
		border-color: transparent;
		background: var(--sp-real-primary-color);
		color: #fff;
	}
}

.sp-real-ready-patterns-favorites-btn {
	position: relative;
	overflow: visible;

	&.is-active {
		border-color: var(--sp-real-primary-color);
		color: var(--sp-real-primary-color);
	}
}

.sp-real-ready-patterns-favorites-count {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 16px;
	background: var(--sp-real-primary-color);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
}

.sp-real-ready-patterns-refresh-btn {
	&:disabled {
		cursor: default;
	}

	&.is-refreshing .dashicons {
		animation: sp-real-ready-patterns-spin 1s linear infinite;
	}
}

@keyframes sp-real-ready-patterns-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ===================== Grid + Card ===================== */
.sp-real-ready-patterns-grid {
	display: grid;
	gap: 24px;

	&.sp-real-ready-patterns-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	&.sp-real-ready-patterns-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sp-real-ready-patterns-card {
	overflow: hidden;
	background: #fff;
}

.sp-real-ready-patterns-card-thumb {
	position: relative;
	// Fixed 3:2 box so a card owns its final height before the image decodes.
	aspect-ratio: 3 / 2;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f8fafc;
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	.sp-real-ready-patterns-card-thumb-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		background: #eef4f4;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		margin: 20px;
		border-radius: 4px;
		background: rgba(15, 23, 42, 0.55);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	&:hover::after,
	&:focus-within::after {
		opacity: 1;
	}

	&:hover .sp-real-ready-patterns-preview-link,
	.sp-real-ready-patterns-preview-link:focus-visible {
		opacity: 1;
	}
}

.sp-real-ready-patterns-preview-link {
	position: absolute;
	inset: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;

	.dashicons {
		font-size: 18px;
		width: 18px;
		height: 18px;
	}

	&:hover,
	&:focus {
		color: #fff;
	}
}

.sp-real-ready-patterns-card-body {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0 0;
}

.sp-real-ready-patterns-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #2f2f2f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Wishlist toggle: footer row, immediately left of the Insert button / Pro tag. */
.sp-real-ready-patterns-favorite-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #f0f0f0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
	color: #757575;
	cursor: pointer;

	svg {
		width: 16px;
		height: 16px;
	}

	&:hover {
		color: var(--sp-real-primary-color);
		border-color: var(--sp-real-primary-color);
	}

	&.is-favorite {
		color: var(--sp-real-primary-color);
	}
}

.sp-real-ready-patterns-insert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 6px;
	height: 32px;
	padding: 4px 12px;
	border: 0;
	border-radius: 4px;
	background: var(--sp-real-primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;

	.dashicons,
	svg {
		font-size: 16px;
		width: 16px;
		height: 16px;
		color: #fff;
	}

	&:hover:not(:disabled) {
		background: var(--sp-real-primary-color-hover, var(--sp-real-primary-color));
	}

	&:disabled {
		cursor: default;
		opacity: 0.6;
	}

	&.is-busy {
		opacity: 0.8;

		.dashicons {
			animation: sp-real-ready-patterns-spin 1s linear infinite;
		}
	}
}

/* Patterns that build on Pro-only blocks. Styled exactly like the Insert button
   apart from its background and the Pro badge icon, so the footer row keeps one
   shape whichever action a card offers. */
.sp-real-ready-patterns-pro-tag {
	background: #e8f7ee;
	color: #12a150;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .3px;
	box-shadow: none;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;

	svg {
		width: 14px;
		height: 14px;
	}

	&:hover,
	&:focus {
		background: #d7f0e2;
		color: #0e8442;
		text-decoration: none;
		box-shadow: none;
	}

	&:focus-visible {
		outline: 2px solid #12a150;
		outline-offset: 1px;
	}
}

/* ===================== Skeleton + empty state ===================== */
.sp-real-ready-patterns-card.is-skeleton .sp-real-ready-patterns-card-thumb {
	background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
	background-size: 200% 100%;
	animation: sp-real-ready-patterns-shimmer 1.2s infinite;
	border: 1px solid #e2e8f0;
}

.sp-real-ready-patterns-skeleton-line {
	height: 14px;
	flex: 2;
	border-radius: 4px;
	background: #e2e8f0;
}

.sp-real-ready-patterns-skeleton-btn {
	height: 32px;
	flex: 1;
	border-radius: 6px;
	background: #e2e8f0;
}

@keyframes sp-real-ready-patterns-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.sp-real-ready-patterns-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 240px;
	color: #64748b;
	text-align: center;
}

/* ===================== Preview drawer ===================== */
.sp-real-ready-patterns-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	background: rgba(15, 23, 42, 0.45);
}

.sp-real-ready-patterns-drawer {
	display: flex;
	flex-direction: column;
	width: min(1320px, 100%);
	background: #fff;
	box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}

.sp-real-ready-patterns-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	background: color-mix(in srgb, var(--sp-real-primary-color) 8%, #fff);
	border-bottom: 1px solid color-mix(in srgb, var(--sp-real-primary-color) 22%, #fff);

	// Larger primary Insert than the card variant it shares a class with.
	.sp-real-ready-patterns-insert-btn {
		height: 40px;
		padding: 0 20px;
		font-weight: 600;
	}
}

/* Pro pattern: replaces Insert in the drawer header. Same footprint as the
   enlarged Insert button above so the header row keeps one shape. */
.sp-real-ready-patterns-drawer-upgrade-btn {
	flex-shrink: 0;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 4px;
	background: #12a150;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;

	svg {
		width: 16px;
		height: 16px;
	}

	&:hover,
	&:focus {
		background: #0e8442;
		color: #fff;
		text-decoration: none;
		box-shadow: none;
	}

	&:focus-visible {
		outline: 2px solid #0e8442;
		outline-offset: 1px;
	}
}

/* Back-to-grid button + pattern title. */
.sp-real-ready-patterns-drawer-header-left {
	flex: 1 1 0;
	min-width: 0;
	gap: 12px;
}

.sp-real-ready-patterns-drawer-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	height: 34px;
	padding: 0 12px;
	border: 1px solid #d8dee7;
	border-radius: 4px;
	background: #fff;
	color: #1e293b;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;

	&:hover {
		background: #f1f5f9;
		border-color: #c3ccd8;
	}
}

.sp-real-ready-patterns-drawer-title {
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-real-ready-patterns-drawer-devices {
	display: flex;
	gap: 4px;
}

/* Insert + close, balanced against the left group so the devices stay centered. */
.sp-real-ready-patterns-drawer-header-right {
	flex: 1 1 0;
	justify-content: flex-end;
	gap: 40px;
}

/* Icon-only width switcher: the selected width is the only outlined chip, drawn
   as a tab that overhangs the header's bottom edge. Geometry: the icon sits on
   the same 40px action row as Back / title / Insert (the bottom padding cancels
   the overhang), and the box runs 13px past that row — the header's 12px bottom
   padding plus the 1px rule — so the tab meets the white body below. */
.sp-real-ready-patterns-drawer-device {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease;
	height: 48px;
	padding: 0;
	margin-bottom: -22px;

	// Active reads as a tab: the box alone grows 13px past the action row so the
	// white fill and the blanked bottom border open into the body below, while
	// the bottom padding keeps its icon on the row and the negative margin keeps
	// the overhang out of the header's own box.
	&.is-active {
		border-color: var(--sp-real-primary-color);
		border-bottom-color: #fff;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background: #fff;
		color: var(--sp-real-primary-color);
	}
}

.sp-real-ready-patterns-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #d8dee7;
	border-radius: 6px;
	background: #fff;
	color: #1e293b;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;

	&:hover {
		background: #f1f5f9;
		border-color: #c3ccd8;
	}
}

.sp-real-ready-patterns-drawer-body {
	display: flex;
	flex: 1;
	min-height: 0;
	padding: 32px;
	background: #fff;
}

.sp-real-ready-patterns-drawer-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	padding: 16px;
}

.sp-real-ready-patterns-drawer-frame {
	display: block;
	border: 0;
	// Fixed-width frame scaled with a CSS transform to the measured stage box
	// (the drawer measures it with a ResizeObserver and sets width/height/scale).
	transform-origin: top left;
	margin: auto;
	opacity: 1;
	transition: opacity 0.2s ease;

	// Dimmed while the framed demo page is still loading.
	&.is-loading {
		opacity: 0.7;
	}
}

/* Preloader shown over the stage until the preview iframe fires `load`. */
.sp-real-ready-patterns-drawer-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.7);
	pointer-events: none;
}

.sp-real-ready-patterns-drawer-loader-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e2e8f0;
	border-top-color: var(--sp-real-primary-color);
	border-radius: 50%;
	animation: sp-real-ready-patterns-spin 0.8s linear infinite;
}

.sp-real-ready-patterns-drawer-loader-text {
	font-size: 13px;
	color: #64748b;
}

.sp-real-ready-patterns-drawer-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	color: #64748b;

	img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}

/* Keyboard focus is visible on every control in the library. */
.sp-real-ready-patterns-modal {

	button:focus-visible,
	a:focus-visible,
	select:focus-visible,
	input:focus-visible {
		outline: 2px solid var(--sp-real-primary-color);
		outline-offset: 1px;
	}
}