/*
 * saloon-modal-fix.css
 * Scroll fix for #bottomModal only — loaded AFTER style2024.css.
 *
 * style2024.css: .modal-body { height: calc(100% - 100px); overflow: hidden }
 * breaks scrolling in the enrollment detail drawer when content is tall.
 *
 * Do NOT apply to other saloon modals (#pendingApprovalsModal, #blockApptsModal, etc.)
 * — each has its own layout rules in saloon.events.staff.view.php.
 */

/*
 * Staff drawers (#saloonAdminQuickBookModal, #pendingApprovalsModal, #blockApptsModal):
 * style2024.css caps .modal.bottom:not(#bottomModal) at 600px + left:50% + top:20px.
 * Mirror #bottomModal — full viewport width, fixed to bottom, slide up/down.
 */
#saloonAdminQuickBookModal.modal.bottom .modal-dialog,
#pendingApprovalsModal.modal.bottom .modal-dialog,
#blockApptsModal.modal.bottom .modal-dialog {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    pointer-events: none;
}
#saloonAdminQuickBookModal.modal.bottom.fade .modal-dialog,
#pendingApprovalsModal.modal.bottom.fade .modal-dialog,
#blockApptsModal.modal.bottom.fade .modal-dialog {
    transition: transform 0.3s ease-out !important;
    transform: translateY(100%) !important;
}
#saloonAdminQuickBookModal.modal.bottom.fade.show .modal-dialog,
#saloonAdminQuickBookModal.modal.bottom.show .modal-dialog,
#pendingApprovalsModal.modal.bottom.fade.show .modal-dialog,
#pendingApprovalsModal.modal.bottom.show .modal-dialog,
#blockApptsModal.modal.bottom.fade.show .modal-dialog,
#blockApptsModal.modal.bottom.show .modal-dialog {
    transform: translateY(0) !important;
}
#saloonAdminQuickBookModal .modal-content,
#pendingApprovalsModal .modal-content,
#blockApptsModal .modal-content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: auto;
}

#bottomModal.modal.bottom .modal-dialog {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
#bottomModal.modal.bottom.fade .modal-dialog {
    transition: transform 0.3s ease-out !important;
    transform: translateY(100%) !important;
}
#bottomModal.modal.bottom.fade.show .modal-dialog,
#bottomModal.modal.bottom.show .modal-dialog {
    transform: translateY(0) !important;
}
/* Reslide animation: JS adds/removes .fitness-slide-out to drive the two phases */
#bottomModal.modal.bottom.show .modal-dialog.fitness-drawer-resliding {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    transform: translateY(0) !important;
}
#bottomModal.modal.bottom.show .modal-dialog.fitness-drawer-resliding.fitness-slide-out {
    transform: translateY(100%) !important;
}

#bottomModal .modal-content {
    position: relative !important;
    bottom: auto !important;
    height: auto !important;
}

#bottomModal .modal-body {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Short alert/error drawers — content height at bottom (not a fixed 45vh band) */
#bottomModal .modal-dialog.wb-modal-alert {
    top: auto !important;
    height: auto !important;
    max-height: calc(100vh - 12px);
    align-items: flex-end;
}

#bottomModal .modal-dialog.wb-modal-alert .modal-content {
    height: auto !important;
    flex: 0 0 auto;
    width: 100%;
    overflow: visible !important;
}

#bottomModal .modal-dialog.wb-modal-alert .modal-body {
    height: auto !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto !important;
    padding-top: 1rem !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* Failure/success icon pulse rings extend above the circle — avoid clipping in alert drawers */
#bottomModal .modal-dialog.wb-modal-alert .modal-content,
#bottomModal[data-current-screen="book_failure"] .modal-content,
#bottomModal[data-current-screen="commerce_error"] .modal-content,
#bottomModal[data-current-screen="saloon_no_credits"] .modal-content,
#bottomModal[data-current-screen="cash_payment_failed"] .modal-content,
#bottomModal[data-current-screen="saloon_footer_alert"] .modal-content {
    overflow: visible !important;
}

#bottomModal[data-current-screen="book_failure"] .modal-body,
#bottomModal[data-current-screen="commerce_error"] .modal-body,
#bottomModal[data-current-screen="saloon_no_credits"] .modal-body,
#bottomModal[data-current-screen="cash_payment_failed"] .modal-body,
#bottomModal[data-current-screen="saloon_footer_alert"] .modal-body {
    padding-top: 1rem !important;
}

#bottomModal .general-card-header {
    padding-top: 1.5rem !important;
    overflow: visible;
}

#bottomModal .general-card .failure-icon,
#bottomModal .general-card .success-icon {
    overflow: visible;
}

#bottomModal .modal-dialog.wb-modal-alert .general-card-header {
    padding-top: 1.5rem !important;
}

#bottomModal .modal-dialog.wb-modal-alert .general-card-header .success-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

#bottomModal .modal-dialog.wb-modal-alert .general-card-header .success-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
}

#bottomModal .modal-dialog.wb-modal-alert .action-buttons {
    padding-bottom: 0.35rem;
}

/* Late-cancellation confirmation — red alert styling (salon member + web booking) */
.late-cancel-card .general-card-header {
    text-align: center;
    padding: 1.5rem 1.5rem 0;
}
.late-cancel-card .success-title {
    color: #dc2626;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0 0.25rem;
    line-height: 1.35;
}
.late-cancel-card .success-subtitle {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0.25rem;
}
.late-cancel-card .action-buttons {
    margin-top: 1.75rem;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.late-cancel-card .btn-late-cancel-confirm,
.late-cancel-card .btn-late-cancel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 16px;
    border: none;
}
.late-cancel-card .btn-late-cancel-confirm {
    background: #dc2626;
    color: #fff;
}
.late-cancel-card .btn-late-cancel-confirm:hover,
.late-cancel-card .btn-late-cancel-confirm:focus {
    background: #b91c1c;
    color: #fff;
}
.late-cancel-card .btn-late-cancel-back {
    background: #f3f4f6;
    color: #374151;
}
.late-cancel-card .btn-late-cancel-back:hover,
.late-cancel-card .btn-late-cancel-back:focus {
    background: #e5e7eb;
    color: #111827;
}