/* ============================================
   Booking Wizard Modal Styles
   ============================================ */

/* ✅ Wizard Step Content Container */
.wizard-step-content {
    padding: 20px;
    min-height: 450px; /* Increased from 400px */
    max-height: 550px; /* Added max height */
    overflow-y: auto; /* Allow scrolling within step content if needed */
}

/* ✅ Property Summary Card */
.property-summary {
    border-left: 4px solid var(--rq-accent);
}

/* ✅ Required Field Indicator */
.form-label.required::after {
    content: " *";
    color: var(--rq-danger);
}

/* ✅ Success Icon Animation */
.success-icon {
    animation: scaleIn 0.5s ease-in-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   Bootstrap Form Validation Styles
   ============================================ */

/* Invalid Form Control */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--rq-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Valid Form Control */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--rq-success);
}

/* ============================================
   Textarea and Form Control Fixes
   ============================================ */

/* ✅ Fix textarea to prevent horizontal scrollbar */
.wizard-textarea {
    width: 100% !important;
    max-width: 100% !important;
    resize: vertical; /* Only allow vertical resizing */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    word-wrap: break-word; /* Break long words */
}

/* ✅ Ensure all form controls fit within container */
.wizard-step-content .form-control {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================
   Wizard Buttons Sticky Positioning
   ============================================ */

/* ============================================
   Price Breakdown Display
   ============================================ */

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-line span {
    color: var(--rq-sub);
}

.price-line strong {
    color: var(--rq-text);
    font-weight: 600;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .wizard-step-content {
        padding: 15px;
        min-height: 400px;
    }

}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Confirmation step styling */
.wizard-step-content.confirmation-step {
    text-align: center;
    padding: 2rem;
}

.wizard-step-content.confirmation-step i {
    font-size: 64px;
    color: var(--rq-success);
    margin-bottom: 1rem;
}
/* ---- Payment choice on the review step: the account's saved cards, or a new one ---- */
.rq-pay-choices { display: flex; flex-direction: column; gap: 6px; }
.rq-pay-choice {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin: 0; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--rq-border); background: var(--rq-surface);
    font-size: 13px; color: var(--rq-text);
}
.rq-pay-choice:hover { border-color: var(--rq-border-med); }
.rq-pay-choice.is-selected { border-color: var(--rq-accent); background: var(--rq-accent-soft); }
.rq-pay-choice input { margin: 0; accent-color: var(--rq-accent); }
.rq-pay-choice-label { flex: 1 1 auto; font-family: var(--rq-font-mono); font-variant-numeric: tabular-nums; }
.rq-pay-choice-tag {
    font-family: var(--rq-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rq-money); border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px;
}