/* =========================================================
   ADI YOGPEETH
   PRENATAL COURSE CALENDAR
   MATCHED TO ACTUAL PHP MARKUP

   File:
   course-prenatal-calendar.css
   ========================================================= */


/* =========================================================
   01. CALENDAR WRAPPER
   ========================================================= */

.prenatal-calendar {

    width: 100%;

    padding:
        0
        14px
        14px;

    color:
        #303532;

    font-family:
        var(--font-body,
        "Inter",
        Arial,
        sans-serif);
}


.prenatal-calendar__container {

    width: 100%;

    max-width: 100%;
}


/* =========================================================
   02. CALENDAR HEADER
   ========================================================= */

.prenatal-calendar__header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        8px
        2px
        12px;

    border-bottom:
        1px solid
        #e8e1d7;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.prenatal-calendar__eyebrow {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #b88943;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}


.prenatal-calendar__header h2 {

    margin:
        0
        3px;

    color:
        #24342d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-weight:
        400;

    line-height:
        1.15;
}


.prenatal-calendar__header p {

    margin:
        0;

    color:
        #777c77;

    font-size:
        8px;

    line-height:
        1.5;
}


/* =========================================================
   03. MONTH SELECTOR
   ========================================================= */

.prenatal-calendar__selector {

    flex:
        0 0 auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.prenatal-calendar__selector label {

    color:
        #777c77;

    font-size:
        7px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.prenatal-calendar__selector select {

    width:
        145px;

    height:
        29px;

    padding:
        4px
        8px;

    border:
        1px solid
        #d8d0c5;

    border-radius:
        4px;

    outline:
        none;

    background:
        #fff;

    color:
        #33423a;

    font-size:
        8px;

    font-weight:
        600;

    cursor:
        pointer;
}


.prenatal-calendar__selector select:hover {

    border-color:
        #b88943;
}


.prenatal-calendar__selector select:focus {

    border-color:
        #b88943;

    box-shadow:
        0 0 0 2px
        rgba(184,137,67,.10);
}


/* =========================================================
   04. BATCHES
   ========================================================= */

.prenatal-calendar__batches {

    position:
        relative;

    width:
        100%;
}


.prenatal-calendar__batch {

    display:
        none;

    margin-top:
        10px;

    border:
        1px solid
        #e3ddd3;

    border-radius:
        6px;

    background:
        #fff;

    overflow:
        hidden;

    box-shadow:
        0 5px 18px
        rgba(25,48,39,.045);
}


.prenatal-calendar__batch.is-active {

    display:
        block;
}


/* =========================================================
   05. BATCH TOP
   ========================================================= */

.prenatal-calendar__batch-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        10px
        12px;

    background:
        #f8f5ee;

    border-bottom:
        1px solid
        #ebe4da;
}


.prenatal-calendar__batch-top > div:first-child span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #b88943;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .10em;
}


.prenatal-calendar__batch-top h3 {

    margin:
        0;

    color:
        #20382f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1.15;
}


/* =========================================================
   06. STATUS
   ========================================================= */

.prenatal-calendar__status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px
        8px;

    border-radius:
        3px;

    background:
        #e5f1e9;

    color:
        #397357;

    font-size:
        6.5px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.prenatal-calendar__status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #4d876c;
}


/* =========================================================
   07. DAYS STRIP
   ========================================================= */

.prenatal-calendar__days {

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    padding:
        9px
        9px
        7px;

    gap:
        5px;

    background:
        #fff;
}


/* =========================================================
   DAY
   ========================================================= */

.prenatal-calendar__day {

    position:
        relative;

    min-height:
        58px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px
        2px;

    border:
        1px solid
        #ebe5dc;

    border-radius:
        4px;

    background:
        #fbfaf7;

    text-align:
        center;
}


.prenatal-calendar__day-name {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #8a8e89;

    font-size:
        6px;

    font-weight:
        700;

    line-height:
        1;
}


.prenatal-calendar__day-number {

    display:
        block;

    color:
        #3c4842;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.1;
}


.prenatal-calendar__day small {

    display:
        block;

    margin-top:
        4px;

    color:
        #999c97;

    font-size:
        5px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .02em;
}


