/* =========================================================
   OTECHRIDE – KONFIGURÁTOR / PŘÍPLATKY
   Kompaktní minimalistická varianta
========================================================= */

.p-variants-block,
.p-variants-block * {
    box-sizing: border-box;
}

.p-variants-block {
    width: 100%;
    margin: 20px 0 26px;
    padding: 0;
    font-family: Inter, Arial, sans-serif;
}


/* =========================================================
   TABULKA
========================================================= */

.p-variants-block .detail-parameters {
    width: 100%;
    margin: 0;
    padding: 0;

    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;

    background: transparent !important;
}


/* =========================================================
   JEDNOTLIVÉ ŘÁDKY
========================================================= */

.p-variants-block .surcharge-list {
    border: 0 !important;
    background: transparent !important;
}


/* Název příplatku */

.p-variants-block .surcharge-list th {
    position: relative;

    width: 29%;
    min-width: 150px;

    padding: 8px 18px 8px 17px !important;

    border: 0 !important;
    border-bottom: 1px solid #eeeeee !important;

    background: transparent !important;

    color: #111111 !important;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;

    text-align: left;
    vertical-align: middle;
}


/* Malý červený detail */

.p-variants-block .surcharge-list th::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    background: #d5001c;

    transform: translateY(-50%);
}


/* Pravá část */

.p-variants-block .surcharge-list td {
    width: 71%;

    padding: 7px 0 7px 12px !important;

    border: 0 !important;
    border-bottom: 1px solid #eeeeee !important;

    background: transparent !important;

    vertical-align: middle;
}


/* =========================================================
   SELECT
========================================================= */

.p-variants-block select.surcharge-parameter {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    display: block;

    width: 100% !important;
    max-width: none !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding: 0 42px 0 13px !important;

    border: 1px solid #d7d7d7 !important;
    border-radius: 2px !important;

    outline: none !important;

    background-color: #fafafa !important;

    background-image:
        linear-gradient(45deg, transparent 50%, #333 50%),
        linear-gradient(135deg, #333 50%, transparent 50%) !important;

    background-position:
        calc(100% - 18px) 17px,
        calc(100% - 13px) 17px !important;

    background-size:
        5px 5px,
        5px 5px !important;

    background-repeat: no-repeat !important;

    color: #161616 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        border-color .18s ease,
        background-color .18s ease;
}


/* Hover */

.p-variants-block select.surcharge-parameter:hover {
    border-color: #aaaaaa !important;
    background-color: #ffffff !important;
}


/* Aktivní roletka */

.p-variants-block select.surcharge-parameter:focus {
    border-color: #777777 !important;
    background-color: #ffffff !important;

    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   TOOLTIP ?
========================================================= */

.p-variants-block .show-tooltip.question-tooltip {
    display: inline-flex !important;

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

    width: 17px !important;
    height: 17px !important;

    min-width: 17px;

    margin-left: 5px;

    padding: 0 !important;

    border: 1px solid #bdbdbd !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #777777 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    vertical-align: middle;

    cursor: help;

    box-shadow: none !important;
}


.p-variants-block .show-tooltip.question-tooltip:hover {
    border-color: #d5001c !important;
    background: #d5001c !important;
    color: #ffffff !important;
}


/* =========================================================
   OPTION
========================================================= */

.p-variants-block select.surcharge-parameter option {
    background: #ffffff;
    color: #111111;

    font-size: 14px;
    font-weight: 400;
}


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

@media (max-width: 900px) {

    .p-variants-block .surcharge-list th {
        width: 31%;
        min-width: 135px;

        padding:
            7px 14px 7px 16px !important;

        font-size: 13px;
    }

    .p-variants-block .surcharge-list td {
        width: 69%;

        padding:
            6px 0 6px 10px !important;
    }

    .p-variants-block select.surcharge-parameter {
        height: 40px !important;
        min-height: 40px !important;

        font-size: 13px !important;

        background-position:
            calc(100% - 18px) 16px,
            calc(100% - 13px) 16px !important;
    }
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 650px) {

    .p-variants-block {
        margin: 16px 0 22px;
    }

    .p-variants-block .detail-parameters,
    .p-variants-block .detail-parameters tbody {
        display: block;

        width: 100%;
    }

    .p-variants-block .surcharge-list {
        display: block;

        width: 100%;

        margin: 0 0 13px;

        border: 0 !important;
    }


    /* Název nad roletkou */

    .p-variants-block .surcharge-list th {
        display: block;

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

        padding:
            0 0 6px 15px !important;

        border: 0 !important;

        font-size: 13px;
        font-weight: 750;
    }


    .p-variants-block .surcharge-list th::before {
        left: 0;
        top: 50%;

        width: 6px;
        height: 6px;
    }


    /* Select pod názvem */

    .p-variants-block .surcharge-list td {
        display: block;

        width: 100% !important;

        padding: 0 !important;

        border: 0 !important;
    }


    .p-variants-block select.surcharge-parameter {
        width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;

        padding:
            0 40px 0 12px !important;

        font-size: 13px !important;

        background-position:
            calc(100% - 18px) 17px,
            calc(100% - 13px) 17px !important;
    }


    .p-variants-block .show-tooltip.question-tooltip {
        width: 16px !important;
        height: 16px !important;

        min-width: 16px;

        font-size: 9px !important;
    }
}


/* =========================================================
   MALÉ MOBILY
========================================================= */

@media (max-width: 380px) {

    .p-variants-block select.surcharge-parameter {
        font-size: 12px !important;
    }

}