/**
 * Templates page styles
 *
 * @package NoahShopBuilder
 */

$noah-accent: #4f46e5;
$noah-accent-soft: #eef2ff;
$noah-border: #e2e4e7;
$noah-muted: #6b7280;
$noah-text: #1d2327;

.noah-templates {

	&__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px;
		flex-wrap: wrap;
		margin-bottom: 24px;

		h1 {
			margin: 0 0 6px;
		}

		p {
			margin: 0;
			max-width: 640px;
		}
	}

	&__loading {
		text-align: center;
		padding: 50px;
	}

	&__toolbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	&__toolbar-end {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;

		.components-search-control {
			min-width: 220px;
		}
	}

	&__table {
		border: 1px solid $noah-border;
		border-radius: 12px;
		overflow: hidden;
	}

	&__head,
	.noah-template-row {
		display: grid;
		grid-template-columns: minmax(240px, 2.2fr) minmax(160px, 1.4fr) 130px 150px;
		align-items: center;
		gap: 16px;
		padding: 14px 20px;
	}

	&__head {
		background: #f9fafb;
		border-bottom: 1px solid $noah-border;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: $noah-muted;
		padding-block: 10px;
	}

	&__no-results {
		text-align: center;
		padding: 40px 20px;

		p {
			margin: 0 0 8px;
		}
	}
}

.noah-template-row {
	border-bottom: 1px solid $noah-border;
	transition: background 0.15s ease;

	&:last-child {
		border-bottom: 0;
	}

	&:hover {
		background: #fafaff;
	}

	&__main {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;

		> div {
			min-width: 0;
		}
	}

	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background: $noah-accent-soft;
		color: $noah-accent;

		svg {
			fill: currentcolor;
		}
	}

	&__title {
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: $noah-text;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&:hover,
		&:focus {
			color: $noah-accent;
		}
	}

	&__meta {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 4px;
		font-size: 12px;
		color: $noah-muted;
	}

	&__display {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	&__status {
		display: flex;
		align-items: center;
		gap: 8px;

		label {
			font-size: 13px;
			color: $noah-text;
			cursor: pointer;
		}
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 4px;
	}

	&.is-inactive {

		.noah-template-row__icon {
			background: #f3f4f6;
			color: $noah-muted;
		}

		.noah-template-row__status label {
			color: $noah-muted;
		}
	}
}

.noah-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #374151;
	font-weight: 500;
}

.noah-display {
	font-size: 13px;
	color: $noah-text;

	&::before {
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		margin-inline-end: 8px;
		border-radius: 50%;
		background: #10b981;
	}

	&--custom::before {
		background: $noah-accent;
	}

	&--none {
		color: $noah-muted;

		&::before {
			background: #d1d5db;
		}
	}
}

.noah-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px 2px 4px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	cursor: help;

	svg {
		fill: currentcolor;
	}

	&--warning {
		background: #fef3c7;
		color: #92400e;
	}
}

.noah-type-filter {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;

	button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		border: 1px solid $noah-border;
		border-radius: 999px;
		background: #fff;
		color: #374151;
		font-size: 13px;
		cursor: pointer;
		transition: all 0.15s ease;

		&:hover {
			border-color: $noah-accent;
			color: $noah-accent;
		}

		&:focus-visible {
			outline: 2px solid $noah-accent;
			outline-offset: 1px;
		}

		&.is-selected {
			background: $noah-accent;
			border-color: $noah-accent;
			color: #fff;

			.noah-type-filter__count {
				background: rgba(255, 255, 255, 0.2);
				color: #fff;
			}
		}
	}

	&__count {
		min-width: 18px;
		padding: 0 6px;
		border-radius: 999px;
		background: #f3f4f6;
		color: $noah-muted;
		font-size: 11px;
		line-height: 18px;
		text-align: center;
	}
}

.noah-segmented {
	display: inline-flex;
	padding: 3px;
	border-radius: 8px;
	background: #f3f4f6;

	button {
		padding: 6px 12px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: $noah-muted;
		font-size: 13px;
		cursor: pointer;

		&:focus-visible {
			outline: 2px solid $noah-accent;
		}

		&.is-selected {
			background: #fff;
			color: $noah-text;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
		}
	}
}

.noah-templates-empty {
	text-align: center;
	padding: 40px 20px 20px;

	h2 {
		margin: 0 0 8px;
		font-size: 20px;
		color: $noah-text;
	}

	&__steps {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
		max-width: 760px;
		margin: 24px auto 28px;
		padding: 0;
		list-style: none;

		li {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 6px;
			margin: 0;
			padding: 20px 16px;
			border: 1px dashed $noah-border;
			border-radius: 12px;
			color: $noah-muted;
			font-size: 13px;

			strong {
				color: $noah-text;
				font-size: 14px;
			}
		}
	}

	&__number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		font-weight: 600;
	}
}

// New-template modal.
.noah-templates-modal {

	&__steps {
		display: flex;
		gap: 6px;
		margin: -8px 0 16px;

		span {
			flex: 1;
			height: 4px;
			border-radius: 2px;
			background: #e5e7eb;
			transition: background 0.2s ease;

			&.is-active {
				background: $noah-accent;
			}
		}
	}

	&__intro {
		margin: 0 0 16px;
		color: $noah-muted;
	}

	&__form {
		display: flex;
		flex-direction: column;
		gap: 20px;
		max-width: 640px;
	}

	&__field {
		margin: 0;
		padding: 0;
		border: 0;

		legend {
			margin-bottom: 8px;
			padding: 0;
			font-size: 11px;
			font-weight: 500;
			text-transform: uppercase;
			color: $noah-text;
		}
	}

	&__footer {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 8px;
	}
}

