@import url('../general-and-utility-classes.css');

.page-template-page-help-center {

    /* --- Hero --- */
    .help-center__hero {
        position: relative;
        height: 320px;

        /* Tablet */
        @media only screen and (max-width: 992px) {
            height: 180px;
        }
    }

    .help-center__hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- Subhero --- */
    .help-center__subhero {
        padding: 40px 0;

        /* Tablet */
        @media only screen and (max-width: 992px) {
            padding: 30px 0 20px;
        }
    }

    .help-center__subhero-container {
        max-width: 1200px;
    }

    .help-center__subhero-title {
        font-size: 42px;
        margin: 0;

        /* Tablet */
        @media only screen and (max-width: 992px) {
            font-size: 32px;
        }
    }

    .help-center__subhero-copy {
        margin: 16px 0 0;
    }

    /* --- Support Screen --- */
    .help-center__support-screen {
        position: relative;
        padding: 40px 80px 80px;

        /* Tablet */
        @media only screen and (max-width: 992px) {
            padding: 20px 0 60px;
        }
    }

    .help-center__support-screen-step-one,
    .help-center__support-screen-step-two {
        display: none;

        &.active {
            display: block;
        }
    }

    .help-center__support-screen-step-two-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
    }

    .help-center__support-screen-step-two-back-btn {
        appearance: none;
        display: flex;
        align-items: center;
        gap: 8px;
        border: none;
        background-color: transparent;
        cursor: pointer;
        transition: .2s linear;

        &:hover {
            color: var(--color-slick-yellow);
            background-color: transparent;
            transition: .2s linear;

            svg {
                path {
                    stroke: var(--color-slick-yellow);
                    transition: .2s linear;
                }
            }
        }

        svg {
            path {
                transition: .2s linear;
            }
        }
    }

    .help-center__support-screen-one-title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 22px;
    }

    .help-center__support-screen-title {
        font-size: 22px;
        margin-bottom: 0;
    }

    .help-center__support-screen-step-one-card {
        width: 100%;

        &:hover {

            svg {
                stroke: var(--color-slick-yellow);
                transition: .2s linear;
            }

            p {
                color: var(--color-slick-yellow);
                transition: .2s linear;
            }
        }

        svg {
            transition: .2s linear;
        }

        p {
            font-size: 20px;
            font-weight: 500;
            text-align: center;
            transition: .2s linear;
        }
    }

    .help-center__support-screen-faq {
        width: 100%;
        margin-bottom: 12px;

        &:last-child {
            margin-bottom: 0;
        }

        details {
            box-sizing: border-box;
    
            &[open] {
    
                summary {
                    &::after {
                        transform: translate(-50%, 1000%) rotate(90deg);
                        opacity: 0;
                        transition: .2s linear;
                    }
                }
            }
        }

        summary {
            position: relative;
            background-color: #F0F0F0;
            border-radius: 16px;
            outline: none;
            width: 100%;
            padding: 26px 102px;
            transition: .2s linear;
            cursor: pointer;
            transition: .2s linear;
    
            span {
                display: block;
                max-width: 88%;
            }
    
            &::marker {
                content: ''; /* Hide default marker */
            }
    
            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: 102px;
                display: block;
                width: 18px;
                height: 1px;
                opacity: 1;
                transition: .2s linear;
            }
    
            &::before {
                transform: translate(-50%, -50%) rotate(0);
            }
    
            &::after {
                transform: translate(-50%, -50%) rotate(90deg);
            }
    
            &:focus,
            &:hover {
                color: var(--color-slick-yellow);
                border-color: black;
                transition: .2s linear;
            }

            /* Tablet */
            @media only screen and (max-width: 992px) {
                padding: 16px 26px;
    
                &::before,
                &::after {
                    right: 26px;
                }
            }
        }
    }

    .help-center__support-screen-faq-answer {
        padding: 24px 42px;
        margin: 0 !important;

        &.visible-form {
            
            .wpcf7 {
                display: block;
            }
        }

        /* Mobile */
        @media only screen and (max-width: 767px) {
            padding: 18px;
        }

        p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        a {
            color: var(--color-slick-yellow);
            transition: .2s linear;

            &:hover {
                color: var(--color-slick-yellow-darkened);
                transition: .2s linear;
            }
        }

        .order-select-container {
            display: flex;
            align-items: center;
            gap: 16px;

            /* Mobile */
            @media only screen and (max-width: 767px) {
                flex-wrap: wrap;
            }

            p {
                width: max-content;
                max-width: 100%;
                margin: 0;
            }

            .order-select-dropdown {
                cursor: pointer;
                width: 100%;
                max-width: 360px;
                padding: 8px;
    
                option {
                    cursor: pointer;
                }
            }
        }

        .order-spinner {
            border: 6px solid #f3f3f3;
            border-top: 6px solid var(--color-slick-blue);
            border-radius: 50%;
            width: 62px;
            height: 62px;
            animation: spin 1s linear infinite;
            margin: 60px auto;
            display: none;
        }
    
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .order-response {
            border-top: 1px solid var(--color-gray);
            padding-top: 32px;
            margin-top: 8px;
        }
        
        /* Tablet */
        @media only screen and (max-width: 992px) {
            padding: 26px;
        }
    }

    .help-center__support-screen-zendesk-button {
        display: block;
        width: max-content;
        color: var(--color-text-black) !important;
        text-transform: uppercase;
        background-color: var(--color-slick-yellow);
        padding: 12px 32px;
        cursor: pointer;
        transition: .2s linear;

        &:hover,
        &:focus,
        &:active {
            background-color: var(--color-slick-yellow-darkened);
            transition: .2s linear;
        }
    }

    /* - Step One - */
    .help-center__support-screen-step-one-container {
        display: flex;
        justify-content: center;
        gap: 20px;

        /* Mobile */
        @media only screen and (max-width: 767px) {
            flex-wrap: wrap;
        }
    }

    .help-center__support-screen-step-one-card {
        padding: 42px;
        border-radius: 16px;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
        cursor: pointer;

        svg {
            display: block;
            margin: 0 auto;
        }

        p {
            margin: 12px 0 0 !important;
        }
    }
    
    /* - Step Two - */
    .help-center__support-screen-step-two-container {
        display: block;
    }
}

