/* ==========================================================
   CALENDAR
========================================================== */

.ua-calendar {

    margin-top: 16px;

    background: var(--surface);

}

.ua-booking-calendar {

    display: none;

    margin-top: 16px;

}

.ua-booking-calendar.active {

    display: block;

    animation: fadeIn .25s ease;

}

.ua-booking-date {

    justify-content: space-between;

    color: var(--text-light);

}

.ua-booking-date i {

    color: var(--primary);

    font-size: 1rem;

}

.ua-booking-date-content {

    display: flex;

    align-items: center;

    gap: 12px;

}

#bookingDateArrow {

    transition: var(--transition);

}

#bookingDateArrow.rotate {

    transform: rotate(180deg);

}

/* ==========================================================
   HEADER
========================================================== */

.ua-calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;

}

.ua-calendar-title {

    font-size: var(--font-xl);

    font-weight: var(--fw-bold);

    color: var(--text);

}

.ua-calendar-nav {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 36px;

    height: 36px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--surface);

    transition: var(--transition);

}

.ua-calendar-nav:hover {

    background: var(--primary-light);

    border-color: var(--primary);

}

.ua-calendar-nav i {

    color: var(--primary);

    font-size: 14px;

}

/* ==========================================================
   WEEK
========================================================== */

.ua-calendar-week {

    display: grid;

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

    margin-bottom: 8px;

}

.ua-calendar-week span {

    text-align: center;

    font-size: .78rem;

    font-weight: var(--fw-semibold);

    color: var(--text-muted);

}

/* ==========================================================
   DAYS
========================================================== */

.ua-calendar-days {

    display: grid;

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

    gap: 8px;

}

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

.ua-calendar-day {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 38px;

    height: 38px;

    margin: 0 auto;

    border: 1px solid transparent;

    border-radius: 50%;

    background: transparent;

    color: var(--text);

    font-size: .9rem;

    font-weight: var(--fw-medium);

    transition: var(--transition);

}

.ua-calendar-day:hover:not(:disabled) {

    background: var(--primary-light);

    color: var(--primary);

}

/* ==========================================================
   TODAY
========================================================== */

.ua-calendar-today {

    border: 2px solid var(--primary);

    color: var(--primary);

    font-weight: var(--fw-bold);

}

/* ==========================================================
   SELECTED
========================================================== */

.ua-calendar-selected {

    background: var(--primary);

    color: var(--white);

    border-color: var(--primary);

}

.ua-calendar-selected:hover {

    background: var(--primary-dark);

}

/* ==========================================================
   UNAVAILABLE
========================================================== */

.ua-calendar-booked {

    background: rgba(220, 38, 38, .08);

    color: var(--danger);

    border: 1px solid rgba(220, 38, 38, .18);

    cursor: not-allowed;

    opacity: .75;

}

.ua-calendar-booked:hover {

    background: rgba(220, 38, 38, .08);

    color: var(--danger);

}

/* ==========================================================
   EMPTY
========================================================== */

.ua-calendar-empty {

    visibility: hidden;

    pointer-events: none;

}

/* ==========================================================
   LEGEND
========================================================== */

.ua-calendar-legend {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 20px;

}

.ua-calendar-legend-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: var(--font-xs);

    color: var(--text-light);

}

/* ==========================================================
   LEGEND DOT
========================================================== */

.ua-calendar-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    flex-shrink: 0;

}

.ua-calendar-dot-available {

    background: var(--white);

    border: 1.5px solid var(--border-dark);

}

.ua-calendar-dot-selected {

    background: var(--primary);

    border: 1px solid var(--primary);

}

.ua-calendar-dot-booked {

    background: var(--danger);

    border: 1px solid var(--danger);

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px) {

    .ua-calendar-days {

        gap: 6px;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:575.98px) {

    .ua-calendar-title {

        font-size: 1.15rem;

    }

    .ua-calendar-nav {

        width: 32px;

        height: 32px;

    }

    .ua-calendar-week span {

        font-size: .7rem;

    }

    .ua-calendar-days {

        gap: 2px;

    }

    .ua-calendar-day {

        width: 34px;

        height: 34px;

        font-size: .8rem;

    }

    .ua-calendar-legend {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

        gap: 12px;

        margin-top: 14px;

    }

    .ua-calendar-legend-item {

        display: flex;

        align-items: center;

        gap: 4px;

        font-size: .72rem;

    }

    .ua-calendar-dot {

        width: 8px;

        height: 8px;

    }

}