/**
 * Button Effects CSS
 * Provides consistent button interaction effects across the site
 */

/* Content Protection Styles */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Disable text selection for specific elements */
p, h1, h2, h3, h4, h5, h6, span, div, 
.card, .card-body, .card-title, .card-text,
.nav-link, .navbar-brand, .dropdown-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in input fields and textareas */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Base button styles for better mobile touch handling */
.btn,
button,
.nav-link,
[role="button"],
.back-button,
.bottom-nav-link,
.btn-transaction-details,
.shop-card,
.menu-item a,
.custom-alert-btn,
.payment-method,
.btn-wallet,
.copy-btn,
.category-tab {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transform: translateZ(0);
    will-change: transform;
    cursor: pointer;
}

/* Prevent any interactions during scrolling */
.btn.scrolling,
button.scrolling,
.nav-link.scrolling,
[role="button"].scrolling,
.back-button.scrolling,
.bottom-nav-link.scrolling,
.btn-transaction-details.scrolling,
.shop-card.scrolling,
.menu-item a.scrolling,
.custom-alert-btn.scrolling,
.payment-method.scrolling,
.btn-wallet.scrolling,
.copy-btn.scrolling,
.category-tab.scrolling {
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Button press effect - desktop and mobile */
.btn:active:not(:disabled):not(.disabled):not(.scrolling),
.btn.pressed:not(:disabled):not(.disabled):not(.scrolling) {
    transform: translateY(2px) scale(0.97);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2) !important;
}

/* Enhanced inward press effect */
.btn:active:not(:disabled):not(.disabled):not(.scrolling)::before,
.btn.pressed:not(:disabled):not(.disabled):not(.scrolling)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: inherit;
    pointer-events: none;
}

/* Ensure icon and text alignment */
.btn i, 
.btn .bi,
.btn img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: translateZ(0);
}

/* Fix for flexbox alignment */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* No text selection on button press */
.btn, 
.btn * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Ripple effect */
.btn:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.6s;
}

.btn:active:not(:disabled):not(.disabled):after,
.btn.pressed:not(:disabled):not(.disabled):after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Fix button icon spacing */
.btn i + span, 
.btn .bi + span,
.btn img + span {
    margin-left: 5px;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn {
        min-height: 44px; /* Minimum touch target size */
        padding: 8px 16px;
    }
    
    /* Add touch target padding without affecting visual size */
    .btn::before,
    button::before,
    .nav-link::before,
    [role="button"]::before,
    .back-button::before,
    .bottom-nav-link::before,
    .btn-transaction-details::before,
    .shop-card::before,
    .menu-item a::before,
    .custom-alert-btn::before,
    .payment-method::before,
    .btn-wallet::before,
    .copy-btn::before,
    .category-tab::before {
        content: '';
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        z-index: -1;
    }
}

