/* Native dialog transitions keep browser focus handling while animating both
   entry and exit. The mobile drawer uses a separate directional open/close path. */
@supports (transition-behavior: allow-discrete) {
	dialog:not(.shell-drawer) {
		transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), display var(--motion-fast) allow-discrete, overlay var(--motion-fast) allow-discrete;
		transition-behavior: allow-discrete;
	}

	dialog:not(.shell-drawer):not([open]) {
		opacity: 0;
		transform: translateY(.625rem) scale(.985);
	}

	dialog:not(.shell-drawer)[open] {
		opacity: 1;
		transform: none;
	}

	dialog:not(.shell-drawer)::backdrop {
		background-color: transparent;
		backdrop-filter: blur(0);
		transition: opacity var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), backdrop-filter var(--motion-fast) var(--ease), display var(--motion-fast) allow-discrete, overlay var(--motion-fast) allow-discrete;
		transition-behavior: allow-discrete;
	}

	dialog:not(.shell-drawer):not([open])::backdrop {
		opacity: 0;
		background-color: transparent;
		backdrop-filter: blur(0);
	}

	dialog:not(.shell-drawer)[open]::backdrop {
		opacity: 1;
		background-color: var(--modal-backdrop-color, rgb(28 18 12 / .62));
		backdrop-filter: var(--modal-backdrop-filter, blur(2px));
	}

	@starting-style {
		dialog:not(.shell-drawer)[open] { opacity: 0; transform: translateY(.625rem) scale(.985); }
		dialog:not(.shell-drawer)[open]::backdrop { opacity: 0; background-color: transparent; backdrop-filter: blur(0); }
	}
}

/* Shared native-dialog treatment, matching the v10 system surface and rhythm. */
dialog.starina-favorites { --modal-backdrop-color: rgb(28 18 12 / .68); }
dialog.gallery-dialog { --modal-backdrop-color: rgb(0 0 0 / .75); }
dialog.delivery-map-dialog { --modal-backdrop-color: rgb(20 15 10 / .78); --modal-backdrop-filter: blur(3px); }
:is(.starina-form-dialog, .shell-search-dialog, .gallery-dialog) {
	width: min(calc(100vw - 2rem), 42rem);
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: 1rem auto;
	padding: 0;
	border: 0;
	border-radius: var(--r-lg);
	background: transparent;
	color: var(--ink);
	overflow: visible;
}

:is(.starina-form-dialog, .shell-search-dialog, .gallery-dialog)::backdrop {
	background: rgb(28 18 12 / .62);
	backdrop-filter: blur(2px);
}

.starina-form-dialog__card,
.shell-search-dialog__card {
	position: relative;
	display: grid;
	gap: var(--s4);
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-warm, var(--shadow));
	overscroll-behavior: contain;
}

.starina-form-dialog__title {
	margin: 0 3rem 0 0;
	font-family: var(--display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
}

.starina-form-dialog__context {
	margin: 0;
	color: var(--muted);
}

.starina-form-dialog .dialog__close,
.starina-favorites .dialog__close,
.gallery-close,
.shell-search-dialog__close {
	position: absolute;
	top: var(--s3);
	right: var(--s3);
	display: grid;
	place-items: center;
	width: var(--target);
	height: var(--target);
	min-width: var(--target);
	min-height: var(--target);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	font-size: 0;
	line-height: 1;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.starina-form-dialog .dialog__close::before,
.gallery-close::before {
	content: "";
	grid-area: 1 / 1;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	mask: url("design-system/assets/icons/close.svg") center / contain no-repeat;
}

:is(.starina-form-dialog .dialog__close, .starina-favorites .dialog__close, .gallery-close, .shell-search-dialog__close):hover {
	border-color: var(--primary);
	background: var(--accent-soft);
}

.starina-form-dialog :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
	min-height: 3rem;
	border-color: var(--outline);
	border-radius: var(--r-sm);
}

.starina-form-dialog .wpcf7-not-valid-tip {
	display: block;
	margin-top: .25rem;
	color: var(--danger);
	font-size: .8125rem;
	line-height: 1.35;
}

.starina-form-dialog .callback-form,
.starina-form-dialog .wpcf7 form {
	gap: var(--s4);
}

.starina-form-dialog .callback-form input.wpcf7-submit {
	border-radius: var(--r-sm);
}

/* Favourites only need a callback. Optional details stay collapsed so the
   required contact path and action fit without scrolling on a phone. */
.starina-favorites-form {
	display: grid;
	gap: .875rem;
	margin: 0;
}

.starina-favorites-form > label,
.starina-favorites-form__details label {
	display: grid;
	gap: .375rem;
	font-size: .9rem;
	font-weight: 600;
}

.starina-favorites-form label span,
.starina-favorites-form__details {
	color: var(--muted);
	font-weight: 400;
}

.starina-favorites-form__details {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.starina-favorites-form__details summary {
	display: flex;
	align-items: center;
	min-height: var(--target);
	cursor: pointer;
	font-weight: 600;
}

.starina-favorites-form__details > div {
	display: grid;
	gap: .875rem;
	padding: .125rem 0 .875rem;
}

.starina-favorites-form textarea {
	min-height: 4.5rem;
	resize: vertical;
}

.starina-favorites-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.starina-favorites-form .wpcf7-list-item label {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--s2);
	align-items: start;
	min-height: 44px;
	color: var(--muted);
	font-size: .84rem;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.starina-favorites-form .wpcf7-list-item input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--primary);
}

