/**
 * Единые модальные окна фриланса: z-index выше шапки/нижнего меню/offcanvas,
 * центрирование, палитра и типографика как у .custom-modal.
 */

:root {
	--freelance-modal-z: 2147483646;
	--freelance-modal-overlay: rgba(15, 23, 42, 0.55);
	--freelance-modal-primary: #6B3FFF;
	--freelance-modal-primary-light: #9B7BFF;
	--freelance-modal-radius: 16px;
	--freelance-modal-radius-lg: 20px;
	--freelance-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
	--freelance-modal-font: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Оверлеи заказа, диалога, спора, отзывов */
[id$="modalparent"],
#open-dispute-modal-parent,
#customer-review-modal-parent,
#executor-review-modal-parent {
	box-sizing: border-box;
	font-family: var(--freelance-modal-font);
}

.freelance-modal-overlay,
[id$="modalparent"],
#open-dispute-modal-parent,
#customer-review-modal-parent,
#executor-review-modal-parent {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 !important;
	padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
	background-color: var(--freelance-modal-overlay) !important;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: var(--freelance-modal-z) !important;
	isolation: isolate;
	align-items: center !important;
	justify-content: center !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* При открытии — flex-центрирование (JS может выставить block) */
.freelance-modal-overlay.freelance-modal-overlay--open,
.freelance-modal-overlay[style*="display: block"],
.freelance-modal-overlay[style*="display: flex"],
.freelance-modal-overlay[style*="display:inline-block"],
[id$="modalparent"][style*="display: block"],
[id$="modalparent"][style*="display: flex"],
[id$="modalparent"][style*="display:inline-block"],
#open-dispute-modal-parent[style*="display: block"],
#open-dispute-modal-parent[style*="display: flex"],
#customer-review-modal-parent[style*="display: flex"],
#customer-review-modal-parent[style*="display: block"],
#executor-review-modal-parent[style*="display: flex"],
#executor-review-modal-parent[style*="display: block"] {
	display: flex !important;
}

/* Панель модалки (прямой потомок оверлея) */
.freelance-modal-overlay > div,
[id$="modalparent"] > div,
#open-dispute-modal-parent > #open-dispute-modal,
#customer-review-modal-parent > #customer-review-modal,
#executor-review-modal-parent > #executor-review-modal {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	translate: none !important;
	margin: auto !important;
	width: min(100%, 520px) !important;
	max-width: 520px !important;
	max-height: min(90vh, 90dvh) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	background: #fff !important;
	border-radius: var(--freelance-modal-radius-lg) !important;
	box-shadow: var(--freelance-modal-shadow) !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	font-family: var(--freelance-modal-font) !important;
	color: #2d3748 !important;
	animation: freelanceModalIn 0.28s ease;
}

/* Большие формы: отклик, оценка */
#addproposalmodalparent > #addproposalmodal,
#setratingmodalparent > #setratingmodal {
	width: min(100%, 560px) !important;
	max-width: 560px !important;
}

#setratingmodalparent > #setratingmodal {
	max-height: min(92vh, 92dvh) !important;
	height: auto !important;
	padding: 0 !important;
}

#setratingmodalparent .setratingmodalcontent {
	padding: 0 20px 16px;
	max-height: calc(min(92vh, 92dvh) - 140px);
	overflow-y: auto;
}

/* Заголовки */
.freelance-modal-overlay [id$="modalheader"],
.freelance-modal-overlay [id$="-modal-header"],
[id$="modalparent"] [id$="modalheader"],
[id$="modalparent"] [id$="-modal-header"],
#open-dispute-modal-header,
#customer-review-modal-header,
#executor-review-modal-header {
	background: linear-gradient(135deg, var(--freelance-modal-primary) 0%, var(--freelance-modal-primary-light) 100%) !important;
	color: #fff !important;
	padding: 18px 48px 18px 22px !important;
	margin: 0 !important;
	border-radius: var(--freelance-modal-radius-lg) var(--freelance-modal-radius-lg) 0 0 !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-align: left !important;
}

#open-dispute-modal-header h3,
#customer-review-modal-header h3,
#executor-review-modal-header h3 {
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* Тело без отдельного header-блока — отступы у контента */
[id$="modalparent"] > div:not(:has([id$="modalheader"])):not(:has([id$="-modal-header"])) {
	padding: 20px 22px 22px !important;
}

[id$="modalparent"] > div [id$="modalheader"] ~ *,
[id$="modalparent"] > div [id$="-modal-header"] ~ *,
#open-dispute-modal-header ~ #open-dispute-modal-content,
#customer-review-modal-header ~ #customer-review-modal-content,
#executor-review-modal-header ~ #executor-review-modal-content {
	padding-left: 22px;
	padding-right: 22px;
}

