/* ===================================================================== */
/* === RETAIL ADMIN BUTTONS === */
/* Unified Button Design System */
/* ===================================================================== */

/* === UNIFIED BUTTON BASE STYLES === */

/* Standard Button Base Styles (excluding qty-btn which has special circular design) */
.sticky-toggle-btn,
.purchase-btn,
.retail-topnav .nav-btn,
.retail-create-product-btn,
.retail-order-toggle-btn,
.retail-order-info-btn,
.status-filter-btn,
.refresh-orders-btn,
.retail-action-btn,
.retail-filter-wrapper button,
.retail-order-status-btn,
.retail-item-status-btn,
.modal-close-btn,
.category-tab,
.retail-copy-table-btn,
.retail-search-btn,
.retail-clear-search-btn,
.retail-filter-search-btn {
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-bold) !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Standard Button Hover Transform */
.sticky-toggle-btn:hover,
.purchase-btn:hover,
.retail-topnav .nav-btn:hover,
.retail-create-product-btn:hover:enabled,
.retail-order-toggle-btn:hover,
.retail-order-info-btn:hover,
.status-filter-btn:hover,
.refresh-orders-btn:hover,
.retail-action-btn:hover,
.retail-filter-wrapper button:hover,
.retail-order-status-btn:hover,
.retail-item-status-btn:hover,
.modal-close-btn:hover,
.category-tab:hover,
.retail-copy-table-btn:hover,
.retail-search-btn:hover,
.retail-clear-search-btn:hover,
.retail-filter-search-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
}

/* Standard Button Shimmer Effect */
.sticky-toggle-btn::before,
.purchase-btn::before,
.retail-topnav .nav-btn::before,
.retail-create-product-btn::before,
.retail-order-toggle-btn::before,
.retail-order-info-btn::before,
.status-filter-btn::before,
.refresh-orders-btn::before,
.retail-action-btn::before,
.retail-filter-wrapper button::before,
.retail-copy-table-btn::before,
.retail-search-btn::before,
.retail-clear-search-btn::before,
.retail-filter-search-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.sticky-toggle-btn:hover::before,
.purchase-btn:hover::before,
.retail-topnav .nav-btn:hover::before,
.retail-create-product-btn:hover::before,
.retail-order-toggle-btn:hover::before,
.retail-order-info-btn:hover::before,
.status-filter-btn:hover::before,
.refresh-orders-btn:hover::before,
.retail-action-btn:hover::before,
.retail-filter-wrapper button:hover::before,
.retail-copy-table-btn:hover::before,
.retail-search-btn:hover::before,
.retail-clear-search-btn:hover::before,
.retail-filter-search-btn:hover::before {
    left: 100%;
}

/* === SPECIFIC BUTTON CONFIGURATIONS === */

/* Primary Action Buttons */
.retail-create-product-btn,
.purchase-btn {
    padding: 12px 32px;
    font-size: 16px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-brand);
}

.retail-create-product-btn {
    margin-bottom: 0 !important;
}

.retail-create-product-btn:disabled,
.purchase-btn:disabled {
    background: #9ca3af;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.retail-create-product-btn:hover:enabled,
.purchase-btn:hover:enabled {
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
}

/* Standard Buttons */
.retail-action-btn,
.retail-topnav .nav-btn,
.retail-filter-wrapper button,
.status-filter-btn,
.refresh-orders-btn,
.retail-copy-table-btn,
.retail-filter-search-btn {
    padding: 12px 20px;
}

.refresh-orders-btn {
    background: var(--gradient-success);
    color: white !important;
}

/* Small Buttons */
.retail-action-btn {
    padding: 10px 16px;
    font-size: 13px;
}

/* Order Toggle Button - Match Status Button Width */
.retail-order-toggle-btn {
    padding: 12px 20px;
    font-size: 14px;
    min-width: 140px;
}

/* Order Info Button - Compact Info Icon */
.retail-order-info-btn {
    padding: 12px;
    font-size: 16px;
    min-width: 44px;
    background: var(--gradient-primary);
    color: white !important;
    box-shadow: var(--shadow-brand);
}

/* Order Status Button - Fixed Width */
.retail-order-status-btn {
    min-width: 140px;
}

.retail-order-toggle-btn {
    background: var(--gradient-secondary);
    color: white !important;
}

/* === STATUS BUTTONS WITH COLOR CODING === */

.retail-admin-wrapper .status-entregado,
.retail-admin-wrapper .retail-order-status-btn.status-entregado,
.retail-admin-wrapper .retail-item-status-btn.status-entregado {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-success);
}

