/* ============================================================
   VOSTOK LOGISTICS — Design System v2.0
   ============================================================ */

/* --- 1. Design tokens --- */

:root {
	/* Brand */
	--v-brand: #0f5ba8;
	--v-brand-dark: #003f7f;
	--v-brand-light: #1a6abc;
	--v-brand-pale: #e8f0fa;

	/* Surfaces */
	--v-bg: #f2f5f9;
	--v-bg-hero: linear-gradient(135deg, #0b3d6e 0%, #0f5ba8 50%, #1a6abc 100%);
	--v-card: #ffffff;
	--v-card-hover: #fafcff;

	/* Borders */
	--v-line: #d5dde8;
	--v-line-strong: #8db0d6;

	/* Text */
	--v-text: #1c2733;
	--v-text-secondary: #556678;
	--v-text-muted: #8b99a8;
	--v-text-on-brand: #ffffff;

	/* Accents */
	--v-success: #0fa958;
	--v-success-bg: #eafaf1;
	--v-warning: #f0a31a;
	--v-warning-bg: #fff9ee;
	--v-error: #d93025;
	--v-error-bg: #fef0ef;

	/* Shadows */
	--v-shadow-sm: 0 1px 3px rgba(15, 42, 70, .06);
	--v-shadow-md: 0 4px 12px rgba(15, 42, 70, .08);
	--v-shadow-lg: 0 8px 24px rgba(15, 42, 70, .12);
	--v-shadow-xl: 0 12px 40px rgba(15, 42, 70, .16);

	/* Radius */
	--v-radius-sm: 4px;
	--v-radius: 8px;
	--v-radius-lg: 12px;
	--v-radius-xl: 16px;
	--v-radius-full: 9999px;

	/* Transitions */
	--v-transition: .2s cubic-bezier(.4, 0, .2, 1);
	--v-transition-slow: .35s cubic-bezier(.4, 0, .2, 1);

	/* Spacing */
	--v-space-xs: 4px;
	--v-space-sm: 8px;
	--v-space-md: 16px;
	--v-space-lg: 24px;
	--v-space-xl: 32px;
	--v-space-2xl: 48px;
	--v-space-3xl: 64px;

	/* Typography */
	--v-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--v-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* Layout */
	--v-max-width: 1200px;
	--v-header-h: 60px;
}

/* --- 2. Font import --- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- 3. Global resets --- */

body {
	font-family: var(--v-font) !important;
	color: var(--v-text);
	background: var(--v-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
	box-sizing: border-box;
}

/* ============================================================
   4. HEADER
   ============================================================ */

.vostok-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	height: var(--v-header-h);
	padding: 0 var(--v-space-lg);
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--v-line);
	box-shadow: var(--v-shadow-sm);
	transition: box-shadow var(--v-transition);
}

.vostok-header.scrolled {
	box-shadow: var(--v-shadow-md);
}

.vostok-header__inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--v-max-width);
	margin: 0 auto;
	gap: var(--v-space-lg);
}

/* Logo */
.vostok-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}

.vostok-logo__icon {
	width: 36px;
	height: 36px;
	background: var(--v-bg-hero);
	border-radius: var(--v-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -1px;
}

.vostok-logo__text {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .5px;
	color: var(--v-brand);
}

.vostok-logo__sub {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--v-text-muted);
	margin-top: -2px;
}

/* Nav */
.vostok-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
}

.vostok-nav a {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--v-text-secondary);
	text-decoration: none;
	border-radius: var(--v-radius);
	transition: all var(--v-transition);
	white-space: nowrap;
}

.vostok-nav a:hover {
	color: var(--v-brand);
	background: var(--v-brand-pale);
}

.vostok-nav a.active {
	color: var(--v-brand);
	background: var(--v-brand-pale);
	font-weight: 600;
}

/* Header actions */
.vostok-header__actions {
	display: flex;
	align-items: center;
	gap: var(--v-space-sm);
	flex-shrink: 0;
}

/* --- Buttons (global) --- */

.vostok-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-family: var(--v-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	border: none;
	border-radius: var(--v-radius);
	cursor: pointer;
	transition: all var(--v-transition);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
}

.vostok-btn--primary {
	background: var(--v-bg-hero);
	color: var(--v-text-on-brand);
	box-shadow: 0 2px 8px rgba(15, 91, 168, .3);
}

.vostok-btn--primary:hover {
	box-shadow: 0 4px 16px rgba(15, 91, 168, .4);
	transform: translateY(-1px);
}

.vostok-btn--outline {
	background: transparent;
	color: var(--v-brand);
	border: 2px solid var(--v-brand);
}

.vostok-btn--outline:hover {
	background: var(--v-brand);
	color: #fff;
}

.vostok-btn--ghost {
	background: transparent;
	color: var(--v-text-secondary);
}

.vostok-btn--ghost:hover {
	background: var(--v-brand-pale);
	color: var(--v-brand);
}