#open-dispute-modal-content,
#customer-review-modal-content,
#executor-review-modal-content {
	padding: 20px 22px 22px !important;
}

[id$="modalparent"] > div > label:first-of-type,
[id$="modalparent"] > div > [id$="modalheader"] + label {
	margin-top: 0;
}

/* После header — поля с отступом сверху */
[id$="modalparent"] [id$="modalheader"] ~ label,
[id$="modalparent"] [id$="modalheader"] ~ input,
[id$="modalparent"] [id$="modalheader"] ~ textarea,
[id$="modalparent"] [id$="modalheader"] ~ select,
[id$="modalparent"] [id$="modalheader"] ~ button,
[id$="modalparent"] [id$="modalheader"] ~ .submitworkmodalinfo,
[id$="modalparent"] [id$="modalheader"] ~ .confirmcompletionmodalinfo,
[id$="modalparent"] [id$="modalheader"] ~ .sendrevisionmodalinfo,
[id$="modalparent"] [id$="modalheader"] ~ .confirmcompletionmodalbuttons,
[id$="modalparent"] [id$="modalheader"] ~ .dispute-modal-info,
[id$="modalparent"] [id$="modalheader"] ~ .dispute-modal-buttons {
	margin-top: 0;
}

[id$="modalparent"] > div {
	padding-bottom: 22px !important;
}

/* Модалка оценки: внутренняя сетка без лишних отступов */
#setratingmodalparent > #setratingmodal {
	padding-bottom: 0 !important;
}

#setratingmodalparent #setratingmodalheader {
	border-radius: var(--freelance-modal-radius-lg) var(--freelance-modal-radius-lg) 0 0 !important;
}

#setratingmodalparent button#tosaveorderrating {
	margin-bottom: 16px !important;
}

[id$="modalparent"] [id$="modalheader"] ~ label,
#open-dispute-modal-content label {
	display: block;
	margin: 14px 22px 6px !important;
	width: calc(100% - 44px) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #4a5568 !important;
}

/* Поля ввода */
.freelance-modal-overlay input:not([type="checkbox"]):not([type="radio"]),
.freelance-modal-overlay textarea,
.freelance-modal-overlay select,
[id$="modalparent"] input:not([type="checkbox"]):not([type="radio"]),
[id$="modalparent"] textarea,
[id$="modalparent"] select,
#open-dispute-modal-content input,
#open-dispute-modal-content textarea,
#open-dispute-modal-content select {
	display: block !important;
	width: calc(100% - 44px) !important;
	margin: 0 22px 12px !important;
	padding: 11px 14px !important;
	font-size: 0.9375rem !important;
	font-family: var(--freelance-modal-font) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: var(--freelance-modal-radius) !important;
	background: #f8fafc !important;
	color: #2d3748 !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.freelance-modal-overlay input:focus,
.freelance-modal-overlay textarea:focus,
.freelance-modal-overlay select:focus,
[id$="modalparent"] input:focus,
[id$="modalparent"] textarea:focus,
[id$="modalparent"] select:focus {
	outline: none !important;
	border-color: var(--freelance-modal-primary) !important;
	box-shadow: 0 0 0 3px rgba(107, 63, 255, 0.15) !important;
}

.freelance-modal-overlay textarea,
[id$="modalparent"] textarea {
	min-height: 88px;
	resize: vertical;
}

/* Инфо-блоки */
.submitworkmodalinfo,
.confirmcompletionmodalinfo,
.sendrevisionmodalinfo,
.dispute-modal-info,
.dispute-warning {
	margin: 12px 22px 16px !important;
	padding: 14px 16px !important;
	width: calc(100% - 44px) !important;
	box-sizing: border-box !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid var(--freelance-modal-primary) !important;
	border-radius: var(--freelance-modal-radius) !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	color: #4a5568 !important;
}

.dispute-warning {
	background: #fffbeb !important;
	border-color: #fde68a !important;
	border-left-color: #f59e0b !important;
	color: #92400e !important;
}

/* Кнопки */
.freelance-modal-overlay button,
[id$="modalparent"] button,
.dispute-modal-buttons button,
.confirmcompletionmodalbuttons button {
	font-family: var(--freelance-modal-font) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	padding: 11px 22px !important;
	cursor: pointer !important;
	border: none !important;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
	box-sizing: border-box;
}

/* Основное действие */
[id$="modalparent"] button[id$="btn"]:not(#cancelconfirmcompletionbtn):not(#cancel-dispute-btn),
[id$="modalparent"] button[id$="send"],
button#addproposalbtn,
button#extenddeadlinebtn,
button#chooseexecutormodalsend,
button#proposeconditionsbtn,
button#proposecustomerconditionsbtn,
button#submitworkbtn,
button#confirmcompletionbtn,
button#sendrevisionbtn,
button#tosaveorderrating,
button#confirmpaymentmodalsend,
#submit-dispute-btn {
	display: block !important;
	width: calc(100% - 44px) !important;
	margin: 8px 22px 0 !important;
	background: linear-gradient(135deg, var(--freelance-modal-primary) 0%, var(--freelance-modal-primary-light) 100%) !important;
	color: #fff !important;
	box-shadow: 0 10px 28px -8px rgba(107, 63, 255, 0.45) !important;
}