.status-entregado::before,
.retail-order-status-btn.status-entregado::before,
.retail-item-status-btn.status-entregado::before {
    content: '✓ ';
    font-weight: bold;
}

.status-entregado:hover,
.retail-order-status-btn.status-entregado:hover,
.retail-item-status-btn.status-entregado:hover {
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.6);
}

.retail-admin-wrapper .status-pendiente,
.retail-admin-wrapper .retail-order-status-btn.status-pendiente,
.retail-admin-wrapper .retail-item-status-btn.status-pendiente {
    background: var(--gradient-danger);
    color: white;
    box-shadow: var(--shadow-danger);
}

.status-pendiente::before,
.retail-order-status-btn.status-pendiente::before,
.retail-item-status-btn.status-pendiente::before {
    content: '⏳ ';
    font-weight: bold;
}

.status-pendiente:hover,
.retail-order-status-btn.status-pendiente:hover,
.retail-item-status-btn.status-pendiente:hover {
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.6);
}

/* Shimmer effect for status buttons */
.status-entregado::after,
.status-pendiente::after,
.retail-order-status-btn::after,
.retail-item-status-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.status-entregado:hover::after,
.status-pendiente:hover::after,
.retail-order-status-btn:hover::after,
.retail-item-status-btn:hover::after {
    left: 100%;
}

/* === WALLET HISTORY TOGGLE BUTTON === */

#toggle-wallet-history.sticky-toggle-btn {
    position: relative;
    z-index: 101;
    width: 100%;
    margin: 0;
    display: block;
    padding: 12px 32px;
    font-size: 16px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-brand);
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#toggle-wallet-history.sticky-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    border-radius: var(--radius-lg);
}

#toggle-wallet-history.sticky-toggle-btn:hover::before {
    opacity: 1;
}

#toggle-wallet-history.sticky-toggle-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
}

#toggle-wallet-history.sticky-toggle-btn::after {
    display: none;
}

/* === WALLET HISTORY TOGGLE CONTAINER === */

.wallet-history-toggle-container {
    position: sticky;
    top: -20px;
    width: 100%;
    margin: 16px 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.sticky-toggle-btn {
    padding: 12px 32px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
    white-space: nowrap;
}

.toggle-icon {
    transition: transform 0.2s ease;
}

.sticky-toggle-btn.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* === ENHANCED SPECIFICITY BUTTONS === */

/* Create Product Button - Highest specificity for main CTA */
.retail-admin-wrapper #retail-create-product-btn,
.retail-admin-wrapper button#retail-create-product-btn,
.retail-admin-wrapper .retail-create-product-btn {
    display: block;
    margin: 0 auto 24px;
    border-radius: var(--radius-xl);
    border: none;
    background: var(--gradient-primary);
    color: white;
    padding: 12px 32px;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-brand);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    align-self: center;
}

.retail-admin-wrapper #retail-create-product-btn:hover,
.retail-admin-wrapper button#retail-create-product-btn:hover,
.retail-admin-wrapper .retail-create-product-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
    background: var(--gradient-primary);
    color: white;
}

/* === QUANTITY CONTROLS === */

