/* XG-V2 — Unified utility icon + action color policy
   Scope: taxi frontend actions/items only. Social brand artwork is intentionally preserved.
   Policy:
   - Blue/dark surface: icon + text white; hover yellow.
   - White/light surface: icon + text blue; hover red.
   - Yellow CTA: icon + text dark; hover keeps high contrast.
   - No utility icon uses red as its resting/default color.
*/
:root{
  --taxi-icon-blue:#0f6aa8;
  --taxi-icon-blue-strong:#075d99;
  --taxi-icon-blue-soft:#eaf5fc;
  --taxi-icon-white:#ffffff;
  --taxi-icon-ink:#102236;
  --taxi-icon-yellow:#ffca18;
  --taxi-icon-red-hover:#d71920;
  --taxi-call-green:#16a34a;
  --taxi-call-green-strong:#12823c;
}

/* Bootstrap/font icons and inline SVGs should inherit from their actual component. */
.txs-body :where(.bi,.fa,.fas,.far,.fab),
.taxi-service-site :where(.bi,.fa,.fas,.far,.fab){transition:color .18s ease!important}
.txs-body :where(a,button) svg,
.taxi-service-site :where(a,button) svg{transition:color .18s ease,stroke .18s ease,fill .18s ease!important}

/* ===== Call / booking actions: GREEN brand recognition ===== */
.ct5-local-service-page-host :is(.lsp-btn--call,.lsp-call-contact__primary,.lsp-call-inline-actions a:first-child,.lsp-call-mobile-cta a.is-call),
.txs-vf-hotline,
.txm-btn-primary[href^="tel:"],
.txm-planner-button[href^="tel:"],
.drv-btn-primary[href^="tel:"],
.txf-btn-primary[href^="tel:"],
.txp-contact-p3-channel.primary[href^="tel:"],
.txp-contact-p3-channel[href^="tel:"][class*="primary"],
a[href^="tel:"][class*="btn-success"],
a[href^="tel:"][class*="btn-outline-success"]{
  background:var(--taxi-call-green)!important;
  color:var(--taxi-icon-white)!important;
  border-color:var(--taxi-call-green)!important;
}
.ct5-local-service-page-host :is(.lsp-btn--call,.lsp-call-contact__primary,.lsp-call-inline-actions a:first-child,.lsp-call-mobile-cta a.is-call) :where(i,svg){
  color:currentColor!important;stroke:currentColor!important;
}
.ct5-local-service-page-host :is(.lsp-btn--call,.lsp-call-contact__primary,.lsp-call-inline-actions a:first-child,.lsp-call-mobile-cta a.is-call):hover,
.txs-vf-hotline:hover,
.txs-vf-hotline:focus-visible,
.txm-btn-primary[href^="tel:"]:hover,
.txm-planner-button[href^="tel:"]:hover,
.drv-btn-primary[href^="tel:"]:hover,
.txf-btn-primary[href^="tel:"]:hover,
.txp-contact-p3-channel.primary[href^="tel:"]:hover,
.txp-contact-p3-channel[href^="tel:"][class*="primary"]:hover,
a[href^="tel:"][class*="btn-success"]:hover,
a[href^="tel:"][class*="btn-outline-success"]:hover{
  background:var(--taxi-call-green-strong)!important;
  color:var(--taxi-icon-yellow)!important;
  border-color:var(--taxi-call-green-strong)!important;
}

/* White/light action: blue at rest, red only on hover. */
.ct5-local-service-page-host :is(.lsp-btn--zalo,.lsp-call-contact__secondary,.lsp-call-inline-actions a:not(:first-child),.lsp-call-mobile-cta a:not(.is-call)){
  background:#fff!important;
  color:var(--taxi-icon-blue)!important;
  border-color:#cbdce7!important;
}
.ct5-local-service-page-host :is(.lsp-btn--zalo,.lsp-call-contact__secondary,.lsp-call-inline-actions a:not(:first-child),.lsp-call-mobile-cta a:not(.is-call)) :where(i,svg){
  color:currentColor!important;stroke:currentColor!important;
}
.ct5-local-service-page-host :is(.lsp-btn--zalo,.lsp-call-contact__secondary,.lsp-call-inline-actions a:not(:first-child),.lsp-call-mobile-cta a:not(.is-call)):hover{
  background:#fff!important;
  color:var(--taxi-icon-red-hover)!important;
  border-color:var(--taxi-icon-red-hover)!important;
}

/* White cards/items: soft-blue icon tile, blue icon. Hover may turn red. */
.ct5-local-service-page-host :is(.lsp-call-needs article>i,.lsp-call-hero__trust i,.lsp-call-contact__note i,.lsp-feature-list i,.lsp-entity-grid i){
  background:var(--taxi-icon-blue-soft)!important;
  color:var(--taxi-icon-blue)!important;
}
.ct5-local-service-page-host .lsp-call-needs article:hover>i,
.ct5-local-service-page-host .lsp-feature-list>*:hover i,
.ct5-local-service-page-host .lsp-entity-grid>*:hover i{
  color:var(--taxi-icon-red-hover)!important;
}