/* =========================================================
   08. CHECK-IN
   ========================================================= */

.prenatal-calendar__day.is-checkin {

    background:
        #eef7f1;

    border-color:
        #9bbca9;
}


.prenatal-calendar__day.is-checkin
.prenatal-calendar__day-number {

    color:
        #2c7253;
}


.prenatal-calendar__day.is-checkin
.prenatal-calendar__day-name {

    color:
        #4b8065;
}


.prenatal-calendar__day.is-checkin small {

    color:
        #397357;
}


/* =========================================================
   09. LAST TRAINING DAY
   ========================================================= */

.prenatal-calendar__day.is-last-day {

    background:
        #f8f3e9;

    border-color:
        #d8c39b;
}


.prenatal-calendar__day.is-last-day
.prenatal-calendar__day-number {

    color:
        #8b6732;
}


.prenatal-calendar__day.is-last-day small {

    color:
        #a17b40;
}


/* =========================================================
   10. CHECK-OUT
   ========================================================= */

.prenatal-calendar__day.is-checkout {

    background:
        #edf3f6;

    border-color:
        #a7bdca;
}


.prenatal-calendar__day.is-checkout
.prenatal-calendar__day-number {

    color:
        #47758d;
}


.prenatal-calendar__day.is-checkout
.prenatal-calendar__day-name {

    color:
        #668494;
}


.prenatal-calendar__day.is-checkout small {

    color:
        #47758d;
}


/* =========================================================
   11. DAY DETAILS
   ========================================================= */

.prenatal-calendar__details {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin:
        0
        9px;

    border:
        1px solid
        #e8e1d8;

    border-radius:
        4px;

    background:
        #fbfaf7;

    overflow:
        hidden;
}


.prenatal-calendar__details > div {

    min-height:
        45px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        6px
        8px;

    border-right:
        1px solid
        #e8e1d8;
}


.prenatal-calendar__details > div:last-child {

    border-right:
        0;
}


.prenatal-calendar__details span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #999c97;

    font-size:
        5.5px;

    font-weight:
        800;

    letter-spacing:
        .04em;
}


.prenatal-calendar__details strong {

    display:
        block;

    color:
        #3d4842;

    font-size:
        7.5px;

    font-weight:
        600;

    line-height:
        1.25;
}


/* =========================================================
   12. BOTTOM AREA
   ========================================================= */

.prenatal-calendar__bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        10px
        12px;

    border-top:
        1px solid
        #e9e3da;

    background:
        #fff;
}


/* =========================================================
   PRICE
   ========================================================= */

.prenatal-calendar__price {

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    column-gap:
        5px;

    row-gap:
        0;
}


.prenatal-calendar__price span {

    width:
        100%;

    color:
        #858a85;

    font-size:
        6px;

    line-height:
        1.2;
}


.prenatal-calendar__price strong {

    color:
        #173f32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1.1;
}


.prenatal-calendar__price small {

    color:
        #8a8e89;

    font-size:
        6px;
}


/* =========================================================
   13. ACTIONS
   ========================================================= */

.prenatal-calendar__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.prenatal-calendar__actions .btn {

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px
        11px;

    border:
        1px solid
        transparent;

    border-radius:
        4px;

    font-size:
        7px;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        all .2s ease;
}


.prenatal-calendar__actions
.btn-primary {

    background:
        #173f32;

    border-color:
        #173f32;

    color:
        #fff;
}


.prenatal-calendar__actions
.btn-primary:hover {

    background:
        #0d3025;

    border-color:
        #0d3025;

    color:
        #fff;
}


.prenatal-calendar__actions
.btn-secondary {

    background:
        #fff;

    border-color:
        #cfc7bb;

    color:
        #34453d;
}


.prenatal-calendar__actions
.btn-secondary:hover {

    border-color:
        #173f32;

    color:
        #173f32;
}


/* =========================================================
   14. NOTE
   ========================================================= */

.prenatal-calendar__note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    margin-top:
        8px;

    padding:
        7px
        9px;

    border:
        1px solid
        #e6e0d6;

    border-radius:
        4px;

    background:
        #faf8f3;
}