/* Reset and rebuild qty-btn with maximum specificity */
.qty-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 36px !important;
    min-width: 50px !important;
    min-height: 36px !important;
    max-width: 50px !important;
    max-height: 36px !important;
    border-radius: var(--radius-lg) !important;
    -webkit-border-radius: var(--radius-lg) !important;
    -moz-border-radius: var(--radius-lg) !important;
    font-size: 18px !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1 !important;
    text-align: center !important;
    font-family: inherit !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%) !important;
    color: var(--brand-primary, #ec8a41) !important;
    border: 1px solid rgba(236, 138, 65, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 2 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

.qty-btn:hover {
    background: var(--gradient-primary, linear-gradient(135deg, #ec8a41 0%, #d4773a 100%)) !important;
    color: white !important;
    border-color: rgba(236, 138, 65, 0.6) !important;
    box-shadow: 0 8px 25px rgba(236, 138, 65, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-3px) scale(1.1) !important;
}

.qty-btn:active {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(236, 138, 65, 0.3) !important;
    transition: all 0.1s ease !important;
}

.qty-btn:focus {
    outline: 2px solid rgba(236, 138, 65, 0.5) !important;
    outline-offset: 2px !important;
}

.qty-btn * {
    pointer-events: none !important;
    line-height: 1 !important;
}

/* === QTY-INPUT STYLING === */

.qty-input {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 36px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: inherit !important;
    text-align: center !important;
    color: var(--brand-primary) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%) !important;
    border: 2px solid rgba(236, 138, 65, 0.3) !important;
    border-radius: var(--radius-lg) !important;
    -webkit-border-radius: var(--radius-lg) !important;
    -moz-border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: default !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.qty-input:focus {
    border-color: rgba(236, 138, 65, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(236, 138, 65, 0.2), 0 6px 16px rgba(236, 138, 65, 0.15) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(254, 252, 251, 0.98) 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    outline: 2px solid rgba(236, 138, 65, 0.5) !important;
    outline-offset: 2px !important;
}

.qty-input:hover {
    border-color: rgba(236, 138, 65, 0.5) !important;
    box-shadow: 0 6px 16px rgba(236, 138, 65, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 248, 245, 0.95) 100%) !important;
    transform: translateY(-1px) !important;
}

/* === MODAL BUTTON SYSTEM === */

/* Reset all modal buttons to clean state */
.retail-modal-primary-btn,
.retail-modal-secondary-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    outline: none !important;
    position: relative !important;
    z-index: 10 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

/* PRIMARY BUTTON - Main action button */
.retail-modal-primary-btn {
    min-width: 120px !important;
    width: auto !important;
    padding: 16px 28px !important;
    height: auto !important;
    min-height: 48px !important;
    border-radius: var(--radius-lg) !important;
    -webkit-border-radius: var(--radius-lg) !important;
    -moz-border-radius: var(--radius-lg) !important;
    border: none !important;
    background: var(--gradient-primary, linear-gradient(135deg, #f0a366 0%, #ec8a41 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(236, 138, 65, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-bottom: 32px !important;
}

.retail-modal-primary-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6) !important;
    background: var(--gradient-primary-light, linear-gradient(135deg, #f2a968 0%, #ee8c43 100%)) !important;
    color: #ffffff !important;
}

.retail-modal-primary-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 5px 15px rgba(236, 138, 65, 0.5) !important;
}

.retail-modal-primary-btn:focus {
    outline: 2px solid rgba(236, 138, 65, 0.5) !important;
    outline-offset: 2px !important;
}

/* SECONDARY BUTTON - Cancel/close actions */
.retail-modal-secondary-btn {
    min-width: 100px !important;
    width: auto !important;
    padding: 14px 24px !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    border: 1px solid rgba(236, 138, 65, 0.2) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #4a5568 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    margin-bottom: 32px !important;
}

.retail-modal-secondary-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 1) !important;
    color: var(--brand-primary, #ec8a41) !important;
    border-color: rgba(236, 138, 65, 0.4) !important;
}

.retail-modal-secondary-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}

.retail-modal-secondary-btn:focus {
    outline: 2px solid rgba(236, 138, 65, 0.3) !important;
    outline-offset: 2px !important;
}

/* === PURCHASE BUTTON FIXES === */

.purchase-btn,
#purchase-products-btn.purchase-btn,
.retail-admin-wrapper .purchase-btn,
.retail-admin-wrapper #purchase-products-btn.purchase-btn {
    width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 16px 24px !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    font-weight: var(--font-weight-bold) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-brand) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

.purchase-btn:disabled,
#purchase-products-btn.purchase-btn:disabled {
    background: #9ca3af !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.purchase-btn:hover:enabled,
#purchase-products-btn.purchase-btn:hover:enabled {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6) !important;
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* === STATUS FILTER BUTTON ACTIVE STATES === */

/* Active State for Status Filter Buttons */
.status-filter-btn.active {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-brand) !important;
    transform: translateY(-1px) scale(1.02);
}

.status-filter-btn.active:hover {
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6) !important;
    transform: translateY(-2px) scale(1.05);
}

