.wizard-progress {
    position: relative;
}

.step-line {
    background: #e0e0e0;
    height: 2px;
    width: 80%;
    position: absolute;
    top: 23px;
    left: 10%;
    z-index: 1;
}

.nav-pills.custom li {
    background: transparent;
    z-index: 2;
}

.nav-link.active.custom {
    background-color: transparent;
    color: var(--primary);
}

.nav-link.custom {
    color: #adb5bd;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.nav-link.custom span.icon {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    border: 2px solid #e0e0e0;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    font-size: 18px;
}

.nav-link.custom.active span.icon {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.nav-link.custom.completed span.icon {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    opacity: 0.7;
}

.nav-link.custom .wizard-label {
    font-weight: 600;
    white-space: nowrap;
}

.nav-link.custom.active .wizard-label {
    color: var(--primary);
}

.tab-content.custom {}

.tab-content.custom .tab-pane {}

/* Wizard container: explicit height so flex children (scroll + footer) work. */
.wizard-reserva-container {
    height: calc(100vh - 12rem);
}

/* Mobile fullscreen: el modal no tiene margen, solo restar el header (~100px) + padding */
@media (max-width: 575.98px) {
    .wizard-reserva-container {
        height: calc(100vh - 7.5rem);
    }
}

/* Wizard footer — pinned at bottom via flexbox */
.wizard-actions-footer {
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}


/* ── Paso 2: calendario compacto dentro del wizard ── */
.wizard-reserva-container .rd-container {
    padding: 6px;
}

.wizard-reserva-container .rd-month-label {
    font-size: 14px;
    margin-top: 6px;
}

.wizard-reserva-container .rd-day-head {
    padding: 6px 0;
    font-size: 0.8rem;
}

.wizard-reserva-container .rd-days {
    margin-top: 10px;
}

.wizard-reserva-container .rd-day-body {
    font-size: 0.8rem;
}

@media (min-width: 767px) {
    .wizard-reserva-container .rd-day-body {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ── Paso 2: panel de horas side-by-side ── */
@media (min-width: 992px) {
    #bloqueHoras>div {
        height: 100%;
    }
}

/* Horas panel fade-in animation */
.wizard-horas-panel {
    animation: wizardFadeIn 0.15s ease-out;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-horas-panel {
        animation: none;
    }
}

/* Botones de hora compactos */
#bloqueHoras .btn.btn-sm {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 1rem;
    line-height: 1.3;
}

/* Compact form spacing for wizard steps */
/* ── Paso 1: filas de hora sugerida ── */
.hora-sugerida {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hora-sugerida:hover {
    border-color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.04);
}

.hora-sugerida:has(input:checked) {
    border-color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.06);
}

/* ── Paso 4: precio destacado ── */
.precio-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}

/* ── Paso 4: métodos de pago compactos ── */
.payment-option {
    transition: border-color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.payment-option:hover {
    border-color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.04);
}

.payment-option:has(input:checked) {
    border-color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.06);
}

.payment-option input[type="radio"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Paso 4: resumen compacto ── */
.wizard-reserva-container .resumen-dl dt,
.wizard-reserva-container .resumen-dl dd {
    line-height: 1.4;
}

.wizard-compact-form .form-group {
    margin-bottom: 0.4rem;
}

.wizard-compact-form label.control-label {
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
}

@media screen and (max-width: 575px) {
    .step-line {
        width: 70%;
        left: 15%;
    }

    .nav-link.custom span.icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .step-line {
        top: 20px;
    }
}