.vostok-btn--sm {
	padding: 7px 14px;
	font-size: 13px;
}

.vostok-btn--lg {
	padding: 14px 28px;
	font-size: 16px;
}

/* Hamburger */
.vostok-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 6px;
	background: none;
	border: none;
	cursor: pointer;
}

.vostok-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--v-text);
	border-radius: 2px;
	transition: all var(--v-transition);
}

.vostok-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.vostok-hamburger.open span:nth-child(2) { opacity: 0; }
.vostok-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   5. HERO SECTION
   ============================================================ */

.vostok-hero {
	position: relative;
	padding: var(--v-space-3xl) var(--v-space-lg) var(--v-space-2xl);
	background: var(--v-bg-hero);
	overflow: hidden;
}

.vostok-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	pointer-events: none;
}

.vostok-hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .03);
	pointer-events: none;
}

.vostok-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--v-max-width);
	margin: 0 auto;
	text-align: center;
}

.vostok-hero__title {
	margin: 0 0 var(--v-space-md);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: #ffffff;
	line-height: 1.15;
}

.vostok-hero__subtitle {
	margin: 0 0 var(--v-space-xl);
	font-size: 18px;
	font-weight: 400;
	color: rgba(255, 255, 255, .75);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

/* Stats row */
.vostok-stats {
	display: flex;
	justify-content: center;
	gap: var(--v-space-xl);
	margin-bottom: var(--v-space-xl);
	flex-wrap: wrap;
}

.vostok-stat {
	text-align: center;
}

.vostok-stat__value {
	display: block;
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -.5px;
	line-height: 1;
}

.vostok-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Quick search form in hero */
.vostok-search {
	max-width: 780px;
	margin: 0 auto;
	padding: var(--v-space-lg);
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--v-radius-lg);
}

.vostok-search__row {
	display: flex;
	gap: var(--v-space-sm);
	flex-wrap: wrap;
}

.vostok-search__field {
	flex: 1;
	min-width: 180px;
}

.vostok-search__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
	text-transform: uppercase;
	letter-spacing: .5px;
}

.vostok-search__field input,
.vostok-search__field select {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--v-font);
	font-size: 14px;
	color: var(--v-text);
	background: #ffffff;
	border: 2px solid transparent;
	border-radius: var(--v-radius);
	outline: none;
	transition: border-color var(--v-transition), box-shadow var(--v-transition);
}

.vostok-search__field input:focus,
.vostok-search__field select:focus {
	border-color: var(--v-brand-light);
	box-shadow: 0 0 0 3px rgba(26, 106, 188, .15);
}

.vostok-search__field input::placeholder {
	color: var(--v-text-muted);
}

.vostok-search__btn {
	align-self: flex-end;
	padding: 12px 28px;
	font-family: var(--v-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--v-brand);
	background: #ffffff;
	border: none;
	border-radius: var(--v-radius);
	cursor: pointer;
	transition: all var(--v-transition);
	white-space: nowrap;
}

.vostok-search__btn:hover {
	background: #f0f6ff;
	transform: translateY(-1px);
	box-shadow: var(--v-shadow-md);
}

/* Arrow separator between cities */
.vostok-search__arrow {
	display: flex;
	align-items: flex-end;
	padding-bottom: 12px;
	font-size: 20px;
	color: rgba(255, 255, 255, .5);
	font-weight: 700;
}

/* ============================================================
   6. LISTING CATEGORIES (filter pills)
   ============================================================ */

.hp-listing-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--v-space-md);
	padding: var(--v-space-sm) var(--v-space-md);
	background: var(--v-card);
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
}

.hp-listing-categories a {
	padding: 9px 18px;
	background: var(--v-bg);
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-full);
	font-size: 13px;
	font-weight: 600;
	color: var(--v-text-secondary);
	text-decoration: none;
	transition: all var(--v-transition);
}

.hp-listing-categories a:hover {
	color: var(--v-brand);
	background: var(--v-brand-pale);
	border-color: var(--v-brand);
}

.hp-listing-categories a.current {
	color: #ffffff;
	background: var(--v-brand);
	border-color: var(--v-brand);
	box-shadow: 0 2px 8px rgba(15, 91, 168, .25);
}

/* ============================================================
   7. LISTING CARDS
   ============================================================ */

body.post-type-archive-hp_listing,
body.tax-hp_listing_category,
body.single-hp_listing {
	background: var(--v-bg);
}

.hp-listings .hp-listing {
	position: relative;
	margin-bottom: var(--v-space-sm);
	padding: var(--v-space-md) var(--v-space-lg);
	background: var(--v-card);
	border: 1px solid var(--v-line);
	border-left: 4px solid var(--v-line-strong);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-sm);
	transition: all var(--v-transition);
}

.hp-listings .hp-listing:hover {
	border-left-color: var(--v-brand);
	box-shadow: var(--v-shadow-lg);
	transform: translateY(-2px);
}

