.price-display {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.price-main {
	align-items: baseline;
	background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	border: 1px solid #e9ecef;
	border-radius: 8px;
	box-shadow: 0 2px 4px #0000000d;
	color: #333;
	display: flex;
	font-weight: 600;
	gap: 4px;
	padding: 8px 12px;
	transition: all .3s ease
}

.price-main:hover {
	border-color: #10365A;
	box-shadow: 0 4px 8px #0000001a;
	transform: translateY(-1px)
}

.price-hidden {
	align-items: center;
	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px
}

.price-hidden .price-hidden-content {
	align-items: center;
	color: #64748b;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px
}

.price-hidden .price-hidden-content .material-icons {
	color: #94a3b8;
	font-size: 18px
}

.price-hidden .btn-get-price {
	align-items: center;
	background: linear-gradient(135deg, #10365A, #5daf34);
	border: none;
	border-radius: 8px;
	box-shadow: 0 2px 4px #10365A4d;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 10px 20px;
	transition: all .3s ease
}

.price-hidden .btn-get-price:hover {
	background: linear-gradient(135deg, #5daf34, #4a9c2a);
	box-shadow: 0 4px 8px #10365A66;
	transform: translateY(-2px)
}

.price-hidden .btn-get-price:active {
	box-shadow: 0 2px 4px #10365A4d;
	transform: translateY(0)
}

.price-hidden .btn-get-price .material-icons {
	font-size: 18px
}

.currency-symbol {
	color: #10365A;
	font-size: 16px;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(103, 194, 58, .3)
}

.price-amount {
	color: #2c3e50;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: .5px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.currency-code {
	background: #10365A;
	border-radius: 4px;
	box-shadow: 0 1px 3px #10365A4d;
	color: #6c757d;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 2px 6px;
	text-transform: uppercase
}

.price-info {
	color: #666;
	font-size: 11px;
	line-height: 1.2
}

.exchange-left {
	color: #666;
	font-size: 12px;
	margin-left: 10px;
	white-space: nowrap
}

.exchange-info {
	background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	box-shadow: 0 1px 3px #0000000d;
	color: #666;
	font-size: 10px;
	padding: 4px 8px
}

@media(max-width: 768px) {
	.price-main {
		gap: 3px;
		padding: 6px 10px
	}

	.currency-symbol {
		font-size: 16px
	}

	.price-amount {
		font-size: 22px
	}

	.currency-code {
		font-size: 10px;
		padding: 1px 5px
	}

	.price-info {
		font-size: 10px
	}

	.exchange-info {
		font-size: 9px;
		padding: 3px 6px
	}
}

@media(max-width: 480px) {
	.price-main {
		gap: 2px;
		padding: 5px 8px
	}

	.currency-symbol {
		font-size: 13px
	}

	.price-amount {
		font-size: 18px
	}

	.currency-code {
		font-size: 9px;
		padding: 1px 4px
	}

	.exchange-info {
		font-size: 8px;
		padding: 2px 5px
	}
}

.share-modal {
	align-items: center;
	animation: fadeIn-3b9e0d9a .3s ease-out;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background: #00000080;
	bottom: 0;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000;display: none;
}

.modal-content {
	animation: slideUp-3b9e0d9a .3s ease-out;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
	max-height: 80vh;
	max-width: 500px;
	overflow: hidden;
	width: 90vw
}

.modal-header {
	align-items: center;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	justify-content: space-between;
	padding: 24px
}

.modal-header .modal-title {
	align-items: center;
	color: #0f172a;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	gap: 8px;
	margin: 0
}

.modal-header .modal-title .material-icons {
	color: #10365A;
	font-size: 20px
}

.modal-header .modal-close {
	background: none;
	border: none;
	border-radius: 8px;
	color: #64748b;
	cursor: pointer;
	padding: 8px;
	transition: all .2s ease
}

.modal-header .modal-close:hover {
	background: #f1f5f9;
	color: #0f172a
}

.modal-header .modal-close .material-icons {
	font-size: 18px
}

.share-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px
}

.share-preview {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	display: flex;
	gap: 16px;
	padding: 16px
}

.share-preview .preview-image {
	border-radius: 8px;
	flex-shrink: 0;
	height: 80px;
	-o-object-fit: cover;
	object-fit: cover;
	width: 80px
}

.share-preview .preview-text {
	flex: 1;
	min-width: 0
}

.share-preview .preview-text .preview-title {
	color: #0f172a;
	display: -webkit-box;
	font-size: 14px;
	font-weight: 600;
	-webkit-line-clamp: 2;
	line-height: 1.4;
	margin: 0 0 8px;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.share-preview .preview-text .preview-description {
	color: #475569;
	display: -webkit-box;
	font-size: 12px;
	-webkit-line-clamp: 3;
	line-height: 1.4;
	margin: 0;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.share-platforms .platform-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr)
}

.share-platforms .platform-btn {
	align-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #0f172a;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 70px;
	padding: 8px;
	text-decoration: none;
	transition: all .3s ease
}

.share-platforms .platform-btn:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: translateY(-2px)
}

.share-platforms .platform-btn i {
	font-size: 18px;
	margin-bottom: 4px
}

.share-platforms .platform-btn .platform-label {
	font-size: 12px;
	font-weight: 500;
	text-align: center
}

.share-platforms .platform-btn.facebook:hover {
	background: #1877f20d;
	border-color: #1877f2
}

.share-platforms .platform-btn.facebook i {
	color: #1877f2
}

.share-platforms .platform-btn.vk:hover {
	background: #0077ff0d;
	border-color: #07f
}

.share-platforms .platform-btn.vk i {
	color: #07f
}

.share-platforms .platform-btn.instagram:hover {
	background: #e4405f0d;
	border-color: #e4405f
}

.share-platforms .platform-btn.instagram i {
	color: #e4405f
}

.share-platforms .platform-btn.linkedin:hover {
	background: #0a66c20d;
	border-color: #0a66c2
}

.share-platforms .platform-btn.linkedin i {
	color: #0a66c2
}

.share-platforms .platform-btn.whatsapp:hover {
	background: #25d3660d;
	border-color: #25d366
}

.share-platforms .platform-btn.whatsapp i {
	color: #25d366
}

.share-platforms .platform-btn.tiktok:hover {
	background: #0000000d;
	border-color: #000
}

.share-platforms .platform-btn.tiktok i {
	color: #000
}

.share-platforms .platform-btn.youtube:hover {
	background: #ff00000d;
	border-color: red
}

.share-platforms .platform-btn.youtube i {
	color: red
}

.share-url .url-container {
	align-items: center;
	display: flex;
	gap: 8px
}

.share-url .url-container .url-input {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #475569;
	cursor: pointer;
	flex: 1;
	font-size: 14px;
	padding: 12px
}

.share-url .url-container .url-input:focus {
	background: #fff;
	border-color: #10365A;
	outline: none
}

.share-url .url-container .copy-btn {
	align-items: center;
	background: #10365A;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 4px;
	padding: 12px 16px;
	transition: all .2s ease;
	white-space: nowrap
}

.share-url .url-container .copy-btn:hover {
	background: #5daf34;
	transform: translateY(-1px)
}

.share-url .url-container .copy-btn.copied,
.share-url .url-container .copy-btn.copied:hover {
	background: #10b981
}

.share-url .url-container .copy-btn .material-icons {
	font-size: 14px
}

@keyframes fadeIn-3b9e0d9a {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes slideUp-3b9e0d9a {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

@media(max-width: 768px) {
	.share-modal {
		align-items: flex-start;
		padding: 0
	}

	.modal-content {
		border-radius: 0;
		display: flex;
		flex-direction: column;
		height: 100vh;
		max-height: none;
		max-width: none;
		width: 100vw
	}

	.modal-header {
		border-bottom: 1px solid #e2e8f0;
		flex-shrink: 0;
		padding: 16px
	}

	.share-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 16px;
		overflow-y: auto;
		padding: 16px
	}

	.share-preview {
		flex-direction: column;
		text-align: center
	}

	.share-preview .preview-image {
		align-self: center;
		height: 120px;
		width: 100%
	}

	.platform-grid {
		gap: 8px;
		grid-template-columns: repeat(4, 1fr)
	}

	.platform-btn {
		min-height: 60px;
		padding: 8px
	}

	.platform-btn i {
		font-size: 18px
	}

	.platform-btn .platform-label {
		font-size: 10px;
		line-height: 1.2
	}

	.url-container {
		flex-direction: column
	}

	.url-container .copy-btn {
		justify-content: center;
		width: 100%
	}
}

@media(max-width: 480px) {
	.share-modal {
		align-items: flex-start;
		padding: 0
	}

	.modal-content {
		border-radius: 0;
		display: flex;
		flex-direction: column;
		height: 100vh;
		max-height: none;
		max-width: none;
		width: 100vw
	}

	.modal-header {
		flex-shrink: 0;
		padding: 12px
	}

	.share-content {
		flex: 1;
		gap: 12px;
		overflow-y: auto;
		padding: 12px
	}

	.platform-grid {
		gap: 4px;
		grid-template-columns: repeat(4, 1fr)
	}

	.platform-btn {
		flex-direction: column;
		justify-content: center;
		min-height: 50px;
		padding: 4px;
		text-align: center
	}

	.platform-btn i {
		font-size: 16px;
		margin-bottom: 2px;
		margin-right: 0
	}

	.platform-btn .platform-label {
		font-size: 9px;
		line-height: 1.1
	}
}

.price-auth-modal {
	align-items: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background: #00000080;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000
}

.modal-content {
	animation: modalSlideIn-1f7f352e .3s ease-out;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
	max-height: 90vh;
	max-width: 500px;
	overflow-y: auto;
	width: 90%
}

@keyframes modalSlideIn-1f7f352e {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

.modal-header {
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 24px 24px 0
}

.modal-header .modal-title {
	align-items: center;
	color: #111827;
	display: flex;
	font-size: 20px;
	font-weight: 600;
	gap: 8px;
	margin: 0
}

.modal-header .modal-title .material-icons {
	color: #3b82f6;
	font-size: 24px
}

.modal-header .close-btn {
	background: none;
	border: none;
	border-radius: 8px;
	color: #6b7280;
	cursor: pointer;
	padding: 8px;
	transition: all .2s ease
}

.modal-header .close-btn:hover {
	background: #f3f4f6;
	color: #374151
}

.modal-header .close-btn .material-icons {
	font-size: 20px
}

.modal-body {
	padding: 0 24px 24px
}

.modal-body .modal-description {
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 24px
}

.modal-body .auth-form .form-group {
	margin-bottom: 20px
}

.modal-body .auth-form .form-group .form-label {
	color: #374151;
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 8px;
	padding-left: 26px;
	position: relative
}

.modal-body .auth-form .form-group .form-label .material-icons {
	align-items: center;
	color: #6b7280;
	display: flex;
	font-size: 18px;
	height: 18px;
	justify-content: center;
	left: 0;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 18px
}

.modal-body .auth-form .form-group .form-input {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 16px;
	padding: 12px 16px;
	transition: all .2s ease;
	width: 100%
}

.modal-body .auth-form .form-group .form-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px #3b82f61a;
	outline: none
}

.modal-body .auth-form .form-group .form-input:disabled {
	background: #f9fafb;
	color: #9ca3af;
	cursor: not-allowed
}

.modal-body .auth-form .error-message {
	align-items: center;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #dc2626;
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin-bottom: 20px;
	padding: 12px 16px
}

.modal-body .auth-form .error-message .material-icons {
	font-size: 18px
}

.modal-body .auth-form .form-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end
}

.modal-body .auth-form .form-actions .btn-cancel {
	background: #f3f4f6;
	border: none;
	border-radius: 8px;
	color: #374151;
	cursor: pointer;
	font-weight: 500;
	padding: 12px 24px;
	transition: all .2s ease
}

.modal-body .auth-form .form-actions .btn-cancel:hover:not(:disabled) {
	background: #e5e7eb
}

.modal-body .auth-form .form-actions .btn-cancel:disabled {
	cursor: not-allowed;
	opacity: .5
}

.modal-body .auth-form .form-actions .btn-submit {
	align-items: center;
	background: #3b82f6;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-weight: 500;
	gap: 8px;
	padding: 12px 24px;
	transition: all .2s ease
}

.modal-body .auth-form .form-actions .btn-submit:hover:not(:disabled) {
	background: #2563eb
}

.modal-body .auth-form .form-actions .btn-submit:disabled {
	cursor: not-allowed;
	opacity: .5
}

.modal-body .partner-apply-section {
	background: linear-gradient(135deg, #ecfdf5, #d1fae5);
	border: 1px solid #10b981;
	border-radius: 12px;
	margin-top: 24px;
	padding: 24px;
	text-align: center
}

.modal-body .partner-apply-section .partner-header {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 12px
}

.modal-body .partner-apply-section .partner-header .material-icons {
	color: #10b981;
	font-size: 28px
}

.modal-body .partner-apply-section .partner-header .partner-title {
	color: #065f46;
	font-size: 18px;
	font-weight: 600;
	margin: 0
}

.modal-body .partner-apply-section .partner-description {
	color: #047857;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 20px
}

.modal-body .partner-apply-section .btn-partner-apply {
	align-items: center;
	background: #10b981;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	padding: 12px 24px;
	transition: all .2s ease
}

.modal-body .partner-apply-section .btn-partner-apply:hover:not(:disabled) {
	background: #059669;
	box-shadow: 0 4px 12px #10b9814d;
	transform: translateY(-1px)
}

.modal-body .partner-apply-section .btn-partner-apply:disabled {
	cursor: not-allowed;
	opacity: .5;
	transform: none
}

.modal-body .partner-apply-section .btn-partner-apply .material-icons {
	font-size: 18px
}

.loading-spinner {
	animation: spin-1f7f352e 1s linear infinite;
	border: 2px solid transparent;
	border-radius: 50%;
	border-top-color: currentcolor;
	height: 16px;
	width: 16px
}

@keyframes spin-1f7f352e {
	to {
		transform: rotate(1turn)
	}
}

@media(max-width: 640px) {
	.modal-content {
		margin: 20px;
		width: 95%
	}

	.modal-header {
		padding: 20px 20px 0
	}

	.modal-body {
		padding: 0 20px 20px
	}
}

.car-detail-page {
	background: #fff;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-x: hidden !important;
	padding-top: 80px;
	position: relative;
	width: 100%
}

.animated-background {
	height: 100%;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 0
}

.curve {
	animation: float-e0f1fb11 20s linear infinite;
	border-radius: 50%;
	opacity: .1;
	position: absolute;
	transform: translateZ(0);
	will-change: transform
}

.curve-1 {
	animation-delay: 0s;
	animation-duration: 25s;
	background: linear-gradient(45deg, #667eea, #764ba2);
	height: 300px;
	left: -150px;
	top: 10%;
	width: 300px
}

.curve-2 {
	animation-delay: -5s;
	animation-duration: 30s;
	background: linear-gradient(135deg, #f093fb, #f5576c);
	height: 200px;
	right: -100px;
	top: 30%;
	width: 200px
}

.curve-3 {
	animation-delay: -10s;
	animation-duration: 35s;
	background: linear-gradient(225deg, #4facfe, #00f2fe);
	bottom: 20%;
	height: 400px;
	left: -200px;
	width: 400px
}

.curve-4 {
	animation-delay: -15s;
	animation-duration: 28s;
	background: linear-gradient(315deg, #43e97b, #38f9d7);
	height: 250px;
	right: -125px;
	top: 60%;
	width: 250px
}

.curve-5 {
	animation-delay: -20s;
	animation-duration: 32s;
	background: linear-gradient(90deg, #fa709a, #fee140);
	height: 350px;
	left: 50%;
	top: 80%;
	transform: translate(-50%);
	width: 350px
}

.curve-6 {
	animation-delay: -8s;
	animation-duration: 26s;
	background: linear-gradient(180deg, #a8edea, #fed6e3);
	height: 180px;
	left: 60%;
	top: 5%;
	width: 180px
}

@keyframes float-e0f1fb11 {
	0% {
		transform: translate(0) translateY(0) rotate(0)
	}

	25% {
		transform: translate(100px) translateY(-50px) rotate(90deg)
	}

	50% {
		transform: translate(-50px) translateY(-100px) rotate(180deg)
	}

	75% {
		transform: translate(-100px) translateY(50px) rotate(270deg)
	}

	to {
		transform: translate(0) translateY(0) rotate(1turn)
	}
}

.animated-background:before {
	animation: wave-e0f1fb11 15s ease-in-out infinite;
	background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, .1) 0, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, .1) 0, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, .1) 0, transparent 50%)
}

.animated-background:after,
.animated-background:before {
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}

.animated-background:after {
	animation: shimmer-e0f1fb11 8s ease-in-out infinite;
	background: linear-gradient(45deg, transparent 30%, hsla(0, 0%, 100%, .1) 50%, transparent 70%)
}

@keyframes wave-e0f1fb11 {

	0%,
	to {
		opacity: .3;
		transform: translate(0) translateY(0) scale(1)
	}

	25% {
		opacity: .5;
		transform: translate(50px) translateY(-30px) scale(1.1)
	}

	50% {
		opacity: .4;
		transform: translate(-30px) translateY(-60px) scale(.9)
	}

	75% {
		opacity: .6;
		transform: translate(-50px) translateY(30px) scale(1.05)
	}
}

@keyframes shimmer-e0f1fb11 {
	0% {
		opacity: 0;
		transform: translate(-100%) translateY(-100%)
	}

	50% {
		opacity: .3
	}

	to {
		opacity: 0;
		transform: translate(100%) translateY(100%)
	}
}

@keyframes glow-e0f1fb11 {
	0% {
		text-shadow: 0 0 10px rgba(103, 194, 58, .8), 0 0 20px rgba(103, 194, 58, .6), 0 0 30px rgba(103, 194, 58, .4), 0 0 40px rgba(103, 194, 58, .2), 0 2px 4px rgba(0, 0, 0, .5)
	}

	to {
		text-shadow: 0 0 15px #10365A, 0 0 25px rgba(103, 194, 58, .8), 0 0 35px rgba(103, 194, 58, .6), 0 0 45px rgba(103, 194, 58, .4), 0 2px 4px rgba(0, 0, 0, .5)
	}
}

.skeleton-container {
	background: linear-gradient(135deg, #f8fafc, #e2e8f0);
	bottom: 0;
	left: 0;
	opacity: 1;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity .4s ease-in-out;
	z-index: 9999
}

.skeleton-container .skeleton-content {
	margin: 0 auto;
	max-width: 1200px;
	padding: 2rem
}

@media(max-width: 768px) {
	.skeleton-container .skeleton-content {
		padding: 1rem
	}
}

.skeleton-container .skeleton-header {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 3rem
}

@media(max-width: 768px) {
	.skeleton-container .skeleton-header {
		gap: 1.5rem;
		grid-template-columns: 1fr;
		margin-bottom: 2rem
	}
}

.skeleton-container .skeleton-gallery .skeleton-image {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 12px;
	height: 400px;
	margin-bottom: 1rem;
	width: 100%
}

@media(max-width: 768px) {
	.skeleton-container .skeleton-gallery .skeleton-image {
		height: 250px
	}
}

.skeleton-container .skeleton-gallery .skeleton-thumbnails {
	display: flex;
	gap: .5rem
}

.skeleton-container .skeleton-gallery .skeleton-thumbnails .skeleton-thumb {
	height: 40px;
	width: 60px
}

.skeleton-container .skeleton-gallery .skeleton-thumbnails .skeleton-thumb,
.skeleton-container .skeleton-info .skeleton-title {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 6px
}

.skeleton-container .skeleton-info .skeleton-title {
	height: 32px;
	margin-bottom: 1rem;
	width: 80%
}

.skeleton-container .skeleton-info .skeleton-price {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 6px;
	height: 24px;
	margin-bottom: 1.5rem;
	width: 60%
}

.skeleton-container .skeleton-info .skeleton-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem
}

.skeleton-container .skeleton-info .skeleton-meta .skeleton-meta-item {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 12px;
	height: 24px;
	width: 80px
}

.skeleton-container .skeleton-info .skeleton-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem
}

.skeleton-container .skeleton-info .skeleton-tags .skeleton-tag {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 10px;
	height: 20px;
	width: 60px
}

.skeleton-container .skeleton-details .skeleton-section {
	margin-bottom: 2rem
}

.skeleton-container .skeleton-details .skeleton-section .skeleton-section-title {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 6px;
	height: 24px;
	margin-bottom: 1rem;
	width: 200px
}

.skeleton-container .skeleton-details .skeleton-section .skeleton-section-content .skeleton-line {
	animation: skeleton-loading-e0f1fb11 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 4px;
	height: 16px;
	margin-bottom: .5rem;
	width: 100%
}

.skeleton-container .skeleton-details .skeleton-section .skeleton-section-content .skeleton-line:nth-child(2) {
	width: 85%
}

.skeleton-container .skeleton-details .skeleton-section .skeleton-section-content .skeleton-line:nth-child(3) {
	width: 70%
}

.skeleton-container .skeleton-details .skeleton-section .skeleton-section-content .skeleton-line:nth-child(4) {
	width: 90%
}

@keyframes skeleton-loading-e0f1fb11 {
	0% {
		background-position: -200% 0
	}

	to {
		background-position: 200% 0
	}
}

@keyframes fadeIn-e0f1fb11 {
	0% {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes slideIn-e0f1fb11 {
	0% {
		opacity: 0;
		transform: translate(-20px)
	}

	to {
		opacity: 1;
		transform: translate(0)
	}
}

@keyframes pulse-e0f1fb11 {

	0%,
	to {
		transform: scale(1)
	}

	50% {
		transform: scale(1.05)
	}
}

@keyframes swipeHintPulse-e0f1fb11 {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	50% {
		opacity: 1;
		transform: scale(1.1)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes swipeHintBounce-e0f1fb11 {

	0%,
	to {
		transform: translate(0)
	}

	50% {
		transform: translate(5px)
	}
}

.car-detail-page {
	animation: fadeIn-e0f1fb11 .6s ease-out
}

.gallery-section {
	animation: slideIn-e0f1fb11 .8s ease-out
}

.info-section {
	animation: slideIn-e0f1fb11 .8s ease-out .1s both
}

.video-thumbs {
	animation: slideIn-e0f1fb11 .8s ease-out .2s both
}

.specs-section {
	animation: slideIn-e0f1fb11 .8s ease-out .3s both
}

.files-section {
	animation: slideIn-e0f1fb11 .8s ease-out .4s both
}

.main-image-container:hover {
	box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
	transform: translateY(-4px)
}

.btn-primary:active,
.btn-secondary:active {
	transform: translateY(1px) scale(.98)
}

.image-container {
	position: relative;
	transform: translateZ(0)
}

.image-container,
.image-loading {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	height: 100%;
	width: 100%
}

.image-loading {
	align-items: center;
	background: #f5f5f5;
	display: flex;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity .2s ease-in-out;
	z-index: 1
}

.image-loading.show {
	opacity: 1
}

.image-loading .loading-placeholder {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: .7;
	width: 100%
}

.thumbnail-img-container {
	height: 100%;
	position: relative;
	width: 100%
}

.thumbnail-loading {
	align-items: center;
	background: #f5f5f5;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1
}

.thumbnail-loading .loading-placeholder {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: .7;
	width: 100%
}

.file-item,
.spec-item,
.thumbnail-item,
.video-thumb-card {
	transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.file-link:focus-visible,
button:focus-visible {
	outline: 2px solid #10365A;
	outline-offset: 2px
}

::-webkit-scrollbar {
	height: 8px;
	width: 8px
}

::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 6px
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 6px
}

::-webkit-scrollbar-thumb:hover {
	background: #94a3b8
}

::-moz-selection {
	background: #f0f9ff;
	color: #10365A
}

::selection {
	background: #f0f9ff;
	color: #10365A
}

.main-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 auto;
	max-width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	padding: 24px;
	position: relative;
	width: 100%;
	z-index: 1
}

@media(max-width: 1024px) {
	.main-container {
		gap: 20px;
		padding: 20px
	}
}

@media(max-width: 768px) {
	.main-container {
		gap: 16px;
		max-width: 100%;
		padding: 16px;
		width: 100%
	}
}

@media(max-width: 480px) {
	.main-container {
		gap: 12px;
		max-width: 100%;
		padding: 12px;
		width: 100%
	}
}

.header-section {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: 24px;
	grid-template-columns: 65% 35%;
	width: 100%
}

@media(max-width: 1024px) {
	.header-section {
		gap: 20px;
		grid-template-columns: 60% 40%
	}
}

@media(max-width: 768px) {
	.header-section {
		gap: 16px;
		grid-template-columns: 1fr;
		overflow-x: hidden;
		width: 100%
	}
}

.content-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-x: hidden;
	width: 100%
}

@media(max-width: 768px) {
	.content-section {
		gap: 20px;
		width: 100%
	}
}

@media(max-width: 480px) {
	.content-section {
		gap: 16px;
		width: 100%
	}
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px
}

.tag-chip {
	background: #000;
	border: none;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 8px;
	transition: all .2s ease
}

.tag-chip:hover {
	background: #333;
	transform: translateY(-1px)
}

.gallery-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	width: 100%
}

@media(max-width: 768px) {
	.gallery-section {
		width: 100%
	}
}

.gallery-topbar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 12px
}

.gallery-controls {
	display: flex;
	gap: 8px
}

.control-btn {
	align-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #0f172a;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 4px;
	padding: 8px 12px;
	transition: all .2s ease
}

.control-btn:hover:not(:disabled) {
	background: #f8f9fa;
	border-color: #cbd5e1;
	transform: translateY(-1px)
}

.control-btn:disabled {
	cursor: not-allowed;
	opacity: .5;
	transform: none
}

.toggle-group {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 4px
}

.toggle-btn,
.toggle-group {
	display: inline-flex;
	gap: 4px
}

.toggle-btn {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: 12px;
	color: #475569;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 12px;
	transition: all .2s ease
}

.toggle-btn:hover {
	color: #0f172a
}

.toggle-btn.active {
	background: #10365A;
	box-shadow: 0 1px 2px #0000000d;
	color: #fff
}

.toggle-btn.active:hover {
	background: #5daf34;
	color: #fff
}

.main-image-container {
	aspect-ratio: 4/3;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	margin-bottom: 16px;
	overflow: hidden;
	position: relative;
	width: 100%
}

@media(max-width: 768px) {
	.main-image-container {
		aspect-ratio: 16/9;
		border-radius: 8px;
		margin-bottom: 12px;
		min-width: 0;
		width: 100%
	}
}

@media(max-width: 480px) {
	.main-image-container {
		aspect-ratio: 16/9;
		border-radius: 8px;
		margin-bottom: 12px;
		min-width: 0;
		width: 100%
	}
}

.main-image-container .condition-badges {
	left: 12px;
	position: absolute;
	top: 12px;
	z-index: 10
}

.main-image-container .condition-badges .badge {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 4px;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 4px;
	padding: 8px 12px;
	transition: all .2s ease
}

.main-image-container .condition-badges .badge .material-icons {
	font-size: 14px
}

@keyframes slideInFromRight-e0f1fb11 {
	0% {
		opacity: 0;
		transform: translate(20px) scale(.98) translateZ(0)
	}

	50% {
		opacity: .8;
		transform: translate(5px) scale(.99) translateZ(0)
	}

	to {
		opacity: 1;
		transform: translate(0) scale(1) translateZ(0)
	}
}

@keyframes slideInFromLeft-e0f1fb11 {
	0% {
		opacity: 0;
		transform: translate(-20px) scale(.98) translateZ(0)
	}

	50% {
		opacity: .8;
		transform: translate(-5px) scale(.99) translateZ(0)
	}

	to {
		opacity: 1;
		transform: translate(0) scale(1) translateZ(0)
	}
}

@keyframes fadeInScale-e0f1fb11 {
	0% {
		opacity: 0;
		transform: scale(.95) translateZ(0)
	}

	50% {
		opacity: .7;
		transform: scale(.98) translateZ(0)
	}

	to {
		opacity: 1;
		transform: scale(1) translateZ(0)
	}
}

.main-image {
	cursor: pointer;
	height: 100%;
	overflow: hidden;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	width: 100%
}

.main-image.image-transitioning .main-img {
	transition: none
}

.main-image.image-transitioning.transition-next .main-img {
	animation: slideInFromRight-e0f1fb11 .35s cubic-bezier(.25, .46, .45, .94)
}

.main-image.image-transitioning.transition-prev .main-img {
	animation: slideInFromLeft-e0f1fb11 .35s cubic-bezier(.25, .46, .45, .94)
}

.main-image.image-transitioning.transition-jump .main-img {
	animation: fadeInScale-e0f1fb11 .35s cubic-bezier(.25, .46, .45, .94)
}

.main-image .main-img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	transform: translateZ(0);
	transition: transform .3s cubic-bezier(.25, .46, .45, .94);
	width: 100%;
	will-change: transform, opacity
}

.main-image:hover .main-img {
	transform: scale(1.02)
}

.main-image.dragging .main-img {
	transition: none
}

.main-image:after {
	background: #ffffff4d;
	border-radius: 2px;
	bottom: 20px;
	content: "";
	height: 4px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%);
	transition: opacity .3s ease;
	width: 40px
}

.main-image:hover:after {
	opacity: 1
}

.main-image .swipe-hint {
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 20
}

.main-image .swipe-hint .swipe-hint-content {
	align-items: center;
	animation: swipeHintPulse-e0f1fb11 .6s ease-in-out;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #000c;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
	color: #fff;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 12px 16px
}

.main-image .swipe-hint .swipe-hint-content .material-icons {
	animation: swipeHintBounce-e0f1fb11 1s ease-in-out infinite;
	font-size: 20px
}

.main-image .image-actions {
	position: absolute;
	right: 12px;
	top: 12px
}

.main-image .image-actions .action-btn {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #000000b3;
	border: none;
	border-radius: 50%;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	transition: all .3s ease;
	width: 40px
}

.main-image .image-actions .action-btn:hover {
	background: #000000e6;
	transform: scale(1.1)
}

.main-image .image-actions .action-btn .material-icons {
	font-size: 20px
}

@media(max-width: 768px) {
	.main-image .image-actions {
		right: 20px;
		top: 8px;
		z-index: 10
	}
}

.main-image .nav-arrows {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute
}

.main-image .nav-arrows .nav-btn {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #00000080;
	border: none;
	border-radius: 50%;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	color: #fff;
	display: flex;
	height: 48px;
	justify-content: center;
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	width: 48px
}

.main-image .nav-arrows .nav-btn:hover:not(:disabled) {
	background: #000000b3;
	transform: translateY(-50%) scale(1.1)
}

.main-image .nav-arrows .nav-btn:active:not(:disabled) {
	transform: translateY(-50%) scale(.95);
	transition: transform .1s ease
}

.main-image .nav-arrows .nav-btn .material-icons {
	font-size: 24px;
	transition: transform .2s ease
}

.main-image .nav-arrows .nav-btn:hover:not(:disabled) .material-icons {
	transform: scale(1.1)
}

.main-image .nav-arrows .nav-btn.left {
	left: 8px
}

.main-image .nav-arrows .nav-btn.right {
	right: 20px
}

.main-image .nav-arrows .nav-btn:disabled {
	cursor: not-allowed;
	opacity: .3;
	transform: translateY(-50%)
}

.thumbnail-nav .thumbnail-container {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory
}

.thumbnail-nav .thumbnail-container::-webkit-scrollbar {
	display: none
}

.thumbnail-nav .thumbnail-container {
	scrollbar-width: none;
	-ms-overflow-style: none
}

.thumbnail-nav .thumbnail-item {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: 2px solid transparent;
	border-radius: 8px;
	box-shadow: 0 1px 2px #0000000d;
	cursor: pointer;
	flex-shrink: 0;
	height: 60px;
	overflow: hidden;
	position: relative;
	scroll-snap-align: center;
	transform: translateZ(0);
	transition: all .25s cubic-bezier(.25, .46, .45, .94);
	width: 60px
}

.thumbnail-nav .thumbnail-item.transitioning {
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
	transform: scale(1.05) translateZ(0);
	transition: all .15s ease-out
}

.thumbnail-nav .thumbnail-item img {
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	width: 100%
}

.thumbnail-nav .thumbnail-item.active {
	border-color: #10365A;
	box-shadow: 0 0 0 2px #f0f9ff, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: scale(1.05)
}

.thumbnail-nav .thumbnail-item:hover:not(.active) {
	border-color: #cbd5e1;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: scale(1.05)
}

.thumbnail-nav .thumbnail-item.remaining {
	align-items: center;
	background: #fff;
	border: 2px dashed #cbd5e1;
	display: flex;
	justify-content: center
}

.thumbnail-nav .thumbnail-item.remaining .remaining-content {
	color: #475569;
	text-align: center
}

.thumbnail-nav .thumbnail-item.remaining .remaining-content .material-icons {
	font-size: 16px;
	margin-bottom: 4px
}

.thumbnail-nav .thumbnail-item.remaining .remaining-content .remaining-count {
	font-size: 14px;
	font-weight: 600
}

.image-counter {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #475569;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	margin-top: 8px;
	padding: 8px 12px;
	text-align: center
}

.video-thumbs {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0
}

@media(max-width: 768px) {
	.video-thumbs {
		border-radius: 0;
		padding: 0
	}
}

.empty-state {
	align-items: center;
	background: #fff;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	color: #94a3b8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 20px;
	text-align: center
}

.empty-state .material-icons {
	color: #64748b;
	font-size: 48px;
	margin-bottom: 12px;
	opacity: .6
}

.empty-state p {
	font-size: 14px;
	font-weight: 500;
	margin: 0
}

.video-thumbs-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
	width: 100%
}

