/* RESET */
:root {
    /* #701B64 */
    --primary-clr: hsl(308, 61%, 27%);

    /* #A90466 */
    --secondary-clr: hsl(324, 95%, 34%);
    --secondary-clr-5: hsla(324, 95%, 34%, 5%);
    --secondary-clr-10: hsla(324, 95%, 34%, 10%);
    --secondary-clr-15: hsla(324, 95%, 34%, 15%);
    /* #9B2064 */
    --secondary-clr-900: hsl(327, 66%, 37%);
    /* #992F6A */
    --secondary-clr-800: hsl(327, 53%, 39%);

    /* #262F45 */
    --tertiary-clr: hsl(223, 29%, 21%);
    /* #2C2F4A */
    --tertiary-clr-900: hsl(234, 25%, 23%);
    /* #EEEEFB */
    --tertiary-clr-100: hsl(240, 62%, 96%);
    /* #FFFFFF */
    --white-clr: hsl(0, 0%, 100%);
    /* #F2F2F8 */
    --white-clr-900: hsl(240, 30%, 96%);
    /* #F5F5FA */
    --white-clr-850: hsl(240, 33%, 97%);
    /* #E8E8F7 */
    --white-clr-800: hsl(240, 48%, 94%);
    /* #EBEBF2 */
    --white-clr-700: hsl(240, 21%, 94%);
    /* #EDEFFF */
    --white-clr-600: hsl(233, 100%, 96%);
    /* #333333 */
    --black-clr: hsl(0, 0%, 20%);
    /* #404040 */
    --black-clr-800: hsl(0, 0%, 25%);
    /* #1865F2 */
    --extra-clr: hsl(219, 89%, 52%);
    /* #545760 */
    --text-clr: hsl(225, 7%, 35%);
    /* #2C2F4A */
    --text-clr-700: hsl(234, 25%, 23%);

    /* #D5D5D5 */
    --border-clr: hsl(0, 0%, 84%);
    --border-clr-30: hsla(0, 0%, 84%, 0.3);

    /* #BDBDDB */
    --border-clr-900: hsl(240, 29%, 80%);
    /* #DDDDEB */
    --border-clr-800: hsl(240, 26%, 89%);

    --ff-lato: "Lato", sans-serif;
    --ff-inter: "Inter", sans-serif;
    --ff-satoshi: "Satoshi", sans-serif;
    --ff-roboto: "Roboto", sans-serif;
    --ff-geist: "Geist", sans-serif;

    /* 40px */
    /* --fs-1000: clamp(3.5rem, 2.5vw + 1.5rem, 6rem); */
    /* 5rem (80px) max */
    --fs-1000: clamp(3.5rem, 4vw + 1.5rem, 5rem);

    /* 4rem (64px) max */
    --fs-950: clamp(2.8rem, 3.2vw + 1.2rem, 4rem);

    /* 3.75rem (60px) max */
    --fs-900: clamp(2.6rem, 3vw + 1.2rem, 3.75rem);

    /* 3.5rem (56px) max */
    --fs-850: clamp(2.5rem, 2.8vw + 1.1rem, 3.5rem);

    /* 3rem (48px) max */
    --fs-800: clamp(2.25rem, 2.4vw + 1rem, 3rem);

    /* 2.5rem (40px) max */
    --fs-700: clamp(2rem, 2vw + 0.9rem, 2.5rem);

    /* 2.25rem (36px) max */
    --fs-650: clamp(1.5rem, 1.8vw + 0.8rem, 2.25rem);

    /* 2rem (32px) max */
    --fs-600: clamp(1.4rem, 1.6vw + 0.7rem, 2rem);

    /* 1.75rem (28px) max */
    --fs-550: clamp(1.25rem, 1.4vw + 0.6rem, 1.75rem);

    /* 1.5rem (24px) max */
    --fs-500: clamp(1.125rem, 1.2vw + 0.5rem, 1.5rem);

    /* 1.25rem (20px) max */
    --fs-450: clamp(0.95rem, 1vw + 0.5rem, 1.25rem);

    /* 1.125rem (18px) max */
    --fs-425: clamp(0.85rem, 0.9vw + 0.4rem, 1.125rem);

    /* 1rem (16px) fixed */
    --fs-400: 1rem;

    /* 0.875rem (14px) max */
    --fs-300: clamp(0.75rem, 0.7vw + 0.4rem, 0.875rem);

    /* 0.75rem (12px) max */
    --fs-200: clamp(0.65rem, 0.5vw + 0.3rem, 0.75rem);

    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    accent-color: var(--secondary-clr);
    caret-color: var(--secondary-clr);
}