/* Telegram Mini App specific optimizations */
@supports (-webkit-touch-callout: none) {
    .btn {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .btn:active:not(:disabled):not(.disabled),
    .btn.pressed:not(:disabled):not(.disabled) {
        -webkit-transform: translateY(2px) scale(0.97);
        transform: translateY(2px) scale(0.97);
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .btn:hover,
    button:hover,
    .nav-link:hover,
    [role="button"]:hover,
    .back-button:hover,
    .bottom-nav-link:hover,
    .btn-transaction-details:hover,
    .shop-card:hover,
    .menu-item a:hover,
    .custom-alert-btn:hover,
    .payment-method:hover,
    .btn-wallet:hover,
    .copy-btn:hover,
    .category-tab:hover {
        transform: none !important;
    }
}

/* Preserve 3D acceleration for smoother animations */
.btn {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Global Button Press Effects for all buttons and clickable elements */

/* Base press effect for all interactive elements */
.btn,
button,
.nav-link,
[role="button"],
.back-button,
.bottom-nav-link,
.btn-transaction-details,
.shop-card,
.menu-item a,
.custom-alert-btn {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Enhanced press effect for all buttons */
.btn:active:not(:disabled):not(.disabled),
button:active:not(:disabled),
.nav-link:active:not(.active),
[role="button"]:active,
.back-button:active,
.bottom-nav-link:active,
.btn-transaction-details:active,
.shop-card:active,
.menu-item a:active,
.custom-alert-btn:active,
.btn.pressed:not(:disabled):not(.disabled),
button.pressed:not(:disabled),
.nav-link.pressed:not(.active),
[role="button"].pressed,
.back-button.pressed,
.bottom-nav-link.pressed,
.btn-transaction-details.pressed,
.shop-card.pressed,
.menu-item a.pressed,
.custom-alert-btn.pressed {
    transform: translateY(2px) scale(0.97);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2) !important;
}

/* Enhanced inward press effect overlay */
.btn:active:not(:disabled):not(.disabled)::before,
button:active:not(:disabled)::before,
.nav-link:active:not(.active)::before,
[role="button"]:active::before,
.back-button:active::before,
.bottom-nav-link:active::before,
.btn-transaction-details:active::before,
.shop-card:active::before,
.menu-item a:active::before,
.custom-alert-btn:active::before,
.btn.pressed:not(:disabled):not(.disabled)::before,
button.pressed:not(:disabled)::before,
.nav-link.pressed:not(.active)::before,
[role="button"].pressed::before,
.back-button.pressed::before,
.bottom-nav-link.pressed::before,
.btn-transaction-details.pressed::before,
.shop-card.pressed::before,
.menu-item a.pressed::before,
.custom-alert-btn.pressed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: inherit;
    pointer-events: none;
}

/* Icon press effect */
.btn i,
.btn .bi,
.btn img,
.back-button i,
.bottom-nav-link i,
.btn-transaction-details i,
.menu-item a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: translateZ(0);
    will-change: transform;
}

/* Icon specific press effect */
.btn:active:not(:disabled):not(.disabled) i,
.btn.pressed:not(:disabled):not(.disabled) i,
.back-button:active i,
.back-button.pressed i,
.bottom-nav-link:active i,
.bottom-nav-link.pressed i,
.btn-transaction-details:active i,
.btn-transaction-details.pressed i,
.menu-item a:active i,
.menu-item a.pressed i {
    transform: translateY(1px) scale(0.95);
}

/* Mobile optimization */
@media (max-width: 767px) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn {
        min-height: 44px;
        padding: 8px 16px;
    }
    
    .btn:active:not(:disabled):not(.disabled),
    button:active:not(:disabled),
    .nav-link:active:not(.active),
    [role="button"]:active,
    .back-button:active,
    .bottom-nav-link:active,
    .btn-transaction-details:active,
    .shop-card:active,
    .menu-item a:active,
    .custom-alert-btn:active,
    .btn.pressed:not(:disabled):not(.disabled),
    button.pressed:not(:disabled),
    .nav-link.pressed:not(.active),
    [role="button"].pressed,
    .back-button.pressed,
    .bottom-nav-link.pressed,
    .btn-transaction-details.pressed,
    .shop-card.pressed,
    .menu-item a.pressed,
    .custom-alert-btn.pressed {
        transform: translateY(3px) scale(0.96);
    }
    
    /* Enhanced icon press effect on mobile */
    .btn:active:not(:disabled):not(.disabled) i,
    .btn.pressed:not(:disabled):not(.disabled) i,
    .back-button:active i,
    .back-button.pressed i,
    .bottom-nav-link:active i,
    .bottom-nav-link.pressed i,
    .btn-transaction-details:active i,
    .btn-transaction-details.pressed i,
    .menu-item a:active i,
    .menu-item a.pressed i {
        transform: translateY(2px) scale(0.95);
    }
}

/* Telegram Mini App specific optimizations */
@supports (-webkit-touch-callout: none) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .btn:hover,
    button:hover,
    .nav-link:hover,
    [role="button"]:hover,
    .back-button:hover,
    .bottom-nav-link:hover,
    .btn-transaction-details:hover,
    .shop-card:hover,
    .menu-item a:hover,
    .custom-alert-btn:hover {
        transform: none !important;
    }
}

