/* =============================================================
 * spravki-polish.css — visual refresh for /spravki/
 * Created: 2026-05-28
 *
 * Scope: CSS-only, additive, scoped tightly to .card_zakazat_docs
 *        and immediate children. NO form-input changes, NO
 *        container changes, NO JS state assumptions.
 *
 * Loaded after order.css / newStyle.css via showCss() in
 * /application/reestr/templates/pay/index.php
 *
 * Rollback: remove showCss line + delete this file.
 * ============================================================= */

/* ---- 1. Service cards: soft card style
 *      Padding uses longhand + raised specificity (.dokym-2)
 *      to defeat order.css's existing padding-left/right: 0. */
.dokym-2 .card_zakazat_docs,
.card_zakazat_docs {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding-top: 18px;
    padding-right: 18px;
    padding-bottom: 16px;
    padding-left: 18px;
    margin-bottom: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
    .card_zakazat_docs:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.05);
    }
}

/* ---- 2. Card title polish ---- */
.card_zakazat_docs .doct-title {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    letter-spacing: -.005em;
}

/* ---- 3. Card description: better readability ---- */
.card_zakazat_docs .doct-descr {
    color: #334155;
}

/* ---- 4. Radio indicator: subtle modernisation
 *      Empty when not selected, filled green with white
 *      check when checkbox is checked. Uses :has() —
 *      gracefully degrades to "empty circle" on legacy. */
.card_zakazat_docs .radio_input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #ffffff;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease;
}
/* hide the check by default — circle stays empty */
.card_zakazat_docs .radio_input .fa-check {
    color: transparent;
    font-size: 12px;
    line-height: 1;
    transition: color .15s ease;
}
/* selected state via :has — works in all current browsers */
.card_zakazat_docs:has(input[type="checkbox"]:checked) .radio_input {
    background-color: #16a34a;
    border-color: #16a34a;
}
.card_zakazat_docs:has(input[type="checkbox"]:checked) .radio_input .fa-check {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
    font-weight: 900;
}

/* ---- 5. <mark> on price and time: calm variant
 *      Scoped to this section only — global <mark> elsewhere
 *      stays default.                                       */
.card_zakazat_docs mark,
.dokym-2 .docPrice mark {
    background: transparent;
    color: #0f172a;
    font-weight: 700;
    padding: 0;
}

/* ---- 6. Meta icons (.fa-clock-o, .fa-money) — soft tint ---- */
.card_zakazat_docs i.fa-clock-o,
.card_zakazat_docs i.fa-money {
    color: #15803d;
    margin-right: 4px;
}

/* ---- 7. "Пример документа" link as pill outline ---- */
.card_zakazat_docs .rightcol-order-more-post-exmpl {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: #ffffff;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
@media (hover: hover) {
    .card_zakazat_docs .rightcol-order-more-post-exmpl:hover {
        border-color: #16a34a;
        color: #15803d;
        background: #f0fdf4;
    }
}

/* ---- 8. Step badge — covers BOTH "Шаг 1 из 2" (<p class="step">
 *      in .block2.first) and "Шаг 2 из 2" (<div class="step">
 *      in <form> .fl_r). #pay_page raises specificity over
 *      order.css's default .step rule.                       */
#pay_page .step,
.block2.first p.step,
.fl_r .step,
.fl_r div.step {
    display: inline-block;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    margin: 0 0 14px !important;
    width: auto !important;
    height: auto !important;
    text-align: center;
    letter-spacing: .01em;
    text-shadow: none;
    box-shadow: none;
}

/* ---- 9. Section lead (".zag") ---- */
.block2.first p.zag {
    color: #0f172a;
    font-weight: 600;
    line-height: 1.45;
}

/* ---- 10. Primary CTA polish
 *      Two selectors, both scoped to elements on /spravki/:
 *        #submit-2  — "Заказать документы" (main pill submit)
 *        .btn-to-order-doc.btn-primary — alt order buttons.
 *      !important needed because order.css / theme set
 *      background-color on .button--base with high specificity. */
/* Specificity raised to 0,2,2,1 to beat
 * "#pay_page .green_knopka input[type=submit]" rule
 * in main.css (0,1,2,1 + !important).                       */
#pay_page #submit-2.button--base,
#pay_page input#submit-2[type="submit"],
#pay_page .green_knopka input#submit-2[type="submit"] {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(22,163,74,.22);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    letter-spacing: .005em;
}
@media (hover: hover) {
    #pay_page #submit-2.button--base:hover,
    #pay_page input#submit-2[type="submit"]:hover,
    #pay_page .green_knopka input#submit-2[type="submit"]:hover {
        background: #15803d !important;
        background-color: #15803d !important;
        border-color: #15803d !important;
        box-shadow: 0 10px 28px rgba(22,163,74,.28);
    }
}
#pay_page #submit-2.button--base:active,
#pay_page input#submit-2[type="submit"]:active {
    transform: translateY(1px);
}

.btn-to-order-doc.btn-primary:not(:disabled),
a.btn-to-order-doc.btn-primary {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(22,163,74,.18);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
@media (hover: hover) {
    .btn-to-order-doc.btn-primary:not(:disabled):hover,
    a.btn-to-order-doc.btn-primary:hover {
        background-color: #15803d !important;
        border-color: #15803d !important;
        box-shadow: 0 8px 20px rgba(22,163,74,.22);
    }
}

/* ---- 11. Mobile polish ---- */
@media (max-width: 576px) {
    .card_zakazat_docs { padding: 14px; margin-bottom: 12px; }
    .card_zakazat_docs .doct-title { font-size: 16px; }
}

/* ---- 11.5. Validation hint
 *      The form has `novalidate=""` which disables native HTML5
 *      validation for kadastr-no fields, so :user-invalid does
 *      not fire there. Instead we hook into the existing JS
 *      validator: it shows .order_validate_fail with inline
 *      style="display: block" next to empty fields. We use
 *      :has() to highlight the card and input whenever the
 *      sibling error message is shown by JS.                  */

/* Highlight the card AND its input when JS reveals its
 * .order_validate_fail message — ONLY while the card is also
 * selected (input:checked). If the user un-selects the card,
 * JS hides .payed_info but the inline display:block on
 * .order_validate_fail can stay; the extra :has(input:checked)
 * makes sure the red highlight goes away with the selection. */
.card_zakazat_docs:has(input[type="checkbox"]:checked):has(.order_validate_fail[style*="block"]) {
    border-color: #ef4444 !important;
    background-color: #fef5f5 !important;
}
.card_zakazat_docs:has(input[type="checkbox"]:checked):has(.order_validate_fail[style*="block"]) .radio_input {
    border-color: #ef4444;
}
.card_zakazat_docs:has(input[type="checkbox"]:checked):has(.order_validate_fail[style*="block"]) input[name="kadastr-no[]"] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.14) !important;
}

/* Email field — uses native :user-invalid (its form has no
 * novalidate).                                                */
#email-2:user-invalid,
input#email-2[required]:user-invalid {
    border: 1px solid #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.14) !important;
}

/* The existing .order_validate_fail error text — strengthen it */
.card_zakazat_docs .order_validate_fail,
.payed_info .order_validate_fail {
    color: #b91c1c;
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    padding-top: 0;
}

/* ---- 12. Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    .card_zakazat_docs,
    .btn-to-order-doc.btn-primary,
    a.btn-to-order-doc.btn-primary,
    #submit-2.button--base,
    .card_zakazat_docs .rightcol-order-more-post-exmpl { transition: none !important; }
}