@layer pages {
/*! style-pages-contact-us.css: rules moved from style-pages.css in Phase 1 of the CSS migration (docs/phase-1/PLAN.md). Loaded on the contact-us page, right after style-pages.css, so the cascade order is unchanged. Phase 2 folds this into the thematic stylesheets. */

/*! ==========================================================================
   Contact us
   ========================================================================== */

.contact-us-page {
    .woocommerce-breadcrumb {
        margin-block-end: 2.5rem;
    }

    h1 {
        @media screen and (min-width: 37.5rem) {
            margin-block-end: 0.6875rem;
            font-size: 3.625rem;
            line-height: 108%;
            letter-spacing: -0.02em;
        }
    }

    .subtitle-contact-us {
        max-width: 26.25rem;
        width: 100%;
        margin-block-start: 0.6875rem;
        margin-block-end: 2.5rem;
        font-weight: 400;
        font-size: 1rem;
        line-height: 125%;
        color: var(--ec-clr-primary);

        @media screen and (min-width: 37.5rem) {
            margin-block-end: 4rem;
            font-weight: 400;
            font-size: 1.25rem;
            line-height: 120%;
            letter-spacing: -0.01em;
        }

        @media screen and (min-width: 50rem) {
            margin-block-end: 5rem;
            max-width: unset;
        }

        @media screen and (min-width: 71.25rem) {
            margin-block-end: 5.875rem;
        }
    }

    .contact-us-content-wrapper {
        flex-direction: column;
        margin-block-end: 5rem;

        @media screen and (min-width: 90rem) {
            flex-direction: row;
            justify-content: space-between;
            margin-block-end: 7.5rem;
        }

        .contact-block-links-wrap {
            margin-block-end: 4rem;

            @media screen and (min-width: 52.5rem) {
                margin-block-end: 5.75rem;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 3rem;
            }

            @media screen and (min-width: 90rem) {
                max-width: 50rem;
                margin-block-end: 0;
                margin-inline-end: 2.5rem;
            }

            @media screen and (min-width: 100rem) {
                max-width: 61.125rem;
            }

            @media screen and (min-width: 120rem) {
                max-width: 63.875rem;
                gap: 7.75rem;
            }

            .column {
                margin-block-end: 2rem;

                @media screen and (min-width: 37.5rem) {
                    margin-block-end: 3rem;
                }

                @media screen and (min-width: 52.5rem) {
                    margin-block-end: 0;
                }

                &:first-child {
                    .title {
                        margin-block-end: 1.5rem;

                        @media screen and (min-width: 37.5rem) {
                            margin-block-end: 2rem;
                        }
                    }
                }

                &:last-child {
                    margin-block-end: 0;
                }

                .title {
                    margin-block-end: 2rem;
                }
            }

            .title {
                margin-block-end: 1.5rem;
                font-weight: 700;
                font-size: 1.375rem;
                line-height: 109%;
                letter-spacing: -0.01em;
                color: var(--ec-clr-primary);

                @media screen and (min-width: 37.5rem) {
                    margin-block-end: 2rem;
                    font-size: 2rem;
                    line-height: 119%;
                }
            }


            .block-copy {
                p {
                    /*! not judged in Phase 5 (it only applies in states the gate does not capture, such as hover or pages it does not visit); review in Phase 6. */
                    display: none !important;
                }
            }

            .block-link,
            .block-copy {
                position: relative;
                margin-block-end: 1rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: var(--rounded-corners);
                padding: 0.9375rem 1rem;
                background: var(--ec-clr-border-subtle, rgba(255, 255, 255, 0.05));
                border: 1px solid transparent;
                text-decoration: none;

                a.link-wrap {
                    padding: 0.9375rem 1rem;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    p:first-child {
                        display: none;
                    }

                    svg {
                        path {
                            fill: var(--ec-white);
                        }
                    }
                }

                &:last-child {
                    margin-block-end: 0;
                }

                &.copied {
                    .copy-done-remove {
                        display: none;
                    }

                    .copy-done {
                        display: block;
                    }
                }

                .left {
                    display: flex;
                    align-items: center;
                }

                .text-wrap {
                    display: flex;
                    flex-direction: column;
                }

                .mini-image {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 2rem;
                    height: 2rem;
                    margin-inline-end: 1rem;

                    @media screen and (min-width: 37.5rem) {
                        width: 3rem;
                        height: 3rem;
                        margin-inline-end: 1.25rem;
                    }
                }

                br {
                    display: none;
                }

                .gray-text {
                    margin-block-start: 0.125rem;
                    display: inline-block;
                    font-weight: 400;
                    font-size: 0.875rem;
                    line-height: var(--fs-m);
                    color: var(--ec-clr-secondary);
                }
            }

            .small-text {
                display: block;
                margin-block-start: 0.5rem;
                margin-block-end: 1rem;
                font-weight: 400;
                font-size: 1rem;
                line-height: 125%;
                color: var(--ec-clr-secondary);

                @media screen and (min-width: 37.5rem) {
                    margin-block-end: 1.5rem;
                }
            }

            .sub-title {
                margin: 2rem 0 1rem 0;
                font-weight: 700;
                font-size: 1.25rem;
                line-height: 120%;
                letter-spacing: -0.01em;
                color: var(--ec-clr-secondary);
                text-align: left;
                /*margin-block-start: 2.5rem;*/
            }

            .copy-data {
                display: none;
            }

            .copy-done {
                display: none;
                font-weight: 400;
                font-size: 0.875rem;
                line-height: var(--fs-m);
                color: var(--ec-clr-secondary);
                width: 100%;
                text-align: center;
                margin-block-start: 0.125rem;
            }

            .button-link,
            .button-copy,
            .arrow-icon {
                margin-inline-end: 0;
                position: relative;
                display: block;
                width: 2.5rem;
                height: 2.5rem;
                border-radius: var(--rounded-corners);
                background: var(--ec-clr-surface-muted, rgba(229, 233, 248, 0.1));
                cursor: pointer;
                margin-inline-start: 0.5rem;

                @media screen and (min-width: 37.5rem) {
                    width: 3rem;
                    height: 3rem;
                }

                &:before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-inline-end: -50%;
                    transform: translate(-50%, -50%);
                }


                &.copied {
                    &:before {
                        content: url('data:image/svg+xml,<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 16C5.45 16 4.97917 15.8042 4.5875 15.4125C4.19583 15.0208 4 14.55 4 14L4 2C4 1.45 4.19583 0.979167 4.5875 0.5875C4.97917 0.195833 5.45 0 6 0L15 0C15.55 0 16.0208 0.195833 16.4125 0.5875C16.8042 0.979167 17 1.45 17 2L17 14C17 14.55 16.8042 15.0208 16.4125 15.4125C16.0208 15.8042 15.55 16 15 16L6 16ZM6 14H15L15 2L6 2L6 14ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18L0 4H2L2 18L13 18V20L2 20Z" fill="%23ff5c01"/></svg>');
                    }
                }
            }

            .arrow-icon {
                &:before {
                    content: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.492112 0.792893C0.101588 1.18342 0.101588 1.81658 0.492112 2.20711L4.28501 6L0.492112 9.79289C0.101587 10.1834 0.101587 10.8166 0.492112 11.2071C0.882636 11.5976 1.5158 11.5976 1.90633 11.2071L6.40633 6.70711C6.79685 6.31658 6.79685 5.68342 6.40633 5.29289L1.90633 0.792893C1.5158 0.402369 0.882636 0.402369 0.492112 0.792893Z" fill="white" /></svg>');
                }

            }

            .button-copy {
                &:before {
                    content: url('data:image/svg+xml,<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 16C5.45 16 4.97917 15.8042 4.5875 15.4125C4.19583 15.0208 4 14.55 4 14L4 2C4 1.45 4.19583 0.979167 4.5875 0.5875C4.97917 0.195833 5.45 0 6 0L15 0C15.55 0 16.0208 0.195833 16.4125 0.5875C16.8042 0.979167 17 1.45 17 2L17 14C17 14.55 16.8042 15.0208 16.4125 15.4125C16.0208 15.8042 15.55 16 15 16L6 16ZM6 14H15L15 2L6 2L6 14ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18L0 4H2L2 18L13 18V20L2 20Z" fill="white"/></svg>');
                }

            }

            .button-link {
                &:before {
                    content: url('data:image/svg+xml,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.4 13L0 11.6L9.6 2L1 2L1 0L13 0L13 12H11L11 3.4L1.4 13Z" fill="white"/></svg>');
                }

            }
        }

        form {
            padding: 2rem 1.5rem;
            background: var(--ec-bg-primary);

            @media screen and (min-width: 37.5rem) {
                padding: 5rem 4.9375rem;
            }

            @media screen and (min-width: 52.5rem) {
                padding: 6.25rem 6.1875rem;
            }

            @media screen and (min-width: 90rem) {
                padding: 2.5rem 2.4375rem;
                max-width: 23.75rem;
                width: 100%;
            }

            @media screen and (min-width: 120rem) {
                padding: 5rem 4.9375rem;
                max-width: 33.9375rem;
            }

            h2 {
                margin-block-end: 2rem;
                width: 100%;
                font-weight: 700;
                font-size: 1.375rem;
                line-height: 109%;
                letter-spacing: -0.01em;
                color: var(--ec-clr-primary);

                @media screen and (min-width: 37.5rem) {
                    font-weight: 700;
                    font-size: 2rem;
                    line-height: 119%;
                }
            }

            textarea {
                resize: none;
                min-height: 7.5625rem;
            }
        }
    }
}

}