/* ==================== TABLE OF CONTENTS ====================
 * 1. QUICK SALE MODAL - BASE STRUCTURE
 * 2. QUICK SALE MODAL - COMPONENTS
 * 3. QUICK SALE MODAL - ANIMATIONS
 * 4. BANNER ANIMATIONS
 * 5. SERVICE & PRODUCT ANIMATIONS
 * 6. CHECKOUT ANIMATIONS
 * 7. CLIENT & STAFF ANIMATIONS
 * 8. PAYMENT ANIMATIONS
 * 9. STEP 3 ANIMATIONS
 * 10. KEYFRAMES DEFINITIONS
 * 11. RESPONSIVE STYLES
 * ========================================================== */

/* ==================== 1. QUICK SALE MODAL - BASE STRUCTURE ==================== */
#quickSaleModal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    pointer-events: none;
    overflow: hidden;
}

#quickSaleModal.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    max-width: unset;
    margin: var(--px-12) 0;
    z-index: 1002;
}

#quickSaleModal.closing {
    pointer-events: none !important;
    transition: opacity 0.6s cubic-bezier(0.6, 0, 0.4, 1) !important;
}

#quickSaleModal.closing .quicksale-modal-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

#quickSaleModal.closing .quicksale-modal-content {
    transform: translateX(100%) !important;
    transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1) !important;
}

.quicksale-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#quickSaleModal.show .quicksale-modal-overlay {
    opacity: 1;
}

#quickSaleModal.closing .quicksale-modal-overlay {
    opacity: 0;
}

.quicksale-modal-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--custom-width);
    height: 100vh;
    background-color: var(--bs-surface-bg);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    opacity: 1;
    visibility: visible;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    pointer-events: auto;
    border-radius: 8px 0 0 8px;
}

#quickSaleModal.show .quicksale-modal-content {
    transform: translateX(0);
}

.quicksale-modal-content.expanding {
    animation: content-expand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quicksale-modal-content.collapsing {
    animation: content-collapse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================== 2. QUICK SALE MODAL - COMPONENTS ==================== */
.quicksale-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-24) var(--px-32);
    border-bottom: 1px solid var(--bs-border-calendar);
    background-color: var(--bs-surface-bg);
    flex-shrink: 0;
}

.quicksale-header-left {
    flex: 1;
}

.quicksale-modal-title {
    font: normal normal 600 var(--s-20);
    color: var(--bs-heading-color);
    margin: 0 0 var(--px-4) 0;
}

.quicksale-modal-subtitle {
    font: normal normal 500 var(--s-14);
    color: var(--bs-text-muted);
    margin: 0;
}

.quicksale-header-right {
    display: flex;
    align-items: center;
    gap: var(--px-12);
}

