/* ═══════════════════ ORDER MODAL ═══════════════════
   Model pages only (/brands/<make>/<model>/): a primary "Order" button next
   to the price, opening a one-step popup that already knows the car and the
   price (both set by the page's own pricing script) and only asks for a
   contact — same contact-method UI as the old homepage quiz's last step,
   without the three steps before it. Posts straight to lead.php, the
   amoCRM endpoint kept in place since the quiz form was removed (see
   PROJECT.md). Colors are hardcoded, same reasoning as contact-cta.css.

   This button now replaces .contact-cta on model pages entirely (removed
   there — see PROJECT.md 9ц) — the same Telegram/MAX/VK/phone choices live
   inside the popup below instead (.order-method-btn), styled like
   .contact-cta-msg/.contact-cta-phone so they still read as the same
   options, just one step deeper. */

.order-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 71px = 44px (.order-method-btn height below, same unit .contact-cta-msg
       uses) × φ (1.618) — same golden-ratio relationship as the site nav bar
       height (see the comment on .site-nav in each page's own <style>): the
       one CTA that matters most on the page is proportioned against the
       smaller choices it opens onto, not an arbitrary round number. */
    min-height: 71px;
    padding: 14px 22px;
    background: #FFCD00;
    color: #101820;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.order-cta:hover {
    background: #F5C000;
}

/* Disabled while the price API hasn't answered yet, or answered with
   nothing usable — see the order button dataset writes in each model
   page's own pricing script (els.orderBtn, renderPrice/fail). */
.order-cta:disabled {
    opacity: .5;
    cursor: default;
}

.order-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.order-modal[hidden] {
    display: none;
}

.order-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 32, .72);
}

.order-modal-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #101820;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.order-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.order-modal-close:hover {
    background: rgba(255, 255, 255, .16);
}

.order-modal-title {
    margin: 0 0 16px;
    padding-right: 28px;
    font-family: 'Muller', Inter, Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.order-modal-summary {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .06);
    border-radius: 10px;
}

.order-modal-car {
    margin: 0 0 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.order-modal-price {
    margin: 0;
    color: #FFCD00;
    font-size: 20px;
    font-weight: 900;
}

.order-modal-q {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 700;
}

/* Один столбец, не сетка 2×2, как раньше была на самой странице у убранного
   .contact-cta: попап узкий (max-width 420px), два «Заказать в Telegram»
   в ряд там не помещаются без переноса текста — см. PROJECT.md 9ц. */
.order-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

/* Тот же вид пилюли, что у .contact-cta-msg/.contact-cta-phone (иконка +
   подпись, а не голый текст) — эти кнопки и есть те самые способы связи,
   просто теперь выбираются внутри попапа, а не как отдельные ссылки на
   странице. 44px — высота, от которой в .order-cta выше взята высота 71px
   золотым сечением. */
.order-method-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 9px 18px 9px 12px;
    background: rgba(255, 255, 255, .08);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.order-method-btn:hover {
    background: rgba(255, 255, 255, .16);
}

.order-method-btn:active {
    transform: scale(.98);
}

.order-method-btn svg {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.order-method-btn.selected {
    background: #FFCD00;
    color: #101820;
}

/* From ~640px viewport up there's room for the four buttons in one row
   without shrinking icon or text: at that width the modal itself can
   afford to grow past its mobile 420px cap (600px fits comfortably —
   "Telegram"/"Позвонить" are the longest labels and still have slack),
   so the row layout stays true to the same pill styling everywhere
   instead of squeezing it down to fit. Below 640px (any phone, most
   tablets in portrait) that room isn't there, so it stays the single
   column above — four labelled pills in one row need real estate a
   phone screen doesn't have, not a smaller font. */
@media (min-width: 640px) {
    .order-modal-box {
        max-width: 600px;
    }

    .order-methods {
        flex-direction: row;
    }

    .order-method-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

.order-fgroup {
    margin-bottom: 14px;
}

.order-fgroup input {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.order-fgroup input::placeholder {
    color: rgba(255, 255, 255, .4);
}

.order-fgroup input.err {
    border-color: #FF5252;
}

.order-field-err {
    display: block;
    margin-top: 6px;
    color: #FF8A80;
    font-size: 13px;
}

.order-field-err[hidden] {
    display: none;
}

.order-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    background: #FFCD00;
    color: #101820;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.order-submit:disabled {
    opacity: .5;
    cursor: default;
}

.order-submit:not(:disabled):hover {
    background: #F5C000;
}

.order-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    border: 2px solid rgba(16, 24, 32, .3);
    border-top-color: #101820;
    border-radius: 50%;
    animation: order-spin .7s linear infinite;
}

.order-submit.loading .order-spinner {
    display: inline-block;
}

.order-submit.loading .btn-text {
    opacity: .7;
}

@keyframes order-spin {
    to {
        transform: rotate(360deg);
    }
}

.order-modal-success {
    text-align: center;
    padding: 12px 0 4px;
}

.order-modal-success[hidden] {
    display: none;
}

.order-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    background: rgba(255, 205, 0, .14);
    border-radius: 50%;
    color: #FFCD00;
    font-size: 26px;
}

.order-modal-success p {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}