/* Enhanced POS Payment Buttons Styles */

/* Main payment buttons container */
.tw-flex.tw-items-center.tw-gap-4 {
    padding: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

/* Enhanced button base styles */
button[id*="pos-"], 
.pos-express-finalize,
button[data-pay_method] {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    backdrop-filter: blur(10px);
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* Hover effects for all payment buttons */
button[id*="pos-"]:hover, 
.pos-express-finalize:hover,
button[data-pay_method]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

/* Active state */
button[id*="pos-"]:active, 
.pos-express-finalize:active,
button[data-pay_method]:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Checkout Multi Pay Button */
#pos-finalize {
    background: linear-gradient(135deg, #001F3E 0%, #003366 50%, #004080 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

#pos-finalize:hover {
    background: linear-gradient(135deg, #003366 0%, #004080 50%, #0056b3 100%) !important;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 31, 62, 0.4);
}

#pos-finalize:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

#pos-finalize:hover:before {
    left: 100%;
}

/* Express Checkout Cash Button */
.pos-express-finalize[data-pay_method="cash"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 50%, #17a2b8 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.pos-express-finalize[data-pay_method="cash"]:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 50%, #007bff 100%) !important;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 30px rgba(40, 167, 69, 0.4);
}

/* Cancel Button */
#pos-cancel {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #bd2130 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

#pos-cancel:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 50%, #a71e2a 100%) !important;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 30px rgba(220, 53, 69, 0.4);
}

/* Draft Button */
#pos-draft {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 50%, #495057 100%);
    color: white !important;
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#pos-draft:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 50%, #343a40 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3);
}

#pos-draft i {
    color: #009ce4 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 156, 228, 0.3));
}

/* Quotation Button */
#pos-quotation {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 50%, #d39e00 100%);
    color: white !important;
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#pos-quotation:hover {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 50%, #b8860b 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
}

#pos-quotation i {
    color: #E7A500 !important;
    filter: drop-shadow(0 2px 4px rgba(231, 165, 0, 0.3));
}

/* Suspend Button */
.pos-express-finalize[data-pay_method="suspend"] {
    background: linear-gradient(135deg, #dc3545 0%, #EF4B51 50%, #ff6b6b 100%);
    color: white !important;
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.pos-express-finalize[data-pay_method="suspend"]:hover {
    background: linear-gradient(135deg, #EF4B51 0%, #ff6b6b 50%, #ff8a80 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 75, 81, 0.3);
}

/* Credit Sale Button */
.pos-express-finalize[data-pay_method="credit_sale"] {
    background: linear-gradient(135deg, #6f42c1 0%, #5E5CA8 50%, #563d7c 100%);
    color: white !important;
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.pos-express-finalize[data-pay_method="credit_sale"]:hover {
    background: linear-gradient(135deg, #5E5CA8 0%, #563d7c 50%, #4e2a84 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(94, 92, 168, 0.3);
}

/* Card Payment Button */
.pos-express-finalize[data-pay_method="card"] {
    background: linear-gradient(135deg, #e91e63 0%, #D61B60 50%, #c2185b 100%);
    color: white !important;
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.pos-express-finalize[data-pay_method="card"]:hover {
    background: linear-gradient(135deg, #D61B60 0%, #c2185b 50%, #ad1457 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(214, 27, 96, 0.3);
}

/* Icon enhancements */
button[id*="pos-"] i, 
.pos-express-finalize i,
button[data-pay_method] i {
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

button[id*="pos-"]:hover i, 
.pos-express-finalize:hover i,
button[data-pay_method]:hover i {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Ripple effect */
button[id*="pos-"]:after, 
.pos-express-finalize:after,
button[data-pay_method]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button[id*="pos-"]:active:after, 
.pos-express-finalize:active:after,
button[data-pay_method]:active:after {
    width: 300px;
    height: 300px;
}

/* Mobile responsive enhancements */
@media (max-width: 768px) {
    button[id*="pos-"], 
    .pos-express-finalize,
    button[data-pay_method] {
        padding: 10px 15px !important;
        font-size: 14px !important;
        min-height: 60px;
    }
    
    button[id*="pos-"] i, 
    .pos-express-finalize i,
    button[data-pay_method] i {
        font-size: 1.5rem !important;
    }
}

/* Focus states for accessibility */
button[id*="pos-"]:focus, 
.pos-express-finalize:focus,
button[data-pay_method]:focus {
    outline: 3px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

/* Disabled state */
button[id*="pos-"]:disabled, 
.pos-express-finalize:disabled,
button[data-pay_method]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Animation for button appearance */
@keyframes buttonSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button[id*="pos-"], 
.pos-express-finalize,
button[data-pay_method] {
    animation: buttonSlideIn 0.5s ease-out;
}