/* CORSA 3D Isometric Map Stage - Architectural Luxury Finish */
.iso-scene {
  position: absolute;
  inset: -30px -40px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  perspective: 1200px;
}
.iso-grid-canvas {
  position: absolute;
  width: 940px;
  height: 720px;
  transform: translateY(-8px) scale(1.02);
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 40px rgba(7, 60, 48, 0.12));
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, black 50%, transparent 96%);
  mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, black 50%, transparent 96%);
  transition: transform 0.25s var(--ease);
}
#stageMessage { display: none !important; }
.phone-stage {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  height: 640px !important;
  padding-top: 0 !important;
}
.phone-rig {
  margin-left: -110px !important;
  margin-top: 0 !important;
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(6deg) !important;
}
/* Floating 3D Ride Card (Matching Reference Design) */
.iso-floating-card {
  position: absolute;
  top: 120px;
  right: -5px;
  width: 195px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 14px 14px;
  color: #073c30;
  box-shadow: 0 20px 45px rgba(7, 60, 48, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 25;
  pointer-events: auto;
  transform: translateZ(100px) rotateY(-5deg) rotateX(2deg);
  animation: floatRideCard 4.5s ease-in-out infinite;
  direction: rtl;
}
@keyframes floatRideCard {
  0%, 100% { transform: translateZ(100px) translateY(0) rotateY(-5deg) rotateX(2deg); }
  50% { transform: translateZ(100px) translateY(-8px) rotateY(-3deg) rotateX(1deg); }
}
.iso-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.iso-card-title {
  font-size: 11px;
  font-weight: 700;
  color: #073c30;
}
.iso-card-eta-badge {
  font-size: 9px;
  font-weight: 600;
  color: #0c8253;
  background: rgba(14, 206, 123, 0.16);
  padding: 2px 8px;
  border-radius: 12px;
}
.iso-card-visual {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 6px;
}
.iso-car-svg {
  width: 135px;
  height: auto;
  animation: carSubtleBounce 3s ease-in-out infinite;
}
@keyframes carSubtleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
/* Stepper in Card */
.iso-card-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 4px;
}
.iso-stepper-line {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #e2ede6;
  z-index: 1;
}
.iso-stepper-progress {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 50%;
  height: 2px;
  background: #0ece7b;
  z-index: 2;
}
.iso-step-dot {
  position: relative;
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2ede6;
  border: 2px solid #fff;
  transition: all 0.3s;
}
.iso-step-dot.active {
  background: #0ece7b;
  box-shadow: 0 0 8px rgba(14, 206, 123, 0.8);
  transform: scale(1.2);
}
.iso-step-dot.passed {
  background: #073c30;
}
.iso-card-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #557563;
  margin-top: 6px;
  padding: 0 2px;
}
/* Controls and mobile */
.screen-controls { bottom: 18px !important; z-index: 20 !important; }
.hint { bottom: -4px !important; }
.iso-route-line {
  stroke-dasharray: 10 8;
  animation: isoRouteFlow 1.2s linear infinite;
}
@keyframes isoRouteFlow {
  to { stroke-dashoffset: -18; }
}
@media (max-width: 1050px) {
  .iso-floating-card {
    right: 5px;
    width: 175px;
    padding: 12px 10px;
  }
}
@media (max-width: 760px) {
  .phone-rig { margin-left: 0 !important; }
  .iso-scene { inset: -20px -30px; }
  .iso-grid-canvas { width: 560px; height: 460px; }
  .iso-floating-card { top: 4%; right: 10px; width: 165px; padding: 10px; }
  .iso-card-title { font-size: 10px; }
  .iso-card-eta-badge { font-size: 8.5px; }
  .iso-car-svg { width: 105px; }
}

/* Local refinement: the phone leads, the map supports. */
.iso-scene{inset:0;overflow:hidden;border-radius:32px}
.iso-grid-canvas{width:760px;height:590px;opacity:.45;transform:translateY(-12px) scale(.94);filter:none}
.phone-stage{height:650px!important;padding-bottom:90px!important;isolation:isolate}
.phone-rig{margin-left:-90px!important;margin-top:-15px!important;z-index:2}
.iso-floating-card{top:95px;right:0;width:172px;padding:12px;border:0;border-radius:16px;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;transform:none;z-index:3;box-shadow:0 14px 32px #073c301a}
.iso-card-head{gap:8px;flex-wrap:wrap}.iso-card-title{font-size:12px}.iso-card-eta-badge{font-size:10px;color:#426653;background:#e8f0e8}
.iso-card-visual{height:52px}.iso-car-svg{width:110px;animation:none}.iso-card-labels{font-size:10px}.iso-step-dot.active{box-shadow:none}.iso-route-line{animation:none}
.screen-controls{bottom:30px!important;z-index:4!important;gap:8px;background:#f5f2e9;padding:6px;border-radius:30px;box-shadow:0 8px 22px #073c3010}
.screen-controls button{min-height:44px!important;font-size:11px!important;padding:10px 14px!important;border:0;background:#e5e9df;color:#073c30}
.screen-controls button[aria-pressed=true]{background:#e9bf66;color:#073c30}.hint{bottom:4px!important;color:#526d5d!important}
@media(max-width:1050px){.iso-floating-card{right:0;width:155px}.phone-rig{margin-left:-70px!important}}
@media(max-width:760px){.phone-stage{height:640px!important;padding-top:85px!important;padding-bottom:85px!important}.phone-rig{margin-left:0!important;margin-top:0!important}.iso-scene{inset:35px -15px 70px}.iso-grid-canvas{width:510px;height:470px;opacity:.32}.iso-floating-card{top:8px;right:50%;transform:translateX(50%);width:220px;padding:12px 16px}.iso-card-head{flex-wrap:nowrap;margin:0}.iso-card-visual,.iso-card-stepper,.iso-card-labels{display:none}.screen-controls{bottom:28px!important;gap:5px;white-space:nowrap}.screen-controls button{font-size:10px!important;padding:9px 11px!important}.hint{bottom:2px!important}}
@media(prefers-reduced-motion:reduce){.iso-floating-card,.iso-car-svg,.iso-route-line{animation:none}}