/* ═══════════════════ CONTACT CTA ═══════════════════
   Replaces the "Get a quote"/"Leave a request" buttons that used to link
   to /#form on internal pages: a phone link plus messenger icons, shown
   inline, no modal or extra page. Colors are hardcoded (not the page's own
   --y/--yellow custom property) because internal pages don't agree on one
   brand yellow (see PROJECT.md) — this component should look the same
   everywhere regardless of which page it sits on. */

.contact-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Model pages (/brands/<make>/<model>/) used to stack the spec chips and
   this block as plain siblings; since 9ц the primary "Order" button
   (order-modal.css) replaces .contact-cta there entirely (its own
   Telegram/MAX/VK/phone choices now live inside the order popup instead —
   see PROJECT.md), so .hero-facts is followed by .order-cta, never by
   .contact-cta, on those pages. Rule kept under .hero-facts because other
   card-style placements of .contact-cta elsewhere on the site don't use
   that spacing and shouldn't pick it up by accident. */
.hero-facts + .order-cta {
    margin-top: 24px;
}

.contact-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 13px 22px;
    background: #FFCD00;
    color: #101820;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.contact-cta-phone:hover {
    background: #F5C000;
}

/* Icon + label ("Написать в <messenger>", "Заказать в <messenger>" on model
   pages — see PROJECT.md) — an icon alone didn't say what clicking it does,
   unlike the phone button's own visible number. Icons are each messenger's
   own colored mark (Telegram blue circle, MAX gradient, VK blue), not
   monochrome — they need to read at a glance, same as on the homepage's own
   messenger block. */
.contact-cta-msg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 18px 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}

.contact-cta-msg:hover {
    background: rgba(255, 255, 255, .16);
}

.contact-cta-msg:active {
    transform: scale(.98);
}

.contact-cta-msg svg {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Light-background pages (/policy/, /pdn-consent/ style) never carry this
   component today, but keep it legible if they ever do: a light "glass"
   background reads as a light grey pill instead of near-invisible white-on-white. */
.contact-cta--on-light .contact-cta-msg {
    background: rgba(16, 24, 32, .06);
    color: #101820;
}

.contact-cta--on-light .contact-cta-msg:hover {
    background: rgba(16, 24, 32, .12);
}

@media (max-width: 480px) {
    .contact-cta-phone,
    .contact-cta-msg {
        flex: 1 1 100%;
        justify-content: center;
    }
}