/*
 * Truck Ustaaz Pro - Cyber Product Card System
 * One card used everywhere via woocommerce/content-product.php
 */

/* Global cyber product card + grid */

:root {
	--tu-cc-bg: rgba(6, 10, 18, 0.86);
	--tu-cc-bg-2: rgba(10, 16, 26, 0.65);
	--tu-cc-stroke: rgba(0, 245, 255, 0.75);
	--tu-cc-stroke-soft: rgba(0, 245, 255, 0.32);
	--tu-cc-text: rgba(240, 250, 255, 0.92);
	--tu-cc-muted: rgba(240, 250, 255, 0.64);
	--tu-cc-accent: #00F5FF;
	--tu-cc-accent-2: #19D3FF;
	--tu-cc-green: #21f7b7;
	--tu-cc-radius: 18px;
	--tu-cc-shadow: 0 20px 70px rgba(0,0,0,0.58);
	--tu-cc-shadow-soft: 0 12px 28px rgba(0,0,0,0.36);
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	--tu-cols-desktop: 5;
	--tu-cols-tablet: 4;
	--tu-cols-mobile: 2;
	--tu-gap: 18px;
	--tu-card-min: 220px;
	--tu-cols-current: var(--tu-cols-desktop);
	--tu-track-min: calc((100% - ((var(--tu-cols-current) - 1) * var(--tu-gap))) / var(--tu-cols-current));
	--tu-track-min-clamped: max(var(--tu-card-min), var(--tu-track-min));

	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(var(--tu-track-min-clamped), 1fr)) !important;
	gap: var(--tu-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto;
}

body.tu-cols-desktop-1 .woocommerce ul.products,
body.tu-cols-desktop-1 .woocommerce-page ul.products { --tu-cols-desktop: 1; }
body.tu-cols-desktop-2 .woocommerce ul.products,
body.tu-cols-desktop-2 .woocommerce-page ul.products { --tu-cols-desktop: 2; }
body.tu-cols-desktop-3 .woocommerce ul.products,
body.tu-cols-desktop-3 .woocommerce-page ul.products { --tu-cols-desktop: 3; }
body.tu-cols-desktop-4 .woocommerce ul.products,
body.tu-cols-desktop-4 .woocommerce-page ul.products { --tu-cols-desktop: 4; }
body.tu-cols-desktop-5 .woocommerce ul.products,
body.tu-cols-desktop-5 .woocommerce-page ul.products { --tu-cols-desktop: 5; }
body.tu-cols-desktop-6 .woocommerce ul.products,
body.tu-cols-desktop-6 .woocommerce-page ul.products { --tu-cols-desktop: 6; }

body.tu-cols-tablet-1 .woocommerce ul.products,
body.tu-cols-tablet-1 .woocommerce-page ul.products { --tu-cols-tablet: 1; }
body.tu-cols-tablet-2 .woocommerce ul.products,
body.tu-cols-tablet-2 .woocommerce-page ul.products { --tu-cols-tablet: 2; }
body.tu-cols-tablet-3 .woocommerce ul.products,
body.tu-cols-tablet-3 .woocommerce-page ul.products { --tu-cols-tablet: 3; }
body.tu-cols-tablet-4 .woocommerce ul.products,
body.tu-cols-tablet-4 .woocommerce-page ul.products { --tu-cols-tablet: 4; }
body.tu-cols-tablet-5 .woocommerce ul.products,
body.tu-cols-tablet-5 .woocommerce-page ul.products { --tu-cols-tablet: 5; }
body.tu-cols-tablet-6 .woocommerce ul.products,
body.tu-cols-tablet-6 .woocommerce-page ul.products { --tu-cols-tablet: 6; }

