/* ==========================================================================
   Страница продавца «как приложение» (29.09.2026) — pages/profile.blade.php
   (/profile/{id}, корень .profile-page). Телефон — seller_screen.dart
   приложения: шапка «Профиль продавца», лист light, карточка продавца,
   «О продавце», отзывы (reviews-v2.css), «Объявления продавца» с
   сортировкой листом снизу; карточка объявления — прежняя (как ItemCardTile
   приложения). ПК — прежняя раскладка (колонка слева) в новом стиле.
   Разметка/скрипты (get-phone.js, select.js, сортировка ?sort=, формы
   отзывов) — прежние. Спецификация — mobile/docs/plans/2026-09-30-seller-redesign.md.
   ========================================================================== */

.profile-page {
	--page-gutter: 15px; /* боковой отступ .container — для page-mhead */
}

/* надпись «Позвонить» и «продавца» в заголовке — только телефон */
.pr-call-m,
.pr-m-only,
.pr-date-m {
	display: none;
}

/* чип категории магазина (seller_screen.dart: 12/600 chipBlue на chipBlueBg) */
.profile-page .profile-category {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--chip-blue-bg);
	color: var(--chip-blue);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.profile-category-label {
	display: none;
}

/* «О продавце» */
.profile-about-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--black);
}

.profile-page .profile-about-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 12px;
	font-size: 13px;
}

.profile-about-label {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--label-gray);
}

.profile-about-value {
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--black);
}

.profile-page .profile-about .profile-instagram {
	gap: 8px;
	width: fit-content;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--black);
}

.profile-page .profile-about .profile-instagram svg {
	width: 20px;
	height: 20px;
}

.profile-page .profile-about .profile-description-on {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--black);
	white-space: pre-line; /* переносы строк описания — раньше склеивались */
}

/* кнопка телефона — callGreen */
.profile-page .item-phone-button {
	width: 100%;
	border-radius: 16px;
	background: var(--call-green);
	font-weight: 700;
}

.profile-page .item-phone-button:hover {
	background: var(--call-green);
	opacity: 0.9;
}

/* сортировка, сетка, пагинация, пусто */
.profile-page .pagination a {
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 12px;
	background: var(--white);
	font-size: 15px;
	font-weight: 600;
}

.profile-page .pagination .active a {
	background: var(--accent);
	color: var(--white);
}

.profile-page .pagination li:not(.active) a:hover {
	background: var(--card-lilac);
}

.profile-page .select-popup {
	top: calc(100% + 6px);
	padding: 6px 0;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgb(22 14 24 / 12%);
}

.profile-page .select-button {
	padding: 10px 16px;
	font-size: 14px;
}

.profile-page .select-button.selected {
	font-weight: 600;
}

.profile-page .profile-empty-items-alert {
	padding: 40px 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: rgb(22 14 24 / 40%); /* black 40 % */
}

/* --------------------------------------------------------------------------
   ОКНА страницы: отзыв (написать/изменить), «Телефон» — фон light,
   заголовок слева, крестик белый квадрат r14 (как на карточке товара)
   -------------------------------------------------------------------------- */
body:has(.profile-page) .popup .popup-body {
	background: var(--light);
}

body:has(.profile-page) .popup .popup-body-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

body:has(.profile-page) .popup .popup-title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

body:has(.profile-page) .popup .popup-close {
	position: static;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--white);
	color: rgb(22 14 24 / 30%); /* ≈ #B1ACB3 крестика sheet_close.svg */
}

body:has(.profile-page) .popup .popup-close svg {
	width: 16px;
	height: 16px;
}

body:has(.profile-page) .popup .popup-close:hover {
	transform: none;
	color: var(--black);
}

body:has(.profile-page) .popup .popup-form-button,
body:has(.profile-page) .popup .call-phone-number {
	width: 100%;
	height: 48px;
	border-radius: 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
}

body:has(.profile-page) .popup .review-textarea {
	min-height: 120px;
	padding: 12px 15px;
	border: 1px solid var(--light-gray);
	border-radius: 14px;
	background: var(--white);
	font-size: 15px;
}

body:has(.profile-page) .popup-get-phone .get-phone-alert {
	font-size: 14px;
	line-height: 1.4;
	color: var(--gray);
}

body:has(.profile-page) .popup-get-phone .call-phone-number {
	background: var(--call-green);
}

body:has(.profile-page) .popup-get-phone .call-phone-number:hover {
	background: var(--call-green);
	opacity: 0.9;
}

/* ==========================================================================
   ПК (≥769) — колонка продавца слева, отзывы и объявления справа
   ========================================================================== */