/* ===== Taxi homepage action/item icons ===== */
.txm-home :is(.txm-service-icon,.txm-field-icon,.txm-intent span,.txm-local-card-icon,.txm-hero-trust span){
  color:var(--taxi-icon-blue)!important;
}
.txm-home .txm-service-card h3{color:#0d3262!important;transition:color .18s ease!important}
.txm-home .txm-service-card:hover :is(.txm-service-icon,h3),
.txm-home .txm-field:focus-within .txm-field-icon,
.txm-home .txm-intent:hover span{
  color:var(--taxi-icon-red-hover)!important;
}

/* Header phone CTA uses green background; icon/text inherit white and hover yellow. */
.txs-vf-hotline,
.txs-vf-hotline:visited{
  background:var(--taxi-call-green)!important;
  border-color:var(--taxi-call-green)!important;
  color:var(--taxi-icon-white)!important;
}
.txs-vf-hotline :where(i,svg){color:currentColor!important;stroke:currentColor!important}
.txs-vf-hotline:hover,
.txs-vf-hotline:focus-visible{
  background:var(--taxi-call-green-strong)!important;
  border-color:var(--taxi-call-green-strong)!important;
  color:var(--taxi-icon-yellow)!important;
}

/* Mobile main call button/call choices: green recognition. */
.txs-vf-mobile-call-main{
  background:transparent!important;
  color:#374151!important;
  border-color:transparent!important;
}
.txs-vf-mobile-call-main:hover,
.txs-vf-mobile-call-main:focus-visible{
  background:transparent!important;
  color:#166534!important;
  border-color:transparent!important;
}
.txs-vf-mobile-phone-pop-card a[href^="tel:"],
.txs-vf-mobile-sheet-list a[href^="tel:"]{
  background:#fff!important;
  color:var(--taxi-icon-blue)!important;
  border-color:#dbe5ec!important;
}
.txs-vf-mobile-phone-pop-card a[href^="tel:"]:hover,
.txs-vf-mobile-sheet-list a[href^="tel:"]:hover{
  background:#f8fbfd!important;
  color:var(--taxi-icon-red-hover)!important;
  border-color:var(--taxi-icon-red-hover)!important;
}

/* White mobile contact sheets: blue text/icons; red hover, except brand image artwork. */
.txs-vf-mobile-sheet-list a,
.txs-vf-mobile-phone-pop-card a{
  color:var(--taxi-icon-blue)!important;
}
.txs-vf-mobile-sheet-list a :where(.bi,i:not([class*="txs-icon-"])),
.txs-vf-mobile-phone-pop-card a :where(.bi,i){color:currentColor!important}
.txs-vf-mobile-sheet-list a:hover,
.txs-vf-mobile-phone-pop-card a:hover{
  color:var(--taxi-icon-red-hover)!important;
  border-color:var(--taxi-icon-red-hover)!important;
}

/* Generic UI icon variables: remove old red resting icon state. */
:root{
  --taxi-ui-global-icon-color:var(--taxi-icon-blue)!important;
  --taxi-ui-global-icon-bg:var(--taxi-icon-blue-soft)!important;
}

/* Header/menu icons on white surfaces use blue, and only become red on hover. */
.taxi-service-site :where(.txs-vf-navbar,.txs-vf-mobile-panel) a :where(.bi,.fa,.fas,.far),
.txs-body :where(.txs-vf-navbar,.txs-vf-mobile-panel) a :where(.bi,.fa,.fas,.far){
  color:var(--taxi-icon-blue)!important;
}
.taxi-service-site :where(.txs-vf-navbar,.txs-vf-mobile-panel) a:hover :where(.bi,.fa,.fas,.far),
.txs-body :where(.txs-vf-navbar,.txs-vf-mobile-panel) a:hover :where(.bi,.fa,.fas,.far){
  color:var(--taxi-icon-red-hover)!important;
}

/* Dark surfaces: force utility icon/text to white, yellow on hover. */
.ct5-local-service-page-host :is(.lsp-call-overview__lead,.lsp-final-cta) a:not(.lsp-call-inline-actions a),
.txs-body :is(.txs-footer,.txs-footer-pro) a{
  --taxi-dark-action-color:var(--taxi-icon-white);
}
.ct5-local-service-page-host :is(.lsp-call-overview__lead,.lsp-final-cta) a :where(i,svg),
.txs-body :is(.txs-footer,.txs-footer-pro) a :where(i,svg){color:currentColor!important;stroke:currentColor!important}
.ct5-local-service-page-host :is(.lsp-call-overview__lead,.lsp-final-cta) a:hover,
.txs-body :is(.txs-footer,.txs-footer-pro) a:hover{color:var(--taxi-icon-yellow)!important}

/* Yellow CTAs: dark icon/text for contrast, blue on hover rather than red. */
.txm-btn-primary,
.txm-planner-button,
[class*="taxi-"] .btn-warning,
[class*="txs-"] .btn-warning{
  color:var(--taxi-icon-ink)!important;
}
.txm-btn-primary :where(i,svg),
.txm-planner-button :where(i,svg){color:currentColor!important;stroke:currentColor!important}
.txm-btn-primary:hover,
.txm-planner-button:hover{color:var(--taxi-icon-blue-strong)!important}

/* Never paint utility Bootstrap icons red by default inside common Taxi UI surfaces. */
.ct5-local-service-page-host :where(.lsp-page,.ct5-shop-page) :where(.bi-telephone-fill,.bi-chat-dots-fill,.bi-geo-alt-fill,.bi-clock-fill,.bi-car-front-fill,.bi-signpost-split-fill,.bi-airplane,.bi-shield-check):not([style*="color"]),
.txs-body :where(.bi-telephone-fill,.bi-chat-dots-fill,.bi-geo-alt-fill,.bi-clock-fill,.bi-car-front-fill,.bi-signpost-split-fill,.bi-airplane,.bi-shield-check):not([style*="color"]){
  color:inherit!important;
}


/* ============================================================
   XG-V2 — DARK / BLUE SURFACE CONTRAST POLICY
   Rule: blue/dark background => primary copy is white;
         secondary copy uses a light-blue/white tint.
   This is deliberately scoped to known frontend dark surfaces,
   not to brand logos or arbitrary inline elements.
   ============================================================ */
:root{
  --taxi-dark-copy:#ffffff;
  --taxi-dark-copy-muted:#d7e6f1;
  --taxi-dark-copy-soft:#b9d6e9;
}

/* Local Service / Money Page dark call panel */
.ct5-local-service-page-host .lsp-call-overview__lead{
  color:var(--taxi-dark-copy)!important;
}
.ct5-local-service-page-host .lsp-call-overview__lead :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--taxi-dark-copy)!important;
}
.ct5-local-service-page-host .lsp-call-overview__lead :is(p,small,li){
  color:var(--taxi-dark-copy-muted)!important;
}
.ct5-local-service-page-host .lsp-call-overview__lead .lsp-call-label{
  color:#8fd0f6!important;
}