body.tu-cols-mobile-1 .woocommerce ul.products,
body.tu-cols-mobile-1 .woocommerce-page ul.products { --tu-cols-mobile: 1; }
body.tu-cols-mobile-2 .woocommerce ul.products,
body.tu-cols-mobile-2 .woocommerce-page ul.products { --tu-cols-mobile: 2; }
body.tu-cols-mobile-3 .woocommerce ul.products,
body.tu-cols-mobile-3 .woocommerce-page ul.products { --tu-cols-mobile: 3; }
body.tu-cols-mobile-4 .woocommerce ul.products,
body.tu-cols-mobile-4 .woocommerce-page ul.products { --tu-cols-mobile: 4; }
body.tu-cols-mobile-5 .woocommerce ul.products,
body.tu-cols-mobile-5 .woocommerce-page ul.products { --tu-cols-mobile: 5; }
body.tu-cols-mobile-6 .woocommerce ul.products,
body.tu-cols-mobile-6 .woocommerce-page ul.products { --tu-cols-mobile: 6; }

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--tu-gap: 16px;
		--tu-cols-current: var(--tu-cols-tablet);
		--tu-track-min: calc((100% - ((var(--tu-cols-current) - 1) * var(--tu-gap))) / var(--tu-cols-current));
		--tu-track-min-clamped: max(var(--tu-card-min), var(--tu-track-min));
		grid-template-columns: repeat(auto-fit, minmax(var(--tu-track-min-clamped), 1fr)) !important;
		gap: var(--tu-gap) !important;
	}
}

@media (max-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--tu-gap: 14px;
		--tu-cols-current: var(--tu-cols-mobile);
		--tu-track-min: calc((100% - ((var(--tu-cols-current) - 1) * var(--tu-gap))) / var(--tu-cols-current));
		--tu-track-min-clamped: max(var(--tu-card-min), var(--tu-track-min));
		grid-template-columns: repeat(auto-fit, minmax(var(--tu-track-min-clamped), 1fr)) !important;
		gap: var(--tu-gap) !important;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.tu-product-card { list-style: none; }

/* Card */
.tu-cc {
	position: relative;
	min-width: 0;
	border-radius: var(--tu-cc-radius);
	background: linear-gradient(180deg, var(--tu-cc-bg), var(--tu-cc-bg-2));
	box-shadow: var(--tu-cc-shadow);
	overflow: hidden;
	border: 1px solid rgba(0, 245, 255, 0.14);
	backdrop-filter: blur(10px);
	padding: 16px 16px 14px;
	min-height: 340px;
}

.tu-cc__frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.96;
}

.tu-cc__frame svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 16px rgba(0,245,255,0.18));
}

.tu-cc__frame-outer,
.tu-cc__frame-inner {
	stroke: var(--tu-cc-stroke);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.tu-cc__frame-inner {
	stroke: rgba(0, 245, 255, 0.36);
	stroke-width: 1.4;
}

.tu-cc__frame-nodes circle {
	fill: rgba(0, 245, 255, 0.55);
	filter: drop-shadow(0 0 8px rgba(0,245,255,0.18));
}

/* Route header */
.tu-cc__route {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	margin: 0 0 10px;
	color: var(--tu-cc-text);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
}

.tu-cc__route-cap {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(0, 245, 255, 0.08);
	border: 1px solid rgba(0, 245, 255, 0.26);
	color: rgba(0, 245, 255, 0.95);
}

.tu-cc__route-from,
.tu-cc__route-to {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 44%;
}

.tu-cc__route-arrow { color: rgba(240, 250, 255, 0.70); }

/* Vehicle */
.tu-cc__vehicle {
	position: relative;
	border-radius: 16px;
	padding: 10px;
	background: radial-gradient(60% 70% at 50% 30%, rgba(0,245,255,0.12), rgba(0,0,0,0) 60%),
		linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	border: 1px solid rgba(0, 245, 255, 0.12);
	margin-bottom: 12px;
}

.tu-cc__vehicle-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.tu-cc__vehicle img {
	width: 100%;
	height: 118px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55));
}

.tu-cc__vehicle-shadow {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	height: 18px;
	background: radial-gradient(60% 120% at 50% 50%, rgba(0,0,0,0.65), rgba(0,0,0,0) 70%);
	filter: blur(2px);
	opacity: 0.75;
}

/* Bottom area */
.tu-cc__bottom {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.tu-cc__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

/* Custom features grid overriding default */
.tu-cc__features:has(.tu-cc__feature--custom) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding-top: 4px;
}

body.tu-card-features-off .tu-cc__features { display: none; }

.tu-cc__feature {
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: center;
	gap: 10px;
}

/* Custom feature item */
.tu-cc__feature--custom {
	display: flex;
	grid-template-columns: unset;
	width: auto;
}

