/* ==========================================================
   Zit Taxi — Premium Homepage Hero FINAL
   UI only. Booking/fare calculator CSS is untouched.
   ========================================================== */
.bt-premium-hero{
	--hero-navy:#061a35;
	--hero-navy-2:#0b3158;
	--hero-yellow:#ffb914;
	--hero-white:#fff;
	position:relative;
	overflow:hidden;
	isolation:isolate;
	background:linear-gradient(135deg,#07182f 0%,#082d50 55%,#0e5077 100%);
	color:#fff;
}
.bt-premium-hero *{box-sizing:border-box}
.bt-premium-hero .bt-hero-container{
	width:min(1280px,calc(100% - 40px));
	min-height:650px;
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(460px,.92fr);
	align-items:center;
	gap:42px;
	padding:52px 0 64px;
}
.bt-premium-hero .bt-hero-content{position:relative;z-index:4;max-width:650px}
.bt-premium-hero .bt-hero-eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	margin:0 0 22px;padding:9px 14px;border:1px solid rgba(255,255,255,.22);
	border-radius:999px;background:rgba(255,255,255,.07);font-size:13px;font-weight:800;
}
.bt-premium-hero .bt-hero-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#ffbd19;box-shadow:0 0 0 4px rgba(255,189,25,.12)}
.bt-premium-hero .bt-hero-title{margin:0 0 20px!important;color:#fff!important;font-size:clamp(44px,5vw,66px)!important;line-height:1.02!important;letter-spacing:-2px!important;font-weight:850!important}
.bt-premium-hero .bt-hero-title-main{display:block;color:#fff}
.bt-premium-hero .bt-hero-title-highlight{display:block;color:var(--hero-yellow);font-weight:850}
.bt-premium-hero .bt-hero-description{max-width:650px;margin:0 0 27px;color:rgba(255,255,255,.9);font-size:16px;line-height:1.65}
.bt-premium-hero .bt-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 27px}
.bt-premium-hero .bt-hero-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border-radius:10px;text-decoration:none!important;font-size:13px;font-weight:900;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.bt-premium-hero .bt-hero-btn:hover{transform:translateY(-2px)}
.bt-premium-hero .bt-hero-btn-primary{background:var(--hero-yellow);color:#13243d!important;box-shadow:0 10px 24px rgba(255,185,20,.18)}
.bt-premium-hero .bt-hero-btn-dark{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.32);color:#fff!important}
.bt-premium-hero .bt-hero-btn-whatsapp{background:#16a34a;color:#fff!important}
.bt-premium-hero .bt-hero-highlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:650px}
.bt-premium-hero .bt-hero-highlight{min-height:58px;padding:10px 11px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.055)}
.bt-premium-hero .bt-hero-highlight strong{display:block;color:var(--hero-yellow);font-size:12px;line-height:1.2}
.bt-premium-hero .bt-hero-highlight span{display:block;margin-top:5px;color:rgba(255,255,255,.8);font-size:10px;line-height:1.25;font-weight:700}
.bt-premium-hero .bt-hero-visual{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;min-width:0}
.bt-premium-hero .bt-hero-image-card{position:relative;width:100%;max-width:530px;aspect-ratio:1.28/1;overflow:hidden;border-radius:22px;background:#102b4c;box-shadow:0 25px 60px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}
.bt-premium-hero .bt-hero-image-card:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(4,18,35,.02) 35%,rgba(4,18,35,.28) 100%);pointer-events:none}
.bt-premium-hero .bt-hero-scene{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .45s ease,visibility .45s ease,transform .55s ease}
.bt-premium-hero .bt-hero-scene.is-active{opacity:1;visibility:visible;transform:scale(1)}
.bt-premium-hero .bt-vehicle-info-card{position:absolute;top:20px;right:20px;z-index:5;min-width:145px;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(7,24,44,.9);backdrop-filter:blur(9px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.bt-premium-hero .bt-vehicle-info-label{display:block;margin-bottom:5px;color:#aebed0;font-size:9px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.bt-premium-hero .bt-current-vehicle{display:block;color:#fff;font-size:14px;line-height:1.2;font-weight:900}
.bt-premium-hero .bt-current-vehicle-type{display:block;margin-top:4px;color:#ffbf18;font-size:9px;line-height:1.2;font-weight:800}
.bt-premium-hero .bt-vehicle-indicators{position:absolute;left:50%;bottom:16px;z-index:6;display:flex;align-items:center;gap:7px;transform:translateX(-50%)}
.bt-premium-hero .bt-vehicle-indicator{width:8px!important;height:8px!important;min-width:8px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#fff!important;opacity:.7;cursor:pointer;box-shadow:none!important}
.bt-premium-hero .bt-vehicle-indicator.is-active{width:22px!important;border-radius:20px!important;background:var(--hero-yellow)!important;opacity:1}
.bt-premium-hero .bt-hero-bottom-strip{position:absolute;left:0;right:0;bottom:0;z-index:4;border-top:1px solid rgba(255,255,255,.1);background:rgba(3,15,31,.3);backdrop-filter:blur(5px)}
.bt-premium-hero .bt-hero-bottom-inner{width:min(1280px,calc(100% - 40px));min-height:44px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:15px;overflow:hidden;white-space:nowrap}
.bt-premium-hero .bt-hero-bottom-inner span{color:rgba(255,255,255,.72);font-size:10px;font-weight:700}

@media(max-width:1100px){
	.bt-premium-hero .bt-hero-container{grid-template-columns:minmax(0,1fr) minmax(390px,.85fr);gap:24px}
	.bt-premium-hero .bt-hero-title{font-size:clamp(40px,5vw,58px)!important}
	.bt-premium-hero .bt-hero-highlights{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
	.bt-premium-hero .bt-hero-container{grid-template-columns:1fr;min-height:auto;text-align:center;padding:48px 0 72px}
	.bt-premium-hero .bt-hero-content{max-width:700px;margin:0 auto}
	.bt-premium-hero .bt-hero-actions,.bt-premium-hero .bt-hero-highlights{justify-content:center;margin-left:auto;margin-right:auto}
	.bt-premium-hero .bt-hero-visual{width:min(100%,620px);margin:0 auto}
	.bt-premium-hero .bt-hero-image-card{max-width:620px}
}
@media(max-width:600px){
	.bt-premium-hero .bt-hero-container{width:calc(100% - 24px);padding:36px 0 62px;gap:28px}
	.bt-premium-hero .bt-hero-eyebrow{font-size:11px;margin-bottom:17px}
	.bt-premium-hero .bt-hero-title{font-size:39px!important;letter-spacing:-1.1px!important;margin-bottom:16px!important}
	.bt-premium-hero .bt-hero-description{font-size:14px;line-height:1.6;margin-bottom:21px}
	.bt-premium-hero .bt-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	.bt-premium-hero .bt-hero-btn{min-height:46px;padding:10px 8px;font-size:12px}
	.bt-premium-hero .bt-hero-btn-whatsapp{grid-column:1/-1}
	.bt-premium-hero .bt-hero-highlights{gap:7px}
	.bt-premium-hero .bt-hero-highlight{min-height:54px;padding:9px 6px}
	.bt-premium-hero .bt-hero-highlight strong{font-size:11px}
	.bt-premium-hero .bt-hero-highlight span{font-size:9px}
	.bt-premium-hero .bt-hero-image-card{aspect-ratio:1.12/1;border-radius:16px}
	.bt-premium-hero .bt-vehicle-info-card{top:12px;right:12px;min-width:126px;padding:10px 11px}
	.bt-premium-hero .bt-current-vehicle{font-size:12px}
	.bt-premium-hero .bt-hero-bottom-inner{width:calc(100% - 24px);justify-content:flex-start;gap:24px;overflow-x:auto;scrollbar-width:none}
	.bt-premium-hero .bt-hero-bottom-inner::-webkit-scrollbar{display:none}
}

/* 5.3.7 homepage hero: full composite scenes, balanced two-column layout. */
.bt-premium-hero .bt-hero-container{
	width:min(1320px,calc(100% - 40px));
	min-height:620px;
	grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
	gap:42px;
	padding:42px 0 56px;
}
.bt-premium-hero .bt-hero-content{max-width:620px;}
.bt-premium-hero .bt-hero-visual{width:100%;}
.bt-premium-hero .bt-hero-image-card{
	width:100%;
	max-width:680px;
	aspect-ratio:16/9;
	border-radius:22px;
}
.bt-premium-hero .bt-hero-scene{
	background-size:cover;
	background-position:center center;
}
.bt-premium-hero .bt-hero-scene:after{display:none;}
.bt-premium-hero .bt-hero-image-card:after{
	background:linear-gradient(180deg,rgba(4,18,35,0) 45%,rgba(4,18,35,.18) 100%);
}
@media(max-width:1200px){
	.bt-premium-hero .bt-hero-container{grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:28px;}
	.bt-premium-hero .bt-hero-image-card{max-width:620px;}
}
@media(max-width:900px){
	.bt-premium-hero .bt-hero-container{width:min(100% - 28px,760px);grid-template-columns:1fr;min-height:auto;padding:42px 0 70px;}
	.bt-premium-hero .bt-hero-image-card{max-width:680px;}
}

/* 5.3.8 HERO GUARD: the homepage uses complete composite scene images.
 * Never render the old transparent/cut-out vehicle artwork inside the hero.
 * Fleet images remain untouched because this rule is scoped to the hero only.
 */
.bt-premium-hero .bt-hero-image-card .bt-hero-vehicle-image,
.bt-premium-hero .bt-hero-image-card img.bt-hero-vehicle-image,
.bt-premium-hero .bt-hero-image-card .bt-hero-car,
.bt-premium-hero .bt-hero-image-card .bt-transparent-car,
.bt-premium-hero .bt-hero-image-card [data-hero-car]{
	display:none !important;
	visibility:hidden !important;
	opacity:0 !important;
}


/* ==========================================================
   HERO SCENE RESTORE — background + vehicle artwork
   Visual-only repair. Booking/fare logic is untouched.
   The final Urbania slide uses the verified Ayodhya scene by
   itself so the old generic taxi artwork cannot be mismatched.
   ========================================================== */
.bt-premium-hero .bt-hero-image-card .bt-hero-scene{
	position:absolute;
	inset:0;
	display:block;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.bt-premium-hero .bt-hero-image-card .bt-hero-scene .bt-hero-vehicle-image{
	display:block !important;
	visibility:visible !important;
	opacity:1 !important;
	position:absolute;
	left:50%;
	bottom:4%;
	width:min(78%,560px);
	height:auto;
	max-width:none;
	max-height:78%;
	object-fit:contain;
	object-position:center bottom;
	z-index:3;
	filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
	pointer-events:none;
}
.bt-premium-hero .bt-hero-image-card .bt-hero-scene:not(.is-active) .bt-hero-vehicle-image{
	visibility:visible !important;
	opacity:1 !important;
}
.bt-premium-hero .bt-hero-image-card .bt-hero-scene-complete .bt-hero-vehicle-image{
	display:none !important;
}
.bt-premium-hero .bt-hero-image-card .bt-hero-scene-complete{
	background-position:center center;
}
.bt-premium-hero .bt-hero-image-card .bt-hero-scene-complete::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(180deg,rgba(4,18,35,0) 48%,rgba(4,18,35,.10) 100%);
	pointer-events:none;
}
@media(max-width:700px){
	.bt-premium-hero .bt-hero-image-card .bt-hero-scene .bt-hero-vehicle-image{
		width:88%;
		max-height:72%;
		bottom:5%;
	}
}

/* ==========================================================
   5.4.0 — FINAL 9-IMAGE HERO SLIDER
   Uses only the nine supplied composite hero images.
   No separate background/car artwork is rendered in the hero.
   ========================================================== */
.bt-premium-hero .bt-hero-image-card .bt-hero-scene {
	position:absolute;
	inset:0;
	display:block;
	overflow:hidden;
	background:none !important;
	background-image:none !important;
}

.bt-premium-hero .bt-hero-image-card .bt-hero-slide-image {
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	margin:0;
	object-fit:cover;
	object-position:center center;
	border:0;
	border-radius:0;
	z-index:1;
	filter:none;
	transform:none;
	pointer-events:none;
}

.bt-premium-hero .bt-hero-image-card .bt-hero-scene:not(.is-active) .bt-hero-slide-image {
	visibility:hidden;
	opacity:0;
}

.bt-premium-hero .bt-hero-image-card .bt-hero-scene.is-active .bt-hero-slide-image {
	visibility:visible;
	opacity:1;
}

/* The image itself contains the complete scene, so no vehicle overlay is used. */
.bt-premium-hero .bt-hero-image-card .bt-hero-scene .bt-hero-vehicle-image,
.bt-premium-hero .bt-hero-image-card .bt-hero-scene-complete .bt-hero-vehicle-image {
	display:none !important;
}

@media(max-width:600px){
	.bt-premium-hero .bt-hero-image-card {
		aspect-ratio:16/9;
	}
}

/* ==========================================================
   5.5.4 SAFE MOBILE HERO VISIBILITY FIX
   - Keep the existing composite hero image.
   - Do not change desktop layout.
   - Force the mobile visual/card/active image to remain rendered.
   - No booking, fare, slider or header logic changed.
   ========================================================== */
@media (max-width:900px){
	.bt-premium-hero .bt-hero-visual{
		display:flex !important;
		visibility:visible !important;
		opacity:1 !important;
		position:relative !important;
		z-index:3 !important;
		width:100% !important;
		min-width:0 !important;
	}

	.bt-premium-hero .bt-hero-image-card{
		display:block !important;
		visibility:visible !important;
		opacity:1 !important;
		position:relative !important;
		width:100% !important;
		max-width:680px !important;
		aspect-ratio:16/9 !important;
		min-height:0 !important;
	}

	.bt-premium-hero .bt-hero-scene{
		display:block !important;
	}

	.bt-premium-hero .bt-hero-scene.is-active{
		display:block !important;
		visibility:visible !important;
		opacity:1 !important;
	}

	.bt-premium-hero .bt-hero-scene.is-active .bt-hero-slide-image{
		display:block !important;
		visibility:visible !important;
		opacity:1 !important;
		width:100% !important;
		height:100% !important;
		object-fit:cover !important;
	}
}

@media (max-width:600px){
	.bt-premium-hero .bt-hero-container{
		gap:20px !important;
		padding-bottom:66px !important;
	}

	.bt-premium-hero .bt-hero-image-card{
		width:100% !important;
		aspect-ratio:16/9 !important;
		border-radius:16px !important;
	}
}