.starina-favorites-form input.wpcf7-submit {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--primary);
	border-radius: var(--r-sm);
	background: var(--primary);
	color: var(--primary-ink);
	font: 600 1rem var(--sans);
	cursor: pointer;
}

.gallery-dialog {
	width: min(92vw, 60rem);
	max-height: 90dvh;
	padding: var(--s3);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow-warm, var(--shadow));
}

.gallery-surface {
	position: relative;
	display: grid;
	min-height: min(24rem, 62dvh);
	padding-top: 2.75rem;
	border-radius: calc(var(--r-lg) - 4px);
	background: var(--surface-2);
	overflow: hidden;
}

.gallery-photo {
	width: 100%;
	height: min(68dvh, 42rem);
	object-fit: contain;
}

.gallery-navigation {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	pointer-events: none;
}

.gallery-navigation__button {
	display: grid;
	place-items: center;
	width: var(--target);
	height: var(--target);
	min-width: var(--target);
	min-height: var(--target);
	margin: var(--s3);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgb(255 255 255 / .94);
	color: var(--ink);
	box-shadow: 0 .25rem 1rem rgb(20 20 19 / .12);
	pointer-events: auto;
}

.gallery-navigation__button::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	mask: url("design-system/assets/icons/chevron_right.svg") center / contain no-repeat;
}

.gallery-navigation__button--previous { grid-column: 1; grid-row: 1; }
.gallery-navigation__button--previous::before { mask-image: url("design-system/assets/icons/chevron_left.svg"); }
.gallery-navigation__button--next { grid-column: 3; grid-row: 1; }

.gallery-navigation__button:disabled { opacity: 0; pointer-events: none; }

.gallery-counter {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	margin: var(--s3);
	padding: .375rem .625rem;
	border-radius: 999px;
	background: rgb(20 20 19 / .78);
	color: var(--primary-ink);
	font: 600 .8125rem/1 var(--sans);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.gallery-error {
	align-self: center;
	margin: auto;
	padding: var(--s5);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--muted);
	text-align: center;
}