.tu-cc__tile {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(0, 245, 255, 0.06);
	border: 1px solid rgba(0, 245, 255, 0.20);
	display: grid;
	place-items: center;
	position: relative;
	box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.tu-cc__tile--custom {
	width: 30px;
	height: 30px;
	border-radius: 8px; /* Slightly smaller radius for smaller icon */
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0px !important; /* Force padding 0 */
}

/* Light Mode support for custom icons */
body.tu-light .tu-cc__tile--custom img {
	/* No inversion needed here if they are colored PNGs/SVGs as requested */
}

/* If user wants light icons to stay light on dark background, no change.
   If user provides dark icons and wants them light on dark mode, we might need filter invert.
   Assuming user provides colored icons that work on both, or light-optimized icons.
*/

.tu-cc__tile--custom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tu-cc__tile svg {
	width: 30px;
	height: 30px;
}

.tu-cc__tile svg path,
.tu-cc__tile svg circle {
	stroke: rgba(0, 245, 255, 0.86);
	stroke-width: 3;
	fill: none;
	vector-effect: non-scaling-stroke;
}

.tu-cc__tile--shield svg path,
.tu-cc__tile--shield svg circle {
	stroke: rgba(33, 247, 183, 0.92);
}

.tu-cc__feature-text {
	color: var(--tu-cc-text);
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
}

/* Route viz */
.tu-cc__routeviz {
	padding: 6px 4px 0;
}

.tu-cc__route-svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.tu-cc__route-text-svg {
	fill: var(--tu-cc-text);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

body.tu-light .tu-cc__route-text-svg {
	fill: #222;
	filter: none;
	font-weight: 700;
}
	width: 100%;
	height: 62px;
}

.tu-cc__route-path {
	stroke: var(--tu-cc-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 6 4;
	filter: drop-shadow(0 0 5px var(--tu-cc-accent));
}

.tu-cc__route-path--mountain {
	stroke: #ff3b3b; /* Red */
	filter: drop-shadow(0 0 6px rgba(255, 59, 59, 0.6));
}

.tu-cc__route-path--kacha {
	stroke: #ffa500; /* Orange */
	filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.6));
}

.tu-cc__route-dot {
	fill: rgba(0, 245, 255, 0.75);
	filter: drop-shadow(0 0 10px rgba(0,245,255,0.16));
}

.tu-cc__flag path {
	stroke: rgba(0, 245, 255, 0.62);
	stroke-width: 3;
	fill: rgba(0, 245, 255, 0.10);
}

.tu-cc__flag circle {
	fill: rgba(0, 245, 255, 0.08);
	stroke: rgba(0, 245, 255, 0.62);
	stroke-width: 3;
}

/* Route animation toggle */
@keyframes tuRouteDash {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -90; }
}

body:not(.tu-route-anim-off) .tu-cc__route-path {
	animation: tuRouteDash 2.6s linear infinite;
}

body.tu-route-anim-off .tu-cc__route-path {
	animation: none;
}

/* Glow animation toggle */
@keyframes tuGlowPulse {
	0%, 100% { filter: drop-shadow(0 0 16px rgba(0,245,255,0.16)); }
	50% { filter: drop-shadow(0 0 28px rgba(0,245,255,0.24)); }
}

body:not(.tu-card-glow-off) .tu-cc__frame svg { animation: tuGlowPulse 2.8s ease-in-out infinite; }
body.tu-card-glow-off .tu-cc__frame svg { animation: none; filter: none; }

