/* =========================================================
   ADDITIONAL PRICES
========================================================= */

.additional-prices {
    padding:
        var(--section-spacing)
        0;

    background:
        #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.additional-prices__inner {
    width: 100%;

    margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.additional-prices__header {
    width: 100%;

    margin:
        0
        auto
        22px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.additional-prices__title {
    margin:
        0
        0
        9px;

    color:
        var(--color-text);

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.additional-prices__description {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   TABLE
========================================================= */

.additional-prices__table {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    background:
        #ffffff;

    border:
        1px solid
        var(--color-border);

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   DEFAULT TABLE
   SERVICE + PRICE
========================================================= */

.additional-prices__table-head,
.additional-prices__row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px;

    width: 100%;
}


/* =========================================================
   TABLE WITH UNIT
========================================================= */

.additional-prices__table--has-unit
.additional-prices__table-head,
.additional-prices__table--has-unit
.additional-prices__row {
    grid-template-columns:
        minmax(0, 1fr)
        150px
        220px;
}


/* =========================================================
   TABLE HEAD
========================================================= */

.additional-prices__table-head {
    background:
        #f2f6f8;

    border-bottom:
        1px solid
        var(--color-border);

    color:
        #333333;

    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}


.additional-prices__table-head > div {
    display: flex;

    min-width: 0;
    min-height: 48px;

    align-items: center;
    justify-content: flex-start;

    padding:
        12px
        16px;

    text-align: left;

    white-space: nowrap;
}


/* =========================================================
   HEAD BORDERS
========================================================= */

.additional-prices__head-unit,
.additional-prices__head-price {
    border-left:
        1px solid
        var(--color-border);
}


/* =========================================================
   ROW
========================================================= */

.additional-prices__row {
    border-bottom:
        1px solid
        var(--color-border);
}


.additional-prices__row:last-child {
    border-bottom: 0;
}


.additional-prices__row:nth-child(even) {
    background:
        #fafafa;
}


/* =========================================================
   CELLS
========================================================= */

.additional-prices__service,
.additional-prices__unit,
.additional-prices__price {
    display: flex;

    min-width: 0;
    min-height: 54px;

    align-items: center;
    justify-content: flex-start;

    padding:
        13px
        16px;

    text-align: left;
}


/* =========================================================
   SERVICE
========================================================= */

.additional-prices__service {
    color:
        #444444;

    font-size: 16px;
    line-height: 1.45;

    white-space: nowrap;
}


/* =========================================================
   UNIT
========================================================= */

.additional-prices__unit {
    color:
        var(--color-text-secondary);

    border-left:
        1px solid
        var(--color-border);

    font-size: 15px;
    line-height: 1.4;

    white-space: nowrap;
}


/* =========================================================
   PRICE
========================================================= */

.additional-prices__price {
    flex-wrap: nowrap;

    gap: 7px;

    color:
        #333333;

    border-left:
        1px solid
        var(--color-border);

    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   OLD PRICE
========================================================= */

.additional-prices__old-price {
    color:
        var(--color-text-secondary);

    font-weight: 400;

    white-space: nowrap;

    text-decoration:
        line-through;

    text-decoration-thickness:
        1px;
}


/* =========================================================
   CURRENT PRICE
========================================================= */

.additional-prices__current-price {
    color:
        var(--color-text);

    font-weight: 600;

    white-space: nowrap;
}


.additional-prices__old-price
+ .additional-prices__current-price {
    color:
        #d62828;

    font-weight: 700;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .additional-prices__row {
        transition:
            background-color
            var(--transition-fast);
    }


    .additional-prices__row:hover {
        background:
            var(--service-primary-soft);
    }


    .additional-prices__row:hover
    .additional-prices__price {
        color:
            var(--service-primary-hover);
    }

}


/* =========================================================
   NOTE
========================================================= */

.additional-prices__note {
    margin:
        10px
        0
        0;

    color:
        #888888;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   ACTION
========================================================= */

.additional-prices__action {
    display: flex;

    justify-content: center;

    margin-top: 32px;
}


/* =========================================================
   BUTTON
========================================================= */

.additional-prices__button {
    min-width: 175px;

    padding-inline:
        22px;

    border-radius:
        3px;

    font-size: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .additional-prices__title {
        font-size: 26px;
    }


    .additional-prices__table-head,
    .additional-prices__row {
        grid-template-columns:
            minmax(0, 1fr)
            170px;
    }


    .additional-prices__table--has-unit
    .additional-prices__table-head,
    .additional-prices__table--has-unit
    .additional-prices__row {
        grid-template-columns:
            minmax(0, 1fr)
            120px
            170px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .additional-prices__header {
        margin-bottom: 20px;

        text-align: center;
    }


    .additional-prices__title {
        font-size: 24px;

        text-align: center;
    }


    /* =====================================================
       TABLE
    ===================================================== */

    .additional-prices__table {
        width: 100%;

        overflow: hidden;
    }


    /* =====================================================
       DEFAULT TABLE
       SERVICE + PRICE
    ===================================================== */

    .additional-prices__table-head,
    .additional-prices__row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            130px;

        width: 100%;
        min-width: 0;
    }


    /* =====================================================
       TABLE WITH UNIT
       SERVICE + UNIT LEFT / PRICE RIGHT
    ===================================================== */

    .additional-prices__table--has-unit
    .additional-prices__table-head,
    .additional-prices__table--has-unit
    .additional-prices__row {
        grid-template-columns:
            minmax(0, 1fr)
            130px;

        width: 100%;
        min-width: 0;
    }


    /* =====================================================
       TABLE HEAD
    ===================================================== */

    .additional-prices__table-head {
        font-size: 15px;
    }


    .additional-prices__table-head > div {
        display: flex;

        min-width: 0;
        min-height: 46px;

        align-items: center;
        justify-content: flex-start;

        padding:
            11px
            12px;

        font-size: 15px;
        line-height: 1.3;

        text-align: left;

        white-space: normal;
    }


    /* =====================================================
       UNIT HEAD
       Hidden on mobile
    ===================================================== */

    .additional-prices__table--has-unit
    .additional-prices__head-unit {
        display: none;
    }


    .additional-prices__table--has-unit
    .additional-prices__head-service {
        grid-column: 1;
    }


    .additional-prices__table--has-unit
    .additional-prices__head-price {
        grid-column: 2;

        border-left:
            1px solid
            var(--color-border);
    }


    /* =====================================================
       ROW
    ===================================================== */

    .additional-prices__row {
        position: relative;

        align-items: stretch;
    }


    /* =====================================================
       SERVICE
    ===================================================== */

    .additional-prices__service {
        grid-column: 1;

        min-width: 0;
        min-height: 0;

        align-items: center;
        justify-content: flex-start;

        padding:
            12px;

        color:
            #444444;

        font-size: 15px;
        line-height: 1.4;

        text-align: left;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* =====================================================
       UNIT
    ===================================================== */

    .additional-prices__table--has-unit
    .additional-prices__unit {
        grid-column: 1;

        min-width: 0;
        min-height: 0;

        align-items: center;
        justify-content: flex-start;

        padding:
            0
            12px
            12px;

        color:
            var(--color-text-secondary);

        border-left: 0;

        font-size: 15px;
        line-height: 1.35;

        text-align: left;

        white-space: normal;

        overflow-wrap: anywhere;
    }


/* =====================================================
   PRICE
===================================================== */

.additional-prices__price {
    grid-column: 2;

    grid-row:
        1 / span 2;

    display: flex;

    min-width: 0;
    min-height: 100%;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: 5px;

    padding:
        12px;

    color:
        #333333;

    border-left:
        1px solid
        var(--color-border);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;

    text-align: left;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* =====================================================
   DEFAULT TABLE WITHOUT UNIT
===================================================== */

.additional-prices__table:not(.additional-prices__table--has-unit)
.additional-prices__price {
    grid-row: 1;
}


/* =====================================================
   OLD PRICE
===================================================== */

.additional-prices__old-price {
    display: block;

    width: 100%;

    color:
        var(--color-text-secondary);

    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;

    white-space: normal;

    text-align: left;

    text-decoration:
        line-through;

    text-decoration-thickness:
        1px;
}


/* =====================================================
   CURRENT PRICE
===================================================== */

.additional-prices__current-price {
    display: block;

    width: 100%;

    color:
        var(--color-text);

    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;

    white-space: normal;

    text-align: left;
}


/* Sale price */
.additional-prices__old-price
+ .additional-prices__current-price {
    color:
        #d62828;

    font-weight: 700;
}

    /* =====================================================
       ACTION
    ===================================================== */

    .additional-prices__action {
        margin-top: 24px;
    }


    .additional-prices__button {
        width: 100%;

        min-height: 46px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .additional-prices__table-head,
    .additional-prices__row,
    .additional-prices__table--has-unit
    .additional-prices__table-head,
    .additional-prices__table--has-unit
    .additional-prices__row {
        grid-template-columns:
            minmax(0, 1fr)
            124px;
    }


    .additional-prices__table-head > div,
    .additional-prices__service,
    .additional-prices__price {
        padding:
            11px
            10px;
    }


    .additional-prices__table--has-unit
    .additional-prices__unit {
        padding:
            0
            10px
            11px;
    }

}