@media (max-width: 560px) {
	:is(.starina-form-dialog, .shell-search-dialog) {
		width: calc(100vw - 1rem);
		max-height: calc(100dvh - 1rem);
		margin: .5rem auto;
	}
	.starina-form-dialog__card,
	.shell-search-dialog__card {
		max-height: calc(100dvh - 1rem);
		padding: 1.25rem;
		border-radius: var(--r-md);
	}
	.starina-form-dialog__card > h2 { font-size: 2rem; }
	.gallery-dialog { width: calc(100vw - 1rem); padding: .5rem; }
	.gallery-surface { min-height: 18rem; padding-top: 2.5rem; border-radius: var(--r-md); }
	.gallery-photo { height: min(62dvh, 34rem); }
	.gallery-navigation__button { margin: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	dialog:not(.shell-drawer),
	dialog:not(.shell-drawer)::backdrop {
		transition: none;
		transform: none;
		backdrop-filter: none;
	}
	:is(.starina-form-dialog .dialog__close, .starina-favorites .dialog__close, .gallery-close, .shell-search-dialog__close, .gallery-navigation__button) { transition: none; }
}

/* Keep the callback dialog's close row outside the scrollable form surface.
   The shared parent theme's dialog defaults have higher specificity than the
   generic child selectors above, so this callback-only contract is explicit. */
dialog.dialog.starina-form-dialog {
	position: fixed;
	inset: 0;
	width: min(calc(100vw - 2rem), 68rem);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 3.5rem 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
}

dialog.dialog.starina-form-dialog .starina-form-dialog__card {
	position: static;
	display: grid;
	grid-template-columns: minmax(16rem, .9fr) minmax(0, 1.1fr);
	gap: 0;
	max-height: calc(100dvh - 5.5rem);
	padding: 0;
	border-radius: var(--r-lg);
	overflow: auto;
}

dialog.dialog.starina-form-dialog .starina-form-dialog__title {
	margin: 0;
	font-size: clamp(1.85rem, 3.5vw, 2.4rem);
	line-height: 1.12;
}

.starina-callback-contact {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	min-height: 30rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	overflow: hidden;
	background: #30241c;
	color: #faf9f5;
}

.starina-callback-contact::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(22 16 11 / .08) 12%, rgb(22 16 11 / .86) 100%);
	content: "";
}

.starina-callback-contact__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.starina-callback-contact__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.starina-callback-contact__eyebrow {
	margin: 0 0 .5rem;
	color: #f0d7bd;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.starina-callback-contact__phone {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	align-self: flex-start;
	color: #fff;
	font: 600 clamp(1.4rem, 2.35vw, 2rem)/1.15 var(--sans);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.starina-callback-contact__phone .shell-icon { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; }
.starina-callback-contact__note { max-width: 22rem; margin: .5rem 0 0; color: rgb(250 249 245 / .82); font-size: .9375rem; }
.starina-callback-contact__socials { margin-top: 1rem; }
.starina-callback-contact__socials .social-link { border-color: rgb(250 249 245 / .3); background: rgb(255 255 255 / .96); color: var(--ink); }

.starina-callback-form {
	display: grid;
	align-content: center;
	gap: var(--s4);
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--surface);
}

.starina-callback-form .eyebrow { margin: 0; }
.starina-callback-form .callback-form { gap: var(--s4); }
.starina-callback-form .callback-form input:not([type="checkbox"]) { width: 100%; }

dialog.dialog.starina-form-dialog .dialog__close {
	top: 0;
	right: 0;
}

dialog.dialog.starina-form-dialog .callback-form :is(input, textarea, button, a):focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

@media (min-width: 1280px) {
	dialog.dialog.starina-form-dialog { width: min(calc(100vw - 4rem), 74rem); }
	dialog.dialog.starina-form-dialog .starina-form-dialog__card { grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.15fr); }
}

@media (max-width: 760px) {
	dialog.dialog.starina-form-dialog {
		width: calc(100vw - 1rem);
		max-height: calc(100dvh - 1rem);
		padding-top: 3.25rem;
	}

	dialog.dialog.starina-form-dialog .starina-form-dialog__card {
		max-height: calc(100dvh - 4.25rem);
		grid-template-columns: minmax(0, 1fr);
		border-radius: var(--r-md);
	}

	.starina-callback-contact { min-height: clamp(10rem, 30dvh, 14rem); padding: 1rem 1.125rem; }
	.starina-callback-contact__socials { margin-top: .625rem; }
	.starina-callback-contact__socials .social-links { gap: .375rem; }
	.starina-callback-contact__socials .social-link { min-height: 2.25rem; padding: .25rem .625rem .25rem .25rem; font-size: .75rem; }
	.starina-callback-contact__socials .social-link span { width: 1.5rem; height: 1.5rem; }
	.starina-callback-form { gap: .875rem; padding: 1rem; }

	dialog.dialog.starina-form-dialog .starina-form-dialog__title {
		font-size: clamp(1.65rem, 7vw, 2rem);
	}
}