.hp-listings .hp-listing__title {
	margin: 0 0 var(--v-space-sm);
	line-height: 1.25;
}

.hp-listings .hp-listing__title a {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1px;
	color: var(--v-brand);
	text-decoration: none;
	transition: color var(--v-transition);
}

.hp-listings .hp-listing__title a:hover {
	color: var(--v-brand-dark);
}

.hp-listings .hp-listing__attributes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--v-text);
}

.hp-listings .hp-listing__attribute {
	padding: 8px 10px;
	border: 1px solid #e8eef5;
	border-radius: var(--v-radius-sm);
	background: #f8fafd;
	transition: background var(--v-transition);
}

.hp-listings .hp-listing:hover .hp-listing__attribute {
	background: #f2f7fd;
}

.hp-listings .hp-listing__attribute-label {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--v-text-muted);
	text-transform: uppercase;
}

.hp-listings .hp-listing__attribute-value {
	font-weight: 500;
	color: var(--v-text);
}

/* Price highlight */
.hp-listings .hp-listing__attribute--price_rub {
	background: linear-gradient(135deg, #fff9ee 0%, #fff4df 100%);
	border-color: #f0d49f;
}

.hp-listings .hp-listing__attribute--price_rub .hp-listing__attribute-value {
	font-size: 15px;
	font-weight: 700;
	color: #9b5d00;
}

/* Route highlight (origin/destination) */
.hp-listings .hp-listing__attribute--origin_city,
.hp-listings .hp-listing__attribute--destination_city {
	background: linear-gradient(135deg, #eef5fd 0%, #e4eefb 100%);
	border-color: #c0d5ed;
}

.hp-listings .hp-listing__attribute--origin_city .hp-listing__attribute-value,
.hp-listings .hp-listing__attribute--destination_city .hp-listing__attribute-value {
	font-weight: 600;
	color: var(--v-brand);
}

/* ============================================================
   8. CONTACT BLOCK
   ============================================================ */

.vostok-contact-block {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: var(--v-space-lg) 0;
	padding: var(--v-space-lg);
	background: linear-gradient(135deg, #f7fbff 0%, #edf4fd 100%);
	border: 1px solid #c0d5ed;
	border-left: 5px solid var(--v-brand);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-md);
}

.vostok-pay-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid var(--v-brand);
	border-radius: var(--v-radius);
	background: #ffffff;
	color: var(--v-brand);
	font-family: var(--v-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--v-transition);
}

.vostok-pay-btn:hover,
.vostok-pay-btn:focus {
	background: var(--v-brand);
	border-color: var(--v-brand-dark);
	color: #ffffff;
	outline: none;
	box-shadow: 0 4px 16px rgba(15, 91, 168, .25);
	transform: translateY(-1px);
}

.vostok-pay-btn:disabled {
	opacity: .55;
	cursor: wait;
	transform: none;
	box-shadow: none;
}

.vostok-pay-btn--guest {
	border-color: var(--v-line-strong);
	color: var(--v-brand-light);
	background: #ffffff;
}

.vostok-pay-btn--guest:hover {
	background: var(--v-brand-light);
	border-color: var(--v-brand);
	color: #ffffff;
}

.vostok-contact-hint {
	font-size: 13px;
	font-weight: 500;
	color: var(--v-text-muted);
	line-height: 1.5;
}

.vostok-contact-revealed {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid #d7e4f6;
	border-radius: var(--v-radius);
}

.vostok-contact-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--v-text-muted);
	text-transform: uppercase;
}

.vostok-contact-phone {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--v-brand);
	text-decoration: none;
	transition: color var(--v-transition);
}

.vostok-contact-phone:hover {
	color: var(--v-brand-dark);
}

/* Status messages */
.vostok-pay-status {
	font-size: 13px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: var(--v-radius);
}

.vostok-pay-status--error {
	color: var(--v-error);
	background: var(--v-error-bg);
	border: 1px solid #f3c8c5;
}

.vostok-pay-status--info {
	color: #1d4e7e;
	background: #eef5fd;
	border: 1px solid #c0d5ed;
}

.vostok-chat-access-hint {
	max-width: 380px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--v-text-secondary);
	background: #f6f8fc;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.vostok-footer {
	margin-top: var(--v-space-3xl);
	padding: var(--v-space-2xl) var(--v-space-lg) var(--v-space-lg);
	background: #0d1b2e;
	color: rgba(255, 255, 255, .6);
}

.vostok-footer__inner {
	max-width: var(--v-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--v-space-xl);
}

.vostok-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-sm);
}

.vostok-footer__logo {
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: .5px;
}

.vostok-footer__desc {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .45);
}

.vostok-footer__col h4 {
	margin: 0 0 var(--v-space-md);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}

.vostok-footer__col a {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
	transition: color var(--v-transition);
}

.vostok-footer__col a:hover {
	color: #ffffff;
}