/* Specific button styles */
.btn-success:active:not(:disabled),
.btn-success.pressed:not(:disabled) {
    background: linear-gradient(to right, #00a7d9, #00d996) !important;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 255, 174, 0.2) !important;
}

.btn-primary:active:not(:disabled),
.btn-primary.pressed:not(:disabled) {
    background: linear-gradient(to right, #3939cc, #5a0da7) !important;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(69, 69, 255, 0.2) !important;
}

/* Bottom navigation specific styles */
.bottom-nav-link:active:not(.active),
.bottom-nav-link.pressed:not(.active) {
    color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(0.92);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
}

.bottom-nav-link:active:not(.active) i,
.bottom-nav-link.pressed:not(.active) i {
    color: rgba(69, 69, 255, 0.9) !important;
    transform: translateY(2px);
}

/* Back button specific styles */
.back-button:active,
.back-button.pressed {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(2px) scale(0.95);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Transaction details button specific styles */
.btn-transaction-details:active,
.btn-transaction-details.pressed {
    background: rgba(79, 195, 247, 0.25);
    transform: translateY(2px) scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Form and Modal Button Effects */

/* Form buttons and elements */
.btn,
button,
.nav-link,
[role="button"],
.back-button,
.bottom-nav-link,
.btn-transaction-details,
.shop-card,
.menu-item a,
.custom-alert-btn,
.payment-method,
.btn-wallet,
.form-control,
.modal .btn,
.modal .btn-close,
.copy-btn,
.select-container select,
.category-tab {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Enhanced press effect for all interactive elements */
.btn:active:not(:disabled):not(.disabled),
button:active:not(:disabled),
.nav-link:active:not(.active),
[role="button"]:active,
.back-button:active,
.bottom-nav-link:active,
.btn-transaction-details:active,
.shop-card:active,
.menu-item a:active,
.custom-alert-btn:active,
.payment-method:active,
.btn-wallet:active,
.copy-btn:active,
.category-tab:active,
.btn.pressed:not(:disabled):not(.disabled),
button.pressed:not(:disabled),
.nav-link.pressed:not(.active),
[role="button"].pressed,
.back-button.pressed,
.bottom-nav-link.pressed,
.btn-transaction-details.pressed,
.shop-card.pressed,
.menu-item a.pressed,
.custom-alert-btn.pressed,
.payment-method.pressed,
.btn-wallet.pressed,
.copy-btn.pressed,
.category-tab.pressed {
    transform: translateY(2px) scale(0.97);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2) !important;
}

/* Enhanced inward press effect overlay */
.btn:active:not(:disabled):not(.disabled)::before,
button:active:not(:disabled)::before,
.nav-link:active:not(.active)::before,
[role="button"]:active::before,
.back-button:active::before,
.bottom-nav-link:active::before,
.btn-transaction-details:active::before,
.shop-card:active::before,
.menu-item a:active::before,
.custom-alert-btn:active::before,
.payment-method:active::before,
.btn-wallet:active::before,
.copy-btn:active::before,
.category-tab:active::before,
.btn.pressed:not(:disabled):not(.disabled)::before,
button.pressed:not(:disabled)::before,
.nav-link.pressed:not(.active)::before,
[role="button"].pressed::before,
.back-button.pressed::before,
.bottom-nav-link.pressed::before,
.btn-transaction-details.pressed::before,
.shop-card.pressed::before,
.menu-item a.pressed::before,
.custom-alert-btn.pressed::before,
.payment-method.pressed::before,
.btn-wallet.pressed::before,
.copy-btn.pressed::before,
.category-tab.pressed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: inherit;
    pointer-events: none;
}

/* Wallet specific button styles */
.btn-wallet:active:not(:disabled),
.btn-wallet.pressed:not(:disabled) {
    background: linear-gradient(135deg, #2a5298, #1e3c72) !important;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(79, 195, 247, 0.2) !important;
}

/* Payment method selection effect */
.payment-method {
    cursor: pointer;
    border: 1px solid rgba(75, 75, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s ease;
}

.payment-method:active,
.payment-method.selected {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    background: rgba(75, 75, 255, 0.1);
    border-color: rgba(75, 75, 255, 0.4);
}

/* Copy button effect */
.copy-btn:active,
.copy-btn.pressed {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(1px) scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Form control focus effect */
.form-control:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(75, 75, 255, 0.2);
}

/* Select container effect */
.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container select {
    appearance: none;
    width: 100%;
    padding: 8px 30px 8px 12px;
    background: rgba(16, 20, 30, 0.5);
    border: 1px solid rgba(75, 75, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

.select-container select:active,
.select-container select:focus {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-color: rgba(75, 75, 255, 0.4);
}

/* Category tab effect */
.category-tab {
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(16, 20, 30, 0.5);
    border: 1px solid rgba(75, 75, 255, 0.2);
    color: #fff;
    cursor: pointer;
}

.category-tab:active,
.category-tab.active {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    background: rgba(75, 75, 255, 0.1);
    border-color: rgba(75, 75, 255, 0.4);
}

/* Mobile optimization */
@media (max-width: 767px) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn,
    .payment-method,
    .btn-wallet,
    .copy-btn,
    .category-tab {
        min-height: 44px;
        padding: 8px 16px;
    }
    
    .btn:active:not(:disabled):not(.disabled),
    button:active:not(:disabled),
    .nav-link:active:not(.active),
    [role="button"]:active,
    .back-button:active,
    .bottom-nav-link:active,
    .btn-transaction-details:active,
    .shop-card:active,
    .menu-item a:active,
    .custom-alert-btn:active,
    .payment-method:active,
    .btn-wallet:active,
    .copy-btn:active,
    .category-tab:active,
    .btn.pressed:not(:disabled):not(.disabled),
    button.pressed:not(:disabled),
    .nav-link.pressed:not(.active),
    [role="button"].pressed,
    .back-button.pressed,
    .bottom-nav-link.pressed,
    .btn-transaction-details.pressed,
    .shop-card.pressed,
    .menu-item a.pressed,
    .custom-alert-btn.pressed,
    .payment-method.pressed,
    .btn-wallet.pressed,
    .copy-btn.pressed,
    .category-tab.pressed {
        transform: translateY(3px) scale(0.96);
    }
}

/* Telegram Mini App specific optimizations */
@supports (-webkit-touch-callout: none) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn,
    .payment-method,
    .btn-wallet,
    .copy-btn,
    .category-tab {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .btn:hover,
    button:hover,
    .nav-link:hover,
    [role="button"]:hover,
    .back-button:hover,
    .bottom-nav-link:hover,
    .btn-transaction-details:hover,
    .shop-card:hover,
    .menu-item a:hover,
    .custom-alert-btn:hover,
    .payment-method:hover,
    .btn-wallet:hover,
    .copy-btn:hover,
    .category-tab:hover {
        transform: none !important;
    }
}

/* Touch handling improvements */
.btn,
button,
.nav-link,
[role="button"],
.back-button,
.bottom-nav-link,
.btn-transaction-details,
.shop-card,
.menu-item a,
.custom-alert-btn,
.payment-method,
.btn-wallet,
.copy-btn,
.category-tab {
    touch-action: manipulation; /* Disable double-tap zoom */
    -webkit-touch-callout: none; /* Disable callout */
    -webkit-user-select: none; /* Disable text selection */
    user-select: none;
    cursor: pointer;
    position: relative;
    /* Add a small delay to button activation */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add touch target padding without affecting visual size */
.btn::before,
button::before,
.nav-link::before,
[role="button"]::before,
.back-button::before,
.bottom-nav-link::before,
.btn-transaction-details::before,
.shop-card::before,
.menu-item a::before,
.custom-alert-btn::before,
.payment-method::before,
.btn-wallet::before,
.copy-btn::before,
.category-tab::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
}

/* Prevent scroll-triggered clicks */
.btn.scrolling,
button.scrolling,
.nav-link.scrolling,
[role="button"].scrolling,
.back-button.scrolling,
.bottom-nav-link.scrolling,
.btn-transaction-details.scrolling,
.shop-card.scrolling,
.menu-item a.scrolling,
.custom-alert-btn.scrolling,
.payment-method.scrolling,
.btn-wallet.scrolling,
.copy-btn.scrolling,
.category-tab.scrolling {
    pointer-events: none;
}

/* Mobile specific improvements */
@media (max-width: 767px) {
    .btn,
    button,
    .nav-link,
    [role="button"],
    .back-button,
    .bottom-nav-link,
    .btn-transaction-details,
    .menu-item a,
    .custom-alert-btn,
    .payment-method,
    .btn-wallet,
    .copy-btn,
    .category-tab {
        min-height: 44px; /* Larger touch target */
        padding: 12px 20px; /* Increased padding */
        margin: 4px 0; /* Add vertical spacing */
    }

    /* Increase space between buttons */
    .btn + .btn,
    button + button,
    .nav-link + .nav-link {
        margin-left: 12px;
    }
}

/* Click feedback animation */
.clicked {
    animation: click-feedback 0.2s ease-out;
}

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