/* Preset title/text picker. Kept separate so product pages do not load account and checkout CSS. */
@keyframes rangak-loading-spin { to { transform: rotate(360deg); } }

.rangak-modal-open { overflow: hidden; }
.rangak-preset-modal {
	position: fixed !important;
	z-index: 100050 !important;
	inset: 0 !important;
	display: grid !important;
	place-items: center;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: 20px;
	margin: 0;
	opacity: 0;
	visibility: visible;
	transition: opacity .18s ease;
}
body.rangak-modal-open .rangak-preset-modal { z-index: 100200 !important; }
.rangak-preset-modal[hidden] { display: none !important; }
.rangak-preset-modal.is-open { opacity: 1; }
.rangak-preset-modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(18,15,13,.72);
	cursor: pointer;
}
.rangak-preset-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(720px, 100%);
	height: min(820px, calc(100vh - 40px));
	height: min(820px, calc(100dvh - 40px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #cabfb2;
	background: #fffdf9;
	box-shadow: 0 30px 90px rgba(0,0,0,.3);
}
.rangak-preset-modal__dialog > header {
	min-height: 105px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 20px;
	border-bottom: 1px solid #ded5ca;
	background: #f4eee6;
}
.rangak-preset-modal__dialog > header > div { min-width: 0; }
.rangak-preset-modal__dialog > header span { color: #8a4d55; font-size: 13px; font-weight: 800; }
.rangak-preset-modal__dialog > header h2 { margin: 3px 0 0; color: #211d19; font-size: 22px; }
.rangak-preset-modal__dialog > header p { max-width: 570px; margin: 5px 0 0; color: #696158; font-size: 13px; line-height: 1.75; }
.rangak-preset-modal__close {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	padding: 0;
	border: 1px solid #cfc5b9;
	background: #fff;
	color: #342e29;
	font: 400 29px/1 Arial,sans-serif;
	cursor: pointer;
}
.rangak-preset-modal__viewport { min-height: 0; flex: 1; overflow: hidden; padding: 18px 20px 14px; }
.rangak-preset-slide { height: 100%; display: flex; flex-direction: column; }
.rangak-preset-slide__preview {
	min-height: 0;
	display: grid;
	place-items: center;
	flex: 1;
	overflow: hidden;
	padding: 12px;
	border: 1px solid #d8cfc4;
	background: #fff;
	text-align: center;
	touch-action: pan-y;
}
.rangak-preset-slide__preview > [hidden] { display: none !important; }
.rangak-preset-slide__preview > img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: scale-down; object-position: center; }
.rangak-preset-slide__loader { display: inline-flex; align-items: center; gap: 9px; color: #766e65; font-size: 14px; font-weight: 750; }
.rangak-preset-slide__loader::before { width: 20px; height: 20px; border: 2px solid #ddcfd0; border-top-color: #733844; border-radius: 50%; content: ""; animation: rangak-loading-spin .75s linear infinite; }
.rangak-preset-slide__preview > p { margin: 0; color: #8b343f; font-size: 14px; font-weight: 750; }
.rangak-preset-slide__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 3px 0; }
.rangak-preset-slide__meta b { color: #39322c; font-size: 15px; }
.rangak-preset-slide__meta small { color: #756d64; font-size: 13px; }
.rangak-preset-modal__dialog > footer { display: grid; grid-template-columns: 42px auto 42px 1fr; align-items: center; gap: 9px; padding: 15px 20px 18px; border-top: 1px solid #ded5ca; background: #faf6f0; }
.rangak-preset-modal__dialog > footer > span { min-width: 72px; color: #686159; font-size: 13px; text-align: center; }
.rangak-preset-modal__arrow { width: 42px; height: 42px; padding: 0; border: 1px solid #cfc5b9; background: #fff; color: #302a25; font: 800 18px/1 Vazirmatn,sans-serif; cursor: pointer; }
.rangak-preset-modal__select { justify-self: end; min-height: 46px; padding-inline: 20px !important; }

html[data-rangak-theme="dark"] .rangak-preset-modal__dialog { border-color: #454c55; background: #15191f; }
html[data-rangak-theme="dark"] .rangak-preset-modal__dialog > header,
html[data-rangak-theme="dark"] .rangak-preset-modal__dialog > footer { border-color: #3d444c; background: #1b2026; }
html[data-rangak-theme="dark"] .rangak-preset-modal__dialog > header h2,
html[data-rangak-theme="dark"] .rangak-preset-slide__meta b { color: #f2eee7; }
html[data-rangak-theme="dark"] .rangak-preset-modal__dialog > header p,
html[data-rangak-theme="dark"] .rangak-preset-slide__meta small,
html[data-rangak-theme="dark"] .rangak-preset-modal__dialog > footer > span { color: #bbb5ad; }
html[data-rangak-theme="dark"] .rangak-preset-slide__preview { border-color: #454c55; background: #fff; }
html[data-rangak-theme="dark"] .rangak-preset-modal__close,
html[data-rangak-theme="dark"] .rangak-preset-modal__arrow { border-color: #4a515a; background: #101419; color: #f2eee7; }

@media (max-width: 560px) {
	.rangak-preset-modal { padding: 10px; }
	.rangak-preset-modal__dialog { height: calc(100vh - 20px); height: calc(100dvh - 20px); }
	.rangak-preset-modal__dialog > header { min-height: 116px; padding: 13px 14px; }
	.rangak-preset-modal__dialog > header h2 { font-size: 19px; }
	.rangak-preset-modal__dialog > header p { font-size: 12px; line-height: 1.65; }
	.rangak-preset-modal__viewport { min-height: 0; padding: 11px 12px; }
	.rangak-preset-slide__preview { padding: 7px; }
	.rangak-preset-slide__meta { padding-top: 9px; }
	.rangak-preset-modal__dialog > footer { grid-template-columns: 42px 1fr 42px; padding: 13px 14px 15px; }
	.rangak-preset-modal__select { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}