.vostok-footer__bottom {
	max-width: var(--v-max-width);
	margin: var(--v-space-xl) auto 0;
	padding-top: var(--v-space-lg);
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: rgba(255, 255, 255, .35);
}

/* ============================================================
   10. MOBILE BOTTOM NAV
   ============================================================ */

.vostok-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--v-line);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
	padding: 6px 0;
	padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.vostok-bottom-nav__items {
	display: flex;
	justify-content: space-around;
	align-items: center;
	max-width: 500px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.vostok-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 12px;
	text-decoration: none;
	color: var(--v-text-muted);
	font-size: 11px;
	font-weight: 500;
	transition: color var(--v-transition);
}

.vostok-bottom-nav__item.active {
	color: var(--v-brand);
}

.vostok-bottom-nav__icon {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vostok-bottom-nav__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   11. BADGES & TAGS
   ============================================================ */

.vostok-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	border-radius: var(--v-radius-full);
	text-transform: uppercase;
}

.vostok-badge--new {
	background: var(--v-success-bg);
	color: var(--v-success);
	border: 1px solid #b8e8cc;
}

.vostok-badge--hot {
	background: #fff0e6;
	color: #e06010;
	border: 1px solid #fbd0b0;
}

.vostok-badge--verified {
	background: var(--v-brand-pale);
	color: var(--v-brand);
	border: 1px solid #bbd0ea;
}

.vostok-verified-badge-wrap {
	margin: 0 0 10px;
	line-height: 1;
}

/* ============================================================
   12. FEATURE CARDS (homepage services grid)
   ============================================================ */

.vostok-features {
	max-width: var(--v-max-width);
	margin: var(--v-space-2xl) auto;
	padding: 0 var(--v-space-lg);
}

.vostok-features__title {
	text-align: center;
	font-size: 28px;
	font-weight: 800;
	color: var(--v-text);
	margin: 0 0 var(--v-space-sm);
}

.vostok-features__subtitle {
	text-align: center;
	font-size: 16px;
	color: var(--v-text-muted);
	margin: 0 0 var(--v-space-xl);
}

.vostok-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--v-space-lg);
}

.vostok-feature-card {
	padding: var(--v-space-lg);
	background: var(--v-card);
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
	transition: all var(--v-transition-slow);
	text-decoration: none;
	color: var(--v-text);
}

.vostok-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--v-shadow-xl);
	border-color: var(--v-brand);
}

.vostok-feature-card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--v-space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--v-brand-pale);
	border-radius: var(--v-radius);
	color: var(--v-brand);
	font-size: 22px;
}

.vostok-feature-card__title {
	margin: 0 0 var(--v-space-sm);
	font-size: 17px;
	font-weight: 700;
	color: var(--v-text);
}

.vostok-feature-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--v-text-secondary);
}

/* ============================================================
   13. FORMS (global)
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
	font-family: var(--v-font);
	font-size: 14px;
	padding: 10px 14px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
	background: #fff;
	color: var(--v-text);
	outline: none;
	transition: border-color var(--v-transition), box-shadow var(--v-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--v-brand);
	box-shadow: 0 0 0 3px rgba(15, 91, 168, .1);
}

::placeholder {
	color: var(--v-text-muted);
}

/* ============================================================
   14. ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideInLeft {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes countUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.vostok-animate-in {
	animation: fadeInUp .5s ease-out both;
}

.vostok-animate-in:nth-child(2) { animation-delay: .1s; }
.vostok-animate-in:nth-child(3) { animation-delay: .2s; }
.vostok-animate-in:nth-child(4) { animation-delay: .3s; }
.vostok-animate-in:nth-child(5) { animation-delay: .4s; }

.vostok-hero__title { animation: fadeInUp .6s ease-out both; }
.vostok-hero__subtitle { animation: fadeInUp .6s ease-out .15s both; }
.vostok-stats { animation: fadeInUp .6s ease-out .3s both; }
.vostok-search { animation: fadeInUp .6s ease-out .45s both; }

/* ============================================================
   15. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--v-bg); }
::-webkit-scrollbar-thumb { background: #b8c5d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #95a5b8; }

/* ============================================================
   16. UTILITY CLASSES
   ============================================================ */

.vostok-container {
	max-width: var(--v-max-width);
	margin: 0 auto;
	padding: 0 var(--v-space-lg);
}

.vostok-section {
	padding: var(--v-space-2xl) 0;
}

.vostok-text-center { text-align: center; }
.vostok-text-muted { color: var(--v-text-muted); }
.vostok-mt-sm { margin-top: var(--v-space-sm); }
.vostok-mt-md { margin-top: var(--v-space-md); }
.vostok-mt-lg { margin-top: var(--v-space-lg); }
.vostok-mb-sm { margin-bottom: var(--v-space-sm); }
.vostok-mb-md { margin-bottom: var(--v-space-md); }
.vostok-mb-lg { margin-bottom: var(--v-space-lg); }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.vostok-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vostok-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--v-space-lg);
	}
}

