/* Вибір міста України — оформлення під шаблон oct_deals (підключається модифікатором city_ukraine_oct_deals). */

/* Кольори беруться зі змінних теми, тож світла/темна тема та кольори з адмінки oct_deals підхоплюються автоматично */
html.light-theme,
html.dark-theme {
	--cu-accent: var(--ds-primary-color);
	--cu-accent-text: #fff;
	--cu-text: var(--ds-dark-text-color);
	--cu-muted: var(--ds-light-text-color);
	--cu-bg: var(--ds-white-color);
	--cu-hover: var(--ds-light-bg-color);
	--cu-border: var(--ds-form-control-focus-color);
	--cu-radius: 10px;
}

/* Кнопка міста в шапці */
.cu-ds-city {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.ds-header-right .cu-ds-city + .ds-dropdown-box {
	margin-left: 0 !important;
}

.cu-ds-city .cu-trigger {
	gap: 0.25rem;
	color: var(--ds-dark-text-color);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color var(--ds-main-transition);
}

.cu-ds-city .cu-trigger:hover,
.cu-ds-city .cu-trigger:focus {
	color: var(--ds-primary-color);
	text-decoration: none;
}

.cu-ds-city .cu-icon {
	width: 20px;
	height: 20px;
	color: var(--ds-primary-dark-color);
	transition: color var(--ds-main-transition);
}

.cu-ds-city .cu-trigger:hover .cu-icon,
.cu-ds-city .cu-trigger:focus .cu-icon {
	color: var(--ds-primary-color);
}

.cu-ds-city .cu-current-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Як телефон у шапці: на мобільних лише іконка */
@media (max-width: 767.98px) {
	.cu-ds-city .cu-current-name {
		display: none;
	}
}

/* Шари: шапка теми має z-index 12300, меню та пошук — до 14024 */
.cu-modal {
	z-index: 14100;
	font-family: var(--ds-main-font);
}

.cu-confirm {
	z-index: 12310;
	font-family: var(--ds-main-font);
	box-shadow: var(--ds-medium-shadow);
	border: var(--ds-main-border);
}

.cu-backdrop {
	background: var(--ds-popup-backdrop-bg);
}

.cu-dialog {
	box-shadow: var(--ds-dark-shadow);
}

.cu-title {
	font-size: 20px;
	font-weight: 700;
}

.cu-close,
.cu-confirm-close {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ds-popup-close-btn-bg);
	color: var(--ds-primary-color);
	transition: opacity var(--ds-main-transition);
}

.cu-close {
	top: 16px;
	right: 16px;
	font-size: 24px;
	line-height: 1;
}

.cu-confirm-close {
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	font-size: 18px;
	line-height: 1;
}

.cu-close:hover,
.cu-confirm-close:hover {
	color: var(--ds-primary-color);
	opacity: 0.8;
}

.cu-is-required .cu-close,
.cu-confirm.cu-is-required .cu-confirm-close {
	display: none;
}

.cu-input {
	border-radius: 7px;
}

.cu-input:focus {
	border-color: var(--ds-primary-color);
	box-shadow: none;
}

.cu-btn {
	border-radius: 7px;
	font-weight: 500;
	transition: background-color var(--ds-main-transition), color var(--ds-main-transition), border-color var(--ds-main-transition);
}

.cu-btn:not(.cu-btn-primary) {
	border-color: var(--ds-primary-color);
	background: transparent;
	color: var(--ds-primary-color);
}

.cu-btn:not(.cu-btn-primary):hover {
	background: var(--ds-primary-color);
	color: #fff;
}

.cu-result,
.cu-city {
	border-radius: 7px;
}

/* Мобільна нижня панель теми (до 992px, висота 69px) не має закривати підказку та вікно */
@media (max-width: 991.98px) {
	.cu-confirm:not(.cu-confirm-anchored) {
		top: auto;
		bottom: 81px;
	}
}

@media (max-width: 575px) {
	.cu-dialog {
		max-height: calc(100vh - 16px);
	}
}