.quicksale-filter-btn {
    display: flex;
    align-items: center;
    gap: var(--px-8);
    padding: var(--px-8) var(--px-16);
    background-color: var(--bs-surface-bg);
    border: 1px solid var(--bs-input-border-color);
    border-radius: 8px;
    font: normal normal 500 var(--s-14);
    color: var(--qs-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quicksale-filter-btn:hover {
    background-color: var(--bs-header-cart);
    border-color: var(--qs-cash-btn-hover-border);
}

.quicksale-filter-btn svg {
    color: var(--bs-text-muted);
}

#quickSaleModal .quicksale-close-outside-btn {
    position: absolute;
    top: 0;
    right: calc(var(--custom-width) + var(--px-12));
    width: var(--px-48);
    height: var(--px-48);
    border-radius: 50%;
    background-color: var(--bs-surface-bg);
    border: 1px solid var(--bs-border-calendar);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: var(--bs-shadow-md);
    transform: translateX(calc(var(--px-100) * -1)) scale(0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

#quickSaleModal.show .quicksale-close-outside-btn {
    display: flex;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

#quickSaleModal.closing .quicksale-close-outside-btn {
    transform: translateX(calc(var(--px-100) * -1)) scale(0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.6, 0, 0.4, 1);
}

.quicksale-close-outside-btn:hover {
    background-color: var(--bs-header-cart);
    border-color: var(--qs-cash-btn-hover-border);
    transform: translateX(0) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.quicksale-close-outside-btn:active {
    transform: translateX(0) scale(0.95);
}

.quicksale-close-outside-btn svg {
    color: var(--bs-text-muted);
    transition: color 0.2s ease;
}

.quicksale-close-outside-btn:hover svg {
    color: var(--bs-red);
}

#quickSaleModal .quicksale-expand-btn {
    position: absolute;
    right: calc(var(--custom-width) + var(--px-12));
    width: var(--px-48);
    height: var(--px-48);
    top: 60px;
    border-radius: 50%;
    background: var(--bs-surface-bg);
    border: 1px solid var(--bs-border-calendar);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: var(--bs-shadow-md);
    color: var(--bs-text);
    transform: translateX(calc(var(--px-100) * -1)) scale(0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

#quickSaleModal.show .quicksale-expand-btn {
    display: flex;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

#quickSaleModal .quicksale-expand-btn:hover {
    background: var(--bs-header-cart);
    border-color: var(--qs-cash-btn-hover-border);
    transform: translateX(0) scale(1.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#quickSaleModal .quicksale-expand-btn:active {
    transform: translateX(0) scale(0.9);
    transition: all 0.1s ease;
}

#quickSaleModal .quicksale-expand-btn i {
    font-size: 16px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#quickSaleModal .quicksale-expand-btn.expanded i {
    transform: rotate(180deg) scale(1.1);
}

#quickSaleModal .quicksale-expand-btn.toggling {
    animation: expand-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               glow 0.5s ease-in-out;
}

#quickSaleModal .quicksale-expand-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

#quickSaleModal .quicksale-expand-btn.ripple::before {
    animation: ripple 0.6s ease-out;
}

/* ==================== 3. QUICK SALE MODAL - ANIMATIONS ==================== */
#quickSaleModal .checkout-container {
    animation: qs-slide-in-right 280ms ease-out both !important;
}

.quicksale-popup .popup-content {
    animation: qs-slide-in-right 280ms ease-out both !important;
}

.qs-checkout-popup {
    animation: qs-content-pop 220ms ease-out both !important;
}

#quickSalePayment .qs-checkout-popup {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
}

#quickSalePayment .qs-checkout-popup.animate-in {
    opacity: 1;
    transform: scale(1);
}

.qs-progress-section {
    animation: qs-fade-in-up 0.3s ease-out both !important;
    animation-delay: 100ms;
}

.qs-step {
    animation: qs-step-appear 0.4s ease-out both !important;
}

#quickSalePayment .qs-step {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

#quickSalePayment .qs-step.animate-in {
    opacity: 1;
    transform: scale(1);
}

.qs-step:nth-child(1) {
    animation-delay: 200ms !important;
}

.qs-step:nth-child(2) {
    animation-delay: 250ms !important;
}

.qs-step:nth-child(3) {
    animation-delay: 300ms !important;
}

.qs-step:nth-child(4) {
    animation-delay: 350ms !important;
}

.qs-step:nth-child(5) {
    animation-delay: 400ms !important;
}

.qs-step-circle {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.qs-step-circle.active {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(24, 119, 243, 0.4) !important;
}

.qs-step-circle.qs-step-circle--success-red {
    background-color: var(--bs-main);
    color: #fff;
    border-color: var(--bs-main);
}

.qs-step-circle.qs-step-circle--success-red svg {
    stroke: #fff;
}

.qs-step-label {
    transition: color 0.3s !important;
}

.qs-progress-line-active {
    width: 0 !important;
    animation: qs-progress-fill 0.8s ease-out both !important;
    animation-delay: 450ms !important;
}

#quickSalePayment .qs-progress-line-active {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.qs-popup-body {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 300ms;
}

.qs-section {
    animation: qs-fade-in-up 0.5s ease-out both !important;
}

#quickSalePayment .qs-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

#quickSalePayment .qs-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.qs-section:nth-child(1) {
    animation-delay: 400ms !important;
}

.qs-section:nth-child(2) {
    animation-delay: 450ms !important;
}

.qs-section:nth-child(3) {
    animation-delay: 500ms !important;
}