@media (max-height: 700px) and (max-width: 760px) {
	.starina-callback-contact { min-height: 9rem; }
}

.starina-form-dialog .wpcf7-response-output{margin:.75rem 0 0;padding:.625rem .75rem;border-radius:.5rem;max-width:100%;font-size:.875rem;line-height:1.4}
.starina-form-dialog .callback-form .order-photo{display:none}
.starina-form-dialog[data-starina-form-dialog="order"] .callback-form{gap:12px}
.starina-form-dialog[data-starina-form-dialog="order"] .order-field{margin:0}

/* Long-form profiles (quote, quiz, favourites): a comment box of three or four lines, not half the screen. */
.starina-form-dialog:not([data-starina-form-dialog="callback"]):not([data-starina-form-dialog="order"]) .callback-form textarea { height: 6.5rem; min-height: 6.5rem; resize: vertical; }
.starina-form-dialog__context { margin: -.5rem 0 0; }

/* Плотность форм в модалках (Павел 29.09): CF7 оборачивает поля в <p> и <br>, отсюда огромные зазоры.
   Поля идут сеткой с одним шагом, textarea — 3 строки, обязательные поля помечены справа от подписи. */
.starina-form-dialog .wpcf7-form { display: grid; gap: .75rem; }
.starina-form-dialog .wpcf7-form > p, .starina-form-dialog .wpcf7-form p { margin: 0; }
.starina-form-dialog .wpcf7-form br { display: none; }
.starina-form-dialog .wpcf7-form label { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; align-items: baseline; }
.starina-form-dialog .wpcf7-form label > .wpcf7-form-control-wrap { grid-column: 1 / -1; }
.starina-form-dialog .wpcf7-form label:has([aria-required="true"])::after { content: "обязательно"; grid-row: 1; grid-column: 2; color: var(--accent-text); font-size: .75rem; font-weight: 600; }
.starina-form-dialog .wpcf7-form-control-wrap { display: block; }
.starina-form-dialog textarea { min-height: 5.25rem; height: 5.25rem; resize: vertical; }
.starina-form-dialog .wpcf7-not-valid-tip { margin: .2rem 0 0; font-size: .75rem; line-height: 1.3; font-weight: 500; color: var(--danger); }
/* One CF7 tip per field: desktop — in the label row, right of the caption (where «обязательно» sits); phone — under the field. */
.starina-form-dialog .wpcf7-form-control.wpcf7-not-valid:not([type="checkbox"]) { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
@media (min-width: 601px) {
	.starina-form-dialog .wpcf7-form label:has(> .wpcf7-form-control-wrap > .wpcf7-not-valid:not([type="checkbox"])):not(.starina-contact-field) { position: relative; }
	.starina-form-dialog .wpcf7-form label:has(> .wpcf7-form-control-wrap > .wpcf7-not-valid:not([type="checkbox"])):not(.starina-contact-field)::after { content: none; }
	.starina-form-dialog .wpcf7-form label:not(.starina-contact-field) > .wpcf7-form-control-wrap { position: static; }
	.starina-form-dialog .wpcf7-form label:not(.starina-contact-field) > .wpcf7-form-control-wrap > .wpcf7-not-valid-tip { position: absolute; top: 0; right: 0; max-width: 65%; margin: 0; text-align: right; }
}
.starina-form-dialog .wpcf7-acceptance label, .starina-form-dialog .wpcf7-form .wpcf7-list-item label { display: flex; align-items: flex-start; gap: .625rem; }
.starina-form-dialog .wpcf7-acceptance label::after { content: none; }
.starina-form-dialog .wpcf7-form-control-wrap { min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Телефон | Email switch of the CF7 dialogs (#421). */
.starina-contact{display:grid;gap:.5rem}
.starina-contact-switch{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;padding:.1875rem;border:1px solid var(--outline);border-radius:var(--r-sm);background:var(--surface-2,transparent)}
.starina-contact-switch button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:calc(var(--r-sm) - 2px);background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.starina-contact-switch button.is-active{background:var(--primary);color:var(--on-primary,#fff)}
.starina-contact-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.starina-contact-field[hidden]{display:none}
.starina-contact .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}