/* =========================================================
   SHYAMSARTHI TRAVELS — CITY TAXI PAGES
   Premium shared stylesheet for taxi-service-in-*.php
   No PHP/HTML class changes required.
   ========================================================= */

:root {
    --cp-ink: #102033;
    --cp-ink-soft: #31445a;
    --cp-muted: #68788a;
    --cp-line: #e6ebf0;
    --cp-surface: #ffffff;
    --cp-surface-soft: #f7f9fb;
    --cp-surface-warm: #fff9f2;
    --cp-navy: #0c1b2d;
    --cp-navy-2: #132942;
    --cp-gold: #f7941d;
    --cp-gold-dark: #d97808;
    --cp-gold-soft: #fff0dc;
    --cp-success: #1f8a5b;
    --cp-radius: 22px;
    --cp-radius-sm: 15px;
    --cp-shadow: 0 18px 50px rgba(16, 32, 51, .10);
    --cp-shadow-hover: 0 24px 60px rgba(16, 32, 51, .16);
}

/* ===================== BASE ===================== */

.cp-hero,
.cp-intro,
.cp-services,
.cp-fleet,
.cp-routes,
.cp-local,
.cp-fare,
.cp-trust,
.cp-travel-info,
.cp-how,
.cp-faqs,
.cp-summary {
    position: relative;
    overflow: hidden;
    padding: 82px 0;
    color: var(--cp-ink);
    background: var(--cp-surface);
}

.cp-hero *,
.cp-intro *,
.cp-services *,
.cp-fleet *,
.cp-routes *,
.cp-local *,
.cp-fare *,
.cp-trust *,
.cp-travel-info *,
.cp-how *,
.cp-faqs *,
.cp-summary * {
    box-sizing: border-box;
}

.cp-intro,
.cp-fleet,
.cp-fare,
.cp-how,
.cp-summary {
    background: var(--cp-surface-soft);
}

.cp-services,
.cp-local,
.cp-travel-info,
.cp-faqs {
    background: var(--cp-surface);
}

.cp-summary {
    padding-bottom: 135px;
}

.cp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    padding: 7px 12px;
    border: 1px solid rgba(247, 148, 29, .22);
    border-radius: 999px;
    background: var(--cp-gold-soft);
    color: var(--cp-gold-dark);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.cp-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cp-gold);
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .12);
}

.cp-section-heading {
    max-width: 780px;
    margin: 0 0 42px;
}

.cp-section-heading h2,
.cp-intro-copy h2,
.cp-routes-copy h2,
.cp-local-copy h2,
.cp-trust-copy h2,
.cp-summary h2 {
    color: var(--cp-ink);
    font-size: clamp(27px, 3.2vw, 39px);
    line-height: 1.16;
    letter-spacing: -.025em;
    font-weight: 800;
}

.cp-section-heading h2 { margin: 0; }

.cp-intro-copy h2,
.cp-routes-copy h2,
.cp-local-copy h2,
.cp-trust-copy h2,
.cp-summary h2 { margin: 0 0 20px; }

.cp-intro p,
.cp-services p,
.cp-fleet p,
.cp-routes p,
.cp-local p,
.cp-fare p,
.cp-trust p,
.cp-travel-info p,
.cp-how p,
.cp-faqs p,
.cp-summary p {
    color: var(--cp-muted);
    line-height: 1.78;
}

/* ===================== BREADCRUMB ===================== */

.cp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: #8fa0b4;
    font-size: 13px;
}

.cp-breadcrumb a {
    color: #a9b8c8;
    text-decoration: none;
    transition: color .2s ease;
}

