.ea-standard {
    width: 100%;
}

.ea-standard form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content);
    grid-template-areas:
        "service service"
        "calendar contact"
        "time contact";
    gap: 1.00em;
}

@media (max-width: 60em) {
    .ea-standard form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, min-content);
        grid-template-areas: 
            "service"
            "calendar"
            "time"
            "contact";
    }
}

.ea-standard .error {
    color: var(--clr-red);
}

.ea-standard input.error {
    outline: 1px solid var(--clr-red);
    color: var(--clr-black);
}

.ea-standard .step {
    transition: opacity 500ms ease-in;
}

.ea-standard .step.disabled {
    opacity: 0.15;
}

.ea-standard .step:nth-child(2) {
    grid-area: service;
    margin-bottom: 1.50em;
    text-align: center;
}

.ea-standard .step:nth-child(2) label {
    display: none;
    visibility: hidden;
}

.ea-standard .step:nth-child(2) select {
    width: 25%;
}

.ea-standard .step.calendar {
    grid-area: calendar;
}

.ea-standard .step:nth-child(5) {
    grid-area: time;
}

.ea-standard .step.calendar .date {
    width: 100%;
    height: 100%;
}

.ea-standard .ui-datepicker-header {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 0.50em;
}

.ea-standard .ui-datepicker-header .ui-datepicker-prev,
.ea-standard .ui-datepicker-header .ui-datepicker-next {
    padding-block: 0.50em;
    padding-inline: 1.25em;
    border: 1px solid var(--clr-primary-50);
    background-color: var(--clr-primary-50);
    color: var(--clr-white);
    cursor: pointer;
}

.ea-standard .ui-datepicker-header .ui-datepicker-prev {
    order: 1;
}

.ea-standard .ui-datepicker-header .ui-datepicker-title {
    font-weight: bold;
    text-transform: capitalize;
    order: 2;
}

.ea-standard .ui-datepicker-header .ui-datepicker-next {
    order: 3;
}

.ea-standard .ui-datepicker-calendar {
    width: 100%;
}

.ea-standard .ui-datepicker-calendar tr:hover {
    background-color: unset;
}

.ea-standard .ui-datepicker-calendar th {
    padding-inline: 0.50em;
    padding-block: 0.50em;
    background-color: var(--clr-primary-50);
    color: var(--clr-white);
}

.ea-standard .ui-datepicker-calendar td {
    padding-inline: 0.50em;
    padding-block: 0.50em;
    background-color: var(--clr-light-grey);
    text-align: center;
}

.ea-standard .ui-datepicker-calendar td.ui-datepicker-unselectable {
    text-decoration: line-through;
    opacity: 0.35;
}

.ea-standard .ui-datepicker-calendar td a {
    color: var(--clr-day-cell, var(--clr-primary-50));
}

.ea-standard .ui-datepicker-calendar td a.ui-state-active {
    font-weight: bold;
}

.ea-standard .ui-datepicker-calendar td:has(a.ui-state-active) {
    --clr-day-cell: var(--clr-white);

    background-color: var(--clr-accent-50);
}

.ea-standard .step .time {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.10em;
}

.ea-standard .step .time .time-message {
    grid-column-start: 1;
    grid-column-end: -1;
    color: var(--clr-red);
    text-align: center;
    font-weight: bold;
}

.ea-standard .step .time a {
    padding-block: 0.50em;
    background-color: var(--clr-primary-50);
    color: var(--clr-white);
    text-align: center;
}

.ea-standard .step .time a.selected-time {
    background-color: var(--clr-accent-50) !important;
}

.ea-standard .step.final {
    grid-area: contact;
}

.ea-standard .step.final .ea_hide_show div {
    display: flex !important;
    justify-content: center;
    gap: 0.50em;
}

.ea-standard .step.final .ea_hide_show .section {
    font-size: 1.10em;
    font-weight: bold;
    text-align: center;
}

.ea-standard .step.final #booking-overview {
    margin-bottom: 1.00em;
}

.ea-standard .step.final button {
    --clr-button-bg: var(--clr-primary-50);
    --clr-button-border: var(--clr-primary-50);
    --clr-button-text: var(--clr-white);
    --clr-button-bg-anim: var(--clr-primary-90);
}

.ea-standard .step.final button.ea-cancel {
    --clr-button-bg: transparent;
    --clr-button-text: var(--clr-primary-50);
}

.ea-standard .step.final button.ea-cancel:hover {
    --clr-button-text: var(--clr-white);
}