/* Wrapper */
.date-picker {
}

.date-picker__info {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    color: hsl(var(--primary));
}

/* Horizontal scroller */
.date-picker__scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar (nice-to-have) */
.date-picker__scroller::-webkit-scrollbar {
    height: 0;
}

.date-picker__scroller {
    scrollbar-width: none;
}

/* Nav buttons icon sizing */
.date-picker__nav {
    width: 32px;
    height: 32px;
    padding: 0;
}

.date-picker__icon {
    width: 16px;
    height: 16px;
}

/* Card */
.date-picker__card {
    font-family: "Plus Jakarta Sans", sans-serif;
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    height: 220px;
    text-align: left;

    border-radius: 14px;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);

    padding: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    scroll-snap-align: start;
}

.date-picker__card.is-available:hover, .room-selector label:hover {
    border-color: hsl(var(--hover-border-color) / 0.4)!important;
    box-shadow: 0 .45rem .75rem rgba(0, 0, 0, .06);
    background: rgba(var(--bs-primary-rgb), .06);
}

.date-picker__card.is-selected, .room-selector label.is-selected {
    border-color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .06);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .10);
}

/* Disabled */
.date-picker__card.is-disabled {
    opacity: .6;
    cursor: not-allowed;
    background: rgba(var(--bs-secondary-rgb), .06);
}

/* Badge */
.date-picker__badge {
    position: absolute;
    top: -10px;
    left: 12px;
    font-size: 12px;
    padding: 4px 8px;
}

/* Selected indicator circle */
.date-picker__selected {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.date-picker__check {
    width: 12px;
    height: 12px;
}

/* Typo */
.date-picker__date {
    font-size: 14px;
    line-height: 1.2;
}

.date-picker__range {
    font-size: 12px;
    margin-top: 2px;
}

.date-picker__price {
    font-size: 18px;
    line-height: 1.2;
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.date-picker__selected {
    opacity: 0;
    visibility: hidden;
}

.date-picker__card.is-selected .date-picker__selected {
    opacity: 1;
    visibility: visible;
}
/* Price under day number */
.flatpickr-day.has-price {
    position: relative;
    font-weight: 600;
}

.flatpickr-day .fp-day-price {
    font-size: 0.65rem;
    line-height: 1;
    margin-top: -5px;
    opacity: 0.8;
    white-space: nowrap;
    font-weight: 400;
}

/* Make days taller to fit the price */
.flatpickr-day {
    height: 46px;
    line-height: 28px;
    padding-top: 1px;
    border-radius: .5rem!important;
}