@media (max-width: 768px) {
	/* Header */
	.vostok-nav { display: none; }
	.vostok-hamburger { display: flex; }

	.vostok-nav.open {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: var(--v-header-h);
		left: 0;
		right: 0;
		background: var(--v-card);
		border-bottom: 1px solid var(--v-line);
		box-shadow: var(--v-shadow-lg);
		padding: var(--v-space-sm);
		animation: fadeIn .2s ease-out;
	}

	.vostok-nav.open a {
		padding: 12px 16px;
		border-radius: var(--v-radius);
	}

	/* Hero */
	.vostok-hero {
		padding: var(--v-space-2xl) var(--v-space-md) var(--v-space-xl);
	}

	.vostok-hero__title {
		font-size: 28px;
	}

	.vostok-hero__subtitle {
		font-size: 15px;
	}

	.vostok-stat__value {
		font-size: 24px;
	}

	.vostok-search__row {
		flex-direction: column;
	}

	.vostok-search__arrow {
		display: none;
	}

	.vostok-search__btn {
		width: 100%;
	}

	/* Bottom nav */
	.vostok-bottom-nav {
		display: block;
	}

	body {
		padding-bottom: 70px;
	}

	/* Features */
	.vostok-features__grid {
		grid-template-columns: 1fr;
		gap: var(--v-space-md);
	}

	/* Footer */
	.vostok-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--v-space-lg);
	}

	.vostok-footer__bottom {
		flex-direction: column;
		gap: var(--v-space-sm);
		text-align: center;
	}
}

@media (max-width: 640px) {
	.hp-listings .hp-listing {
		padding: 12px 14px;
	}

	.hp-listings .hp-listing__title a {
		font-size: 15px;
	}

	.hp-listings .hp-listing__attributes {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.vostok-contact-block {
		padding: 14px;
		flex-direction: column;
		align-items: stretch;
	}

	.vostok-pay-btn {
		width: 100%;
	}

	.vostok-contact-revealed {
		flex-direction: column;
		align-items: flex-start;
	}

	.vostok-contact-phone {
		font-size: 20px;
	}

	.vostok-stats {
		gap: var(--v-space-md);
	}
}

@media (max-width: 920px) {
	.hp-listings .hp-listing__attributes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
   18. WORDPRESS OVERRIDES
   ============================================================ */

/* Clean up WP admin bar spacing */
body.admin-bar .vostok-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .vostok-header {
		top: 46px;
	}
}

/* HivePress form overrides */
.hp-form__field input,
.hp-form__field select,
.hp-form__field textarea {
	font-family: var(--v-font);
	border-radius: var(--v-radius);
}

.hp-form__button {
	font-family: var(--v-font) !important;
	border-radius: var(--v-radius) !important;
	font-weight: 600 !important;
	transition: all var(--v-transition) !important;
}

/* HivePress listing page overrides */
.hp-listing__title {
	font-family: var(--v-font);
}

/* HivePress messages */
.hp-message {
	border-radius: var(--v-radius);
	border-color: var(--v-line);
}

/* Clean up WP default styles */
.entry-content,
.page-content,
.post-content {
	font-family: var(--v-font);
	line-height: 1.6;
}

/* ============================================================
   19. AUTH + HIVEPRESS ACCOUNT/FORMS
   ============================================================ */

/* WordPress wp-login.php */
body.login {
	min-height: 100vh;
	background: radial-gradient(circle at 12% 18%, rgba(26, 106, 188, .26) 0, rgba(26, 106, 188, 0) 38%),
		linear-gradient(145deg, #f2f6fb 0%, #e7eff8 48%, #dde9f7 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
}

body.login #login {
	width: min(100%, 420px);
	padding: 30px 28px;
	margin: 0;
	background: rgba(255, 255, 255, .95);
	border: 1px solid #cfdded;
	border-radius: var(--v-radius-xl);
	box-shadow: var(--v-shadow-xl);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: fadeInUp .4s ease-out both;
}

body.login #login h1 {
	margin-bottom: 20px;
}

body.login #login h1 a {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	background: none;
	text-indent: 0;
	font-family: var(--v-font);
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: .9px;
	text-transform: uppercase;
	text-align: center;
	color: var(--v-brand);
	text-decoration: none;
	position: relative;
}

body.login #login h1 a::after {
	content: 'Биржа грузоперевозок';
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--v-text-muted);
}

body.login .message,
body.login #login_error,
body.login .success {
	border: 1px solid #d0e0f2;
	border-left-width: 4px;
	border-left-color: var(--v-brand);
	border-radius: var(--v-radius);
	box-shadow: none;
	background: #f4f8fd;
	color: var(--v-text-secondary);
	font-size: 13px;
}

body.login form {
	margin-top: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	height: 46px;
	font-size: 15px;
	padding: 10px 14px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
	background: #fff;
	box-shadow: none;
	transition: border-color var(--v-transition), box-shadow var(--v-transition);
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--v-brand);
	box-shadow: 0 0 0 3px rgba(15, 91, 168, .15);
	outline: none;
}