/* --- Forms --- */
.page-template-page-help-center {

    .wpcf7  {
        display: none;
    }

    .wpcf7-form {
        max-width: 800px;

        .invalid {
            .wpcf7-response-output {
                border-color: #dc3232a6;
            }
        }

        p {
            display: flex;
            gap: 8px;

            /* Mobile */
            @media only screen and (max-width: 767px) {
                flex-wrap: wrap;
                gap: 0;
            }

            &:has(.wpcf7-spinner) {
                position: relative;
            }

            .wpcf7-spinner {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            label {
                font-size: 14px;
                line-height: 18px;
                color: var(--color-gray);
    
                span {
                    display: block;
                    margin-top: 6px;
    
                    input.wpcf7-form-control {
                        background-color: #F0F0F0;
                        border: none;
                        border-radius: 4px;
                        padding: 6px 12px !important;

                        &.wpcf7-not-valid {
                            background-color: #dc3232a6;
                        }

                        &.wpcf7-file {
                            font-size: 14px;
                            color: var(--color-gray);
                            background-color: transparent;
                            border: 2px dashed #bbb;
                            padding: 14px !important;
                            margin: auto;
                            transition: border-color .2s linear;

                            &::file-selector-button {
                                border-width: 0;
                                border-radius: 4px;
                                background-color: var(--color-black);
                                color: hsl(210 40% 90%);
                                transition: .2s linear;
                                cursor: pointer;
                                padding: 8px;
                                margin-right: 12px;
                            }

                            &:hover {
                                border-color: #888;
                                
                                &::file-selector-button {
                                    background-color: var(--color-dark);
                                }
                            }
                        }
                    }
                }
            }

            .wpcf7-not-valid-tip {
                font-size: 14px;
            }

            .wpcf7-response-output {
                margin: 14px 0 0;
            }
        }
    
        .wpcf7-submit {
            text-transform: uppercase;
            width: 100%;
            color: var(--color-white);
            background-color: var(--color-black);
            border: none;
            padding: 12px 32px;
            transition: .2s linear;
            cursor: pointer;

            &:hover {
                background-color: var(--color-dark);
                transition: .2s linear;
            }
        }
    }
}