/* CTA */
.tu-cc__cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.tu-cc__price-from {
	font-size: 12px;
	color: var(--tu-cc-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.tu-cc__price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.tu-cc__price-currency {
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: rgba(0, 245, 255, 0.85);
}

.tu-cc__price-amount {
	font-weight: 900;
	font-size: 22px;
	color: rgba(240, 250, 255, 0.95);
}

.tu-cc__book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 32px;
	padding: 0 16px;
	border-radius: 999px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-weight: 900;
	font-size: 12px;
	color: rgba(240, 250, 255, 0.95);
	background: linear-gradient(90deg, rgba(0,245,255,0.14), rgba(25,211,255,0.34));
	border: 1px solid rgba(0, 245, 255, 0.42);
	box-shadow: 0 14px 36px rgba(0,245,255,0.14);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.tu-cc__book:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 44px rgba(0,245,255,0.18);
}

.tu-cc__brand {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 10px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(240, 250, 255, 0.52);
	pointer-events: none;
}

@media (max-width: 640px) {
	/* Scaling-only intent: shrink effects but keep structure */
	.tu-cc { box-shadow: var(--tu-cc-shadow-soft); }
	body.tu-card-glow-off .tu-cc { box-shadow: var(--tu-cc-shadow-soft); }
	.tu-cc__vehicle img { height: 104px; }
}
body.tu-light .tu-product-card .tu-card__cta .button:hover {
	box-shadow: 0 0 0 4px rgba(22, 160, 255, 0.10), 0 14px 36px rgba(22, 160, 255, 0.12);
}

/* Ensure Woo default title spacing doesn't leak */
.tu-product-card .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */
body.tu-light {
	--tu-cc-bg: #FFFFFF;
	--tu-cc-bg-2: #F2F7FC;
	--tu-cc-stroke: rgba(0, 119, 230, 0.55);
	--tu-cc-stroke-soft: rgba(0, 119, 230, 0.15);
	--tu-cc-text: #0A1E29;
	--tu-cc-muted: #556B7A;
	--tu-cc-accent: #0077E6;
	--tu-cc-accent-2: #005BB3;
	--tu-cc-green: #00A653;
	--tu-cc-shadow: 0 24px 70px rgba(0, 119, 230, 0.10);
	--tu-cc-shadow-soft: 0 12px 28px rgba(0, 119, 230, 0.06);
}

body.tu-light .tu-cc {
	border-color: rgba(0, 119, 230, 0.12);
	background: linear-gradient(180deg, var(--tu-cc-bg), var(--tu-cc-bg-2));
}

body.tu-light .tu-cc__frame svg {
	filter: drop-shadow(0 0 16px rgba(0, 119, 230, 0.08));
}

body.tu-light .tu-cc__frame-inner {
	stroke: rgba(0, 119, 230, 0.15);
}

body.tu-light .tu-cc__frame-nodes circle {
	fill: rgba(0, 119, 230, 0.20);
	filter: none;
}

body.tu-light .tu-cc__route-cap {
	background: rgba(0, 119, 230, 0.06);
	border-color: rgba(0, 119, 230, 0.15);
	color: #0077E6;
}

body.tu-light .tu-cc__route-arrow {
	color: var(--tu-cc-muted);
}

body.tu-light .tu-cc__vehicle {
	background: radial-gradient(60% 70% at 50% 30%, rgba(0, 119, 230, 0.04), rgba(255,255,255,0) 60%),
		linear-gradient(180deg, rgba(240, 245, 250, 0.5), rgba(255,255,255,0.9));
	border-color: rgba(0, 119, 230, 0.08);
}

body.tu-light .tu-cc__vehicle img {
	filter: drop-shadow(0 14px 24px rgba(0,0,0,0.12));
}

body.tu-light .tu-cc__vehicle-shadow {
	background: radial-gradient(60% 120% at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0) 70%);
}

body.tu-light .tu-cc__tile {
	background: rgba(0, 119, 230, 0.03);
	border-color: rgba(0, 119, 230, 0.12);
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

body.tu-light .tu-cc__tile svg path,
body.tu-light .tu-cc__tile svg circle {
	stroke: #0077E6;
}

body.tu-light .tu-cc__tile--shield svg path,
body.tu-light .tu-cc__tile--shield svg circle {
	stroke: #00A653;
}

body.tu-light .tu-cc__route-path {
	stroke: rgba(0, 119, 230, 0.30);
	filter: none;
}

body.tu-light .tu-cc__route-dot {
	fill: #0077E6;
	filter: none;
}

body.tu-light .tu-cc__flag path {
	stroke: #0077E6;
	fill: rgba(0, 119, 230, 0.05);
}

body.tu-light .tu-cc__flag circle {
	fill: #fff;
	stroke: #0077E6;
}

body.tu-light .tu-cc__price-currency {
	color: #0077E6;
}

body.tu-light .tu-cc__price-amount {
	color: #0A1E29;
}

body.tu-light .tu-cc__book {
	color: #fff;
	background: linear-gradient(90deg, #16A0FF, #0077E6);
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(0, 119, 230, 0.20);
}

body.tu-light .tu-cc__book:hover {
	box-shadow: 0 12px 28px rgba(0, 119, 230, 0.30);
	transform: translateY(-1px);
}

body.tu-light .tu-cc__brand {
	color: var(--tu-cc-muted);
}

/* Disable glow pulse in light mode */
body.tu-light:not(.tu-card-glow-off) .tu-cc__frame svg {
	animation: none;
}