/* Default inactive state for status filter buttons */
.status-filter-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #4a5568 !important;
    border: 1px solid rgba(236, 138, 65, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
}

.status-filter-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 1);
    color: var(--brand-primary);
    border-color: rgba(236, 138, 65, 0.4);
}

/* === SEARCH AND UTILITY BUTTON STYLES === */

/* Copy Table Button */
.retail-copy-table-btn {
    background: var(--gradient-success) !important;
    color: white !important;
    box-shadow: var(--gradient-success) !important;
    font-size: 14px !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    width: 100% !important;
}

.retail-copy-table-btn:hover {
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
}

/* Search Button - Compact Icon Button */
.retail-search-btn {
    padding: 10px 12px !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-brand) !important;
    font-size: 16px !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    min-width: 44px !important;
}

.retail-search-btn:hover {
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
}

/* Clear Search Button - Match Search Button Size */
.retail-clear-search-btn {
    padding: 10px 12px !important;
    background: var(--gradient-danger) !important;
    color: white !important;
    box-shadow: var(--shadow-danger) !important;
    font-size: 16px !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
    min-width: 44px !important;
}

.retail-clear-search-btn:hover {
    background: var(--gradient-danger);
    box-shadow: 0 15px 35px rgba(239, 68, 68, 0.6);
}

/* Filter Search Button */
.retail-filter-search-btn {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-brand) !important;
    border-radius: var(--radius-md) !important;
    -webkit-border-radius: var(--radius-md) !important;
    -moz-border-radius: var(--radius-md) !important;
}

.retail-filter-search-btn:hover {
    box-shadow: 0 15px 35px rgba(236, 138, 65, 0.6);
}

/* === FOCUS AND ACTIVE STATES FOR ALL UTILITY BUTTONS === */

/* Focus States - Accessibility */
.retail-copy-table-btn:focus,
.retail-search-btn:focus,
.retail-clear-search-btn:focus,
.retail-filter-search-btn:focus,
.status-filter-btn:focus,
.refresh-orders-btn:focus {
    outline: 2px solid rgba(236, 138, 65, 0.5);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(236, 138, 65, 0.2);
}

/* Active/Pressed States */
.retail-copy-table-btn:active,
.retail-search-btn:active,
.retail-filter-search-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--shadow-brand);
    transition: all 0.1s ease;
}

.retail-clear-search-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--shadow-danger);
    transition: all 0.1s ease;
}

.status-filter-btn:active:not(.active) {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease;
}

.refresh-orders-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--shadow-brand);
    transition: all 0.1s ease;
}

/* === RESPONSIVE BUTTON ADJUSTMENTS === */

@media (max-width: 768px) {

    .retail-modal-primary-btn,
    .retail-modal-secondary-btn {
        width: 100% !important;
        min-width: unset !important;
    }

    .retail-modal-primary-btn {
        padding: 18px 20px !important;
        font-size: 16px !important;
    }

    .retail-modal-secondary-btn {
        padding: 16px 20px !important;
        font-size: 15px !important;
    }
}