.noah-type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.noah-type-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px;
	border: 1px solid $noah-border;
	border-radius: 12px;
	background: #fff;
	text-align: start;
	cursor: pointer;
	transition: all 0.15s ease;

	strong {
		margin-top: 6px;
		font-size: 14px;
		color: $noah-text;
	}

	&__description {
		font-size: 12px;
		line-height: 1.5;
		color: $noah-muted;
	}

	&__starters {
		margin-top: auto;
		padding: 2px 8px;
		border-radius: 999px;
		background: $noah-accent-soft;
		color: $noah-accent;
		font-size: 11px;
		font-weight: 600;
	}

	&:hover,
	&:focus-visible {
		border-color: $noah-accent;
		box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12);
		transform: translateY(-1px);
		outline: none;
	}

	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background: $noah-accent-soft;
		color: $noah-accent;

		svg {
			fill: currentcolor;
		}
	}
}

.noah-templates-modal__subheader {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;

	.noah-templates-modal__intro {
		margin: 0;
	}

	.components-button {
		flex-shrink: 0;
	}
}

.noah-templates-modal__footer.has-back {
	justify-content: space-between;
}

.noah-templates-modal__footer-end {
	display: flex;
	gap: 8px;
}

.noah-design-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.noah-design-card {
	position: relative;
	overflow: hidden;
	border: 1px solid $noah-border;
	border-radius: 12px;
	background: #fff;
	transition: all 0.15s ease;

	&__select {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: start;
		cursor: pointer;

		&:focus-visible {
			outline: 2px solid $noah-accent;
			outline-offset: -2px;
		}
	}

	&__preview-button.components-button {
		position: absolute;
		top: 10px;
		inset-inline-end: 10px;
		background: #fff;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

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

	@media (hover: none) {

		&__preview-button.components-button {
			opacity: 1;
		}
	}

	&__blocks {
		align-self: flex-start;
		margin-top: 4px;
		padding: 1px 8px;
		border-radius: 999px;
		font-size: 11px;
		font-weight: 600;

		&.is-noah {
			background: $noah-accent-soft;
			color: $noah-accent;
		}

		&.is-woocommerce {
			background: #f3e8ff;
			color: #7e22ce;
		}
	}

	&__preview {
		display: block;
		padding: 14px;
		background: #f8f9fc;
		border-bottom: 1px solid $noah-border;
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 14px 16px 16px;
		font-size: 12px;
		line-height: 1.5;
		color: $noah-muted;

		strong {
			font-size: 14px;
			color: $noah-text;
		}
	}

	&:hover,
	&:focus-within {
		border-color: $noah-accent;
		box-shadow: 0 6px 18px rgba(79, 70, 229, 0.14);
		transform: translateY(-2px);
	}
}

.noah-preview-modal {

	.components-modal__content {
		display: flex;
		flex-direction: column;
		padding: 0;
		background: #f0f0f1;
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-inline-end: 8px;

		.noah-segmented .components-button {
			height: 28px;
			color: $noah-muted;

			&.is-selected {
				background: #fff;
				color: $noah-text;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
			}
		}
	}

	&__stage {
		position: relative;
		display: flex;
		flex: 1;
		justify-content: center;
		min-height: 0;
		padding: 16px;

		iframe {
			max-width: 100%;
			height: 100%;
			min-height: 70vh;
			border: 0;
			border-radius: 8px;
			background: #fff;
			box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
			transition: width 0.25s ease, opacity 0.2s ease;

			&.is-loading {
				opacity: 0;
			}
		}
	}

	&__loading {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
}

.noah-wireframe {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

	&__image {
		fill: #e0e7ff;
	}

	&__heading {
		fill: #9ca3af;
	}

	&__line {
		fill: #e5e7eb;
	}

	&__accent {
		fill: $noah-accent;
	}

	&__box {
		fill: #fff;
		stroke: #d1d5db;
		stroke-width: 1;
	}

	&__dashed {
		fill: none;
		stroke: #c7cbd1;
		stroke-width: 1.5;
		stroke-dasharray: 5 4;
	}

	&__accent-stroke {
		fill: none;
		stroke: $noah-accent;
		stroke-width: 3;
		stroke-linecap: round;
	}
}

.noah-selected-type {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 12px;
	background: $noah-accent-soft;

	> div {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 2px;
		font-size: 12px;
		color: $noah-muted;

		strong {
			font-size: 14px;
			color: $noah-text;
		}
	}

	.noah-type-card__icon {
		background: #fff;
	}
}

.noah-option-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.noah-option-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid $noah-border;
	border-radius: 10px;
	background: #fff;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.15s ease;

	> span:last-child {
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-size: 12px;
		color: $noah-muted;

		strong {
			font-size: 13px;
			color: $noah-text;
		}
	}

	&__radio {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		margin-top: 1px;
		border: 1.5px solid #9ca3af;
		border-radius: 50%;
		box-sizing: border-box;
	}

	&:hover {
		border-color: $noah-accent;
	}

	&:focus-visible {
		outline: 2px solid $noah-accent;
		outline-offset: 1px;
	}

	&.is-selected {
		border-color: $noah-accent;
		background: $noah-accent-soft;

		.noah-option-card__radio {
			border: 5px solid $noah-accent;
		}
	}
}

@media (max-width: 960px) {

	.noah-templates__head {
		display: none;
	}

	.noah-template-row {
		grid-template-columns: 1fr auto;
		row-gap: 10px;

		&__display {
			grid-column: 1;
			padding-inline-start: 54px;
		}

		&__status {
			grid-column: 2;
			grid-row: 1;
		}

		&__actions {
			grid-column: 2;
		}
	}

	.noah-option-cards {
		grid-template-columns: 1fr;
	}
}