/* Common Taxi SEO dark sections */
:is(.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9,.txs-status-card,.txs-video-placeholder,.txs-footer){
  color:var(--taxi-dark-copy)!important;
}
:is(.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9,.txs-status-card,.txs-video-placeholder,.txs-footer)
:is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--taxi-dark-copy)!important;
}
:is(.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9,.txs-status-card,.txs-video-placeholder,.txs-footer)
:is(p,small,li,span:not(.badge):not(.txs-chip):not(.txs-kicker)){
  color:var(--taxi-dark-copy-muted);
}

/* Route SEO dark hero */
.route-seo-page .route-hero{
  color:var(--taxi-dark-copy)!important;
}
.route-seo-page .route-hero :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--taxi-dark-copy)!important;
}
.route-seo-page .route-hero :is(p,small,li){
  color:rgba(255,255,255,.84)!important;
}

/* Marketplace dark hero */
.wt-market-hero{
  color:var(--taxi-dark-copy)!important;
}
.wt-market-hero :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--taxi-dark-copy)!important;
}
.wt-market-hero :is(p,small,li){
  color:rgba(255,255,255,.84)!important;
}

/* Dark CTA/information blocks found in service templates. */
.health-booking,
.health-info{
  color:var(--taxi-dark-copy)!important;
}
.health-booking :is(h1,h2,h3,h4,h5,h6,strong,b),
.health-info :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--taxi-dark-copy)!important;
}
.health-booking :is(p,small,li),
.health-info :is(p,small,li){
  color:rgba(255,255,255,.82)!important;
}

/* Preserve action hierarchy on dark/blue backgrounds:
   normal = white; hover = yellow. */
:is(.lsp-call-overview__lead,.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9,.route-seo-page .route-hero)
a:not([class*="secondary"]):not([class*="zalo"]){
  color:var(--taxi-dark-copy);
}
:is(.lsp-call-overview__lead,.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9,.route-seo-page .route-hero)
a:not([class*="secondary"]):not([class*="zalo"]):hover{
  color:var(--taxi-icon-yellow)!important;
}

/* Buttons with explicit white surface remain blue; do not inherit dark-section white. */
:is(.lsp-call-overview__lead,.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9)
:is(.lsp-call-inline-actions a:not(:first-child),.btn-light,.btn-white,[class*="secondary"]){
  color:var(--taxi-icon-blue-strong)!important;
}
:is(.lsp-call-overview__lead,.txs-section-dark,.txs-activity-section,.txs-support-lead,.txs-route-lead-v9)
:is(.lsp-call-inline-actions a:not(:first-child),.btn-light,.btn-white,[class*="secondary"]):hover{
  color:var(--taxi-icon-red-hover)!important;
}