.cp-breadcrumb a:hover { color: #fff; }
.cp-breadcrumb .is-current { color: #ffd29c; }

/* ===================== HERO ===================== */

.cp-hero {
    padding-top: 56px;
    padding-bottom: 86px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(247,148,29,.20), transparent 31%),
        radial-gradient(circle at 92% 10%, rgba(61,111,164,.20), transparent 30%),
        linear-gradient(135deg, #091624 0%, #102842 58%, #0b1c2f 100%);
}

.cp-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -180px auto;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}

.cp-hero-coords {
    display: inline-block;
    margin-bottom: 16px;
    color: #ffbe70;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.cp-hero-title {
    max-width: 900px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(36px, 5.2vw, 62px);
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 850;
    text-wrap: balance;
}

.cp-hero-lede {
    max-width: 760px;
    margin: 0 0 38px;
    color: #c7d3df;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.75;
}

.cp-hero-media,
.cp-service-media,
.cp-fleet-media,
.cp-routes-media,
.cp-local-media,
.cp-trust-media {
    position: relative;
}

.cp-hero-media {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;
    background: #0b1725;
    box-shadow: 0 28px 70px rgba(0,0,0,.34);
}

.cp-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

@media (hover:hover) {
    .cp-hero-media:hover .cp-hero-photo { transform: scale(1.018); }
}

/* ===================== CITY IMAGE LABELS ===================== */

.cp-hero-media::after,
.cp-service-media::after,
.cp-fleet-media::after,
.cp-routes-media::after,
.cp-local-media::after,
.cp-trust-media::after {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    max-width: calc(100% - 36px);
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(9, 22, 36, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .01em;
    pointer-events: none;
}

.cp-hero-media::after { content: "Taxi Service in " var(--city-name); }
.cp-service-media::after { content: "Local Cab Service in " var(--city-name); }
.cp-fleet-media::after { content: "Taxi Fleet in " var(--city-name); }
.cp-routes-media::after { content: "Outstation Taxi from " var(--city-name); }
.cp-local-media::after { content: var(--city-name) " Sightseeing Taxi"; }
.cp-trust-media::after { content: "Professional Taxi Driver in " var(--city-name); }

/* ===================== INTRO ===================== */

.cp-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    gap: 58px;
    align-items: center;
}

.cp-intro-copy p { margin: 0 0 16px; }

.cp-intro-stats {
    display: grid;
    gap: 14px;
}

.cp-stat-card {
    position: relative;
    overflow: hidden;
    padding: 24px 20px;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-sm);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 30px rgba(16,32,51,.06);
    text-align: center;
}

.cp-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(var(--cp-gold), #ffbd6c);
}

.cp-stat-number {
    display: block;
    margin-bottom: 4px;
    color: var(--cp-ink);
    font-size: 28px;
    line-height: 1.05;
    font-weight: 850;
}

.cp-stat-label {
    display: block;
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ===================== SERVICES ===================== */

.cp-services-grid {
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.35fr);
    gap: 46px;
    align-items: start;
}

.cp-service-media,
.cp-routes-media,
.cp-local-media,
.cp-trust-media {
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    background: #eef2f5;
    box-shadow: var(--cp-shadow);
}

.cp-service-media img,
.cp-routes-media img,
.cp-local-media img,
.cp-trust-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .55s ease;
}

@media (hover:hover) {
    .cp-service-media:hover img,
    .cp-routes-media:hover img,
    .cp-local-media:hover img,
    .cp-trust-media:hover img { transform: scale(1.025); }
}

.cp-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
}

.cp-service-item,
.cp-fleet-category,
.cp-fare-card,
.cp-how-step,
.cp-faq-item {
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    box-shadow: 0 8px 24px rgba(16,32,51,.045);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cp-service-item {
    position: relative;
    padding: 23px;
    border-radius: var(--cp-radius-sm);
}

.cp-service-item::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 15px;
    border-radius: 99px;
    background: var(--cp-gold);
}

.cp-service-item h3 {
    margin: 0 0 8px;
    color: var(--cp-ink);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.cp-service-item p { margin: 0; font-size: 14px; line-height: 1.65; }

@media (hover:hover) {
    .cp-service-item:hover,
    .cp-fleet-category:hover,
    .cp-fare-card:hover,
    .cp-how-step:hover {
        transform: translateY(-4px);
        border-color: rgba(247,148,29,.34);
        box-shadow: var(--cp-shadow-hover);
    }
}

/* ===================== FLEET ===================== */

.cp-fleet-media {
    overflow: hidden;
    margin-bottom: 34px;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    background: #eef2f5;
    box-shadow: var(--cp-shadow);
}

.cp-fleet-media img {
    display: block;
    width: 100%;
    height: auto;
}

.cp-fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 17px;
}

.cp-fleet-category {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--cp-radius-sm);
}

