@import 'fns.less';

.support_page {
    min-height: 100vh;
    padding-top: 104px;
    padding-bottom: 140px;
    .title_pointer { cursor: pointer; }
    .breadcrumbs {
        margin: 0 0 24px;
        .font(12px, 500, 1.33, normal);
        .part, .divider { color: @hola-color-gray-38; }
        .part.active { color: @hola-color-orange-3; }
        .divider { margin: 0 1em; }
    }
    .title {
        margin: 0 0 40px;
        .font(32px, bold, 1.25, -0.6px);
        color: @hola-color-black-10;
    }
    .subtitle {
        margin: 0 0 80px;
        .font(16px, bold, 1.5, normal);
        color: @hola-color-gray-39;
    }
    .bottom {
        .font(14px, 500, 1.43, normal);
        text-align: center;
        color: @hola-color-gray-38;
    }
    .support_tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 215px;
        height: 160px;
        box-shadow: 0px 4px 10px rgba(163, 181, 202, 0.35);
        border-radius: 8px;
        color: @hola-color-gray-38;
        .scale-jump-on-hover();
        &:hover { color: @hola-color-orange-3; }
        svg {
            width: 32px;
            height: 32px;
            margin: 0 0 24px;
        }
        p {
            .font(16px, bold, 1.5, normal);
            color: @hola-color-gray-39;
        }
        @media (max-width: 767px) {
            width: 160px;
            height: 100px;
        }
    }
    a {
        color: @hola-color-orange-3;
        word-break: break-word;
    }
}

h1.title_header.title_header {
    .h2();
}

.support_page.troubleshooting {
    .container {
        width: 980px;
        @media (max-width: 1023px) { width: 780px; }
        @media (max-width: 767px) { width: 100%; }
    }
    .platform_tiles {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        list-style: none;
        @media (max-width: 767px) {
            justify-content: center;
            margin-right: -15px;
            margin-bottom: 40px;
        }
    }
    .platform_tile {
        margin-bottom: 30px;
        @media (max-width: 767px) {
            margin-bottom: 15px;
            margin-right: 15px;
            .support_tile svg {
                width: 24px;
                height: 24px;
                margin-bottom: 4px;
            }
            .support_tile p { font-size: 12px; }
        }
    }
    @media (max-width: 767px) {
        .title {
            font-size: 24px;
            margin-bottom: 24px;
        }
        .subtitle { margin-bottom: 40px; }
    }
    @media (max-width: 479px) {
        .platform_tiles {
            display: grid;
            grid-template-columns: 160px 160px;
            grid-column-gap: 16px;
        }
    }
}
.support_page .articles {
    .container {
        display: flex;
        position: relative;
        left: -50px;
        width: 1250px;
    }
    .left, .side_menu-wrapper { flex: 1 0 30%; }
    .right, .hola_faq-content { flex: 1 0 70%; }
    .side_menu-wrapper { top: -70px; }
    .side_menu > ul > li > ul li.active > a { font-weight: bold; }
    .side_menu > ul > li:first-child > a {
        margin-bottom: 40px;
        color: @hola-color-black-10 !important;
        &:hover { color: @hola-color-orange-3 !important; }
        &::after { display: none; }
    }
    @media (max-width: 1439px) {
        .container {
            left: 0;
            width: 1150px;
        }
    }
    @media (max-width: 1199px) {
        .container { width: 950px; }
        .side_menu {
            width: auto;
            padding-right: 20px;
        }
    }
    @media (max-width: 991px) {
        .container { width: 100%; }
        .left, .side_menu-wrapper { flex: 1 0 0; }
        .right, .hola_faq-content { flex: 1 0 100%; }
    }
    .article {
        position: relative;
        padding: 24px 64px 24px 24px;
        margin-bottom: 24px;
        box-shadow: 0px 4px 10px rgba(163, 181, 202, 0.35);
        border-radius: 8px;
        .font(14px, 500, 1.43, normal);
        color: @hola-color-black-10;
        transition: height 350ms ease;
        &--h2 { display: none; }
        .article-content {
            position: absolute;
            padding-top: 24px;
            opacity: 0;
            visibility: hidden;
            max-height: 0;
            transition:
                height 150ms ease-out,
                opacity 150ms ease-out;
        }
        h3 { .font(16px, bold, 1.5, normal); }
        h3.active + .article-content {
            position: static;
            opacity: 1;
            visibility: visible;
            max-height: 2000px;
            transition:
                height 200ms ease-in,
                opacity 200ms ease-in;
        }
        section {
            padding: 24px;
            background: #FAFCFF;
            border-radius: 8px;
            &:not(:last-child) {
                margin-bottom: 24px;
            }
            &.support_request {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 24px;
                background-color: #FFF0E6;
                color: @hola-color-orange-3;
                span { font-weight: bold; }
                .hola_btn {
                    span { .font(12px, 600, 1.33, normal); }
                    width: 180px;
                    height: 32px;
                    flex-shrink: 0;
                }
                @media (max-width: 479px) {
                    flex-direction: column;
                    align-items: start;
                    .hola_btn { margin-top: 10px; }
                }
            }
        }
        .article-close {
            display: flex;
            position: absolute;
            top: 20px;
            right: 20px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            &::before {
                content: "";
                display: block;
                position: relative;
                top: 0;
                width: 10px;
                height: 10px;
                margin: auto;
                border: 2px solid @hola-color-gray-39;
                border-radius: 2px;
                border-top: none;
                border-right: none;
                transform: rotate(315deg);
                transition: all 300ms ease;
            }
            &:hover {
                color: @hola-color-orange-3;
                &::before { border-color: @hola-color-orange-3; }
            }
        }
        h3.active ~ .article-close {
            &::before {
                top: -4px;
                transform: rotate(135deg);
            }
        }
        ul { padding-left: 1em; }
    }
}

.yes_no {
    display: flex;
    align-items: center;
    span {
        margin-right: auto;
        font-weight: bold;
    }
    button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 16px 5px 12px;
        border: none;
        outline: none;
        line-height: 1;
        background: #fff;
        box-shadow: 0px 4px 10px rgba(163, 181, 202, 0.35);
        border-radius: 24px;
        transition: all 300ms ease;
        svg { margin-right: 8px; }
        &.yes { margin-right: 16px; }
        &.no {
            color: #f44831;
            svg { transform: rotate(180deg) skewX(180deg); }
        }
    }
    &.yes button.yes {
        color: #fff;
        background: #FF6400;
        box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.15);
    }
    &.no button.no {
        color: #fff;
        background: #F44831;
        box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.15);
    }
    @media (max-width: 479px) {
        flex-wrap: wrap;
        span {
            margin-bottom: 10px;
            width: 100%;
        }
    }
}

.support_page.affiliate {
    .subtitle {
        margin-bottom: 20px;
        color: @hola-color-orange-3;
    }
    .articles .article section {
        background-color: #f8fafc;
    }
}