/*
 * EUROSPACE — clean mobile price v6
 *
 * Purpose:
 * - remove the broken v5 JS grid logic;
 * - restore simple mobile layout based only on the actual price classes;
 * - no horizontal overflow;
 * - no synthetic grid rows / no grid-row: span;
 * - desktop remains unchanged.
 */

@media (max-width: 767px) {
    #prices,
    #prices .legacy-price-shell,
    #prices .legacy-price-content,
    #prices .legacy-price-group,
    #prices .legacy-price-table,
    #prices .legacy-price-row,
    #prices .legacy-price-row--stacked,
    #prices .legacy-price-row--language {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #prices {
        overflow-x: hidden !important;
    }

    #prices .legacy-price-shell,
    #prices .legacy-price-content,
    #prices .legacy-price-group {
        overflow: visible !important;
    }

    /* Tabs: compact and allowed to wrap. */
    #prices .legacy-price-main-tabs,
    #prices .legacy-price-subtabs,
    #prices .legacy-price-language-tabs,
    #prices [class*="legacy-price"][class*="tabs"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    #prices .legacy-price-main-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #prices .legacy-price-subtabs--translation,
    #prices .legacy-price-subtabs--countries {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #prices .legacy-price-subtabs--languages {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #prices .legacy-price-tab,
    #prices .legacy-price-main-tab,
    #prices .legacy-price-subtab,
    #prices .legacy-price-language-tab,
    #prices [class*="legacy-price"][class*="tab"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 6px 7px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;

        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.14 !important;
    }

    #prices .legacy-price-tab.is-active,
    #prices .legacy-price-main-tab.is-active,
    #prices .legacy-price-subtab.is-active,
    #prices .legacy-price-language-tab.is-active,
    #prices [class*="legacy-price"][class*="tab"].is-active,
    #prices [aria-selected="true"] {
        color: #52291c !important;
        background: #f2e9e4 !important;
        border-color: #b88f7f !important;
        font-weight: 500 !important;
        box-shadow: inset 0 0 0 1px rgba(82, 41, 28, .06) !important;
    }

    /* Mobile table itself is just a stack of compact rows. */
    #prices .legacy-price-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border: 1px solid #e3d7d1 !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    /* Desktop headings are redundant on mobile. */
    #prices .legacy-price-header,
    #prices .legacy-price-header--language,
    #prices .legacy-price-header--stacked {
        display: none !important;
    }

    /*
     * Ordinary price row:
     * 1st line  — service/document name
     * 2nd line  — price on the left, order on the right
     *
     * No explicit grid-row spans are used.
     */
    #prices .legacy-price-row,
    #prices .legacy-price-row--stacked {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        gap: 5px 10px !important;
        align-items: end !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 10px 11px !important;

        border-bottom: 1px solid #eee5e0 !important;
        background: #fff !important;
    }

    #prices .legacy-price-row:last-child,
    #prices .legacy-price-row--stacked:last-child {
        border-bottom: 0 !important;
    }

    #prices .legacy-price-name {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #52291c !important;
        background: transparent !important;

        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.22 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    #prices .legacy-price-name__title {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    #prices .legacy-price-value,
    #prices .legacy-price-value--stacked {
        grid-column: 1 !important;
        grid-row: auto !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #52291c !important;
        background: transparent !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    #prices .legacy-price-value--stacked {
        display: grid !important;
        gap: 3px !important;
    }

    #prices .legacy-price-lines {
        display: grid !important;
        gap: 3px !important;
        margin-top: 3px !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.18 !important;
    }

    #prices .legacy-price-order-cell {
        grid-column: 2 !important;
        grid-row: auto !important;
        align-self: end !important;
        justify-self: end !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #prices .legacy-price-order {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #52291c !important;
        background: transparent !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;

        white-space: nowrap !important;
    }

    #prices .legacy-price-order b {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    /*
     * Professional translation:
     * line 1 — language;
     * line 2 — two prices + order.
     */
    #prices .legacy-price-row--language {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            auto !important;
        grid-auto-rows: auto !important;
        gap: 5px 8px !important;
        align-items: end !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 10px 11px !important;

        border-bottom: 1px solid #eee5e0 !important;
        background: #fff !important;
    }

    #prices .legacy-price-row--language:last-child {
        border-bottom: 0 !important;
    }

    #prices .legacy-price-row--language .legacy-price-name {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    #prices .legacy-price-row--language .legacy-price-value {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
    }

    #prices .legacy-price-row--language .legacy-price-order-cell {
        grid-column: 3 !important;
        grid-row: auto !important;
        align-self: end !important;
        justify-self: end !important;
    }

    #prices .legacy-price-row--language .legacy-price-value:nth-of-type(1)::before {
        content: "На русский";
        display: block;
        margin-bottom: 2px;
        color: #897268;
        font-size: 9px;
        font-weight: 400;
        line-height: 1.1;
    }

    #prices .legacy-price-row--language .legacy-price-value:nth-of-type(2)::before {
        content: "С русского";
        display: block;
        margin-bottom: 2px;
        color: #897268;
        font-size: 9px;
        font-weight: 400;
        line-height: 1.1;
    }

    #prices .legacy-price-group__title {
        margin: 0 0 6px !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 1.18 !important;
    }

    #prices .legacy-price-group + .legacy-price-group {
        margin-top: 10px !important;
    }
}

@media (max-width: 380px) {
    #prices .legacy-price-row,
    #prices .legacy-price-row--stacked,
    #prices .legacy-price-row--language {
        padding: 9px !important;
    }

    #prices .legacy-price-name {
        font-size: 13px !important;
    }

    #prices .legacy-price-value,
    #prices .legacy-price-value--stacked {
        font-size: 13px !important;
    }

    #prices .legacy-price-order {
        font-size: 11px !important;
    }

    #prices .legacy-price-row--language {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    #prices .legacy-price-row--language .legacy-price-order-cell {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        margin-top: 2px !important;
    }
}