body.login label {
	font-size: 13px;
	font-weight: 600;
	color: var(--v-text-secondary);
}

body.login .forgetmenot {
	margin: 8px 0 14px;
}

body.login .forgetmenot label {
	font-size: 12px;
	font-weight: 500;
	color: var(--v-text-muted);
}

body.login .button.wp-hide-pw {
	border: 0;
	background: transparent;
	color: var(--v-text-muted);
}

body.login .button.wp-hide-pw:hover {
	color: var(--v-brand);
}

body.login #wp-submit,
body.login .button.button-primary {
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--v-radius);
	background: var(--v-bg-hero);
	box-shadow: 0 6px 16px rgba(15, 91, 168, .24);
	font-family: var(--v-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	transition: transform var(--v-transition), box-shadow var(--v-transition);
}

body.login #wp-submit:hover,
body.login .button.button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px rgba(15, 91, 168, .28);
}

body.login #nav,
body.login #backtoblog {
	padding: 0;
	margin-top: 12px;
	text-align: center;
}

body.login #nav a,
body.login #backtoblog a {
	font-size: 13px;
	font-weight: 600;
	color: var(--v-brand);
	text-decoration: none;
	transition: color var(--v-transition);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--v-brand-dark);
	text-decoration: underline;
}

body.login .privacy-policy-page-link {
	margin: 10px 0 0;
	text-align: center;
}

body.login .privacy-policy-page-link a {
	font-size: 12px;
	color: var(--v-text-muted);
	text-decoration: none;
}

body.login .language-switcher {
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #cfdded;
	border-radius: var(--v-radius-lg);
	background: rgba(255, 255, 255, .84);
	box-shadow: var(--v-shadow-sm);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

body.login .language-switcher label {
	font-size: 12px;
	font-weight: 600;
	color: var(--v-text-muted);
}

body.login .language-switcher select {
	min-width: 174px;
	margin-right: 8px;
}

/* HivePress: submit listing + account pages */
body .hp-page,
body .hp-template {
	color: var(--v-text);
}

body .hp-form {
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
	padding: 22px;
}

body .hp-form__field {
	margin-bottom: 14px;
}

body .hp-form__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--v-text-secondary);
}

body .hp-form__field small,
body .hp-form__field-description {
	font-size: 12px;
	color: var(--v-text-muted);
}

body .hp-form .hp-field--error input,
body .hp-form .hp-field--error select,
body .hp-form .hp-field--error textarea,
body .hp-form .hp-form__field--error input,
body .hp-form .hp-form__field--error select,
body .hp-form .hp-form__field--error textarea {
	border-color: #e2675f;
	box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

body .hp-form .hp-form__messages,
body .hp-form .hp-form__message,
body .hp-form .hp-message {
	border-radius: var(--v-radius);
	font-size: 13px;
	border: 1px solid var(--v-line);
	background: #f6f9fd;
	color: var(--v-text-secondary);
}

body .hp-form button,
body .hp-form .button,
body .hp-form__actions .button,
body .hp-form__actions button,
body .hp-form input[type="submit"] {
	min-height: 42px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--v-radius);
	background: var(--v-bg-hero);
	color: #fff;
	font-weight: 700;
	letter-spacing: .2px;
	transition: transform var(--v-transition), box-shadow var(--v-transition);
	box-shadow: 0 4px 14px rgba(15, 91, 168, .2);
}

body .hp-form button:hover,
body .hp-form .button:hover,
body .hp-form__actions .button:hover,
body .hp-form__actions button:hover,
body .hp-form input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(15, 91, 168, .25);
}

body .hp-form .button.hp-button--secondary,
body .hp-form .button.alt,
body .hp-form .button:not(.hp-button--primary):not(.button-primary):not([type="submit"]) {
	background: #fff;
	color: var(--v-brand);
	border: 1px solid #bdd1e8;
	box-shadow: none;
}

body .hp-form .button.hp-button--secondary:hover,
body .hp-form .button.alt:hover,
body .hp-form .button:not(.hp-button--primary):not(.button-primary):not([type="submit"]):hover {
	background: var(--v-brand-pale);
	border-color: var(--v-brand);
	color: var(--v-brand-dark);
}

body .hp-form--listing-submit,
body .hp-form--listing-update,
body .hp-form--user-login,
body .hp-form--user-register,
body .hp-form--user-update {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px;
	border-top: 4px solid var(--v-brand);
	box-shadow: var(--v-shadow-lg);
}

body .hp-form--listing-submit .hp-form__header,
body .hp-form--listing-update .hp-form__header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #dbe6f2;
}

body .hp-form--listing-submit .hp-form__title,
body .hp-form--listing-update .hp-form__title,
body .hp-form--user-login .hp-form__title,
body .hp-form--user-register .hp-form__title,
body .hp-form--user-update .hp-form__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	color: var(--v-brand);
}

