/* Adding variables */
@import url("../../css/variables.css");

.features-table__main-container {
    width: var(--full);
    padding: var(--padding);
}

.features-table__container-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--m-spacing);
    width: var(--full);
    max-width: 1080px;
    padding: var(--xl-spacing) 0;
    margin: 0 auto;
}

.features-table__table-out-container {
    width: var(--full);
    background: var(--dark-gradient);
    padding: var(--s-spacing) var(--m-spacing);
    margin: 0 auto;
    border-radius: 24px 24px 0 0;
}

.features-table__main-title {
    display: flex;
    align-self: flex-start;
}

.features-table__main-title h2 {
    font-size: var(--h4);
    font-weight: var(--regular);
    line-height: var(--lh-1) !important;
    color: var(--neopaleblue);
}

.features-table__main-title h2 strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

.features-table__column-title {
    font-size: var(--blocknav);
    font-weight: var(--semibold);
    line-height: var(--lh-1) !important;
    text-align: left;
    margin-bottom: 4px;
}

.features-table__row-title h2 {
    font-size: var(--text);
    font-weight: var(--semibold);
}

.features-table__row-title h3 {
    font-size: var(--smalltext);
    font-weight: var(--regular);
}

/* Remove lateral borders from the full-row title cell */
.features-table__row-title.full-row-title-cell {
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Ensure the text can overflow and appear outside the column */
.features-table__row-title.full-row-title-cell h2 {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
}

/* Make sure empty filler cells are invisible and do not affect layout */
.full-row-empty-cell {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: none;
}

.features-table__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-table__icon.check {
    width: 100%;
    max-width: 30px;
    margin: 0 auto;
}

.features-table__icon.uncheck {
    width: 100%;
    max-width: 25px;
    margin: 0 auto;
}

#featuresTable {
    width: var(--full);
    border-collapse: collapse;
    position: relative;
    color: white;
}

#featuresTable td,
#featuresTable th {
    text-align: left;
    vertical-align: middle;
    padding: calc(var(--s-spacing) / 2) var(--s-spacing);
    border: 1px solid #ffffff66;
    position: relative; /* Esto es para asegurarse de que las celdas puedan usar z-index */
    z-index: 3;
}

#featuresTable td:first-child,
#featuresTable th:first-child {
    border-left: none;
    padding-left: 0;
}

#featuresTable td:last-child,
#featuresTable th:last-child {
    border-right: none;
}

#featuresTable th:nth-child(n+2),
#featuresTable td:nth-child(n+2) {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

#featuresTable tr:first-child td,
#featuresTable tr:first-child th {
    border-top: none;
}

#featuresTable tr:last-child td {
    border-bottom: none;
}

#featuresTable th h3 {
    font-size: var(--text);
}

#featuresTable th p {
    font-size: var(--smalltext);
    font-weight: var(--regular);
    text-align: left;
}

/********** Highlight Column **********/
.column-overlay {
    position: absolute;
    top: -4.5rem;
    bottom: -1rem;
    background: rgba(0, 177, 235, .25);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    padding-top: var(--s-spacing);
    transition: left 0.2s ease, width 0.2s ease;
}

.column-overlay__label {
    color: black;
    font-weight: var(--regular);
    font-size: var(--smalltext);
    padding: 6px 12px;
    padding-bottom: var(--s-spacing);
    z-index: 2;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .features-table__main-container {
        padding: 0 var(--m-spacing) var(--l-spacing);
    }

    .features-table__container-inner {
        width: 100%;
        padding: var(--l-spacing) 0 var(--s-spacing);
    }

    .features-table__table-out-container {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .features-table__main-title h2 {
        font-size: var(--h2);
    }

    #featuresTable th:nth-child(1),
    #featuresTable td:nth-child(1) {
        min-width: 250px;
    }

    #featuresTable th:nth-child(n+2),
    #featuresTable td:nth-child(n+2) {
        min-width: 180px;
        width: 180px; /* Asegura que sea fijo */
    }

    .features-table__table-out-container::-webkit-scrollbar {
        height: 1rem !important;
    }
    
    .features-table__table-out-container::-webkit-scrollbar-track {
        border-radius: 55px !important;
    }
    
    .features-table__table-out-container::-webkit-scrollbar-thumb {
        background: var(--neopaleblue) !important;
        border-radius: 55px !important;
    }
    
    .features-table__table-out-container::-webkit-scrollbar-thumb:hover {
        background: white !important;
    }
    
    .features-table__table-out-container {
        scrollbar-width: 1rem !important;
        scrollbar-color: var(--neopaleblue) var(--neodark) !important;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .features-table__main-container {
        padding: 0 var(--s-spacing) var(--l-spacing);
    }
}