[id$="modalparent"] button[id$="btn"]:not(#cancelconfirmcompletionbtn):not(#cancel-dispute-btn):hover,
button#addproposalbtn:hover,
button#extenddeadlinebtn:hover,
button#chooseexecutormodalsend:hover,
button#proposeconditionsbtn:hover,
button#proposecustomerconditionsbtn:hover,
button#submitworkbtn:hover,
button#confirmcompletionbtn:hover,
button#sendrevisionbtn:hover,
button#tosaveorderrating:hover,
#submit-dispute-btn:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

/* Отмена / вторичные */
#cancelconfirmcompletionbtn,
#cancel-dispute-btn,
.confirmcompletionmodalbuttons button#cancelconfirmcompletionbtn {
	background: #f1f5f9 !important;
	color: #475569 !important;
	box-shadow: none !important;
	border: 1px solid #e2e8f0 !important;
}

.confirmcompletionmodalbuttons,
.dispute-modal-buttons {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px !important;
	justify-content: flex-end !important;
	margin: 16px 22px 0 !important;
	padding-top: 16px !important;
	border-top: 1px solid #e2e8f0 !important;
	width: calc(100% - 44px) !important;
	box-sizing: border-box !important;
}

.confirmcompletionmodalbuttons button,
.dispute-modal-buttons button {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 120px;
	margin: 0 !important;
}

#submit-dispute-btn {
	background: #ef4444 !important;
	box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.45) !important;
}

/* Закрытие */
.freelance-modal-overlay svg[id^="close"],
[id$="modalparent"] svg[id^="close"],
#close-open-dispute-modal,
#close-customer-review-modal,
#close-executor-review-modal {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	z-index: 5;
	background: rgba(255, 255, 255, 0.2) !important;
	fill: #fff !important;
	stroke: #fff !important;
	color: #fff !important;
	box-sizing: border-box;
	transition: background 0.2s;
}

@media (hover: hover) {
	.freelance-modal-overlay svg[id^="close"]:hover,
	[id$="modalparent"] svg[id^="close"]:hover {
		background: rgba(255, 255, 255, 0.35) !important;
	}
}

/* Если нет цветного header — крестик тёмный */
[id$="modalparent"] > div:not(:has([id$="modalheader"])):not(:has([id$="-modal-header"])) svg[id^="close"] {
	background: #f1f5f9 !important;
	fill: #64748b !important;
}

@keyframes freelanceModalIn {
	from {
		opacity: 0;
		transform: translateY(-12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* custom-modal — тот же уровень */
.custom-modal.show,
.custom-modal[style*="display: flex"],
.custom-modal[style*="display:block"],
.custom-modal[style*="display: block"] {
	z-index: var(--freelance-modal-z) !important;
}

/* Пока открыта любая модалка — меню и шапка ниже */
body.freelance-modal-open header#appHeader,
body.freelance-modal-open #bottomNav,
body.freelance-modal-open .bottom-nav,
body.freelance-modal-open .top-navbar,
body.freelance-service-modal-open header#appHeader,
body.freelance-service-modal-open #bottomNav {
	z-index: 10 !important;
}

body.freelance-modal-open .offcanvas.show {
	z-index: 100 !important;
}

html.freelance-scroll-locked,
body.freelance-scroll-locked,
body.freelance-modal-open {
	overflow: hidden !important;
	touch-action: none;
}

body.freelance-scroll-locked {
	overscroll-behavior: none;
}

@media (max-width: 576px) {
	.freelance-modal-overlay,
	[id$="modalparent"],
	#open-dispute-modal-parent,
	#customer-review-modal-parent,
	#executor-review-modal-parent {
		padding: 10px !important;
		align-items: flex-end !important;
	}

	.freelance-modal-overlay > div,
	[id$="modalparent"] > div,
	#open-dispute-modal-parent > #open-dispute-modal {
		width: 100% !important;
		max-width: 100% !important;
		max-height: min(92vh, 92dvh) !important;
		border-radius: var(--freelance-modal-radius-lg) var(--freelance-modal-radius-lg) 0 0 !important;
		margin-bottom: 0 !important;
	}

	.confirmcompletionmodalbuttons,
	.dispute-modal-buttons {
		flex-direction: column !important;
	}

	.confirmcompletionmodalbuttons button,
	.dispute-modal-buttons button {
		width: 100% !important;
	}
}