.prenatal-calendar__note > span {

    flex:
        0 0 auto;

    color:
        #4d876c;

    font-size:
        9px;

    font-weight:
        800;
}


.prenatal-calendar__note p {

    margin:
        0;

    color:
        #777c77;

    font-size:
        6.5px;

    line-height:
        1.5;
}


/* =========================================================
   15. MULTIPLE MONTH BATCHES
   ========================================================= */

/*
 * PHP renders all batches, but JavaScript adds
 * .is-active to the selected batch.
 *
 * Hide everything except active batch.
 */

.prenatal-calendar__batch:not(.is-active) {

    display:
        none;
}


/* =========================================================
   16. SMOOTH TRANSITION
   ========================================================= */

.prenatal-calendar__batch.is-active {

    animation:
        prenatalCalendarFade
        .2s
        ease;
}


@keyframes prenatalCalendarFade {

    from {

        opacity:
            0;

        transform:
            translateY(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   17. TABLET
   ========================================================= */

@media (max-width: 800px) {

    .prenatal-calendar {

        padding:
            0
            8px
            10px;
    }


    .prenatal-calendar__header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .prenatal-calendar__selector {

        width:
            100%;
    }


    .prenatal-calendar__selector select {

        width:
            100%;
    }


    .prenatal-calendar__days {

        grid-template-columns:
            repeat(7, 1fr);

        gap:
            4px;
    }


    .prenatal-calendar__day {

        min-height:
            52px;
    }


    .prenatal-calendar__details {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .prenatal-calendar__details > div:nth-child(2) {

        border-right:
            0;
    }


    .prenatal-calendar__details > div:nth-child(-n+2) {

        border-bottom:
            1px solid
            #e8e1d8;
    }


    .prenatal-calendar__bottom {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .prenatal-calendar__actions {

        width:
            100%;
    }


    .prenatal-calendar__actions .btn {

        flex:
            1;
    }

}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .prenatal-calendar__header h2 {

        font-size:
            18px;
    }


    .prenatal-calendar__header p {

        font-size:
            7px;
    }


    .prenatal-calendar__batch-top {

        padding:
            8px;
            10px;
    }


    .prenatal-calendar__batch-top h3 {

        font-size:
            15px;
    }


    .prenatal-calendar__status {

        padding:
            4px
            6px;

        font-size:
            5.5px;
    }


    .prenatal-calendar__days {

        gap:
            3px;

        padding:
            7px
            5px
            5px;
    }


    .prenatal-calendar__day {

        min-height:
            48px;

        padding:
            4px
            1px;
    }


    .prenatal-calendar__day-name {

        font-size:
            5px;
    }


    .prenatal-calendar__day-number {

        font-size:
            11px;
    }


    .prenatal-calendar__day small {

        font-size:
            4px;
    }


    .prenatal-calendar__details {

        margin:
            0
            5px;
    }


    .prenatal-calendar__details > div {

        min-height:
            40px;

        padding:
            5px;
    }


    .prenatal-calendar__details span {

        font-size:
            5px;
    }


    .prenatal-calendar__details strong {

        font-size:
            6.5px;
    }


    .prenatal-calendar__bottom {

        padding:
            8px;
    }


    .prenatal-calendar__price strong {

        font-size:
            18px;
    }


    .prenatal-calendar__actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .prenatal-calendar__actions .btn {

        width:
            100%;
    }

}


/* =========================================================
   19. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .prenatal-calendar__day {

        min-height:
            43px;
    }


    .prenatal-calendar__day-number {

        font-size:
            10px;
    }


    .prenatal-calendar__day small {

        display:
            none;
    }


    .prenatal-calendar__details {

        grid-template-columns:
            1fr
            1fr;
    }

}


/* =========================================================
   20. ACCESSIBILITY
   ========================================================= */

.prenatal-calendar__selector
select:focus-visible,
.prenatal-calendar__actions
a:focus-visible {

    outline:
        2px solid
        #b88943;

    outline-offset:
        2px;
}


/* =========================================================
   21. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .prenatal-calendar__batch.is-active {

        animation:
            none;
    }

}