body .hp-page__content,
body .hp-page__main {
	animation: fadeIn .35s ease-out both;
}

body .hp-account,
body .hp-page--account .hp-page__content,
body[class*="account"] .hp-page__content {
	display: grid;
	grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

body .hp-account .hp-menu,
body .hp-page--account .hp-menu,
body[class*="account"] .hp-menu {
	list-style: none;
	margin: 0;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
	position: sticky;
	top: calc(var(--v-header-h) + 16px);
}

body .hp-account .hp-menu li,
body .hp-page--account .hp-menu li,
body[class*="account"] .hp-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body .hp-account .hp-menu a,
body .hp-page--account .hp-menu a,
body[class*="account"] .hp-menu a {
	display: block;
	padding: 10px 12px;
	margin: 2px 0;
	border-radius: var(--v-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--v-text-secondary);
	transition: all var(--v-transition);
}

body .hp-account .hp-menu a:hover,
body .hp-page--account .hp-menu a:hover,
body[class*="account"] .hp-menu a:hover {
	background: var(--v-brand-pale);
	color: var(--v-brand);
}

body .hp-account .hp-menu .current-menu-item > a,
body .hp-account .hp-menu .is-active > a,
body .hp-page--account .hp-menu .current-menu-item > a,
body .hp-page--account .hp-menu .is-active > a,
body[class*="account"] .hp-menu .current-menu-item > a,
body[class*="account"] .hp-menu .is-active > a {
	background: var(--v-bg-hero);
	color: #fff;
	box-shadow: 0 4px 12px rgba(15, 91, 168, .22);
}

body .hp-account .hp-listings .hp-listing,
body .hp-page--account .hp-listings .hp-listing,
body[class*="account"] .hp-listings .hp-listing {
	border-left-width: 3px;
	border-left-color: #b5cbe5;
	margin-bottom: 12px;
}

body .hp-account .hp-pagination,
body .hp-page--account .hp-pagination,
body[class*="account"] .hp-pagination {
	margin-top: 14px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
}

body .hp-page--account .hp-page__title,
body[class*="account"] .hp-page__title {
	font-size: 38px;
	margin-bottom: 18px;
}

.vostok-account-notice {
	margin-bottom: 18px;
	padding: 14px 16px;
	border-radius: var(--v-radius);
	border: 1px solid #cfe0f3;
	background: #f4f8fd;
	color: var(--v-text-secondary);
}

.vostok-account-notice--success {
	border-color: #b9e2c8;
	background: #effaf3;
	color: #1b6d3d;
}

.vostok-account-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
	gap: 18px;
	margin-bottom: 22px;
	padding: 22px 24px;
	background: linear-gradient(135deg, #0f5ba8 0%, #1e67b2 58%, #2f79c1 100%);
	border-radius: var(--v-radius-xl);
	box-shadow: var(--v-shadow-xl);
	color: #fff;
}

.vostok-account-hero__main {
	display: flex;
	align-items: center;
	gap: 18px;
}

.vostok-account-hero__avatar {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	background: rgba(255, 255, 255, .18);
	font-size: 28px;
	font-weight: 800;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	flex: 0 0 auto;
}

.vostok-account-hero__eyebrow,
.vostok-account-card__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .78;
	margin-bottom: 6px;
}

.vostok-account-hero__title {
	margin: 0 0 4px;
	font-size: 32px;
	line-height: 1.05;
	color: #fff;
}

.vostok-account-hero__subtitle {
	margin: 0;
	font-size: 15px;
	opacity: .85;
}

.vostok-account-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.vostok-account-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.vostok-account-pill--verified { background: rgba(15, 169, 88, .18); }
.vostok-account-pill--pending { background: rgba(240, 163, 26, .2); }
.vostok-account-pill--rejected { background: rgba(217, 48, 37, .2); }

.vostok-account-hero__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.vostok-account-stat {
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.vostok-account-stat__value {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.vostok-account-stat__label {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .72;
}

.vostok-account-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 22px;
}

.vostok-account-card {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-xl);
	box-shadow: var(--v-shadow-sm);
}

.vostok-account-card__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.vostok-account-card__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	color: var(--v-text);
}

.vostok-account-card__text {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--v-text-secondary);
}

.vostok-account-alert {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #f4f8fd;
	border: 1px solid #d9e6f4;
	font-size: 14px;
	line-height: 1.5;
	color: var(--v-text-secondary);
}

.vostok-account-alert--warning {
	background: #fff8eb;
	border-color: #f2d69e;
	color: #8b6200;
}

.vostok-documents-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.vostok-document-item {
	padding: 14px;
	border: 1px solid #dde7f3;
	border-radius: 16px;
	background: #f9fbfe;
}

.vostok-document-item label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--v-text-secondary);
}

.vostok-document-item input[type="file"] {
	width: 100%;
	padding: 10px;
	background: #fff;
}