.qs-section:nth-child(4) {
    animation-delay: 550ms !important;
}

.service-total {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 400ms;
}

.tip-header {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 450ms;
}

.tip-buttons {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 500ms;
}

.tip-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: qs-step-appear 0.4s ease-out both !important;
}

.tip-btn:nth-child(1) {
    animation-delay: 550ms !important;
}

.tip-btn:nth-child(2) {
    animation-delay: 600ms !important;
}

.tip-btn:nth-child(3) {
    animation-delay: 650ms !important;
}

.tip-btn:nth-child(4) {
    animation-delay: 700ms !important;
}

.tip-btn:nth-child(5) {
    animation-delay: 750ms !important;
}

.tip-btn:not(.selected):hover {
    border-color: var(--bs-main-hover) !important;
    box-shadow: 0 4px 12px rgba(58, 152, 33, 0.2) !important;
    transform: translateY(-2px) !important;
}

.tip-btn.selected {
    border-color: var(--bs-main) !important;
    background: var(--bs-main) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(58, 152, 33, 0.4) !important;
    transform: scale(1.05) !important;
}

.custom-tip {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 550ms;
}

.custom-tip input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom-tip input:focus {
    border-color: var(--bs-main) !important;
    box-shadow: 0 0 0 4px rgba(58, 152, 33, 0.1) !important;
}

.tip-distribution {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 600ms;
}

.distribution-buttons {
    animation: qs-fade-in-up 0.4s ease-out both !important;
    animation-delay: 600ms;
}

.distribution-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: qs-step-appear 0.4s ease-out both !important;
}

.distribution-btn:nth-child(1) {
    animation-delay: 650ms !important;
}

.distribution-btn:nth-child(2) {
    animation-delay: 700ms !important;
}

.distribution-btn:not(.active):hover {
    border-color: var(--bs-main-hover) !important;
    transform: translateY(-2px) !important;
}

.total-box {
    animation: qs-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    animation-delay: 650ms;
}

.qs-total-amount {
    animation: qs-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    animation-delay: 700ms;
}

.continue-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: qs-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    animation-delay: 800ms;
}

.continue-btn:hover {
    background: var(--bs-main-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(58, 152, 33, 0.4) !important;
}

.continue-btn:active {
    transform: scale(0.98) !important;
}

#quickSalePayment .modal.show {
    animation: qs-fade-in 0.3s ease-out !important;
}

#step2Content.active,
#step3Content.active {
    animation: qs-fade-in-up 0.4s ease-out both !important;
}

/* ==================== 4. BANNER ANIMATIONS ==================== */
#quickSaleModal #selected-staff-banner-container {
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    transition: height 0.3s ease !important;
}

#quickSaleModal #selected-staff-banner,
#quickSaleModal #selected-staff-banner-old {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform-origin: center bottom;
    transform-style: preserve-3d;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

#quickSaleModal #selected-staff-banner:only-child {
    position: relative;
}

#quickSaleModal #selected-staff-banner.banner-entering {
    z-index: 2;
    position: relative;
}

#quickSaleModal #selected-staff-banner-old {
    animation: slideUpAndFade 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards !important;
}