.btn-pill {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 6.25rem;
    background-color: var(--_btn-clr);
    color: var(--_btn-txt-clr);
    padding: 1.25em 2.25rem;
    border: none;
    border-radius: 100vw;
    font-size: var(--_btn-fs, var(--fs-400));
    font-weight: var(--_btn-fw, var(--fw-700));
    text-align: center;
    text-wrap: nowrap;
    text-transform: uppercase;
    transition: all 180ms ease;

    a {
        all: unset;
    }

    &:hover {
        color: var(--_btn-clr);
        background-color: var(--_btn-txt-clr);
        outline: 1px solid var(--_btn-clr);

        transition: all 180ms ease;

        .btn-icon {
            svg {
                path {
                    fill: currentColor;
                }
            }
        }
    }

    &:has(.btn-icon),
    &:has(.bx) {
        --_btn-clr: var(--_btn-icon-clr);
        --_btn-txt-clr: var(--_btn-icon-txt-clr);

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.625rem;

        .btn-icon {
            flex-shrink: 0;
            width: var(--_btn-icon-size, 1.25rem);
            height: var(--_btn-icon-size, 1.25rem);
            aspect-ratio: 1;

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }

    &.btn-primary {
        --_btn-clr: var(--primary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-secondary {
        --_btn-clr: var(--secondary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-secondary-900 {
        --_btn-clr: var(--secondary-clr-900);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-tertiary {
        --_btn-clr: var(--tertiary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-tertiary-900 {
        --_btn-clr: var(--tertiary-clr-900);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-text-700 {
        --_btn-clr: var(--text-clr-700);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-outline,
    &.btn-outline-tertiary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--tertiary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-tertiary-900 {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--tertiary-clr-900);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary-900 {
        --_btn-txt-clr: var(--secondary-clr-900);
        --_btn-clr: var(--white-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-primary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--primary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--secondary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary-900 {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--secondary-clr-900);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-fw-500 {
        --_btn-fw: var(--fw-500);
    }

    &.btn-sm {
        padding-block: 1rem;

        @media (width <=768px) {
            --_btn-fs: 0.875rem;
        }
    }

    &.btn-md {
        padding-inline: 1.625rem;
    }

    &.btn-xl {
        padding: 1rem 2.5rem;
    }

    &.btn-2xl {
        width: 13.5rem;
    }

    &.btn-3xl {
        padding: 0.875rem;
        width: 20.5rem;
    }

    &.btn-full {
        width: 100%;
    }

    &.btn-partner {
        border: none;
        border-bottom: 2px solid var(--secondary-clr);

        &:hover {
            outline: none;
            border-bottom-color: var(--white-clr);
        }
    }
}

.h1 {
    font-weight: var(--fw-900);
    font-size: var(--fs-1000);
    line-height: 1.14;
}

h2 {
    margin-bottom: 0;
    color: var(--tertiary-clr-900);
}

/* End of Utilities */

/* Css Only Carousel */
.trusted-institutions-slider {
    --_institution-width: 12.75rem;
    --_institution-height: 8.5rem;
    --_institution-spacing: 2rem;

    margin-top: 1.625rem;
    width: 100%;
    height: var(--_institution-height);
    mask-image: linear-gradient(
        to right,
        transparent,
        rgba(0, 0, 0) 10% 90%,
        transparent
    );
    overflow-x: clip;

    &.reverse {
        --_animation-direction: reverse;
    }
}

.trusted-institutions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--_institution-spacing);
    position: relative;
    min-width: calc(
        (var(--_institution-width) + var(--_institution-spacing)) *
            var(--_institution-quantity)
    );

    &:hover {
        .institution {
            animation-play-state: paused !important;
        }
    }

    .institution {
        --_animation-duration: calc(var(--_institution-quantity) * 5s);
        position: absolute;
        z-index: 1;
        left: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        filter: grayscale(1);

        transition: filter 300ms ease;
        animation: institutionSlider var(--_animation-duration) linear infinite;
        animation-direction: var(--_animation-direction);
        animation-delay: calc(
            (-1 * var(--_animation-duration) / var(--_institution-quantity)) *
                (var(--_institution-position) - 1)
        );

        &:hover {
            filter: grayscale(0);
            background-color: var(--white-clr);
        }

        img {
            padding: 1.25rem 1.5rem;
            width: var(--_institution-width);
            height: var(--_institution-height);
            object-fit: contain;
        }
    }
}

@keyframes institutionSlider {
    from {
        left: 100%;
    }

    to {
        left: calc(var(--_institution-width) * -1);
    }
}

/* End of Css Only Carousel */

body {
    font-family: var(--ff-satoshi);
    background-color: var(--white-clr-700);
    line-height: 1.6;
}

.wrapper {
    --_max-width: 1352px;
    --_max-width: 1500px;

    @media (width <=768px) {
        --_gap: 0px !important;
    }
}

/* Appointment */
.appointment-wrapper {
    margin-bottom: 1.25rem;
}
.appointment-content {
    padding: clamp(2rem, 2vw + 0.1rem, 3.5rem)
        clamp(1.125rem, 2vw + 0.1rem, 3.5rem);
    border-radius: 2.5rem;
    border: 1px solid #e8e8f9;
    background-color: var(--white-clr);

    @media (width <= 600px) {
        padding-bottom: 0.75rem;
    }
}

.appointment-header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    h1 {
        color: var(--text-clr-700);
        font-weight: 900;
        font-size: var(--fs-950);
        text-transform: uppercase;
        max-width: 15ch;

        @media (width <=1024px) {
            font-size: var(--fs-850);
        }
        @media (width <=600px) {
            text-align: center;
            margin-inline: auto;
        }
    }

    .my-appointment-btn {
        @media (width <= 600px) {
            display: none;
        }
    }
}

.btn-pill {
    --_btn-fw: var(--fw-700);
    --_btn-fs: 0.75rem;
    height: 46px;
}

.appointment-body {
    margin-top: 2.25rem;
    display: flex;
    display: grid;
    grid-template-columns: 1fr 1.5fr;

    background-color: #fcfcfc;
    border: 1px solid #e8e8f9;
    border-radius: 1.5rem;
    justify-content: center;

    > * {
        justify-content: stretch;
        padding: 2.25rem;
    }

    /* @media (width <= 1024px) { */
    @media (width <= 1200px) {
        --_slide-fs: 0.875rem;
        /* justify-content: start; */
        justify-items: start;
        /* grid-template-columns: 1fr auto; */
        grid-template-columns: 1fr auto;
        /* grid-template-columns: auto 1fr;
    grid-template-columns: auto 1fr; */
        /* grid-template-rows: auto auto auto; */

        > * {
            padding: clamp(1.5rem, 1.3vw + 0.8rem, 2.25rem);
        }

        .appointment-date {
            justify-self: stretch;
            padding-inline: 0;
            border-right: none;
        }

        .appointment-time-section {
            border-top: 1px solid #e8e8f9;
        }
    }
    @media (width <= 768px) {
        grid-template-columns: 100%;

        .appointment-date {
            border: none;
            border-top: 1px solid #e8e8f9;
        }

        .appointment-details-section {
            text-align: center;
            justify-self: stretch;

            align-items: center;
        }

        .appointment-date {
            justify-self: center;
        }
    }
    @media (width <= 600px) {
        border: none;
        background-color: transparent;

        .appointment-details-section {
            padding: 0;
        }

        .pill-tabs {
            width: fit-content;
        }
    }

    /* @media (width > 1400px) { */
    @media (width > 1200px) {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 1fr;
    }
}
.appointment-details-section,
.appointment-time-section {
}

.appointment-details-section {
    --_tab-mx: 0;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--fs-500);
        line-height: 1;
        text-transform: uppercase;
        color: var(--text-clr-700);
        max-width: 15ch;
    }

    .appointment-list {
        dl {
            display: grid;
            grid-template-columns: 0.875rem 1fr;
            gap: 0.75rem;
            align-items: center;

            > *:not(dt:first-child),
            > *:not(dd:first-child) {
                padding-block: 0.875rem;
            }
        }
        dt {
            color: var(--text-clr-700);
        }

        dd {
            font-weight: var(--fw-500);
        }

        dt,
        dd {
            border-bottom: 1px solid #f2f2f8;
        }
    }
}

.appointment-date {
    justify-self: center;
    border-inline: 1px solid #e8e8f9;

    .calendar {
        padding: 2.25rem;
    }
}

.timezone {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    div {
        color: var(--text-clr-700);
    }

    span {
        font-weight: var(--fw-500);
    }
}

.today-date {
    font-weight: var(--fw-700);
    color: var(--text-clr-700);
}

.sessions {
    margin-top: 1.125rem;
    display: flex;
    gap: 0.5rem;
    label {
        cursor: pointer;
        /* padding: 0.75rem; */
        padding: 0.625rem;
        line-height: 0.9;
        display: flex;
        align-self: center;
        justify-content: center;
        font-size: 0.875rem;
        color: var(--slot-clr, var(--text-clr-700));
        background-color: var(--slot-bg-clr, var(--white-clr-850));
        border: 1px solid var(--border-clr-800);
        border-radius: 100vw;
        &:has(input[type="radio"]:checked) {
            --slot-clr: var(--white-clr);
            --slot-bg-clr: var(--secondary-clr-900);
            box-shadow: 0px 0px 15px 0px
                hsl(from var(--text-clr-700) h s l / 0.08);
            border-color: var(--text-clr-700);
        }
    }

    input {
        display: none;
    }
}

.appointment-time-section {
    /* @media (width <=1400px) { */
    @media (width <=1200px) {
        justify-self: stretch;
        grid-column: 1/-1;
    }
    @media (width >600px) {
        .my-appointment-btn {
            display: none;
        }
    }
    .btns-wrapper {
        @media (width <=600px) {
            --_btns-gap: 0.5rem;

            z-index: 100;
            position: sticky;
            width: 100vw;
            margin-left: -2.75rem;
            bottom: 0;
            padding: 1rem 1.5rem;
            background-color: var(--white-clr);

            display: flex;
            gap: var(--_btns-gap);

            > * {
                flex: 1 0 calc(50% - var(--_btns-gap));
            }
        }

        @media (width <=480px) {
            flex-direction: column;

            .btn-pill {
                padding-block: 0.875rem;
            }
        }
    }
}
.slots {
    margin-top: 1.125rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    max-height: 312px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    overflow-y: scroll;
    mask-image: var(
        --_slots-mask,
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0) 10% 90%,
            transparent
        )
    );

    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    &::-webkit-scrollbar {
        display: none;
    }

    /* @media (width <= 1400px) { */
    @media (width <= 1200px) {
        /* --_slots-height: auto; */
        --_slots-mask: none;
    }

    label {
        /* max-width: var(--_label-width, 100%); */
        cursor: pointer;
        padding: 0.625rem;
        line-height: 0.9;
        display: flex;
        align-self: center;
        justify-content: center;
        color: var(--slot-clr, var(--text-clr-700));
        background-color: var(--slot-bg-clr, var(--white-clr-850));
        border: 1px solid var(--border-clr-800);
        border-radius: 0.75rem;

        &:has(input[type="radio"]:checked) {
            --slot-clr: var(--white-clr);
            --slot-bg-clr: var(--secondary-clr-900);
            box-shadow: 0px 0px 15px 0px
                hsl(from var(--text-clr-700) h s l / 0.08);
            border-color: var(--text-clr-700);
        }
    }

    input {
        display: none;
    }
}
/* End of Appointment */

.field-validation-valid {
    display: inline-block;
    text-align: center;
    width: 100%;
}