@import '../shared/tokens.scss';
@import '../shared/components/components.scss';
@import '../shared/components/gift-wrap-fields.scss';

.rtgw-admin-app {
	max-width: 760px;
	margin: 30px 20px 60px 0;
	font-family: var(--rtgw-font);
	color: var(--rtgw-ink);
}

.rtgw-admin-app__intro {
	margin-bottom: 24px;

	.rtgw-admin-app__eyebrow {
		display: inline-block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--rtgw-accent-dark);
		background: var(--rtgw-accent-soft);
		padding: 4px 10px;
		border-radius: 999px;
		margin-bottom: 10px;
	}

	h1 {
		font-size: 26px;
		font-weight: 700;
		margin: 0 0 6px;
		color: var(--rtgw-ink);
	}

	p {
		margin: 0;
		color: var(--rtgw-ink-soft);
		font-size: 14px;
	}
}

.rtgw-admin-card {
	margin-bottom: 20px;

	h2 {
		font-size: 15px;
		margin: 0;
		font-weight: 700;
	}
}

.rtgw-admin-save-bar {
	margin-top: 8px;
}

.rtgw-admin-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 60px 0;
	font-family: var(--rtgw-font);
	color: var(--rtgw-ink-soft);
}

.rtgw-wrap-options {
	.rtgw-wrap-options__help {
		margin: 0 0 18px;
		color: var(--rtgw-ink-soft);
		font-size: 13px;
	}
}

.rtgw-wrap-option-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--rtgw-line);
	border-radius: var(--rtgw-radius-sm);
	background: var(--rtgw-surface-soft);
	margin-bottom: 14px;

	.rtgw-wrap-option-card__fields {
		flex: 1;
		display: flex;
		gap: 14px;

		.rtgw-field-row {
			margin-bottom: 0;
			flex: 1;
		}
	}
}

.rtgw-diagnostics {
	font-size: 13px;
}

.rtgw-diagnostics__loading,
.rtgw-diagnostics__error {
	color: var(--rtgw-ink-soft);
	font-size: 13px;
}

.rtgw-diagnostics__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rtgw-diagnostics__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	strong { display: block; font-size: 13px; color: var(--rtgw-ink); }
}

.rtgw-diagnostics__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	margin-top: 1px;
}

.rtgw-diagnostics__item.is-pass .rtgw-diagnostics__icon {
	background: #eafbf2;
	color: var(--rtgw-success);
}

.rtgw-diagnostics__item.is-fail .rtgw-diagnostics__icon {
	background: #fdecef;
	color: var(--rtgw-danger);
}

.rtgw-diagnostics__detail {
	display: block;
	color: var(--rtgw-ink-soft);
	font-size: 12.5px;
	margin-top: 2px;
}

.rtgw-diagnostics__link {
	margin: 0 0 12px;

	a { color: var(--rtgw-accent-dark); font-weight: 600; font-size: 12.5px; }
}

.rtgw-diagnostics__note {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--rtgw-radius-sm);
	background: var(--rtgw-accent-soft);
	color: var(--rtgw-accent-dark);
	font-size: 12.5px;

	&.is-warning {
		background: #fff6e6;
		color: #a3690a;
	}
}

// Theme colour picker (see Fields.jsx > ThemeColorField).
.rtgw-theme-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.rtgw-theme-swatch {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1.5px var(--rtgw-line);
	background: var(--swatch-color);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&:hover { box-shadow: 0 0 0 1.5px var(--swatch-color); }

	&.is-selected {
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch-color);
	}

	&--custom {
		background: conic-gradient(from 180deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);

		input[type="color"] {
			opacity: 0;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			border: none;
			padding: 0;
		}
	}
}

// How-to instructions (see HowToPanel.jsx).
.rtgw-howto__group {
	margin-bottom: 22px;

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

.rtgw-howto__group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--rtgw-ink);
}

.rtgw-howto__badge {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 9px;
	border-radius: 999px;

	&--auto { background: #eafbf2; color: var(--rtgw-success); }
	&--manual { background: var(--rtgw-accent-soft); color: var(--rtgw-accent-dark); }
}

.rtgw-howto__text {
	margin: 0;
	font-size: 13px;
	color: var(--rtgw-ink-soft);
	line-height: 1.55;
}

.rtgw-howto__steps {
	list-style: none;
	counter-reset: rtgw-howto-step;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rtgw-howto__steps li {
	position: relative;
	padding-left: 32px;
	counter-increment: rtgw-howto-step;

	&::before {
		content: counter(rtgw-howto-step);
		position: absolute;
		top: 0;
		left: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--rtgw-accent);
		color: #fff;
		font-size: 11.5px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	strong {
		display: block;
		font-size: 13.5px;
		font-weight: 650;
		color: var(--rtgw-ink);
		margin-bottom: 2px;
	}

	span {
		display: block;
		font-size: 12.5px;
		color: var(--rtgw-ink-soft);
		line-height: 1.5;
	}
}