@media(max-width: 1024px) {
	.video-thumbs-grid {
		gap: 12px;
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(max-width: 768px) {
	.video-thumbs-grid {
		gap: 12px;
		grid-template-columns: repeat(2, 1fr)
	}
}

.video-thumb-card {
	background: transparent;
	border: none;
	border-radius: 12px;
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
	transition: all .3s ease
}

.video-thumb-card:hover {
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
	transform: translateY(-2px)
}

.video-thumb-card .thumb-cover {
	align-items: center;
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, #1e293b, #334155 50%, #475569);
	color: #fff;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 100%
}

.video-thumb-card .thumb-cover:before {
	background: linear-gradient(45deg, #2563eb1a, #3b82f61a);
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	transition: opacity .3s ease
}

.video-thumb-card .thumb-cover:hover:before {
	opacity: 1
}

.video-thumb-card .thumb-cover .video-overlay {
	align-items: center;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 2
}

.video-thumb-card .thumb-cover .video-overlay .video-type {
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 12px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.video-thumb-card .thumb-cover .video-overlay .video-brand {
	color: #10365A;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

.video-thumb-card .thumb-cover .video-overlay .video-brand .brand-logo {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
	height: 40px;
	max-width: 200px;
	-o-object-fit: contain;
	object-fit: contain;
	width: auto
}

.video-thumb-card .thumb-cover .play-icon {
	bottom: 12px;
	color: #fffc;
	font-size: 40px;
	position: absolute;
	right: 12px;
	transition: all .3s ease;
	z-index: 3
}

.video-thumb-card:hover .thumb-cover .play-icon {
	color: #fff;
	transform: scale(1.1)
}

.video-thumb-card:hover .thumb-cover .video-overlay .video-type {
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .7)
}

.video-thumb-card:hover .thumb-cover .video-overlay .video-brand .brand-logo {
	filter: drop-shadow(0 1px 4px rgba(16, 54, 90, .4))
}

.video-thumb-card .thumb-desc {
	color: #0f172a;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 16px
}

.detail-cards {
	display: none
}

.detail-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px #0000001a
}

.detail-card .card-content {
	padding: 0 24px 16px
}

.info-section {
	box-sizing: border-box;
	width: 100%
}

@media(max-width: 768px) {
	.info-section {
		overflow: hidden;
		width: 100%
	}
}

.info-section-image {
	align-items: center;
	background: transparent;
	display: flex;
	justify-content: center;
	margin-top: 40px;
	width: 100%
}

.info-section-image .image-overlay-container {
	aspect-ratio: 2/1;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: transform .3s ease;
	width: 100%
}

.info-section-image .image-overlay-container:hover {
	transform: scale(1.02)
}

.info-section-image .shinezo-image {
	background: transparent;
	display: block;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	width: 100%
}

.info-section-image .image-overlay {
	align-items: center;
	background: linear-gradient(135deg, #0006, #0009);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0
}

.info-section-image .image-overlay .overlay-content {
	color: #fff;
	text-align: center
}

.info-section-image .image-overlay .overlay-content .overlay-title {
	animation: glow-e0f1fb11 2s ease-in-out infinite alternate;
	font-size: 36px;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 0 10px rgba(103, 194, 58, .8), 0 0 20px rgba(103, 194, 58, .6), 0 0 30px rgba(103, 194, 58, .4), 0 0 40px rgba(103, 194, 58, .2), 0 2px 4px rgba(0, 0, 0, .5)
}

.info-section-image .image-overlay .overlay-content .overlay-subtitle {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	opacity: .9;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

@media(max-width: 768px) {
	.info-section-image {
		background: transparent;
		margin-top: 12px;
		width: 100%
	}

	.info-section-image .image-overlay-container {
		aspect-ratio: 2/1
	}

	.info-section-image .image-overlay .overlay-content .overlay-title {
		font-size: 30px
	}
}

.core-content {
	box-sizing: border-box;
	width: 100%
}

@media(max-width: 768px) {
	.core-content {
		width: 100%
	}
}

.core-header {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 8px;
	padding-bottom: 8px
}

.core-title .brand-line {
	align-items: center;
	color: #0f172a;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	gap: 8px
}

.core-title .brand-line .brand {
	color: #0f172a;
	font-weight: 700
}

.core-title .brand-line .series {
	color: #475569;
	font-weight: 500
}

.core-title .model-name {
	color: #475569;
	font-size: 14px;
	font-weight: 400;
	margin-top: 4px
}

.core-title .brand-line .self-owned-flag {
	align-items: center;
	background: red;
	border: 1px solid red;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 4px;
	line-height: 1;
	padding: 4px 10px
}

.core-title .brand-line .self-owned-flag .material-icons {
	font-size: 16px;
	line-height: 1
}

.core-title .brand-line .self-owned-flag .flag-text {
	line-height: 1
}

.core-meta {
	margin-bottom: 16px
}

.core-meta .meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px
}

.core-meta {
	margin-top: 12px
}

.core-meta .meta-row {
	margin-bottom: 8px
}

.core-meta .meta-row:last-child {
	margin-bottom: 0
}

.core-meta .meta-item {
	align-items: center;
	color: #475569;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px
}

.core-meta .meta-item .material-icons {
	color: #64748b;
	font-size: 16px
}

.core-actions {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px
}

.contact-dropdown {
	flex: 1;
	position: relative
}

.contact-btn {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	position: relative;
	width: 100%
}

.company-name {
	background: linear-gradient(135deg, #f5f7fa, #e4e8ec);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 1px 2px #0000000d;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
	margin-top: 8px;
	padding: 8px 12px;
	text-align: center
}

.dropdown-arrow {
	font-size: 18px !important;
	transition: transform .3s ease
}

.dropdown-arrow.rotated {
	transform: rotate(180deg)
}

.contact-menu {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
	left: 0;
	margin-top: 4px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 1000
}

.contact-item {
	align-items: center;
	background: transparent;
	border: none;
	color: #0f172a;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	padding: 12px 16px;
	text-align: left;
	transition: all .2s ease;
	width: 100%
}

.contact-item:hover {
	background: #f8f9fa;
	color: #10365A
}

.contact-item:first-child {
	border-bottom: 1px solid #e2e8f0
}

.contact-item i {
	font-size: 16px;
	text-align: center;
	width: 16px
}

.contact-item .fa-whatsapp {
	color: #25d366
}

.contact-item.no-contact {
	color: #475569;
	cursor: default
}

.contact-item.no-contact:hover {
	background: transparent;
	color: #475569
}

.contact-item .fa-telegram {
	color: #08c
}

.contact-item .fa-facebook-messenger {
	color: #006aff
}

.contact-item .fa-instagram {
	color: #e4405f
}

.contact-item .fa-vk {
	color: #07f
}

.contact-item .fa-tiktok {
	color: #000
}

.contact-item .material-icons {
	color: #0f172a
}

.contact-overlay {
	background: #00000080;
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999
}

@media(max-width: 768px) {
	.contact-overlay {
		display: block
	}
}

.price-section {
	margin-bottom: 12px
}

.partner-price-section {
	border-radius: 6px;
	box-shadow: 0 2px 4px #0000001a;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	overflow: hidden
}

.btn-container {
	align-items: stretch;
	border: 1px solid #e2e8f0;
	border-radius: 0 0 6px 6px;
	border-top: none;
	box-shadow: 0 1px 2px #0000001a;
	display: flex;
	height: 36px;
	overflow: hidden;
	width: 100%
}

.btn-main-content {
	align-items: center;
	background: linear-gradient(135deg, #10b981, #059669);
	border: none;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex: 1;
	font-size: 12px;
	font-weight: 500;
	gap: 6px;
	height: 36px;
	justify-content: center;
	min-width: 120px;
	padding: 0 12px;
	transition: all .3s ease
}

.btn-main-content:hover:not(:disabled) {
	background: linear-gradient(135deg, #059669, #047857);
	transform: translateY(-1px)
}

.btn-main-content:disabled {
	cursor: not-allowed;
	opacity: .6
}

.btn-main-content .material-icons {
	font-size: 14px
}

.price-info {
	align-items: center;
	border-left: 1px solid hsla(0, 0%, 100%, .2);
	box-sizing: border-box;
	color: #fff;
	display: flex;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	padding: 0 12px;
	white-space: nowrap
}

.price-info,
.price-info.percentage-info {
	background: #000
}

.partner-price-display {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin: 0;
	padding: 8px 12px
}

.partner-price-display .partner-price-label {
	color: #64748b;
	font-size: 12px;
	font-weight: 500
}

.partner-price-display .partner-price-value {
	color: #1e293b;
	font-size: 13px;
	font-weight: 600
}

.modal-overlay {
	align-items: center;
	background: #00000080;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	padding: 20px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000
}

.modal-content {
	border-radius: 12px;
	max-height: 90vh;
	max-width: 500px;
	overflow-y: auto;
	width: 100%
}

.modal-header {
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	padding: 20px 24px
}

.modal-header h3 {
	color: #111827;
	font-size: 18px;
	font-weight: 600;
	margin: 0
}

.modal-header .close-btn {
	align-items: center;
	background: #f3f4f6;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	height: 32px;
	justify-content: center;
	transition: all .2s ease;
	width: 32px
}

.modal-header .close-btn:hover {
	background: #e5e7eb
}

.modal-header .close-btn .material-icons {
	color: #6b7280;
	font-size: 18px
}

.modal-body {
	padding: 24px
}

.modal-body .form-group {
	margin-bottom: 20px
}

.modal-body .form-group label {
	color: #374151;
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px
}

.modal-body .form-group input {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 16px;
	padding: 12px 16px;
	transition: all .3s ease;
	width: 100%
}

.modal-body .form-group input:focus {
	border-color: #10b981;
	box-shadow: 0 0 0 3px #10b9811a;
	outline: none
}

.modal-body .form-group .price-hint {
	color: #6b7280;
	font-size: 12px;
	margin-top: 6px
}

.modal-body .form-group .currency-note {
	align-items: center;
	background: #fef3c7;
	border: 1px solid #f59e0b;
	border-radius: 6px;
	color: #92400e;
	display: flex;
	font-size: 12px;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 12px
}

.modal-body .form-group .currency-note .material-icons {
	color: #f59e0b;
	font-size: 16px
}

.modal-body .final-price-display {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-top: 20px;
	padding: 16px
}

.modal-body .final-price-display .final-price-item {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px
}

.modal-body .final-price-display .final-price-item:last-child {
	margin-bottom: 0
}

.modal-body .final-price-display .final-price-item.total {
	border-top: 1px solid #e2e8f0;
	margin-bottom: 0;
	margin-top: 8px;
	padding-top: 8px
}

.modal-body .final-price-display .final-price-item.total .final-price-label {
	color: #1f2937;
	font-weight: 600
}

.modal-body .final-price-display .final-price-item.total .final-price-value {
	color: #10b981;
	font-size: 16px;
	font-weight: 700
}

.modal-body .final-price-display .final-price-item .final-price-label {
	color: #6b7280;
	font-size: 13px;
	font-weight: 500
}

.modal-body .final-price-display .final-price-item .final-price-value {
	color: #059669;
	font-size: 14px;
	font-weight: 600
}

.modal-footer {
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding: 20px 24px
}

.modal-footer .btn-cancel,
.modal-footer .btn-save {
	align-items: center;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 6px;
	padding: 10px 20px;
	transition: all .3s ease
}

.modal-footer .btn-cancel {
	background: #f3f4f6;
	color: #374151
}

.modal-footer .btn-cancel:hover {
	background: #e5e7eb
}

.modal-footer .btn-save {
	background: linear-gradient(135deg, #10b981, #059669);
	color: #fff
}

.modal-footer .btn-save:hover:not(:disabled) {
	background: linear-gradient(135deg, #059669, #047857);
	transform: translateY(-1px)
}

.modal-footer .btn-save:disabled {
	cursor: not-allowed;
	opacity: .6
}

.loading-spinner {
	animation: spin-e0f1fb11 1s linear infinite;
	border: 2px solid transparent;
	border-radius: 50%;
	border-top-color: currentcolor;
	height: 16px;
	width: 16px
}

@keyframes spin-e0f1fb11 {
	to {
		transform: rotate(1turn)
	}
}

.core-actions .btn-primary,
.core-actions .btn-secondary {
	align-items: center;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	padding: 12px 16px;
	transition: all .3s ease
}

.core-actions .btn-primary {
	background: #10365A;
	box-shadow: 0 1px 2px #0000000d;
	color: #fff
}

.core-actions .btn-primary:hover {
	background: #5daf34;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: translateY(-1px)
}

.core-actions .btn-primary:active {
	transform: translateY(0)
}

.core-actions .btn-secondary {
	background: #fff;
	border: 1px solid #10365A;
	color: #10365A
}

.core-actions .btn-secondary:hover {
	background: #f0f9ff;
	box-shadow: 0 1px 2px #0000000d;
	transform: translateY(-1px)
}

.core-actions .btn-secondary:active {
	transform: translateY(0)
}

.section-title {
	align-items: center;
	color: #0f172a;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0
}

.section-title .material-icons {
	color: #10365A;
	font-size: 20px
}

.specs-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
	width: 100%
}

@media(max-width: 1200px) {
	.specs-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width: 768px) {
	.specs-grid {
		gap: 8px;
		grid-template-columns: 1fr
	}
}

.spec-item {
	align-items: center;
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	padding: 12px 0
}

.spec-item:last-child {
	border-bottom: none
}

.spec-item .spec-label {
	color: #475569;
	font-size: 14px;
	font-weight: 500
}

.spec-item .spec-value {
	color: #0f172a;
	font-size: 14px;
	font-weight: 600
}

.files-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
	width: 100%
}

@media(max-width: 1024px) {
	.files-grid {
		gap: 12px;
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(max-width: 768px) {
	.files-grid {
		gap: 12px;
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width: 480px) {
	.files-grid {
		gap: 8px;
		grid-template-columns: 1fr
	}
}

.file-item {
	background: transparent;
	border: none;
	border-radius: 12px;
	box-shadow: none;
	padding: 16px;
	transition: all .3s ease
}

.file-item:hover {
	transform: translateY(-1px)
}

.file-item .file-header {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 12px
}

.file-item .file-header .material-icons {
	color: #10365A;
	font-size: 20px
}

.file-item .file-header .file-title {
	color: #0f172a;
	font-size: 16px;
	font-weight: 600
}

.file-item .file-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.file-item .file-links .file-link-container {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.file-item .file-links .file-preview-image {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	height: auto;
	max-height: 150px;
	max-width: 200px;
	-o-object-fit: contain;
	object-fit: contain;
	transition: all .3s ease;
	width: 100%
}

.file-item .file-links .file-preview-image:hover {
	border-color: #10365A;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: scale(1.02)
}

.file-item .file-links .first-image-card {
	cursor: pointer;
	position: relative
}

.file-item .file-links .first-image-card .file-preview-image {
	cursor: pointer
}

.file-item .file-links .first-image-card:hover {
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
	transform: translateY(-2px)
}

.file-item .file-links .remaining-count-badge {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background: #000000b3;
	border: 1px solid hsla(0, 0%, 100%, .2);
	border-radius: 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 8px;
	position: absolute;
	right: 8px;
	top: 8px;
	transition: all .3s ease;
	z-index: 2
}

.file-item .file-links .remaining-count-badge:hover {
	background: #000000e6;
	transform: scale(1.1)
}

.file-item .file-links .file-link {
	align-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #10365A;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 4px;
	padding: 8px 12px;
	text-decoration: none;
	transition: all .3s ease
}

.file-item .file-links .file-link:hover {
	background: #f0f9ff;
	border-color: #10365A;
	box-shadow: 0 1px 2px #0000000d;
	transform: translateY(-1px)
}

.file-item .file-links .file-link .material-icons {
	font-size: 16px
}

.contact-card {
	padding: 24px
}

.image-modal {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #000000f2;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000
}

.image-modal .modal-content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-height: 95vh;
	max-width: 95vw;
	padding: 20px;
	position: relative
}

.image-modal .modal-content .modal-close {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #000000b3;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	position: absolute;
	right: 10px;
	top: 10px;
	transition: all .3s ease;
	width: 44px;
	z-index: 10001
}

.image-modal .modal-content .modal-close:hover {
	background: #000000e6;
	transform: scale(1.1)
}

.image-modal .modal-content .modal-close .material-icons {
	font-size: 24px
}

.image-modal .modal-content .modal-image {
	border-radius: 12px;
	box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
	height: auto;
	max-height: 85vh;
	max-width: 90vw;
	-o-object-fit: contain;
	object-fit: contain;
	transition: opacity .3s ease;
	width: auto
}

.image-modal .modal-content .modal-nav {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #000000b3;
	border-radius: 25px;
	bottom: 20px;
	color: #fff;
	display: flex;
	gap: 16px;
	left: 50%;
	padding: 8px 16px;
	position: absolute;
	transform: translate(-50%)
}

.image-modal .modal-content .modal-nav .modal-nav-btn {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #fff3;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	transition: all .3s ease;
	width: 40px
}

.image-modal .modal-content .modal-nav .modal-nav-btn:hover:not(:disabled) {
	background: #ffffff4d;
	transform: scale(1.1)
}

.image-modal .modal-content .modal-nav .modal-nav-btn:disabled {
	cursor: not-allowed;
	opacity: .3;
	transform: none
}

.image-modal .modal-content .modal-nav .modal-nav-btn .material-icons {
	font-size: 20px
}

.image-modal .modal-content .modal-nav .modal-counter {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: #fff3;
	border-radius: 15px;
	font-size: 14px;
	font-weight: 500;
	min-width: 60px;
	padding: 4px 12px;
	text-align: center
}

@media(max-width: 768px) {
	.image-modal .modal-content {
		max-height: 100vh;
		max-width: 100vw;
		padding: 10px
	}

	.image-modal .modal-content .modal-image {
		max-height: 80vh;
		max-width: 95vw
	}

	.image-modal .modal-content .modal-close {
		height: 40px;
		right: 5px;
		top: 5px;
		width: 40px
	}

	.image-modal .modal-content .modal-close .material-icons {
		font-size: 20px
	}

	.image-modal .modal-content .modal-nav {
		bottom: 10px;
		gap: 8px
	}

	.image-modal .modal-content .modal-nav .modal-nav-btn {
		height: 36px;
		width: 36px
	}

	.image-modal .modal-content .modal-nav .modal-nav-btn .material-icons {
		font-size: 18px
	}

	.image-modal .modal-content .modal-nav .modal-counter {
		font-size: 12px;
		min-width: 50px;
		padding: 2px 8px
	}

	.car-detail-page {
		padding-top: 100px
	}

	.main-container {
		gap: 16px;
		max-width: 100%;
		overflow-x: hidden;
		padding: 12px;
		width: 100%
	}

	.animated-background .curve {
		opacity: .05
	}

	.animated-background .curve-1,
	.animated-background .curve-3,
	.animated-background .curve-5 {
		display: none
	}

	.main-image {
		touch-action: pan-y pinch-zoom;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		width: 100vw
	}

	.main-image .swipe-hint .swipe-hint-content {
		font-size: 12px;
		padding: 8px 12px
	}

	.main-image .swipe-hint .swipe-hint-content .material-icons {
		font-size: 16px
	}

	.header-section {
		gap: 16px;
		grid-template-columns: 1fr;
		width: 100%
	}

	.gallery-section {
		overflow: hidden;
		width: 100%
	}

	.main-image-container {
		aspect-ratio: 16/9;
		border-radius: 8px;
		width: 100%
	}

	.thumbnail-container {
		overflow-x: auto;
		padding-bottom: 8px
	}
}

@media(max-width: 768px) {
	.thumbnail-container::-webkit-scrollbar {
		display: none
	}

	.thumbnail-container {
		scrollbar-width: none;
		-ms-overflow-style: none
	}

	.thumbnail-container .thumbnail-item {
		flex-shrink: 0;
		height: 52px;
		width: 52px
	}

	.info-section {
		margin-top: 0;
		position: static;
		width: 100%
	}

	.core-content {
		box-sizing: border-box;
		width: 100%
	}

	.core-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding-bottom: 8px;
		width: 100%
	}

	.core-title {
		width: 100%
	}

	.core-title .brand-line {
		color: #333;
		flex-wrap: wrap;
		font-size: 14px;
		font-weight: 600;
		gap: 8px
	}

	.core-title .model-name {
		color: #111;
		display: block;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.12;
		margin-top: 6px
	}

	.guide-price-small {
		align-items: center;
		color: #666;
		display: flex;
		font-size: 12px;
		font-weight: 500;
		gap: 6px;
		margin-top: 6px
	}

	.core-meta {
		display: block;
		margin-bottom: 16px;
		width: 100%
	}

	.core-meta .meta-row {
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 8px
	}

	.core-meta .meta-item {
		flex: 1;
		font-size: 12px;
		min-width: calc(50% - 4px)
	}

	.core-meta .tags {
		margin-top: 4px;
		width: 100%
	}

	.core-actions {
		display: flex;
		gap: 12px
	}

	.core-actions .btn-primary,
	.core-actions .btn-secondary {
		flex: 1;
		font-size: 14px;
		padding: 12px
	}

	.content-section {
		margin-top: 20px;
		overflow: hidden;
		width: 100%
	}

	.video-thumbs {
		border-radius: 0;
		padding: 0
	}

	.video-thumbs-grid {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr)
	}

	.video-thumb-card .thumb-cover .video-overlay .video-type {
		font-size: 18px;
		margin-bottom: 6px
	}

	.video-thumb-card .thumb-cover .video-overlay .video-brand {
		font-size: 14px
	}

	.video-thumb-card .thumb-cover .video-overlay .video-brand .brand-logo {
		height: 28px;
		max-width: 160px
	}

	.video-thumb-card .thumb-cover .play-icon {
		bottom: 8px;
		font-size: 28px;
		right: 8px
	}

	.specs-section {
		padding: 16px
	}

	.specs-grid {
		gap: 8px;
		grid-template-columns: 1fr
	}

	.spec-item {
		font-size: 12px;
		padding: 12px 0
	}

	.files-section {
		padding: 16px
	}

	.files-grid {
		gap: 12px
	}

	.file-item {
		padding: 12px
	}

	.file-item .file-links {
		gap: 8px
	}

	.file-item .file-links .file-link-container {
		width: 100%
	}

	.file-item .file-links .file-preview-image {
		max-height: 120px;
		max-width: 100%
	}

	.file-item .file-links .remaining-count-badge {
		font-size: 11px;
		padding: 3px 6px;
		right: 6px;
		top: 6px
	}

	.file-item .file-links .file-link {
		justify-content: flex-start;
		padding: 8px 12px;
		width: 100%
	}
}

@media(max-width: 480px) {
	.car-detail-page {
		padding-top: 80px
	}

	.main-container {
		gap: 12px;
		max-width: 100%;
		overflow-x: hidden;
		padding: 8px;
		width: 100%
	}

	.animated-background .curve {
		animation-duration: 40s;
		opacity: .03
	}

	.animated-background .curve-2,
	.animated-background .curve-4,
	.animated-background .curve-6 {
		display: none
	}

	.header-section {
		gap: 12px;
		width: 100%
	}

	.gallery-section {
		overflow: hidden;
		width: 100%
	}

	.main-image-container {
		aspect-ratio: 4/3
	}

	.thumbnail-container::-webkit-scrollbar {
		display: none
	}

	.thumbnail-container {
		scrollbar-width: none;
		-ms-overflow-style: none
	}

	.thumbnail-container .thumbnail-item {
		height: 44px;
		width: 44px
	}

	.core-header {
		gap: 8px
	}

	.core-title .brand-line {
		font-size: 14px
	}

	.core-title .model-name {
		font-size: 12px
	}

	.core-meta .meta-item {
		align-items: center;
		color: #666;
		display: inline-flex;
		font-size: 13px;
		gap: 6px;
		min-width: 100%
	}

	.core-actions .btn-primary,
	.core-actions .btn-secondary {
		font-size: 12px;
		padding: 12px
	}

	.core-actions .contact-dropdown .contact-menu {
		border-radius: 12px;
		box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
		left: 50%;
		max-width: 90vw;
		position: fixed;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 280px;
		z-index: 1001
	}

	.core-actions .contact-dropdown .company-name {
		font-size: 12px;
		margin-top: 4px;
		padding: 4px 8px
	}

	.spec-item {
		font-size: 12px;
		padding: 8px 0
	}

	.file-item {
		padding: 12px
	}

	.file-item .file-header {
		margin-bottom: 8px
	}

	.file-item .file-header .file-title {
		font-size: 12px
	}

	.file-item .file-link {
		font-size: 12px;
		padding: 8px 12px
	}

	.section-title {
		font-size: 16px;
		margin-bottom: 12px
	}

	.files-section,
	.specs-section {
		padding: 12px
	}
}

.recommended-cars-section {
	background: #fff;
	margin-top: 24px;
	padding: 24px 0
}

.recommended-cars-section .section-header {
	margin-bottom: 24px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
	padding: 0 24px;
	text-align: left
}

.recommended-cars-section .section-header .section-title {
	align-items: center;
	color: #0f172a;
	display: flex;
	font-size: 24px;
	font-weight: 700;
	gap: 8px;
	justify-content: flex-start;
	margin-bottom: 8px
}

.recommended-cars-section .section-header .section-title .material-icons {
	color: #10365A;
	font-size: 24px
}

.recommended-cars-section .section-header .section-subtitle {
	color: #475569;
	font-size: 16px;
	margin: 0
}

.recommended-cars-section .recommended-cars-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 24px
}

@media(max-width: 1200px) {
	.recommended-cars-section .recommended-cars-grid {
		gap: 12px;
		grid-template-columns: repeat(4, 1fr)
	}
}

@media(max-width: 768px) {
	.recommended-cars-section .recommended-cars-grid {
		gap: 12px;
		grid-template-columns: repeat(2, 1fr);
		padding: 0 12px
	}
}

@media(max-width: 480px) {
	.recommended-cars-section .recommended-cars-grid {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr);
		padding: 0 8px
	}
}

@media(max-width: 1024px) {

	.recommended-cars-section .recommended-cars-grid,
	.recommended-cars-section .section-header {
		padding: 0 20px
	}
}

@media(max-width: 768px) {
	.recommended-cars-section {
		margin-top: 24px;
		padding: 16px 0
	}

	.recommended-cars-section .section-header {
		margin-bottom: 16px;
		padding: 0 16px
	}

	.recommended-cars-section .section-header .section-title {
		font-size: 20px
	}

	.recommended-cars-section .recommended-cars-grid {
		padding: 0 16px
	}
}

@media(max-width: 480px) {
	.recommended-cars-section {
		margin-top: 20px
	}

	.recommended-cars-section .recommended-cars-grid,
	.recommended-cars-section .section-header {
		padding: 0 12px
	}
}

.accessories-section {
	margin: 24px 0
}

.accessories-section .accessories-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
	width: 100%
}

@media(max-width: 1024px) {
	.accessories-section .accessories-grid {
		gap: 12px;
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(max-width: 768px) {
	.accessories-section .accessories-grid {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width: 480px) {
	.accessories-section .accessories-grid {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr)
	}
}

.accessories-section .accessory-item {
	align-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 2px #0000000d;
	display: flex;
	justify-content: space-between;
	min-height: 60px;
	padding: 16px;
	transition: all .3s ease
}

.accessories-section .accessory-item:hover {
	border-color: #10365A;
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	transform: translateY(-2px)
}

.accessories-section .accessory-item .accessory-name {
	color: #0f172a;
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin-right: 8px
}

.accessories-section .accessory-item .accessory-status {
	flex-shrink: 0
}

.accessories-section .accessory-item .accessory-status .iconfont {
	color: #000;
	font-size: 24px;
	transition: all .3s ease
}

.accessories-section .accessory-item .accessory-status .iconfont:hover {
	color: #333;
	transform: scale(1.1)
}

@media(min-width: 1025px) {
	.accessories-section .accessory-item {
		min-height: 55px;
		padding: 12px
	}

	.accessories-section .accessory-item .accessory-name {
		font-size: 14px
	}

	.accessories-section .accessory-item .accessory-status .iconfont {
		font-size: 20px
	}
}

@media(max-width: 768px) {
	.accessories-section {
		margin: 16px 0
	}

	.accessories-section .accessory-item {
		min-height: 60px;
		padding: 12px
	}

	.accessories-section .accessory-item .accessory-name {
		font-size: 14px;
		line-height: 1.3
	}

	.accessories-section .accessory-item .accessory-status .iconfont {
		font-size: 20px
	}
}

@media(max-width: 480px) {
	.accessories-section {
		margin: 12px 0
	}

	.accessories-section .accessory-item {
		min-height: 50px;
		padding: 8px
	}

	.accessories-section .accessory-item .accessory-name {
		font-size: 12px;
		line-height: 1.2
	}

	.accessories-section .accessory-item .accessory-status .iconfont {
		font-size: 18px
	}
}


.car-inspection-report {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0000000a;
    padding: 24px
}

.car-inspection-report .section-title {
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 12px
}

.car-inspection-report .section-title i {
    color: #10365A;
    font-size: 20px
}

.car-inspection-report .stats-overview {
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding: 12px 0
}

.car-inspection-report .stats-overview .stat-item {
    align-items: center;
    display: flex;
    gap: 6px
}

.car-inspection-report .stats-overview .stat-item .stat-label {
    color: #666;
    font-size: 14px
}

.car-inspection-report .stats-overview .stat-item .stat-number {
    font-size: 18px;
    font-weight: 600
}

.car-inspection-report .stats-overview .stat-item .stat-number.issue {
    color: #ff4d4f
}

.car-inspection-report .stats-overview .stat-item .stat-number.total {
    color: #10365A
}

.car-inspection-report .stats-overview .stat-item .stat-unit {
    color: #666;
    font-size: 14px
}

.car-inspection-report .stats-overview .legend {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-left: auto
}

.car-inspection-report .stats-overview .legend .legend-item {
    align-items: center;
    color: #666;
    display: flex;
    font-size: 13px;
    gap: 6px
}

.car-inspection-report .stats-overview .legend .legend-item .dot {
    border-radius: 50%;
    height: 10px;
    width: 10px
}

.car-inspection-report .stats-overview .legend .legend-item .dot.normal {
    background: #52c41a
}

.car-inspection-report .stats-overview .legend .legend-item .dot.issue {
    background: #ff4d4f
}

.car-inspection-report .stats-overview .legend .filter-switch {
    align-items: center;
    border-left: 1px solid #e8e8e8;
    display: flex;
    gap: 8px;
    margin-left: 16px;
    padding-left: 16px
}

.car-inspection-report .stats-overview .legend .filter-switch .filter-label {
    color: #666;
    font-size: 13px
}

.car-inspection-report .inspection-tabs .tab-header {
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    margin-bottom: 20px
}

.car-inspection-report .inspection-tabs .tab-header .tab-item {
    border-bottom: 2px solid transparent;
    color: #666;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: -2px;
    padding: 12px 24px;
    text-align: center;
    transition: all .3s;font-size: 16px;
}

.car-inspection-report .inspection-tabs .tab-header .tab-item:hover {
    color: #10365A;font-weight: bold;
}

.car-inspection-report .inspection-tabs .tab-header .tab-item.active {
    border-bottom-color: #10365A;
    color: #10365A;font-weight: bold;
}

.car-inspection-report .inspection-tabs .tab-content .items-grid {   
    gap: 12px;
    grid-template-columns: repeat(4,1fr);display: none;
}
.dig{ display: grid !important;}
.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item {
    align-items: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    transition: all .2s
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item:hover {
    background: #f5f5f5;
    border-color: #d9d9d9
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item.is-issue {
    background: #fff2f0;
    border-color: #ffccc7
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item.is-issue:hover {
    background: #fff1f0;
    border-color: #ffa39e
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-name {
    color: #333;
    flex: 1;
    font-size: 14px;
    line-height: 1.4
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status {
    align-items: center;
    display: flex;
    gap: 8px
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-icon {
    font-size: 22px
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-icon.normal {
    color: #52c41a
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-icon.issue {
    color: #ff4d4f
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 22px;
    justify-content: center;
    width: 22px
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge.status-minor {
    background: #faad14;
    color: #fff
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge.status-minor i {
    font-size: 16px
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge.status-moderate {
    background: #ff7a1a;
    color: #fff
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge.status-moderate i {
    font-size: 16px
}

.car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .arrow-icon {
    color: #999;
    font-size: 18px
}

.inspection-detail-dialog .detail-content {
    padding: 10px 0
}

.inspection-detail-dialog .detail-content .detail-status {
    margin-bottom: 16px
}

.inspection-detail-dialog .detail-content .detail-status .status-tag {
    border-radius: 16px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px
}

.inspection-detail-dialog .detail-content .detail-status .status-tag.status-normal {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #10365A
}

.inspection-detail-dialog .detail-content .detail-status .status-tag.status-minor {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #faad14
}

.inspection-detail-dialog .detail-content .detail-status .status-tag.status-moderate {
    background: #fff2e8;
    border: 1px solid #ffd8bf;
    color: #ff7a1a
}

.inspection-detail-dialog .detail-content .detail-remark {
    background: #f5f7fa;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 16px
}

.inspection-detail-dialog .detail-content .detail-remark p {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.inspection-detail-dialog .detail-content .detail-images h4 {
    color: #666;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px
}

.inspection-detail-dialog .detail-content .detail-images .images-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2,1fr)
}

.inspection-detail-dialog .detail-content .detail-images .images-grid .image-item {
    align-items: center;
    aspect-ratio: 1;
    background: #f5f7fa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    overflow: hidden
}

.inspection-detail-dialog .detail-content .detail-images .images-grid .image-item img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.inspection-detail-dialog .detail-content .detail-images .images-grid .image-item:hover {
    border-color: #91d5ff;
    box-shadow: 0 2px 8px #0000001a
}

.image-preview-dialog .preview-content {
    text-align: center
}

.image-preview-dialog .preview-content img {
    border-radius: 8px
}

.image-preview-dialog .preview-content .image-nav {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px
}

.image-preview-dialog .preview-content .image-nav .nav-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    transition: all .3s;
    width: 40px
}

.image-preview-dialog .preview-content .image-nav .nav-btn:hover:not(:disabled) {
    background: #f5f7fa;
    border-color: #91d5ff
}

.image-preview-dialog .preview-content .image-nav .nav-btn:disabled {
    cursor: not-allowed;
    opacity: .5
}

.image-preview-dialog .preview-content .image-nav .nav-btn i {
    color: #666;
    font-size: 24px
}

.image-preview-dialog .preview-content .image-nav .image-counter {
    color: #666;
    font-size: 14px
}

.no-inspection-data {
    padding: 32px 20px;
    text-align: center
}

.no-inspection-data .placeholder-content {
    align-items: center;
    display: flex;
    flex-direction: column
}

.no-inspection-data .placeholder-content .placeholder-text {
    color: #8c8c8c;
    font-size: 14px;
    margin-bottom: 20px
}

.no-inspection-data .placeholder-content .generate-report-btn {
    border-radius: 6px;
    font-size: 14px;
    padding: 10px 24px
}

@media(max-width: 768px) {
    .car-inspection-report {
        border-radius:8px;
        padding: 16px
    }

    .car-inspection-report .stats-overview {
        flex-wrap: wrap;
        gap: 12px
    }

    .car-inspection-report .stats-overview .stat-item .stat-label {
        font-size: 13px
    }

    .car-inspection-report .stats-overview .stat-item .stat-number {
        font-size: 16px
    }

    .car-inspection-report .stats-overview .legend {
        gap: 12px
    }

    .car-inspection-report .stats-overview .legend .legend-item {
        font-size: 12px
    }

    .car-inspection-report .stats-overview .legend .legend-item .dot {
        height: 8px;
        width: 8px
    }

    .car-inspection-report .stats-overview .legend .filter-switch {
        margin-left: 12px;
        padding-left: 12px
    }

    .car-inspection-report .stats-overview .legend .filter-switch .filter-label {
        font-size: 12px
    }

    .car-inspection-report .inspection-tabs .tab-header .tab-item {
        font-size: 13px;
        padding: 10px 16px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid {
        gap: 8px;
        grid-template-columns: repeat(2,1fr)
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item {
        padding: 10px 12px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-name {
        font-size: 13px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-icon {
        font-size: 20px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge {
        height: 20px;
        width: 20px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge i {
        font-size: 14px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .arrow-icon {
        font-size: 16px
    }

    .no-inspection-data {
        padding: 24px 16px
    }

    .no-inspection-data .placeholder-content .placeholder-text {
        font-size: 14px;
        margin-bottom: 16px
    }

    .no-inspection-data .placeholder-content .generate-report-btn {
        font-size: 13px;
        padding: 8px 20px
    }
}

@media(max-width: 480px) {
    .car-inspection-report {
        padding:12px
    }

    .car-inspection-report .stats-overview {
        gap: 10px
    }

    .car-inspection-report .stats-overview .stat-item .stat-label {
        font-size: 12px
    }

    .car-inspection-report .stats-overview .stat-item .stat-number {
        font-size: 14px
    }

    .car-inspection-report .stats-overview .legend {
        gap: 8px
    }

    .car-inspection-report .stats-overview .legend .legend-item {
        font-size: 11px
    }

    .car-inspection-report .stats-overview .legend .legend-item .dot {
        height: 6px;
        width: 6px
    }

    .car-inspection-report .stats-overview .legend .filter-switch {
        margin-left: 8px;
        padding-left: 8px
    }

    .car-inspection-report .stats-overview .legend .filter-switch .filter-label {
        font-size: 11px
    }

    .car-inspection-report .inspection-tabs .tab-header .tab-item {
        font-size: 12px;
        padding: 8px 12px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid {
        gap: 6px;
        grid-template-columns: 1fr
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item {
        padding: 8px 10px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-name {
        font-size: 12px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-icon {
        font-size: 18px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge {
        height: 18px;
        width: 18px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .status-badge i {
        font-size: 12px
    }

    .car-inspection-report .inspection-tabs .tab-content .items-grid .grid-item .item-status .arrow-icon {
        font-size: 14px
    }

    .no-inspection-data {
        padding: 20px 12px
    }

    .no-inspection-data .placeholder-content .placeholder-text {
        font-size: 13px;
        margin-bottom: 14px
    }

    .no-inspection-data .placeholder-content .generate-report-btn {
        font-size: 12px;
        padding: 8px 16px
    }
}