@media (min-width: 769px) {
	body:has(.profile-page) {
		background: var(--light);
	}

	.profile-page {
		padding: 24px 0 60px;
	}

	.profile-page .profile-grid {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 24px;
	}

	/* колонка «липкая» (top 144 — redesign.css), без своей подложки:
	   внутри две белые карточки */
	.profile-page .profile-sidebar {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.profile-page .profile-card {
		padding: 24px;
		border-radius: 24px;
		background: var(--white);
	}

	.profile-page .profile-header {
		align-items: flex-start;
		gap: 14px;
	}

	.profile-page .profile-avatar {
		width: 72px;
		height: 72px;
	}

	.profile-page .profile-name {
		margin-bottom: 6px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.25;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		word-break: break-word;
	}

	.profile-page .profile-date-info {
		margin-top: 8px;
	}

	.profile-page .profile-date-info p {
		font-size: 13px;
		color: var(--gray);
	}

	.profile-page .seller-rating-row {
		margin-top: 8px;
	}

	.profile-page .profile-category {
		margin-top: 16px;
	}

	.profile-page .profile-items-count {
		margin: 16px 0 12px;
		padding: 0 0 12px;
		border-bottom-color: var(--card-lilac);
		font-size: 14px;
	}

	.profile-page .profile-check-item {
		background-color: var(--light);
		border-radius: 12px;
	}

	.profile-page .profile-phone {
		margin-top: 16px;
		padding-top: 0;
		border-top: 0;
	}

	.profile-page .item-phone-button {
		height: 52px;
		font-size: 16px;
		font-weight: 600;
	}

	/* --- объявления --- */
	.profile-page .profile-content-top {
		margin: 8px 0 20px;
	}

	.profile-page .profile-items-title {
		font-size: 28px;
		font-weight: 700;
	}

	.profile-page .sort {
		width: 220px;
	}

	.profile-page .sort .filter-input {
		height: 44px;
		border: 0;
		border-radius: 12px;
		background: var(--white);
		font-size: 15px;
		font-weight: 500;
	}

	/* карточка — как на новой главной и в лентах (home-v2 / listing-v2) */
	.profile-page .posts-grid {
		gap: 28px 20px;
	}

	.profile-page .post-item {
		display: flex;
		flex-direction: column;
	}

	.profile-page .post-item-image {
		border-radius: 20px;
	}

	.profile-page .post-item-title {
		order: 1;
		margin-top: 12px;
		font-size: 16px;
		font-weight: 500;
	}

	.profile-page .post-item-location {
		order: 2;
		margin-top: 2px;
	}

	.profile-page .post-item-pair {
		order: 3;
		margin-top: 6px;
	}

	.profile-page .post-item-price {
		font-size: 22px;
		font-weight: 700;
	}

	.profile-page .profile-empty-items-alert {
		border-radius: 24px;
		background: var(--white);
	}

	/* --- окна: по центру, r28 --- */
	body:has(.profile-page) .popup .popup-body {
		max-width: 520px;
		padding: 24px;
		border-radius: 28px;
	}

	body:has(.profile-page) .popup .popup-body-header {
		margin-bottom: 18px;
	}
}

@media (min-width: 769px) and (max-width: 1200px) {
	.profile-page .post-item-price {
		font-size: 18px; /* узкие карточки — «Цена не указана» в одну строку */
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	.profile-page .profile-grid {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 20px;
	}

	.profile-page .profile-card {
		padding: 20px;
	}
}

/* ==========================================================================
   ТЕЛЕФОН (≤768) — seller_screen.dart
   ========================================================================== */
@media (max-width: 768px) {
	body:has(.profile-page),
	main.content:has(.profile-page) {
		background: var(--light);
	}

	/* экран продавца в приложении — вне таббара: нижнего меню нет */
	body:has(.profile-page) .mobile-menu {
		display: none;
	}

	.profile-page {
		padding: 0 0 40px;
	}

	/* шапка: «Профиль продавца» 18/600, под рядом 16 + скругление листа 24 */
	.profile-page .page-mhead {
		padding-bottom: 40px;
	}

	.profile-page .page-mhead__title {
		font-size: 18px;
		line-height: 20px;
	}

	.profile-page .page-msheet {
		padding-top: 24px;
	}

	.profile-page .profile-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.profile-page .profile-sidebar {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		z-index: auto;
	}

	/* --- карточка продавца: белая r20, padding 16 --- */
	.profile-page .profile-card {
		padding: 16px;
		border-radius: 20px;
		background: var(--white);
	}

	.profile-page .profile-header {
		gap: 12px;
	}

	/* аватар 64; заглушка — light, силуэт black 30 % */
	.profile-page .profile-avatar {
		width: 64px;
		height: 64px;
		background: var(--light);
	}

	.profile-page .profile-avatar svg {
		width: 28px;
		height: 28px;
		color: rgb(22 14 24 / 30%);
	}

	.profile-page .profile-name {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		word-break: break-word;
	}

	.profile-page .profile-role,
	.profile-page .profile-items-count,
	.profile-page .profile-check-item,
	.pr-date-pc {
		display: none;
	}

	.pr-date-m {
		display: inline;
	}

	.profile-page .profile-date-info {
		margin-top: 4px;
	}

	.profile-page .profile-date-info p {
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		color: rgb(22 14 24 / 40%);
	}

	.profile-page .seller-rating-row {
		gap: 5px;
		margin-top: 6px;
	}

	.profile-page .rating-stars--sm {
		letter-spacing: 0;
	}

	.profile-page .profile-header .rating-stars-bg {
		color: rgb(22 14 24 / 20%);
	}

	.profile-page .seller-rating-count {
		color: rgb(22 14 24 / 50%);
	}

	.profile-page .profile-category {
		margin-top: 12px;
	}

	/* «Позвонить» — 48 r16 callGreen, 14/700 */
	.profile-page .profile-phone {
		margin-top: 16px;
		padding-top: 0;
		border-top: 0;
	}

	.profile-page .item-phone-button {
		height: 48px;
		font-size: 14px;
		line-height: 16px;
	}

	.profile-page .item-phone-button .phone-text {
		display: none;
	}

	.profile-page .item-phone-button .pr-call-m {
		display: inline;
	}

	.profile-page .item-phone-button.active .pr-call-m {
		display: none;
	}

	/* --- «Объявления продавца» + сортировка --- */
	.pr-m-only {
		display: inline;
	}

	.profile-page .profile-content-top {
		align-items: center;
		gap: 12px;
		margin: 24px 0 16px;
	}

	/* в приложении 20/600 Inter; шрифт сайта шире — 18, чтобы «Объявления
	   продавца» встали в одну строку с сортировкой */
	.profile-page .profile-items-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
	}

	.profile-page .sort {
		flex: 0 0 auto;
		width: 124px; /* «Популярные» + значок, как пилюля приложения */
	}

	.profile-page .sort .filter-input {
		height: 40px;
		padding: 0 34px 0 14px;
		border: 0;
		border-radius: 14px;
		background: var(--white);
		color: var(--black);
		font-size: 12px;
		font-weight: 600;
	}

	/* значок unfold_more 16, black 40 % */
	.profile-page .sort .select::before {
		right: 12px;
		width: 16px;
		height: 16px;
		background: rgb(22 14 24 / 40%);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	}

	/* список сортировки — лист снизу; затемнение на .sort (вне .select):
	   тап по нему закрывает список штатным кодом select.js */
	.profile-page .sort:has(.select-popup.active)::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 590;
		background: rgb(22 14 24 / 50%);
	}

	.profile-page .sort .select-popup {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 600;
		width: auto;
		max-height: 80dvh;
		padding: 20px 20px max(20px, env(safe-area-inset-bottom));
		border-radius: 32px 32px 0 0;
		background: var(--light);
		box-shadow: none;
		transform: translateY(101%);
		transform-origin: center bottom;
	}

	.profile-page .sort .select-popup.active {
		transform: translateY(0);
	}

	.profile-page .sort .select-popup::before {
		content: "Сортировка";
		margin-bottom: 16px;
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		color: var(--black);
	}

	.profile-page .sort .select-button {
		display: flex;
		align-items: center;
		height: 46px;
		margin-bottom: 10px;
		padding: 0 14px;
		border-radius: 16px;
		background: var(--white);
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	.profile-page .sort .select-button.selected {
		background: var(--white);
	}

	.profile-page .sort .select-button.selected::after {
		right: 14px;
		width: 18px;
		height: 18px;
		background: var(--brand-purple);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4 9 3.5 3.5L14 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4 9 3.5 3.5L14 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	}

	/* сетка 2 (items_grid_sliver.dart: 10 / 30), карточка прежняя */
	.profile-page .posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 10px;
	}

	.profile-page .post-item-image {
		border-radius: 20px;
	}

	.profile-page .pagination a {
		min-width: 40px;
		height: 40px;
	}

	/* --- окна — лист снизу (r32, фон light) --- */
	body:has(.profile-page) .popup {
		align-items: end;
		padding: 0;
		overflow: hidden;
	}

	body:has(.profile-page) .popup .popup-body {
		display: flex;
		flex-direction: column;
		max-width: 100%;
		max-height: calc(100vh - 50px);
		max-height: calc(100dvh - 50px);
		padding: 0;
		border-radius: 32px 32px 0 0;
		transform-origin: center bottom;
		transform: translateY(101%);
	}

	body:has(.profile-page) .popup.active .popup-body {
		transform: translateY(0);
	}

	body:has(.profile-page) .popup .popup-body-header {
		flex-shrink: 0;
		margin: 0;
		padding: 14px 14px 8px 20px;
	}

	body:has(.profile-page) .popup .popup-body-content {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		max-height: none;
		overflow-y: auto;
		padding: 10px 20px max(20px, env(safe-area-inset-bottom));
	}
}