.tariffs-table {
    overflow-x: auto;
}

.tariffs-table table {
    width: 100%;
    min-width: 1296px;
    table-layout: fixed;
    border-collapse: collapse;
}

.tariffs-table th,
.tariffs-table td {
    min-width: 200px;
    border: 1px solid var(--gray-border);
}

.tariffs-table th {
    padding: 16px;
    text-align: left;
    word-wrap: break-word;
    hyphens: auto;
}

.tariffs-table thead th .title {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tariffs-table thead th .title-name {
    max-width: 88px;
}

.tariffs-table thead th .title-icon {
    display: flex;
    color: var(--blue);
    cursor: pointer;
}

.tariffs-table thead th .title-tooltip {
    position: absolute;
    left: 65%;
    right: 0;
    padding: 10px 12px;
    width: max-content;
    max-width: 250px;
    font-size: 12px;
    line-height: 1.5em;
    hyphens: none;
    color: var(--white);
    background: var(--blue);
    border: 1px solid;
    border-radius: 4px;
    transition: var(--transition);
    transform: translateY(-30px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tariffs-table thead th .title-icon:hover + .title-tooltip {
    opacity: 1;
    visibility: visible;
}

.tariffs-table td {
    padding: 26px 18px;
    text-align: center;
}

.tariffs-table thead td {
    padding-block: 48px;
    color: var(--white);
    background-color: var(--blue);
}

/* Number */
.tariffs-table tbody td .numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
}

.tariffs-table tbody td span.number {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0px 16px;
    border-radius: 4px;
}

.tariffs-table tbody td span.number:first-child {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue);
}

.tariffs-table tbody td span.number + span.number {
    border: 1px solid var(--gray-border);
}

/* Level */
.tariffs-table tbody td span.level {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border-radius: 4px;
}

.tariffs-table tbody td span.level.fill-0::after {
    content: "—";
    display: block;
    width: 100%;
    color: var(--blue-dark);
}

.tariffs-table tbody td span.level.fill-100::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/wp-content/uploads/2024/06/icon-check-blue.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Product */
.tariffs-table tbody td[data-type="product-button"] {
    padding: 16px;
}

.tariffs-table tbody td[data-type="product-button"] a {
    min-width: 100%;
}

/* Table Controls*/
.tariffs-table .table-controls {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    z-index: 1;
}

.tariffs-table .table-arrow,
.tariffs-table .table-arrow:focus {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background-color: var(--white-secondary);
    border: 1px solid var(--gray-light);
    border-radius: 50%;
    transition: var(--transition);
    cursor: pointer;
}

.tariffs-table .table-arrow-next {
    transform: rotate(180deg);
}

.tariffs-table .table-arrow svg {
    width: 10px;
    height: 16px;
    transform: translateX(-2px);
}

.tariffs-table .table-arrow:hover {
    color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);
}

.tariffs-table .table-arrow.table-arrow-disabled {
    color: var(--gray-light);
    background-color: var(--white-secondary);
    border-color: var(--gray-light);
    pointer-events: none;
    cursor: default;
}

/* Media Requests */
@media (max-width: 1199.75px) {
    .tariffs-table {
        margin: 0 calc((100% - 100vw) / 2) -20px;
        padding: 56px calc((100vw - 100%) / 2) 20px;
    }

    .tariffs-table .table-controls {
        display: inline-flex;
    }
}

@media (max-width: 1023px) {

}

@media (max-width: 767px) {
    .tariffs-table table {
        min-width: 1024px;
    }

    .tariffs-table thead th .title-tooltip {
        left: 88%;
        max-width: min(250px, 50vw);
        transform: translateY(-10px);
    }

    .tariffs-table thead td {
        padding-block: 24px;
    }

    .tariffs-table td {
        padding: 18px 16px;
    }

    .tariffs-table .text-primary {
        font-size: 14px;
    }

    .tariffs-table tbody td span.number {
        min-height: 25px;
        padding: 0 10px;
    }
    
    .tariffs-table tbody td[data-type="product-button"] a {
        min-height: 50px;
    }
}