.vostok-document-item__meta {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.vostok-documents-form__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.vostok-documents-form__hint,
.vostok-form-note,
.vostok-form-note__hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--v-text-muted);
}

.vostok-form-note {
	padding: 12px 14px;
	border-radius: 14px;
	background: #eef5fd;
	border: 1px solid #d9e6f4;
	margin-bottom: 8px;
}

.vostok-archive-layout {
	display: grid;
	grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}

.vostok-archive-sidebar {
	position: sticky;
	top: calc(var(--v-header-h) + 16px);
}

.vostok-range {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.vostok-archive-results__header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: end;
	margin-bottom: 16px;
}

.vostok-archive-results__title {
	margin: 0 0 6px;
	font-size: 34px;
	line-height: 1.1;
	color: var(--v-text);
}

.vostok-archive-results__desc,
.vostok-archive-results__count {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--v-text-secondary);
}

.vostok-archive-results__count {
	margin-bottom: 16px;
	font-weight: 600;
}

.vostok-archive-sort {
	min-width: 280px;
	padding: 16px;
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
}

.vostok-listing-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.vostok-listing-grid__item .hp-listing {
	height: 100%;
}

.vostok-archive-empty {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
	color: var(--v-text-secondary);
}

.vostok-archive-pagination {
	margin-top: 18px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-sm);
}

.vostok-archive-pagination .page-numbers {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.vostok-archive-pagination a,
.vostok-archive-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid #d7e3f0;
	text-decoration: none;
	color: var(--v-brand);
	font-weight: 700;
	background: #fff;
}

.vostok-archive-pagination .current {
	background: var(--v-bg-hero);
	color: #fff;
	border-color: transparent;
}

body .hp-form--user-update {
	max-width: 100%;
	padding: 26px;
	border-top-width: 5px;
	border-radius: var(--v-radius-xl);
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body .hp-form--user-update .hp-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}

body .hp-form--user-update .hp-form__field--textarea,
body .hp-form--user-update .hp-form__field--content,
body .hp-form--user-update .hp-form__field--file,
body .hp-form--user-update .hp-form__field--attachment,
body .hp-form--user-update .hp-form__field--email,
body .hp-form--user-update .hp-form__field--password {
	grid-column: span 2;
}

body .hp-form--user-update .hp-form__footer {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #dbe6f2;
}

body .hp-form--user-update .hp-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

body .hp-form--user-update .hp-form__action {
	margin: 0;
}

@media (max-width: 900px) {
	body .hp-account,
	body .hp-page--account .hp-page__content,
	body[class*="account"] .hp-page__content {
		display: block;
	}

	.vostok-account-hero,
	.vostok-account-grid,
	.vostok-listing-grid,
	body .hp-form--user-update .hp-form__fields {
		grid-template-columns: 1fr;
	}

	.vostok-archive-layout,
	.vostok-archive-results__header,
	.vostok-range {
		display: block;
	}

	.vostok-archive-sidebar {
		position: static;
		margin-bottom: 18px;
	}

	.vostok-archive-sort {
		min-width: 0;
		margin-top: 12px;
	}

	body .hp-form--user-update .hp-form__field--textarea,
	body .hp-form--user-update .hp-form__field--content,
	body .hp-form--user-update .hp-form__field--file,
	body .hp-form--user-update .hp-form__field--attachment,
	body .hp-form--user-update .hp-form__field--email,
	body .hp-form--user-update .hp-form__field--password {
		grid-column: span 1;
	}

	body .hp-account .hp-menu,
	body .hp-page--account .hp-menu,
	body[class*="account"] .hp-menu {
		position: static;
		margin-bottom: 14px;
	}
}

@media (max-width: 640px) {
	body.login {
		padding: 12px;
		gap: 12px;
	}

	body.login #login {
		padding: 22px 18px;
	}

	body.login .language-switcher {
		width: min(100%, 420px);
		text-align: center;
	}

	body.login .language-switcher select {
		min-width: 0;
		width: 100%;
		margin: 0 0 8px;
	}

	body.login #login h1 a {
		font-size: 23px;
	}

	body .hp-form,
	body .hp-form--listing-submit,
	body .hp-form--listing-update,
	body .hp-form--user-login,
	body .hp-form--user-register,
	body .hp-form--user-update {
		padding: 16px;
	}

	body .hp-form__actions {
		display: grid;
		gap: 8px;
	}

	body .hp-form button,
	body .hp-form .button,
	body .hp-form input[type="submit"] {
		width: 100%;
	}

	.vostok-account-hero {
		padding: 18px;
	}

	.vostok-account-hero__main {
		align-items: flex-start;
	}

	.vostok-documents-grid,
	.vostok-documents-form__actions {
		display: block;
	}

	.vostok-document-item + .vostok-document-item {
		margin-top: 12px;
	}

	.vostok-documents-form__hint {
		display: block;
		margin-top: 10px;
	}
}