#quickSaleModal #selected-staff-banner-old .banner-left,
#quickSaleModal #selected-staff-banner-old .banner-actions {
    animation: elementSlideUp 0.4s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .staff-avatar-select {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .banner-service-text {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .banner-texts {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .banner-title {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .banner-sub {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .banner-actions {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .switch-staff-btn {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-entering .clear-staff-btn {
    animation: elementRollUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.34s backwards !important;
}

#quickSaleModal #selected-staff-banner.banner-updating {
    animation: wheelBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#quickSaleModal #selected-staff-banner.banner-updating .staff-avatar-select {
    animation: avatarBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#quickSaleModal #selected-staff-banner.banner-updating .banner-texts {
    animation: textSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ==================== 5. SERVICE & PRODUCT ANIMATIONS ==================== */
.qs-pos-container .service-card {
    transition: all 0.2s !important;
}

.qs-pos-container .service-card:hover {
    transform: translateY(-2px) !important;
}

.qs-pos-container .item-added {
    animation: itemAdded 0.3s ease !important;
    box-shadow: 0 0 0 var(--px-2) rgba(59, 130, 246, 0.2) !important;
}

.qs-pos-container .add-btn {
    transition: all 0.2s !important;
}

.qs-pos-container .add-btn:hover {
    transform: scale(1.1) !important;
}

.qs-pos-container .add-btn.pulse {
    animation: pulse 0.5s ease infinite !important;
}

.qs-pos-container .product-card {
    transition: box-shadow 0.2s !important;
}

.qs-pos-container .product-card:hover {
    transform: none !important;
}

.qs-pos-container .giftcard {
    transition: all 0.2s !important;
}

.qs-pos-container .giftcard:hover {
    transform: translateY(-4px) !important;
}

.qs-pos-container .tab-content {
    animation: fadeIn 0.3s ease !important;
}

.qs-pos-container .tab-content.active {
    animation: fadeIn 0.3s ease !important;
}

.qs-pos-container .view-items-btn {
    transition: all 0.2s !important;
}

.qs-pos-container .view-items-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(58, 152, 33, 0.3) !important;
}

.add-feedback {
    position: fixed;
    top: var(--px-20);
    right: var(--px-440);
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #ffffff;
    padding: var(--px-12) var(--px-20);
    border-radius: var(--px-8);
    font-size: calc(14px * var(--scale));
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease !important;
    z-index: 1000;
}

.add-feedback.show {
    opacity: 1;
    transform: translateY(0) !important;
}

/* ==================== 6. CHECKOUT ANIMATIONS ==================== */

.checkout-btn {
    transition: all 0.2s !important;
}

.checkout-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 8px rgba(58, 152, 33, 0.3) !important;
}

.close-btn {
    transition: background 0.2s !important;
}

/* ==================== 7. CLIENT & STAFF ANIMATIONS ==================== */
.staff-grid .staff-card {
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease !important;
}

.staff-grid .staff-card:not(.sc2-tech):hover {
    transform: translateY(-1px) !important;
    border-color: var(--bs-main-400) !important;
    box-shadow: var(--bs-shadow-md) !important;
}

.client-card-container {
    transition: transform .12s ease, box-shadow .2s ease, opacity .18s ease, max-height .18s ease, margin .18s ease !important;
    will-change: transform, opacity;
}

.client-card-container--pressed {
    transform: scale(0.98) !important;
}

.client-card-container--exit {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
}

.client-inline-picker {
    transition: transform .22s ease, opacity .22s ease !important;
}

.client-inline-picker--enter {
    opacity: 0;
    transform: translateY(var(--px-8));
}

.client-inline-picker--exit {
    opacity: 0;
    transform: translateY(calc(-1 * var(--px-8)));
    transition: opacity .14s ease, transform .14s ease !important;
}

.client-inline-picker__add-card {
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.client-inline-picker__add-card--pulse {
    transform: scale(0.98) !important;
}

.client-inline-picker__search-input {
    transition: border-color .2s ease !important;
}

.client-inline-form {
    transition: transform .18s ease, opacity .18s ease !important;
}

.client-inline-form--enter {
    opacity: 0;
    transform: translateY(var(--px-8));
}

.client-inline-form--exit {
    opacity: 0;
    transform: translateY(calc(-1 * var(--px-8)));
}

.client-inline-form__save {
    transition: opacity .2s ease, filter .2s ease !important;
}

.client-inline-form__cancel {
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

.client-inline-form__input {
    transition: border-color .2s ease !important;
}

.client-options {
    transition: all 0.2s !important;
}

.action-btn {
    transition: all 0.2s !important;
}

.salon-staff-assign-btn {
    transition: background-color 0.2s !important;
}

.salon-add-staff-member-btn {
    transition: all 0.2s !important;
}

.salon-service-card__menu-icon {
    transition: color 0.2s !important;
}

.salon-service-card {
    transition: border-color 0.2s !important;
}

#quickSaleModal .salon-appointment-card.cart-staff-header {
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease-out, border-color 200ms ease-out !important;
    will-change: transform;
}

#quickSaleModal .salon-appointment-card.cart-staff-header.qs-flip-anim {
    transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease-out !important;
}

#quickSaleModal .salon-appointment-card.cart-staff-header.salon-appointment-card--active {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.remove-staff-group-btn {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    transition-duration: .15s !important;
}

.category-btn {
    transition: all 0.2s !important;
}

.tab-btn {
    transition: all 0.2s !important;
}

.search-container {
    transition: box-shadow 0.2s ease-in-out !important;
}

.search-input {
    transition: all 0.2s !important;
}

.switch-staff-btn {
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.clear-staff-btn {
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.svc-menu__action {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.svc-menu__close {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

/* ==================== 8. PAYMENT ANIMATIONS ==================== */
.payment-methods {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 500ms;
}

.payment-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: qs-step-appear 0.4s ease-out both !important;
}

.payment-btn:nth-child(1) {
    animation-delay: 550ms !important;
}

.payment-btn:nth-child(2) {
    animation-delay: 600ms !important;
}

.payment-btn:nth-child(3) {
    animation-delay: 650ms !important;
}

.payment-btn:nth-child(4) {
    animation-delay: 700ms !important;
}

.payment-btn:hover {
    border-color: var(--bs-main-hover) !important;
    box-shadow: 0 4px 12px rgba(58, 152, 33, 0.15) !important;
    transform: translateY(-2px) !important;
}

.payment-btn:active {
    transform: scale(0.98) !important;
}

.payment-icon {
    transition: transform 0.3s !important;
}

.payment-btn:hover .payment-icon {
    transform: scale(1.1) !important;
}

.payment-step-info {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 400ms;
}

.payment-method-button {
    transition: all .2s !important;
}

.payment-reference-input-wrapper {
    display: none;
    opacity: 0;
    transform: translateY(calc(-1 * var(--px-12)));
    transition: all .3s ease !important;
}

.payment-reference-input-wrapper--visible {
    display: block;
    opacity: 1;
    transform: translateY(0) !important;
}

.payment-reference-input-field {
    transition: border-color .2s, box-shadow .2s !important;
}

.payment-reference-input-field:focus {
    border-color: var(--bs-input-focus-border-color) !important;
    box-shadow: 0 0 0 var(--px-2) var(--bs-input-focus-ring-color) !important;
}

.payment-confirm-button {
    transition: all .2s !important;
}

.payment-confirm-button--active:hover {
    background: var(--bs-main-hover) !important;
}

.card-payment-card-button {
    transition: all 0.2s !important;
}

.card-payment-add-card-button {
    transition: all 0.2s !important;
}

.card-payment-add-card-button:hover {
    border-color: var(--bs-main-hover) !important;
    background: var(--bs-main-50) !important;
    color: var(--bs-main-hover) !important;
}

.card-payment-charge-button {
    transition: all 0.2s !important;
}

.card-payment-charge-button--active:active {
    transform: scale(0.98) !important;
}

.payment-ui-container {
    animation: qs-fade-in-up 0.4s ease-out both !important;
}

.payment-ui-content {
    animation: qs-fade-in-up 0.4s ease-out both !important;
    animation-delay: 100ms;
}

.payment-ui-button-grid {
    animation: qs-fade-in-up 0.4s ease-out both !important;
    animation-delay: 200ms;
}

.payment-ui-cash-btn {
    transition: all 0.2s !important;
    animation: qs-step-appear 0.3s ease-out both !important;
}

.payment-ui-cash-btn:nth-child(1) {
    animation-delay: 300ms !important;
}

.payment-ui-cash-btn:nth-child(2) {
    animation-delay: 350ms !important;
}

.payment-ui-cash-btn:nth-child(3) {
    animation-delay: 400ms !important;
}

.payment-ui-cash-btn:nth-child(4) {
    animation-delay: 450ms !important;
}

.payment-ui-cash-btn:active {
    transform: scale(0.95) !important;
}

.payment-ui-custom-input {
    transition: all 0.2s !important;
}

.payment-ui-custom-input:focus {
    border-color: var(--qs-cash-btn-selected-border) !important;
    box-shadow: 0 0 0 3px var(--qs-cash-input-outline) !important;
}

.payment-ui-submit-btn {
    transition: all 0.2s !important;
}

.payment-ui-submit-btn:active:not(:disabled) {
    transform: scale(0.98) !important;
}

.payment-amount-due-section {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 400ms;
}

.payment-methods-list {
    animation: qs-fade-in-up 0.5s ease-out both !important;
    animation-delay: 500ms;
}

/* ==================== 9. STEP 3 ANIMATIONS ==================== */

.qs-step3-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--px-360);
    text-align: center;
    padding: var(--px-24);
    gap: var(--px-8);
    animation: qs-step3-appear 500ms cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

.qs-status-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: qs-icon-scale-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    animation-delay: 200ms;
}

.qs-status-icon--success {
    background: #e8f0ff;
    color: #3b82f6;
}

.qs-status-icon--error {
    background: #fee2e2;
    color: #ef4444;
}

.qs-status-icon--warning {
    background: #fff7ed;
    color: #f59e0b;
}

.qs-step3-title {
    font: normal normal 600 var(--s-18);
    color: var(--bs-text);
    animation: qs-title-slide-in 500ms ease-out both !important;
    animation-delay: 400ms;
}

.qs-step3-title--lg {
    font: normal normal 800 var(--s-22);
}

.qs-step3-sub {
    font: normal normal 600 var(--s-14);
    color: #6b7280;
    margin-bottom: var(--px-12);
    animation: qs-title-slide-in 500ms ease-out both !important;
    animation-delay: 500ms;
}

.qs-btn {
    display: block;
    width: 100%;
    max-width: 420px;
    border-radius: var(--px-12);
    padding: var(--px-12) var(--px-16);
    font: normal normal 600 var(--s-14);
    animation: qs-button-fade-in 500ms ease-out both !important;
}

.qs-step3-center .qs-btn:nth-of-type(1) {
    animation-delay: 600ms !important;
}

.qs-step3-center .qs-btn:nth-of-type(2) {
    animation-delay: 700ms !important;
}

.qs-btn-primary {
    background: var(--bs-main);
    color: #fff;
    border: none;
}

.qs-btn-secondary {
    background: #fff;
    color: var(--bs-text);
    border: 1px solid var(--bs-border-color);
}

.qs-btn-shadow {
    box-shadow: 0 8px 18px rgba(58, 152, 33, 0.25);
}

.qs-success-card {
    width: 100%;
    max-width: 460px;
    background: #f9fafb;
    border: 1px solid #eef2f7;
    border-radius: var(--px-12);
    padding: var(--px-16);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    margin-top: var(--px-16);
    animation: qs-success-card-slide 600ms cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
    animation-delay: 600ms;
}

.qs-success-row {
    display: flex;
    justify-content: space-between;
    padding: var(--px-8) var(--px-4);
}

.qs-success-row--dashed {
    border-top: 1px dashed #e5e7eb;
}

.qs-success-row--strong {
    border-top: 1px solid #e5e7eb;
    margin-top: var(--px-8);
    padding: var(--px-12) var(--px-4);
}

.qs-success-row span {
    color: #374151;
}

.qs-success-row--strong span:first-child {
    color: #111827;
    font: normal normal 700 var(--s-14);
}

.qs-success-row--strong span:last-child {
    color: #111827;
    font: normal normal 800 var(--s-14);
}

/* Loader */
.qs-loader {
    position: relative;
    width: 72px;
    height: 72px;
    border: 3px solid rgba(24,119,243,0.2);
    border-top-color: var(--bs-main-600, #1877f3);
    border-radius: 50%;
    animation: qs-rotate 1s linear infinite !important;
}

/* ==================== 10. KEYFRAMES DEFINITIONS ==================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes itemAdded {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes qs-slide-in-right {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes qs-content-pop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes qs-step-appear {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes qs-fade-in-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes qs-bounce-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes qs-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes qs-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes qs-progress-fill {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 33.33%;
        opacity: 1;
    }
}

@keyframes slideUpAndFade {
    0% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%) rotateX(-15deg);
        opacity: 0;
    }
}

@keyframes elementSlideUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}

@keyframes elementRollUp {
    0% {
        transform: translateY(50px) rotateX(45deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes wheelBounce {
    0%, 100% {
        transform: translateY(0) rotateX(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(-5deg);
    }
}

@keyframes avatarBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
}

@keyframes textSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

@keyframes expand-pulse {
    0% {
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(0) scale(0.95);
    }
    50% {
        transform: translateX(0) scale(1.1);
    }
    75% {
        transform: translateX(0) scale(0.98);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes content-expand {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes content-collapse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: var(--bs-shadow-md);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), var(--bs-shadow-md);
    }
}

@keyframes qs-step3-appear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes qs-icon-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-45deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes qs-title-slide-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qs-button-fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qs-success-card-slide {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================== END OF FILE ==================== */


/* ========== RESPONSIVE - MOBILE DEVICES ========== */
@media (max-width: 768px) {
    .salon-exchange-logo-wrapper {
        overflow: unset;
    }

    .salon-exchange-section-title span {
        display: none;
    }

    .salon-exchange-chevron {
        display: none;
    }

    .salon-exchange-payroll-header .header-section {
        width: 100%;
    }

    /* Nếu có tabs trong header */
    .salon-exchange-payroll-header .salon-exchange-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .salon-exchange-payroll-header .salon-exchange-tabs::-webkit-scrollbar {
            display: none;
        }

    /* Nếu có filter buttons */
    .salon-exchange-payroll-header .filter-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--px-8);
    }

        .salon-exchange-payroll-header .filter-group button {
            flex: 0 0 auto;
            white-space: nowrap;
        }

    /* Nếu có search box */
    .salon-exchange-payroll-header .search-box {
        width: 100%;
        order: 999; /* Đưa xuống cuối */
    }

    /* Nếu có breadcrumb hoặc back button */
    .salon-exchange-payroll-header .breadcrumb,
    .salon-exchange-payroll-header .back-button {
        margin-bottom: var(--px-8);
    }

    .salon-exchange-section-header {
        justify-content: center;
    }

    .salon-exchange-submenu {
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    .salon-exchange-section-header.salon-exchange-payroll-header {
        padding: var(--px-12) var(--px-16);
        flex-direction: column;
        align-items: center;
        gap: var(--px-12);
    }

    /* Nếu header có title và icon */
    .salon-exchange-payroll-header .salon-exchange-section-title {
        font-size: var(--s-14);
        flex-wrap: wrap;
        gap: var(--px-8);
    }

    /* Nếu có icon trong header */
    .salon-exchange-payroll-header svg,
    .salon-exchange-payroll-header .salon-exchange-section-icon {
        width: var(--px-20);
        height: var(--px-20);
    }

    /* Nếu header có buttons hoặc actions */
    .salon-exchange-payroll-header .salon-exchange-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--px-8);
    }

        .salon-exchange-payroll-header .salon-exchange-header-actions > * {
            flex: 1 1 auto;
            min-width: fit-content;
        }

    /* Nếu header có dropdown hoặc select */
    .salon-exchange-payroll-header select,
    .salon-exchange-payroll-header .salon-exchange-select {
        width: 100%;
        max-width: none;
    }

    /* Sticky behavior cho mobile nếu cần */
    .salon-exchange-payroll-header.sticky-mobile {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--white);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}

@media (max-width: 480px) {
    .salon-reports-daterange-btn,
    .salon-reports-view-btn {
        font-size: var(--s-12);
        padding: var(--px-6) var(--px-12);
    }

    .salon-reports-date-today {
        font-size: var(--s-11);
    }

    .salon-exchange-section-header.salon-exchange-payroll-header {
        padding: var(--px-8) var(--px-12);
        gap: var(--px-8);
    }

    .salon-exchange-payroll-header .salon-exchange-section-title {
        font-size: var(--s-13);
    }

    /* Làm buttons nhỏ hơn trên màn hình rất nhỏ */
    .salon-exchange-payroll-header button {
        font-size: var(--s-12);
        padding: var(--px-6) var(--px-12);
    }
}