/**
 * MK Tire Booking — Step 5 confirmation success layout.
 * Wrapper stays hidden until .mk-confirmation-visible is toggled (see booking-controller.js).
 */

/* Hidden on load; overrides earlier flex rules that were forcing the block visible */
.mk-confirmation-wrapper {
    display: none !important;
}

/* Shown only after successful reserve (JS adds this class) */
#mkSuccessMessage.mk-confirmation-visible,
.mk-confirmation-wrapper.mk-confirmation-visible {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#mkSuccessMessage.mk-confirmation-visible .mk-success-icon,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-success-icon {
    display: flex;
    justify-content: center;
    width: 100%;
}

#mkSuccessMessage.mk-confirmation-visible .mk-confirmation-title,
#mkSuccessMessage.mk-confirmation-visible .mk-success-title,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-confirmation-title,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-success-title {
    width: 100%;
    text-align: center;
}

#mkSuccessMessage.mk-confirmation-visible .mk-confirmation-msg,
#mkSuccessMessage.mk-confirmation-visible .mk-success-text,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-confirmation-msg,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-success-text {
    width: 100%;
    max-width: 520px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#mkSuccessMessage.mk-confirmation-visible .mk-reservation-id,
#mkSuccessMessage.mk-confirmation-visible .mk-success-id,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-reservation-id,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-success-id {
    width: 100%;
    text-align: center;
}

#mkSuccessMessage.mk-confirmation-visible .mk-book-another-btn,
#mkSuccessMessage.mk-confirmation-visible .mk-reset-booking-btn,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-book-another-btn,
.mk-confirmation-wrapper.mk-confirmation-visible .mk-reset-booking-btn {
    margin-top: 1.5rem;
}

/* Step 5: Review & Confirm 3-column layout */
#mkStep5 .mk-confirmation-summary.mk-step5-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#mkStep5 .mk-confirmation-summary.mk-step5-grid .mk-summary-card {
    background: var(--mk-white, #fff);
    border: 2px solid var(--mk-gray-light, #e5e5e5);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--mk-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
}

/* Override legacy full-width total card so all 3 columns stay balanced */
#mkStep5 .mk-confirmation-summary.mk-step5-grid .mk-summary-card.mk-summary-total {
    grid-column: auto;
}

@media (max-width: 1024px) {
    #mkStep5 .mk-confirmation-summary.mk-step5-grid {
        grid-template-columns: 1fr;
    }
}