/* FORM INICIAL */
#page-schedule-form {
    position: relative;
    h1 {
        font-weight: 500;
        margin: 0 0 1rem;
    }
    .option--selector {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-direction: column;
        padding: 20px;
        border: 1px solid var(--clr-gray-200);
        border-radius: 10px;
        background: var(--clr-white);
        font-size: 0.875rem;
        text-align: center;
        color: var(--clr-gray-700);
        .icon {
            width: 44px;
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100dvw;
            background: var(--clr-qtr-100);
            > img {
                
            }
        }
        @media (max-width: 769px) {
            justify-content: flex-start;
            flex-direction: row;
        }
    }
    .pbds-btn.back {
        margin: 0 0 16px;
    }
    &[class^="step"] {
        padding: 60px;
        background: var(--clr-gray-050);
        @media (max-width: 769px) {
            padding: 60px 0px;
            min-height: calc(100dvh - var(--menu-height) - 40px);
        }
        > .pbds-container {
            min-height: calc(100dvh - var(--menu-height) - 400px);
            display: flex;
            justify-content: center;
            align-items: center;
            .content {
                width: 100%;
                max-width: 620px;
            }
            @media (max-width: 769px) {
                min-height: auto;
            }
        }
    }
    &.step-0 {
        form {
            margin: 40px 0 0;
            label {
                width: 100%;
                margin: 0 0 40px;
            }
        }
        @media (max-width: 769px) {
            min-height: calc(100dvh - var(--menu-height) - 40px);
            display: flex;
            > .pbds-container {
                align-self: center;
            }
        }
    }
    &.step-1 {
        .options {
            margin: 40px 0 0;
            ul {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
                @media (max-width: 769px) {
                    grid-template-columns: 100%;
                }
            }
        }
    }
    &.step-success {
        padding: 0 !important;
        > .pbds-container {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-template-areas: "content media";
            .content {
                grid-area: content;
            }
            .media {
                grid-area: media;
                width: 50dvw;
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .action--wrapper {
            margin: 40px 0 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 20px;
            @media (max-width: 600px) {
                flex-direction: column;
                >.pbds-btn.prm {
                    width: 100%;
                }
            }
        }
        .plus {
            padding: 40px 0 20px;
            @media (max-width: 600px) {
                text-align: center;
            }
        }
        @media (max-width: 1080px) {
            > .pbds-container {
                width: 100% !important;
                margin: 0;
                grid-template-columns: 100% !important;
                grid-template-rows: 30dvh minmax(40dvh,1fr);
                grid-template-areas: "media" "content";
                .content {
                    max-width: 620px;
                    margin: 0 auto;
                    padding: 60px 20px;
                }
                .media {
                    grid-area: media;
                    width: 100%;
                    height: 100%;
                    position: relative;
                }
            }
        }
        @media (max-width: 769px) {
            > .pbds-container {
                .content {
                    padding: 75px 20px;
                }
            }
        }
    }    
    #schedule-form {
        margin-top: 40px;
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr !important;
            gap: 20px;
            width: 100%;
        }
        
        .form--optin {
            margin: 20px;
        }
        button[type="submit"] {
            width: 100%;
            margin-top: 10px;
        }

        button.pbds-btn.prm[disabled="disabled"] {
            &:before {
                width: 12px;
                height: 12px;
                display: block;
                content: "";
                background: url("/template/images-pbds/icons/ic_lock--gray.svg") center center no-repeat;
                background-size: contain;
            }
        }
        label:has(input[disabled]) {
            &:after {
                width: 12px;
                height: 12px;
                display: block;
                content: "";
                background: url("/template/images-pbds/icons/ic_lock--gray.svg") center center no-repeat;
                background-size: contain;
                position: absolute;
                top: 14px;
                left: 16px;
            }
            input {
                padding-left: 32px !important;
            }
        }
        @media (max-width: 769px) {
            .content {
                grid-template-columns: 100% !important;
            }
            .form--optin {
                margin: 20px 0;
            }

        }
    }
}

