/* Reuses the active theme's design tokens (regalos-organic / theme.json)
   instead of hardcoded colors, so it stays on-brand if the palette changes. */

.ragpd-trigger-wrap {
	margin: 16px 0;
}

.ragpd-open-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: none;
	border-radius: var(--wp--custom--radius--lg, 16px);
	padding: 14px 32px;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.03em;
	background: var(--wp--preset--color--cta-orange, #d56532);
	color: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	transition: background-color .15s ease;
}

.ragpd-open-btn::before {
	content: "🎨";
}

.ragpd-open-btn:hover {
	background: var(--wp--preset--color--primary, #82542b);
}

.ragpd-status {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 13px;
	margin: 8px 0 0;
}

.ragpd-status.is-ok {
	color: var(--wp--preset--color--secondary, #5b614c);
}

.ragpd-status.is-error {
	color: var(--wp--preset--color--error, #ba1a1a);
}

.ragpd-modal {
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 24, .65);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--wp--preset--font-family--body, inherit);
}

.ragpd-modal[hidden] {
	display: none;
}

.ragpd-modal-inner {
	background: var(--wp--preset--color--surface, #fdf9f2);
	border-radius: var(--wp--custom--radius--xl, 24px);
	box-shadow: var(--wp--custom--shadow--soft, 0 10px 30px rgba(41, 70, 50, .08));
	width: 100%;
	max-width: 960px;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ragpd-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 20px;
	background: var(--wp--preset--color--surface-container-low, #f7f3ec);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant, #d5c3b7);
	flex-wrap: wrap;
}

.ragpd-toolbar > .ragpd-btn,
.ragpd-toolbar > .ragpd-file-btn {
	margin: 0;
	line-height: 1;
}

.ragpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 34px;
	background: var(--wp--preset--color--surface-container-lowest, #fff);
	border: 1px solid var(--wp--preset--color--outline-variant, #d5c3b7);
	color: var(--wp--preset--color--on-surface, #1c1c18);
	border-radius: var(--wp--custom--radius--default, 8px);
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition: background-color .15s ease, border-color .15s ease;
}

.ragpd-btn:hover {
	background: var(--wp--preset--color--surface-container-high, #ebe8e1);
	border-color: var(--wp--preset--color--outline, #83746a);
}

.ragpd-btn-primary {
	background: var(--wp--preset--color--cta-orange, #d56532);
	border-color: var(--wp--preset--color--cta-orange, #d56532);
	color: var(--wp--preset--color--white, #fff);
	margin-left: auto;
	padding: 8px 20px;
}

.ragpd-btn-primary:hover {
	background: var(--wp--preset--color--primary, #82542b);
	border-color: var(--wp--preset--color--primary, #82542b);
}

.ragpd-btn-danger {
	color: var(--wp--preset--color--error, #ba1a1a);
}

.ragpd-file-btn {
	display: flex;
	align-items: center;
	height: 34px;
	box-sizing: border-box;
	cursor: pointer;
}

.ragpd-sep {
	width: 1px;
	height: 22px;
	background: var(--wp--preset--color--outline-variant, #d5c3b7);
	margin: 0 4px;
}

.ragpd-color {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--outline-variant, #d5c3b7);
	border-radius: var(--wp--custom--radius--default, 8px);
	cursor: pointer;
	background: none;
}

.ragpd-font {
	box-sizing: border-box;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--wp--preset--color--outline-variant, #d5c3b7);
	border-radius: var(--wp--custom--radius--default, 8px);
	background: var(--wp--preset--color--surface-container-lowest, #fff);
	color: var(--wp--preset--color--on-surface, #1c1c18);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 13px;
}

.ragpd-stage-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-beige, #eee5d8);
	padding: 20px;
	overflow: auto;
}

.ragpd-stage {
	position: relative;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--wp--custom--radius--md, 12px);
	box-shadow: var(--wp--custom--shadow--soft, 0 10px 30px rgba(41, 70, 50, .08));
	background-color: var(--wp--preset--color--surface-container-lowest, #fff);
}

.ragpd-hint {
	margin: 0;
	padding: 10px 20px;
	font-size: 12px;
	color: var(--wp--preset--color--on-surface-variant, #51443b);
	background: var(--wp--preset--color--surface-container-low, #f7f3ec);
	border-top: 1px solid var(--wp--preset--color--outline-variant, #d5c3b7);
	text-align: center;
}

@media (max-width: 600px) {
	.ragpd-open-btn {
		width: 100%;
	}
	.ragpd-toolbar {
		font-size: 12px;
	}
	.ragpd-btn-primary {
		margin-left: 0;
		order: 99;
		width: 100%;
	}
}