/* ===========================================================
   Tamil Nadu / Kerala / Karnataka taxi pages (places.php)
   Extras on top of coimbatore.css: moving car, road, safety.
   Everything here is prefixed .pl- so nothing else changes.
   =========================================================== */

/* ---------- Hero room for the road ---------- */
.pl-hero { padding-bottom: 150px; }
.cbe-chip.is-on { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.cbe-chip.is-on i { color: var(--black); }

/* ---------- The road ---------- */
.pl-road {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.pl-road::before {               /* asphalt */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(180deg, #1c1c1c 0%, #111 100%);
    border-top: 2px solid rgba(197,245,0,0.35);
}
.pl-lane {                       /* dashed centre line that scrolls */
    position: absolute;
    left: 0; right: 0; bottom: 26px;
    height: 4px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 34px, transparent 34px 70px);
    animation: pl-lane 1.1s linear infinite;
}
@keyframes pl-lane { to { background-position: -70px 0; } }

.pl-pin {
    position: absolute;
    bottom: 58px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}
.pl-pin i { color: var(--yellow); font-size: 18px; }
.pl-pin em { font-style: normal; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); padding: 3px 9px; border-radius: 99px; }
.pl-pin--a { left: 4%; }
.pl-pin--b { right: 4%; }
.pl-pin--b i { color: #ff6b5b; }

/* ---------- The car: drives across, wheels spin, slight bounce ---------- */
.pl-car {
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 120px;
    animation: pl-drive 11s cubic-bezier(.45,.05,.55,.95) infinite;
    will-change: transform;
}
.pl-car svg { display: block; animation: pl-bounce .5s ease-in-out infinite alternate; overflow: visible; }
.pl-car-body  { fill: var(--yellow); stroke: #6d8a00; stroke-width: 1.2; }
.pl-car-glass { fill: #0d1b26; opacity: .9; }
.pl-car-light { fill: #fff6b0; filter: drop-shadow(0 0 6px #fff6b0); }
.pl-car-text  { font: 800 9px/1 var(--font-head); fill: var(--black); letter-spacing: 1px; }
.pl-wheel circle { fill: #1a1a1a; stroke: #cfcfcf; stroke-width: 3; }
.pl-wheel path   { stroke: #cfcfcf; stroke-width: 2; }
.pl-wheel { animation: pl-spin .45s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes pl-drive {
    0%   { transform: translateX(-140px); }
    12%  { transform: translateX(calc(4vw + 30px)); }   /* picks up at A */
    18%  { transform: translateX(calc(4vw + 30px)); }
    82%  { transform: translateX(calc(96vw - 220px)); } /* arrives at B */
    88%  { transform: translateX(calc(96vw - 220px)); }
    100% { transform: translateX(calc(100vw + 40px)); }
}
@keyframes pl-bounce { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes pl-spin   { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pl-car, .pl-car svg, .pl-wheel, .pl-lane { animation: none; }
    .pl-car { transform: translateX(calc(50vw - 60px)); }
}

/* ---------- Safety ---------- */
.pl-safety { background: var(--black); color: var(--white); }
.pl-safety .section-title { color: var(--white); }
.pl-safety .section-desc  { color: rgba(255,255,255,0.68); }
.pl-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.pl-safe {
    background: var(--black-soft);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: transform var(--transition), border-color var(--transition);
}
.pl-safe:hover { transform: translateY(-3px); border-color: rgba(197,245,0,0.5); }
.pl-safe i {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(197,245,0,0.12);
    color: var(--yellow);
    font-size: 20px;
    margin-bottom: 14px;
}
.pl-safe h3 { font-size: 17px; margin-bottom: 6px; }
.pl-safe p  { color: rgba(255,255,255,0.68); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
    .pl-safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pl-hero { padding-bottom: 130px; }
    .pl-safety-grid { grid-template-columns: 1fr; }
    .pl-pin em { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
    .pl-car { width: 96px; }
    .pl-car svg { width: 96px; height: 38px; }
    @keyframes pl-drive {
        0%   { transform: translateX(-120px); }
        15%  { transform: translateX(8vw); }
        85%  { transform: translateX(calc(92vw - 110px)); }
        100% { transform: translateX(calc(100vw + 20px)); }
    }
}