.cp-fleet-category::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -24px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: rgba(247,148,29,.07);
}

.cp-fleet-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--cp-navy);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cp-fleet-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-fleet-list li {
    position: relative;
    padding-left: 18px;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.55;
}

.cp-fleet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-gold);
    box-shadow: 0 0 0 3px var(--cp-gold-soft);
}

.cp-fleet-list strong { color: var(--cp-ink); }

/* ===================== ROUTES ===================== */

.cp-routes {
    background:
        radial-gradient(circle at 88% 15%, rgba(247,148,29,.12), transparent 28%),
        linear-gradient(135deg, var(--cp-navy) 0%, var(--cp-navy-2) 100%);
}

.cp-routes .cp-eyebrow {
    border-color: rgba(255,184,92,.18);
    background: rgba(247,148,29,.12);
    color: #ffc47d;
}

.cp-routes-copy h2 { color: #fff; }
.cp-routes-copy p { color: #bdcad7; margin: 0 0 18px; }

.cp-routes-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(320px,.85fr);
    gap: 54px;
    align-items: center;
}

.cp-routes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.cp-routes-list li {
    position: relative;
    padding: 11px 13px 11px 31px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    color: #edf4fa;
    font-size: 13px;
    line-height: 1.35;
}

.cp-routes-list li::before {
    content: '→';
    position: absolute;
    left: 12px;
    color: #ffad49;
    font-weight: 900;
}

.cp-routes-media { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 55px rgba(0,0,0,.28); }

/* ===================== LOCAL ===================== */

.cp-local-grid {
    display: grid;
    grid-template-columns: minmax(320px,.9fr) minmax(0,1.2fr);
    gap: 56px;
    align-items: center;
}

.cp-local-copy p { margin: 0 0 16px; }

/* ===================== FARES ===================== */

.cp-fare-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.cp-fare-card {
    position: relative;
    overflow: hidden;
    padding: 25px 21px;
    border-radius: var(--cp-radius-sm);
}

.cp-fare-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cp-gold), #ffbf73);
}

.cp-fare-card h3 {
    margin: 0 0 10px;
    color: var(--cp-ink);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.cp-fare-card p { margin: 0; font-size: 13px; line-height: 1.65; }

/* ===================== TRUST ===================== */

.cp-trust {
    background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
}

.cp-trust-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.82fr);
    gap: 58px;
    align-items: center;
}

