/* Button Enhancement Styles for DodoBeauty Total Beauty Shop Website */

/* ========================================
   BUTTON FEEDBACK AND INTERACTION STYLES
   ======================================== */

/* Global button click feedback */
button, .btn, [onclick], [href] {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Active state for all clickable elements */
button:active, .btn:active, [onclick]:active {
    transform: scale(0.98);
}

/* Disabled button state */
button:disabled, .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading state for buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   SPECIFIC BUTTON ENHANCEMENTS
   ======================================== */

/* Primary action buttons */
.bg-blue-600, .bg-blue-700 {
    position: relative;
    overflow: hidden;
}

.bg-blue-600::before, .bg-blue-700::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;
}

.bg-blue-600:hover::before, .bg-blue-700:hover::before {
    left: 100%;
}

/* Navigation buttons */
.nav-link {
    position: relative;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: rgba(244, 63, 94, 0.1);
    transform: translateY(-1px);
}

.nav-link:active {
    transform: translateY(0);
}

/* Social media buttons */
[onclick*="openSocialLink"] {
    transition: all 0.3s ease;
    position: relative;
}

[onclick*="openSocialLink"]:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[onclick*="openSocialLink"]:active {
    transform: translateY(0) scale(1.02);
}

/* Pricing card buttons */
[onclick*="scrollToBooking"] {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.025em;
}

[onclick*="scrollToBooking"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.3);
}

[onclick*="scrollToBooking"]:active {
    transform: translateY(-1px);
}

/* Modal buttons */
[onclick*="Modal"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[onclick*="Modal"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

[onclick*="Modal"]:active {
    transform: translateY(0);
}

/* Admin buttons */
[onclick*="openAdminDashboard"], [onclick*="adminLogout"] {
    transition: all 0.3s ease;
    font-weight: 500;
}

[onclick*="openAdminDashboard"]:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
}

[onclick*="adminLogout"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

/* Form submit buttons */
button[type="submit"] {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.025em;
}

button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.4);
}

button[type="submit"]:active {
    transform: translateY(-1px);
}

/* Search and filter buttons */
[onclick*="search"], [onclick*="Search"], [onclick*="clear"], [onclick*="Clear"] {
    transition: all 0.2s ease;
    font-weight: 500;
}

[onclick*="search"]:hover, [onclick*="Search"]:hover {
    transform: translateY(-1px);
}

[onclick*="clear"]:hover, [onclick*="Clear"]:hover {
    transform: translateY(-1px);
}

/* Mobile menu button */
#mobile-menu-btn {
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

#mobile-menu-btn:hover {
    background-color: rgba(244, 63, 94, 0.1);
    transform: scale(1.05);
}

#mobile-menu-btn:active {
    transform: scale(1.02);
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus styles for keyboard navigation */
button:focus-visible, 
.btn:focus-visible, 
[onclick]:focus-visible, 
a:focus-visible {
    outline: 2px solid #f43f5e;
    outline-offset: 2px;
    border-radius: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button, .btn, [onclick] {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button, .btn, [onclick], a {
        transition: none;
        animation: none;
    }
    
    button:hover, .btn:hover, [onclick]:hover {
        transform: none;
    }
}

/* ========================================
   TOAST NOTIFICATION STYLES
   ======================================== */

.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 14px;
    max-width: 300px;
}

.toast-notification.show {
    transform: translateX(0);
}

.toast-notification.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.toast-notification.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.toast-notification.info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* ========================================
   BUTTON RIPPLE EFFECT
   ======================================== */

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

/* ========================================
   LOADING STATES
   ======================================== */

.btn-processing {
    position: relative;
    color: transparent !important;
}

.btn-processing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffffff40;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: button-spin 0.8s linear infinite;
}

/* Success state */
.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.btn-success::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
}

/* Error state */
.btn-error {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ========================================
   MOBILE SPECIFIC ENHANCEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    button, .btn, [onclick] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Reduced hover effects on mobile (since hover doesn't work well) */
    @media (hover: none) {
        button:hover, .btn:hover, [onclick]:hover {
            transform: none;
        }
    }
    
    /* Enhanced active states for mobile */
    button:active, .btn:active, [onclick]:active {
        transform: scale(0.96);
        opacity: 0.8;
    }
}