@import url("/assets/css/design-system.css?v=3") layer(d2c-system);

/* ==========================================================================
   D2C GAME — WEBINARKIT DATE + TIME SPLIT
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| ORIGINAL WEBINARKIT SELECT
|--------------------------------------------------------------------------
|
| Do NOT remove it.
| WebinarKit still uses this field internally.
|
| We only hide it after our JS has successfully initialized.
|
*/

.masterclass-page
.mc-webinarkit
.wk_registration_form_date.wk-session-source {

    display: none !important;

}


/*
|--------------------------------------------------------------------------
| LOCAL TIME NOTE
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-time-note {

    grid-column:
        1 / -1;

    width:
        100%;

    margin: var(--space-1) 0 var(--space-1);

    color:
        var(--color-deep-navy);

    font-family:
        inherit;

    font-size:
        13px;

    line-height:
        1.4;

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| DATE + TIME GRID
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-pickers {

    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: var(--space-3);

    width:
        100%;

    margin: 0;

}


/*
|--------------------------------------------------------------------------
| SELECTS
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-date,

.masterclass-page
.mc-webinarkit
.mc-session-time {

    box-sizing:
        border-box;

    display:
        block;

    width:
        100%;

    max-width:
        none;

    height:
        52px;

    margin: 0;

    padding: 0 var(--space-4);

    border:
        1px solid
        var(--color-neutral-200);

    border-radius: var(--radius-sm);

    outline:
        none;

    background:
        var(--color-white);

    color:
        var(--color-deep-navy);

    box-shadow:
        none;

    appearance:
        auto;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        52px;

}


/*
|--------------------------------------------------------------------------
| FOCUS
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-date:focus,

.masterclass-page
.mc-webinarkit
.mc-session-time:focus {

    border-color:
        var(--color-violet);

    box-shadow:
        0 0 0 3px
        rgba(
            113,
            48,
            239,
            .08
        );

}


/*
|--------------------------------------------------------------------------
| DISABLED TIME
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-time:disabled {

    background:
        var(--color-off-white);

    color:
        var(--color-slate);

    cursor:
        not-allowed;

}


/*
|--------------------------------------------------------------------------
| VALIDATION
|--------------------------------------------------------------------------
*/

.masterclass-page
.mc-webinarkit
.mc-session-pickers.is-invalid
.mc-session-date,

.masterclass-page
.mc-webinarkit
.mc-session-pickers.is-invalid
.mc-session-time {

    border-color:
        var(--color-error);

}


.masterclass-page
.mc-webinarkit
.mc-session-error {

    grid-column:
        1 / -1;

    margin: -5px 0 var(--space-1);

    color:
        var(--color-error);

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 768px
) {

    .masterclass-page
    .mc-webinarkit
    .mc-session-pickers {

        gap: var(--space-2);

    }


    .masterclass-page
    .mc-webinarkit
    .mc-session-date,

    .masterclass-page
    .mc-webinarkit
    .mc-session-time {

        height:
            44px;

        padding: 0 var(--space-3);

        font-size:
            12px;

        line-height:
            44px;

    }


    .masterclass-page
    .mc-webinarkit
    .mc-session-time-note {

        font-size:
            12px;

    }

}