/*
 * Book of Room — CSS
 * Se bazează pe Tailwind (din temă) + CSS custom properties din BOR_Settings.
 * Stiluri specifice care nu pot fi exprimate cu clase Tailwind standard.
 */

/* ── Datepicker range highlight ──────────────────────────────────────────── */
.bor-day-in-range {
    background-color: color-mix(in srgb, var(--bor-primary) 15%, transparent);
}
.bor-day-checkin,
.bor-day-checkout {
    background-color: var(--bor-primary) !important;
    color: #fff !important;
    border-radius: 9999px;
}
.bor-day-checkin  { border-radius: 9999px 0 0 9999px; }
.bor-day-checkout { border-radius: 0 9999px 9999px 0; }
.bor-day-checkin.bor-day-checkout {
    border-radius: 9999px;
}

/* ── Modal scroll lock ───────────────────────────────────────────────────── */
body.bor-modal-open {
    overflow: hidden;
}

/* ── Stepper line ────────────────────────────────────────────────────────── */
.bor-stepper-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background-color: var(--bor-light-200);
    z-index: 0;
}
.bor-stepper-line-active {
    background-color: var(--bor-primary);
    transition: width 0.4s ease;
}

/* ── Room photo slider ───────────────────────────────────────────────────── */
.bor-photos {
    overflow: hidden;
    position: relative;
}
.bor-photos-inner {
    display: flex;
    transition: transform 0.35s ease;
}
.bor-photos-inner img {
    flex-shrink: 0;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/10;
}

/* ── Price badge pe calendar ─────────────────────────────────────────────── */
.bor-cal-price {
    font-size: 9px;
    line-height: 1;
    color: var(--bor-primary);
    font-weight: 600;
    display: block;
    margin-top: 1px;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.bor-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bor-light-700);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: bor-spin 0.7s linear infinite;
    margin: 0 auto;
}
@keyframes bor-spin { to { transform: rotate(360deg); } }

/* ── Drawer mobile ───────────────────────────────────────────────────────── */
.bor-drawer {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.bor-drawer.open {
    transform: translateY(0);
}

/* ── Smooth step transition ──────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

.bor-fade-enter-active,
.bor-fade-leave-active {
    transition: opacity 0.2s ease;
}
.bor-fade-enter-from,
.bor-fade-leave-to {
    opacity: 0;
}

/* ── Scrollbar minimal în modal ──────────────────────────────────────────── */
.bor-modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--bor-light-400) transparent;
}
.bor-modal-body::-webkit-scrollbar { width: 4px; }
.bor-modal-body::-webkit-scrollbar-thumb { background: var(--bor-light-400); border-radius: 4px; }

/* ── Input focus ring cu culoarea brandului ──────────────────────────────── */
.bor-input:focus {
    outline: none;
    border-color: var(--bor-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bor-primary) 20%, transparent);
}

/* ── Checkbox custom ─────────────────────────────────────────────────────── */
.bor-checkbox:checked {
    background-color: var(--bor-primary);
    border-color: var(--bor-primary);
}