/**
 * Component: Contact Table with Sidebar
 * 
 * Styles for the Contact Table with Sidebar component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.contact-table-with-sidebar {
    &.bg-texture {
        position: relative;
        z-index: 2;
        background-image: url('../../../assets/images/patterns/white-cloth.jpg');
        background-repeat: repeat;
        margin: 39px 0;

        @media screen and (max-width: 768px) {
            margin: 30px 0;
        }
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: -39px;
            left: 0;
            width: 100%;
            height: 39px;
            background-image: url('../../../assets/images/patterns/white-cloth-top-edge.png');
            background-repeat: repeat-x;
            z-index: 1;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: -39px;
            left: 0;
            width: 100%;
            height: 39px;
            background-image: url('../../../assets/images/patterns/white-cloth-bottom-edge.png');
            background-repeat: repeat-x;
            z-index: 1;
        }
    }
    .row {
        @media screen and (max-width: 768px) {
            flex-direction: column-reverse;
        }
    }
    .contact-table-wrapper {
        @media screen and (max-width: 768px) {
            margin-top: var(--spacing-lg);
        }
        .contact-search-wrapper {
            position: relative;

            .search-icon {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 50%;
                left: 12px;
                transform: translateY(-50%);
                z-index: 1;

                svg {
                    position: relative;
                    top: -2px;
                }
            }
            .search-form {
                max-width: 320px;
                margin-bottom: var(--spacing-xs);
                position: relative;

                @media screen and (max-width: 768px) {
                    max-width: none;
                    margin-bottom: var(--spacing-lg);
                }
                input {
                    position: relative;
                    width: 100%;
                    border: 1px solid var(--color-scda-black);
                    border-radius: 8px;
                    padding: 8px 38px 8px 35px;
                    background-color: var(--color-white);
                    font-family: var(--font-primary);
                    font-size: 1rem;
                    font-weight: 500;
                    line-height: 1;
                    color: var(--color-scda-black);
                    transition: .3s ease-in-out;

                    &:focus {
                        outline: none;
                        border: 1px solid var(--color-scda-tan);
                    }
                    &::placeholder {
                        color: #A8A9A4;
                    }
                }
                .search-submit {
                    border: none;
                    padding: 0;
                    background-color: transparent;
                    width: 35px;
                    height: 41px;
                    position: absolute;
                    top: 0;
                    right: 4px;
                    cursor: pointer;
                    opacity: 0;
                    visibility: hidden;
                    transition: .2s ease-in-out;
                    
                    &:before {
                        content: '×';
                        font-size: 28px;
                        line-height: 1;
                        color: var(--color-scda-grey);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                    
                    &:hover:before {
                        color: var(--color-scda-blue);
                    }

                    &.active {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
        }
    }
    .no-results-message {
        padding: var(--spacing-lg);
        text-align: center;
        background-color: #FCF7F3;
        border-radius: 8px;
        margin-top: var(--spacing-xs);
        
        p {
            margin: 0;
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--color-scda-brown);
        }
    }
    .contact-table {
        min-width: auto;
        
        tbody {
            &.valign-top {
                tr {
                    td {
                        vertical-align: top;
                    }
                }
            }
            &.valign-center {
                tr {
                    td {
                        vertical-align: middle;
                    }
                }
            }
            &.valign-bottom {
                tr {
                    td {
                        vertical-align: bottom;
                    }
                }
            }
            tr {
                td {
                    width: 50%;

                    @media screen and (max-width: 576px) {
                        width: 100%;
                    }
                    &:last-of-type {
                        padding-left: 0;

                        @media screen and (max-width: 576px) {
                            display: none;
                        }
                    }
                    .contact-info-toggle {
                        display: none;
                        font-family: var(--font-primary);
                        font-size: 1.125rem;
                        font-weight: 700;
                        line-height: 1.625rem;
                        letter-spacing: 0.00844rem;
                        color: var(--color-scda-blue);
                        padding: 0;
                        background-color: transparent;
                        border: none;
                        cursor: pointer;
                        margin-top: 5px;
                        transition: .2s ease-in-out;

                        @media screen and (max-width: 576px) {
                            display: block;
                        }
                        &:hover, &:focus-visible {
                            color: var(--color-scda-tan);
                        }
                    }
                    .contact-info-mobile {
                        display: none;
                        padding-top: 0px;
                        max-height: 0rem;
                        overflow: hidden;
                        transition: .5s ease-in-out;

                        @media screen and (max-width: 576px) {
                            display: block;
                        }
                        &.open {
                            padding-top: 5px;
                            max-height: 70rem;
                        }
                    }
                }
            }
        }
    }
    .table-pagination {
        margin-top: var(--spacing-sm);
        display: flex;
        justify-content: space-between;

        @media screen and (max-width: 576px) {
            display: block;
        }
        .left-col {
            padding-right: 10px;

            @media screen and (max-width: 576px) {
                padding-right: 0;
                text-align: center;
            }
            .pagination {
                margin-bottom: 12px;

                .page-numbers:not(.next, .prev) {
                    display: inline-block;
                    padding: 9px 14px 7px;
                    text-decoration: none;
                    border-radius: 8px;
                    font-size: 1rem;
                    font-weight: bold;
                    line-height: 1.2;
                    text-transform: uppercase;
                    letter-spacing: .8px;
                    transition: .2s ease-in-out;
                    background-color: transparent;
                    border: 2px solid var(--color-scda-blue);
                    color: var(--color-scda-blue);
                    margin-right: 12px;
                    margin-bottom: 12px;

                    &:hover, &:focus-visible {
                        background-color: var(--color-white);
                        border: 2px solid var(--color-white);
                        box-shadow: 0 0 4px 0 rgba(81, 83, 74, 0.25);
                    }
                    &.current {
                        background-color: #D0D4D8;
                        border-color: #D0D4D8;
                        pointer-events: none;
                    }
                }
                .prev {
                    display: inline-block;
                    font-size: 0;
                    width: 14px;
                    height: 12px;
                    background-image: url('../../../assets/svg/arrow-left-blue.svg');
                    background-repeat: no-repeat;
                    background-size: cover;
                    margin-right: 12px;
                    transition: .2s ease-in-out;

                    &:hover, &:focus-visible {
                        transform: scale(1.2);
                    }
                }
                .next {
                    display: inline-block;
                    font-size: 0;
                    width: 14px;
                    height: 12px;
                    background-image: url('../../../assets/svg/arrow-right-blue.svg');
                    background-repeat: no-repeat;
                    background-size: cover;
                    transition: .2s ease-in-out;

                    &:hover, &:focus-visible {
                        transform: scale(1.2);
                    }
                }
            }
            .show-all, .show-paginated {
                font-size: 1rem;
                font-weight: bold;
                color: var(--color-scda-blue);
                transition: .2s ease-in-out;

                @media screen and (max-width: 576px) {
                    display: none;
                }
                &:hover, &:focus-visible {
                    text-decoration: none;
                    color: var(--color-scda-tan);
                }
            }
        }
        .right-col {
            padding-left: 10px;

            @media screen and (max-width: 576px) {
                padding-left: 0;
                text-align: center;
            }
            .total-results {
                margin: 0;
                font-size: 1rem;
                font-weight: bold;
                color: var(--color-scda-blue);
            }
            .show-all, .show-paginated {
                display: none;
                font-size: 1rem;
                font-weight: bold;
                color: var(--color-scda-blue);
                margin-top: 5px;
                transition: .2s ease-in-out;

                @media screen and (max-width: 576px) {
                    display: inline-block;
                }
                &:hover, &:focus-visible {
                    text-decoration: none;
                    color: var(--color-scda-tan);
                }
            }
        }
    }
    .contact-sidebar {
        .container {
            margin-top: 40px;
        }
        .col-12 {
            padding: 0;
        }
        .cta-grid {
            @media screen and (max-width: 768px) {
                display: none;
            }
            .cta-link {
                margin-bottom: 0;
            }
        }
    }
}