.cp-trust-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-trust-list li {
    position: relative;
    padding: 13px 15px 13px 43px;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    color: var(--cp-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

.cp-trust-list li::before {
    content: '✓';
    position: absolute;
    left: 14px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e9f7f0;
    color: var(--cp-success);
    font-size: 12px;
    font-weight: 900;
}

/* ===================== TRAVEL INFO ===================== */

.cp-travel-info .container,
.cp-summary .container {
    max-width: 920px;
}

.cp-travel-info .container {
    position: relative;
    padding-top: 4px;
}

.cp-travel-info p {
    margin: 0 0 18px;
    color: var(--cp-ink-soft);
    font-size: 15px;
    line-height: 1.85;
}

/* ===================== HOW IT WORKS ===================== */

.cp-how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
    counter-reset: none;
}

.cp-how-step {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding: 26px 22px;
    border-radius: var(--cp-radius-sm);
}

.cp-how-number {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    margin-bottom: 18px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--cp-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .04em;
}

.cp-how-step h3 {
    margin: 0 0 9px;
    color: var(--cp-ink);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.cp-how-step p { margin: 0; font-size: 13px; line-height: 1.65; }

/* ===================== FAQ ===================== */

.cp-faq-list {
    display: grid;
    gap: 12px;
    max-width: 940px;
}

.cp-faq-item {
    position: relative;
    padding: 21px 24px 21px 27px;
    border-radius: 14px;
}

.cp-faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17px;
    bottom: 17px;
    width: 3px;
    border-radius: 99px;
    background: var(--cp-gold);
}

.cp-faq-item h3 {
    margin: 0 0 8px;
    color: var(--cp-ink);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
}

.cp-faq-item p { margin: 0; font-size: 14px; line-height: 1.7; }

/* ===================== SUMMARY ===================== */

.cp-summary {
    background:
        radial-gradient(circle at 80% 20%, rgba(247,148,29,.09), transparent 30%),
        var(--cp-surface-soft);
}

.cp-summary .container {
    padding: 38px 40px;
    border: 1px solid var(--cp-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--cp-shadow);
}

.cp-summary p {
    margin: 0;
    color: var(--cp-ink-soft);
    font-size: 15px;
    line-height: 1.8;
}

/* ===================== ACCESSIBILITY / MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
    .cp-hero-photo,
    .cp-service-media img,
    .cp-routes-media img,
    .cp-local-media img,
    .cp-trust-media img,
    .cp-service-item,
    .cp-fleet-category,
    .cp-fare-card,
    .cp-how-step {
        transition: none !important;
    }
}

/* ===================== TABLET ===================== */

@media (max-width: 992px) {
    .cp-hero,
    .cp-intro,
    .cp-services,
    .cp-fleet,
    .cp-routes,
    .cp-local,
    .cp-fare,
    .cp-trust,
    .cp-travel-info,
    .cp-how,
    .cp-faqs,
    .cp-summary {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .cp-summary { padding-bottom: 125px; }

    .cp-intro-grid,
    .cp-services-grid,
    .cp-routes-grid,
    .cp-local-grid,
    .cp-trust-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .cp-intro-stats { grid-template-columns: repeat(3, 1fr); }
    .cp-fleet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cp-fare-grid,
    .cp-how-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .cp-service-media,
    .cp-routes-media,
    .cp-local-media,
    .cp-trust-media { max-width: 760px; }
}

/* ===================== MOBILE ===================== */

@media (max-width: 640px) {
    .cp-hero,
    .cp-intro,
    .cp-services,
    .cp-fleet,
    .cp-routes,
    .cp-local,
    .cp-fare,
    .cp-trust,
    .cp-travel-info,
    .cp-how,
    .cp-faqs {
        padding: 52px 0;
    }

    .cp-hero { padding-top: 38px; padding-bottom: 56px; }
    .cp-summary { padding-top: 52px; padding-bottom: 145px; }

    .cp-breadcrumb { margin-bottom: 18px; font-size: 12px; }
    .cp-hero-coords { margin-bottom: 12px; font-size: 10px; }

    .cp-hero-title {
        font-size: clamp(32px, 10vw, 42px);
        line-height: 1.08;
    }

    .cp-hero-lede { margin-bottom: 28px; font-size: 15px; line-height: 1.7; }

    .cp-hero-media { border-radius: 18px; }

    .cp-section-heading { margin-bottom: 30px; }

    .cp-section-heading h2,
    .cp-intro-copy h2,
    .cp-routes-copy h2,
    .cp-local-copy h2,
    .cp-trust-copy h2,
    .cp-summary h2 {
        font-size: 27px;
        line-height: 1.2;
    }

    .cp-intro-grid,
    .cp-services-grid,
    .cp-routes-grid,
    .cp-local-grid,
    .cp-trust-grid { gap: 30px; }

    .cp-intro-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
    .cp-stat-card { padding: 18px 8px; border-radius: 12px; }
    .cp-stat-number { font-size: 21px; }
    .cp-stat-label { font-size: 9px; letter-spacing: .02em; }

    .cp-service-list,
    .cp-fleet-grid,
    .cp-fare-grid,
    .cp-how-grid,
    .cp-routes-list {
        grid-template-columns: 1fr;
    }

    .cp-service-list,
    .cp-fleet-grid,
    .cp-fare-grid,
    .cp-how-grid { gap: 12px; }

    .cp-service-item,
    .cp-fleet-category,
    .cp-fare-card,
    .cp-how-step { padding: 20px; }

    .cp-how-step { min-height: 0; }

    .cp-hero-media::after,
    .cp-service-media::after,
    .cp-fleet-media::after,
    .cp-routes-media::after,
    .cp-local-media::after,
    .cp-trust-media::after {
        left: 11px;
        bottom: 11px;
        max-width: calc(100% - 22px);
        padding: 8px 11px;
        border-radius: 9px;
        font-size: 11px;
    }

    .cp-summary .container {
        padding: 27px 22px;
        border-radius: 17px;
    }
}