/* ═══════════════════════════════════════════════════════════════
   BOOKING SEARCH CALENDAR (bsc-cal-*)
   Restyle matching tk-cal-* from common/calendar.php
   2 meses centrados en desktop, 1 en mobile
   ═══════════════════════════════════════════════════════════════ */

/* Calendar container (inside #collapseBookingHotel) */
#container-calendar-search {
    padding: 1.5rem 1.5rem 1.25rem;
}

/* Title */
.bsc-cal-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hs-primary);
    margin: 0 0 .85rem;
    letter-spacing: .01em;
}

/* Navigation bar */
.bsc-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.bsc-cal-nav-btn {
    border: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--hs-primary);
    cursor: pointer;
    transition: background var(--hs-transition), transform var(--hs-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.bsc-cal-nav-btn:hover:not(:disabled) {
    background: rgba(26, 47, 94, .08);
    transform: scale(1.06);
}
.bsc-cal-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.bsc-cal-nav-label {
    font-size: .92rem;
    font-weight: 700;
    color: var(--hs-primary);
    padding: .3rem .9rem;
    border-radius: var(--hs-radius-sm);
    background: rgba(26, 47, 94, .06);
    min-width: 180px;
    text-align: center;
    white-space: nowrap;
}

/* Calendars container — 2 months side by side */
#calendars {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Month grid */
.calendar-cs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    width: 280px;
    flex-shrink: 0;
    grid-auto-rows: max-content;
}

/* Month title (injected by JS) */
.bsc-month-title {
    grid-column: 1 / -1;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hs-primary);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .1rem 0 .55rem;
    margin-bottom: .1rem;
    border-bottom: 1px solid #eef0f5;
    margin-bottom: .35rem;
}

/* Day-of-week headers */
.day-header-cs {
    padding: .35rem 0;
    font-size: .7rem;
    font-weight: 700;
    color: #8a90a0;
    text-align: center;
    letter-spacing: .08em;
    background: transparent;
    border: 0;
    text-transform: uppercase;
}

/* Day cells — base */
.day-cs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 100%;
    border-radius: var(--hs-radius-sm);
    border: 1px solid #dfe3ea;
    background: #fff;
    color: var(--hs-primary);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--hs-transition),
        color var(--hs-transition),
        box-shadow var(--hs-transition),
        transform var(--hs-transition),
        border-color var(--hs-transition);
}

/* Hover (available days only) */
.day-cs:hover:not(.disabled):not(.selected):not(.in-range) {
    background: #eef2fb;
    border-color: var(--hs-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 47, 94, .12);
}

/* Disabled — past days */
.day-cs.disabled {
    background: #f7f8fa;
    border-color: transparent;
    color: #c9ccd3;
    cursor: not-allowed;
}

/* Selected — check-in / check-out endpoints */
.day-cs.selected {
    background: linear-gradient(135deg, var(--hs-primary) 0%, #2a4a8e 100%);
    color: #fff;
    border-color: var(--hs-primary);
    box-shadow: 0 4px 14px rgba(26, 47, 94, .32);
    transform: translateY(-2px);
    z-index: 2;
}

/* In-range — mismo color que los endpoints, sin elevación */
.day-cs.in-range {
    background: linear-gradient(135deg, var(--hs-primary) 0%, #2a4a8e 100%);
    color: #fff;
    border-color: var(--hs-primary);
    border-radius: 0;
    z-index: 1;
}

/* ── Nights counter bar ── */
.bsc-nights-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .6rem 1rem;
    background: rgba(26, 47, 94, .05);
    border: 1px solid rgba(26, 47, 94, .1);
    border-radius: var(--hs-radius-sm);
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.bsc-nights-checkin-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hs-primary);
    white-space: nowrap;
}
.bsc-nights-ctrl {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: var(--hs-radius-sm);
    padding: .2rem .35rem;
}
.bsc-nights-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--hs-primary);
    font-size: 1.05rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hs-transition), color var(--hs-transition);
    padding: 0;
}
/* Enabled: icono más oscuro + un poco más grueso para que se note clickeable */
.bsc-nights-btn:not(:disabled) i {
    color: #0d1a3a;
    -webkit-text-stroke: 0.6px currentColor;
}
.bsc-nights-btn:hover:not(:disabled) { background: rgba(26, 47, 94, .08); }
.bsc-nights-btn:disabled,
.bsc-nights-input:disabled {
    cursor: not-allowed;
    background: transparent;
    color: rgba(26, 47, 94, .35);
    opacity: 1;
}
.bsc-nights-input {
    width: 36px;
    text-align: center;
    border: none;
    outline: none;
    font-size: .92rem;
    font-weight: 700;
    color: var(--hs-primary);
    background: transparent;
    -moz-appearance: textfield;
}
.bsc-nights-input::-webkit-outer-spin-button,
.bsc-nights-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bsc-nights-unit {
    font-size: .78rem;
    font-weight: 600;
    color: #8a90a0;
    padding: 0 .15rem;
}
.bsc-checkout-display {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hs-primary);
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #container-calendar-search { padding: 1.25rem 1rem 1rem; }

    /* Only show first month on mobile */
    .calendar-cs:not(:first-child) { display: none; }

    .calendar-cs {
        width: 100%;
        max-width: 320px;
        gap: 2px;
    }
    .day-cs {
        height: 36px;
        font-size: .82rem;
    }
    .bsc-cal-nav-label { min-width: 130px; font-size: .84rem; }
}