/* AGENDA */
#page-schedule {
    --offset: 80px;
    --layout-spacer: 20px 80px;
    --layout-cols: 1fr 516px;
    --layout-rows: auto auto 1fr auto;
    --layout-areas: 
            "header consultants"
            "calendar consultants"
            "calendar times"
            "footnote submit";
    --dateselector-size--height: 70px;
    --timeselector-cols: 4;
    --box-spacer: 32px 40px;
    @media (max-width: 1440px) {
        --layout-spacer: 20px 48px;
        --layout-cols: 1fr 562px;
        --timeselector-cols: 5;
        --dateselector-size--height: 55px;
    }
    @media (max-width: 1080px) {
        --offset: 0px;
        --layout-cols: 100%;
        --layout-rows: auto;
        --layout-areas: 
                "header"
                "calendar"
                "footnote"
                "consultants"
                "times"
                "submit";
        --dateselector-size--width: 46px;
        --dateselector-size--height: 50px;
        --timeselector-cols: 8;
    }
    @media (max-width: 769px) {
        --timeselector-cols: 5;
    }
    @media (max-width: 600px) {
        --timeselector-cols: 3;
        --box-spacer: 20px;
    }
}
#page-schedule {
    padding: 40px 0;
    background: var(--clr-gray-050);
    h1 {
        margin: 8px 0 20px;
        font-weight: 500;
    }
    > .pbds-container {
        padding: 0 var(--offset);
        display: grid;    
        grid-template-columns: var(--layout-cols);
        grid-template-rows: var(--layout-rows);
        gap: var(--layout-spacer);
        grid-template-areas: var(--layout-areas);
        > header {
            grid-area: header;
        }
        > .calendar--wrapper {
            grid-area: calendar;
        }
        > .times--wrapper {
            grid-area: times;
            height: 100%;
            #jsBookings {
                height: 100%;
            }
            .pbds-schedule--box {
                height: 100%;
                display: grid;
                grid-template-columns: 1fr auto;
                grid-template-rows: auto 1fr auto;
                grid-template-areas: "info footnote" "bookings bookings" "online online";
                gap: 20px;
            }
            .info {
                grid-area: info;
                align-self: start;
            }
            p {
                margin: 0;
            }
            .bookings {
                grid-area: bookings;
            }
            label {
                grid-area: online;
            }
            .pbds-btn {
                min-width: 100%;
            }
            ul {
                display: grid;
                grid-template-columns: repeat(var(--timeselector-cols),1fr);
                grid-template-rows: auto;
                align-self: start;
                gap: 8px 16px;
            }
            .footnote {
                grid-area: footnote;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 8px;
                .mark {
                    width: 16px;
                    aspect-ratio: 1;
                    display: block;
                    border-radius: 50%;
                    border: 1px dashed var(--clr-gray-300);
                }
                span {
                    font-size: 0.75rem;
                    font-weight: 400;
                    color: var(--clr-gray-500);
                }
                .mobile {
                    display: none;
                }
                @media (max-width: 769px) {
                    margin: 0;
                    .mobile {
                        display: block;
                    }
                    .desktop {
                        display: none;
                    }
                }
            }
        }
        > .consultants--wrapper {
            grid-area: consultants;
            label {
                width: 100%;
            }
        }
        > .legend--wrapper {
            grid-area: footnote;
            display: flex;
            align-items: center;
            gap: 8px;
            .mark {
                width: 16px;
                aspect-ratio: 1;
                border-radius: 50%;
                border: 1px dashed var(--clr-gray-300);
            }
            span {
                font-size: 0.75rem;
                font-weight: 400;
                color: var(--clr-gray-500);
            }
        }
        > .submit--wrapper {
            grid-area: submit;
            justify-self: end;
            @media (max-width: 600px) {
                width: 100%;
                >.pbds-btn {
                    width: 100%;
                }
            }
        }
    }
    .ui-datepicker {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none !important;
        background: none;
        .ui-datepicker-header{
            margin: 0 0 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            border: none;
            background: none;
            font-size: 28px;
            font-weight: 300;
            .ui-datepicker-title {
                order: 2;
                margin: 0;
            }
            .ui-datepicker-prev,
            .ui-datepicker-next {
                left: auto;
                right: auto;
                top: auto;
                position: relative;
                > span {
                    display: none;
                }
            }
            .ui-datepicker-prev {
                order: 1;
                background: url(/template/images-pbds/icons/ic_chevron-left--black.svg) center center no-repeat;
            }
            .ui-datepicker-next {
                order: 3;
                background: url(/template/images-pbds/icons/ic_chevron-right--black.svg) center center no-repeat;
            }
            @media (max-width: 1080px) {
                width: 100%;
                height: 56px;
                padding: 0 20px;
                justify-content: space-between;
                font-size: 20px;
                border: 1px solid var(--clr-gray-100);
                border-radius: 100dvw;
                background: var(--clr-white);
            }
        }
        .ui-helper-clearfix:before,
        .ui-helper-clearfix:after {
            display: none !important;
        }
        .ui-datepicker-calendar {
            border-collapse: collapse;
            td {
                padding: 4px 8px;
                > span,
                > a {
                    width: var(--dateselector-size--width,auto);
                    height: var(--dateselector-size--height);
                    display: flex;
                    justify-content: center !important;
                    align-items: center !important;
                    flex-direction: column;
                    font-size: 1rem; 
                    font-weight: 400;
                    border-radius: 10px;
                    border: 1px solid var(--clr-gray-200) !important;
                    color: var(--clr-black);
                    background: var(--clr-white);
                    &.ui-state-active {
                        border: 1px solid var(--clr-qtr-400) !important;
                        background: var(--clr-qtr-100);
                    }
                }
                > a:hover {
                    border: 1px solid var(--clr-qtr-400) !important;
                }
                &.ui-state-disabled {
                    opacity: 0.75;
                    > span {
                        color: var(--clr-gray-200);
                        border: 1px dashed var(--clr-gray-200) !important;
                        background: transparent;
                    }
                }
            }
            @media (max-width: 1080px) {
                width: calc(100% + 40px);
                margin: 0 -20px;
                display: block;
                overflow: auto;
                thead {
                    display: none;
                }
                tbody {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    .ui-datepicker-other-month{
                        display: none;
                    }
                    tr {
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        &:nth-of-type(1) {
                            padding: 0 0 0 20px;
                        }
                        &:last-of-type {
                            padding: 0 20px 0 0;
                        }
                        td {
                            padding: 0 4px;
                            > a,
                            > span {
                                font-size: 0.875rem;
                                &:after {
                                    display: block;
                                    font-size: 0.75rem;
                                    font-weight: 700;
                                    color: var(--clr-gray-400);
                                }
                            }
                            &.ui-state-disabled {
                                display: none;
                            }
                            &:nth-of-type(1) {
                                > a, > span {
                                    &:after {
                                        content: "Dom";
                                    }
                                }
                            }
                            &:nth-of-type(2) {
                                > a, > span {
                                    &:after {
                                        content: "Seg";
                                    }
                                }
                            }
                            &:nth-of-type(3) {
                                > a, > span {
                                    &:after {
                                        content: "Ter";
                                    }
                                }
                            }
                            &:nth-of-type(4) {
                                > a, > span {
                                    &:after {
                                        content: "Qua";
                                    }
                                }
                            }
                            &:nth-of-type(5) {
                                > a, > span {
                                    &:after {
                                        content: "Qui";
                                    }
                                }
                            }
                            &:nth-of-type(6) {
                                > a, > span {
                                    &:after {
                                        content: "Sex";
                                    }
                                }
                            }
                            &:nth-of-type(7) {
                                > a, > span {
                                    &:after {
                                        content: "Sáb";
                                    }
                                }
                            }
                            &.ui-state-disabled {
                                > a,
                                > span {
                                    &:after {
                                        color: var(--clr-gray-200);
                                        font-weight: 300;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .pbds-schedule--box {
        width: 100%;
        padding: var(--box-spacer);
        border: 1px solid var(--clr-gray-100);
        border-radius: 10px;
        background: var(--clr-white);
    }
}
/* MODAL */
#Schedule_calendar {
    .pbds-modal-confirm--schedule {
        .pbds-modal {
            max-width: 480px;
            .footer {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
            .plus {
                padding: 32px 0 12px;
                text-align: center;
            }
            @media (max-width: 600px) {
                .footer {
                    display: flex;
                    flex-direction: column;
                    .pbds-btn {
                        width: 100%;
                    }
                }
                .plus {
                    padding: 20px 0;
                    text-align: center;
                }
            }
        }
    }
}

/* CHECKIN LOJA */
body#Schedule_atstore,
body#Schedule_atstore *,
body#Schedule_queue,
body#Schedule_queue *,
body#Schedule_queueforms,
body#Schedule_queueforms *,
body#Schedule_success,
body#Schedule_success *,
body#Schedule_checkin,
body#Schedule_checkin *  {
    --mainmenu-height: 90px;
    --type-display01--weight: 500;
    --type-titleLg--weight: 500;
    .pbds-mainmenu--pbshop-simple,
    .pbds-mainmenu--pbshop-simple * {
        --logo-size: 120px;
        --theme-bg: var(--clr-black);
        --theme-font: var(--clr-white);
        --theme-border: var(--clr-gblack);
        img {
            filter: invert(1);
        }
    }
}
.main-container {
    width: 100dvw;
    height: calc(100dvh - var(--mainmenu-height));
    background: var(--clr-gray-050);
    > .pbds-container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        > .wrapper {
            width: 100%;
            max-width: 796px;
            @media (max-width: 1080px) {
                max-width: 484px;
            }
        }
    }
    ul.navigation {
        margin: 40px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        @media (max-width: 769px) {
            grid-template-columns: 100%;
        }
    }
    .option--selector {
        min-height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-direction: column;
        padding: 20px;
        border: 1px solid var(--clr-gray-200);
        border-radius: 10px;
        background: var(--clr-white);
        font-size: 0.875rem;
        text-align: center;
        color: var(--clr-gray-700);
        i,b {
            display: block;
        }
        .icon {
            width: 44px;
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100dvw;
            background: var(--clr-qtr-100);
            > img {
                
            }
        }
        @media (max-width: 769px) {
            min-height: auto;
            justify-content: flex-start;
            flex-direction: row;
            text-align: left;
        }
    }
}
#page-schedule-pbshop-success {
    > .pbds-container {
        display: grid;
        grid-template-columns: 1fr 50dvw;
        grid-template-areas: "content media";
    }
    h1 {
        margin: 0 0 16px;
    }
    .wrapper {
        grid-area: content;
    }
    .media {
        grid-area: media;
        position: absolute;
        width: 50dvw;
        height: calc(100dvh - var(--mainmenu-height));
        top: var(--mainmenu-height);
        right: 0;
        overflow: hidden;
        > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    .action--wrapper {
        margin: 40px 0 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        @media (max-width: 600px) {
            flex-direction: column;
            >.pbds-btn.prm {
                width: 100%;
            }
        }
    }
    .plus {
        padding: 40px 0 20px;
        @media (max-width: 600px) {
            text-align: center;
        }
    }
    @media (max-width: 1080px) {
        > .pbds-container {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: minmax(40%,500px) 1fr;
            grid-template-areas: "media" "content";
        }
        .wrapper {
            justify-self: center;
        }
        .media {
            position: relative;
            width: calc(100% + 40px);
            height: 100%;
            top: auto;
            right: auto;
            margin: 0 -20px;
        }
    }
    @media (max-width: 769px) {
        > .pbds-container {
            grid-template-rows: minmax(40%,300px) 1fr;
        }
    }
}
#page-schedule-pbshop-queue,
#page-schedule-pbshop-queue-forms,
#page-schedule-pbshop-checkin {
    h1 {
        margin: 16px 0;
    }
     #schedule-form {
        margin-top: 40px;
        .content  {
            display: grid;
            grid-template-columns: 1fr 1fr !important;
            gap: 20px;
            width: 100%;
        }
        
        .form--optin {
            margin: 20px;
            display: flex;
            flex-direction: column;
        }
        button[type="submit"] {
            width: 100%;
            margin-top: 10px;
        }

        @media (max-width: 769px) {
            .content  {
                grid-template-columns: 100% !important;
            }
            .form--optin {
                margin: 20px 0;
            }
        }
    }
}
#page-schedule-pbshop-checkin {
    >.pbds-container {
        > .wrapper {
            max-width: 600px;
        }
    }
    form {
        width: 100%;
        max-width: 335px;
        margin: 32px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 16px;
        label {
            width: 72px;
            height: 72px;
            &:before {
                height: 100%;
            }
            input {
                width: 100%;
                height: 100%;
                padding: 20px 15px 20px 30px;
                text-align: center;
                &:focus
                {
                    border: 2px solid green;
                    border-radius: 10px;
                }
            }            
            .field-error {
                display: none !important;
            }
        }
        button {
            grid-column: -1 / 1;
            > img {
                display: none;
            }
            &[disabled] {
                > img {
                    display: block;
                }
            }
        }
    }
}