/**
 * ExploreXR Button System - Enhanced Functional Button Styling
 * 
 * This file provides consistent button styling across the main plugin and all addons
 * with clear visual hierarchy based on button functions while maintaining brand colors
 */

/* ========================================
   Plugin Brand Colors Definition
   ======================================== */
:root {
    --explorexr-primary: #2AACE2;
    --explorexr-primary-dark: #1e8bb8;
    --explorexr-primary-darker: #156a8a;
    --explorexr-secondary: #0D152C;
    --explorexr-success: #28a745;
    --explorexr-success-dark: #218838;
    --explorexr-warning: #ffc107;
    --explorexr-warning-dark: #e0a800;
    --explorexr-danger: #dc3545;
    --explorexr-danger-dark: #c82333;
    --explorexr-light: #f8f9fa;
    --explorexr-dark: #343a40;
}

/* ========================================
   Base ExploreXR Button Styles
   ======================================== */

.explorexr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%);
    border: 1px solid transparent;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(42, 172, 226, 0.3);
    text-shadow: none;
    line-height: 1;
}

.explorexr-button:hover {
    background: linear-gradient(135deg, var(--explorexr-primary-dark) 0%, var(--explorexr-primary-darker) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(42, 172, 226, 0.4);
    color: white;
    text-decoration: none;
}

.explorexr-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(42, 172, 226, 0.2);
}

.explorexr-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 172, 226, 0.3);
}

/* ========================================
   Functional Button Variants
   ======================================== */

/* PRIMARY ACTIONS - Main CTAs, Create, Save, Upgrade */
.explorexr-button-primary,
.explorexr-button.primary {
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%);
    box-shadow: 0 3px 6px rgba(42, 172, 226, 0.4);
    font-weight: 600;
}

.explorexr-button-primary:hover,
.explorexr-button.primary:hover {
    background: linear-gradient(135deg, var(--explorexr-primary-dark) 0%, var(--explorexr-primary-darker) 100%);
    box-shadow: 0 5px 10px rgba(42, 172, 226, 0.5);
    transform: translateY(-2px);
}

/* SECONDARY ACTIONS - Cancel, Back, View */
.explorexr-button-secondary,
.explorexr-button.secondary {
    background: linear-gradient(135deg, var(--explorexr-secondary) 0%, #1a2332 100%);
    box-shadow: 0 2px 4px rgba(13, 21, 44, 0.3);
    font-weight: 500;
}

.explorexr-button-secondary:hover,
.explorexr-button.secondary:hover {
    background: linear-gradient(135deg, #1a2332 0%, #262d3d 100%);
    box-shadow: 0 4px 8px rgba(13, 21, 44, 0.4);
    color: white;
}

/* SUCCESS ACTIONS - Activate, Enable, Confirm */
.explorexr-button-success,
.explorexr-button.success {
    background: linear-gradient(135deg, var(--explorexr-success) 0%, var(--explorexr-success-dark) 100%);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    font-weight: 500;
}

.explorexr-button-success:hover,
.explorexr-button.success:hover {
    background: linear-gradient(135deg, var(--explorexr-success-dark) 0%, #1e7e34 100%);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
    color: white;
}

/* WARNING ACTIONS - Settings, Manage, Configure */
.explorexr-button-warning,
.explorexr-button.warning {
    background: linear-gradient(135deg, var(--explorexr-warning) 0%, var(--explorexr-warning-dark) 100%);
    color: var(--explorexr-secondary);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    font-weight: 500;
}

.explorexr-button-warning:hover,
.explorexr-button.warning:hover {
    background: linear-gradient(135deg, var(--explorexr-warning-dark) 0%, #d39e00 100%);
    color: var(--explorexr-secondary);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
}

/* DANGER ACTIONS - Delete, Remove, Deactivate */
.explorexr-button-danger,
.explorexr-button.danger,
.explorexr-button-link {
    background: transparent;
    color: var(--explorexr-danger);
    border: 1px solid var(--explorexr-danger);
    box-shadow: none;
    font-weight: 500;
}

.explorexr-button-danger:hover,
.explorexr-button.danger:hover,
.explorexr-button-link:hover {
    background: var(--explorexr-danger);
    color: white;
    transform: none;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* UTILITY ACTIONS - Copy, Download, Info */
.explorexr-button-utility,
.explorexr-button.utility {
    background: var(--explorexr-light);
    color: var(--explorexr-dark);
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.explorexr-button-utility:hover,
.explorexr-button.utility:hover {
    background: #e9ecef;
    color: var(--explorexr-dark);
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* ========================================
   Button Sizes
   ======================================== */

.explorexr-button-small {
    padding: 6px 12px;
    font-size: 12px;
}

.explorexr-button-large {
    padding: 12px 24px;
    font-size: 16px;
}

/* ========================================
   WordPress Button Override for ExploreXR Context
   ======================================== */

/* Apply ExploreXR styling to WordPress buttons within ExploreXR contexts */
.explorexr-admin-container .button:not(.explorexr-button):not(.copy-shortcode):not(.explorexr-dismiss-fix-notice),
.explorexr-card .button:not(.explorexr-button),
.explorexr-form-group .button:not(.explorexr-button),
.explorexr-media-field .button:not(.explorexr-button),
.wrap[class*="explorexr-"] .button:not(.explorexr-button):not(.copy-shortcode):not(.explorexr-dismiss-fix-notice) {
    background: linear-gradient(135deg, var(--explorexr-secondary) 0%, #1a2332 100%) !important;
    border: 1px solid transparent !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(13, 21, 44, 0.3) !important;
    text-shadow: none !important; 
}

.explorexr-admin-container .button:not(.explorexr-button):hover,
.explorexr-card .button:not(.explorexr-button):hover,
.explorexr-form-group .button:not(.explorexr-button):hover,
.explorexr-media-field .button:not(.explorexr-button):hover,
.wrap[class*="explorexr-"] .button:not(.explorexr-button):hover {
    background: linear-gradient(135deg, #1a2332 0%, #262d3d 100%) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(13, 21, 44, 0.4) !important;
}

/* Button Primary Override for WordPress buttons */
.explorexr-admin-container .button-primary:not(.explorexr-button),
.explorexr-card .button-primary:not(.explorexr-button),
.explorexr-form-group .button-primary:not(.explorexr-button),
.wrap[class*="explorexr-"] .button-primary:not(.explorexr-button) {
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%) !important;
    box-shadow: 0 3px 6px rgba(42, 172, 226, 0.4) !important;
    font-weight: 600 !important;
}

.explorexr-admin-container .button-primary:not(.explorexr-button):hover,
.explorexr-card .button-primary:not(.explorexr-button):hover,
.explorexr-form-group .button-primary:not(.explorexr-button):hover,
.wrap[class*="explorexr-"] .button-primary:not(.explorexr-button):hover {
    background: linear-gradient(135deg, var(--explorexr-primary-dark) 0%, var(--explorexr-primary-darker) 100%) !important;
    box-shadow: 0 5px 10px rgba(42, 172, 226, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Button Secondary Override for WordPress buttons */
.explorexr-admin-container .button-secondary:not(.explorexr-button),
.explorexr-card .button-secondary:not(.explorexr-button),
.explorexr-form-group .button-secondary:not(.explorexr-button),
.wrap[class*="explorexr-"] .button-secondary:not(.explorexr-button) {
    background: var(--explorexr-light) !important;
    color: var(--explorexr-dark) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500 !important;
}

.explorexr-admin-container .button-secondary:not(.explorexr-button):hover,
.explorexr-card .button-secondary:not(.explorexr-button):hover,
.explorexr-form-group .button-secondary:not(.explorexr-button):hover,
.wrap[class*="explorexr-"] .button-secondary:not(.explorexr-button):hover {
    background: #e9ecef !important;
    color: var(--explorexr-dark) !important;
    border-color: #adb5bd !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   Context-Specific Button Styling
   ======================================== */

/* Copy Shortcode Button */
.copy-shortcode {
    background: var(--explorexr-light) !important;
    color: var(--explorexr-primary) !important;
    border: 1px solid var(--explorexr-primary) !important;
    box-shadow: 0 1px 3px rgba(42, 172, 226, 0.2) !important;
    font-weight: 500 !important;
}

.copy-shortcode:hover {
    background: var(--explorexr-primary) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(42, 172, 226, 0.3) !important;
}

/* Model Action Buttons */
.explorexr-action-buttons .button {
    margin-right: 5px;
}

.explorexr-action-buttons .button[href*="edit"] {
    background: linear-gradient(135deg, var(--explorexr-warning) 0%, var(--explorexr-warning-dark) 100%) !important;
    color: var(--explorexr-secondary) !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3) !important;
}

.explorexr-action-buttons .button.view-3d-model {
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(42, 172, 226, 0.3) !important;
}

.explorexr-action-buttons .button[target="_blank"] {
    background: var(--explorexr-light) !important;
    color: var(--explorexr-dark) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Delete button styling */
.explorexr-action-buttons .button.button-link-delete,
.explorexr-action-buttons .button.delete-model {
    background: transparent !important;
    color: var(--explorexr-danger) !important;
    border: 1px solid var(--explorexr-danger) !important;
    box-shadow: none !important;
}

.explorexr-action-buttons .button.button-link-delete:hover,
.explorexr-action-buttons .button.delete-model:hover {
    background: var(--explorexr-danger) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

/* Header Action Buttons */
.explorexr-header-actions .button-primary {
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 6px rgba(42, 172, 226, 0.4) !important;
}

.explorexr-header-actions .button:not(.button-primary) {
    background: var(--explorexr-light) !important;
    color: var(--explorexr-dark) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Form Submit Buttons */
.explorexr-form-group input[type="submit"],
.explorexr-form-group button[type="submit"] {
    background: linear-gradient(135deg, var(--explorexr-primary) 0%, var(--explorexr-primary-dark) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 6px rgba(42, 172, 226, 0.4) !important;
    padding: 12px 24px !important;
}

/* ========================================
   Icon Support
   ======================================== */

.explorexr-button .dashicons {
    margin-right: 6px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.explorexr-button-small .dashicons {
    margin-right: 4px;
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.explorexr-button-large .dashicons {
    margin-right: 8px;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ========================================
   Disabled State
   ======================================== */

.explorexr-button:disabled,
.explorexr-button.disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.explorexr-button:disabled:hover,
.explorexr-button.disabled:hover {
    background: #e9ecef !important;
    color: #6c757d !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================
   Functional Button Classes for WordPress Buttons
   ======================================== */

/* Activate/Confirm actions */
.explorexr-admin-container .button.explorexr-function-activate,
.explorexr-admin-container .button.explorexr-function-confirm {
    background: linear-gradient(135deg, var(--explorexr-success) 0%, var(--explorexr-success-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important;
}

/* Settings/Manage/Configure actions */
.explorexr-admin-container .button.explorexr-function-settings,
.explorexr-admin-container .button.explorexr-function-manage,
.explorexr-admin-container .button.explorexr-function-configure {
    background: linear-gradient(135deg, var(--explorexr-warning) 0%, var(--explorexr-warning-dark) 100%) !important;
    color: var(--explorexr-secondary) !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3) !important;
}

/* Delete/Remove/Deactivate actions */
.explorexr-admin-container .button.explorexr-function-delete,
.explorexr-admin-container .button.explorexr-function-remove,
.explorexr-admin-container .button.explorexr-function-deactivate {
    background: transparent !important;
    color: var(--explorexr-danger) !important;
    border: 1px solid var(--explorexr-danger) !important;
    box-shadow: none !important;
}

/* Copy/Download/Info actions */
.explorexr-admin-container .button.explorexr-function-copy,
.explorexr-admin-container .button.explorexr-function-download,
.explorexr-admin-container .button.explorexr-function-info {
    background: var(--explorexr-light) !important;
    color: var(--explorexr-dark) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Special License Deactivation Button */
.explorexr-deactivate-license {
    background: linear-gradient(135deg, #F36E24 0%, #EF4681 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(243, 110, 36, 0.3) !important;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .explorexr-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .explorexr-button-small {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .explorexr-button-large {
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* ========================================
   Fallback Styles (in case main CSS fails to load)
   ======================================== */

/* Fallback for explorexr-button classes */
.explorexr-button:not([style*="background"]) {
    background: #2AACE2 !important;
    color: white !important;
    border: 1px solid #2AACE2 !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

.explorexr-button-secondary:not([style*="background"]) {
    background: #0D152C !important;
    border-color: #0D152C !important;
    color: white !important;
}

.explorexr-button-success:not([style*="background"]) {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.explorexr-button-warning:not([style*="background"]) {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #0D152C !important;
}

.explorexr-button-danger:not([style*="background"]),
.explorexr-button-link:not([style*="background"]) {
    background: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

.explorexr-button-utility:not([style*="background"]) {
    background: #f8f9fa !important;
    color: #343a40 !important;
    border: 1px solid #dee2e6 !important;
}

/* Fallback for WordPress buttons in ExploreXR context */
[class*="explorexr-"] .button:not(.explorexr-button):not([style*="background"]) {
    background: #0D152C !important;
    color: white !important;
    border: 1px solid #0D152C !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

[class*="explorexr-"] .button-primary:not(.explorexr-button):not([style*="background"]) {
    background: #2AACE2 !important;
    border-color: #2AACE2 !important;
    color: white !important;
}

[class*="explorexr-"] .button-secondary:not(.explorexr-button):not([style*="background"]) {
    background: #f8f9fa !important;
    color: #343a40 !important;
    border: 1px solid #dee2e6 !important;
}

/* ========================================
   Addon-Specific Fallback Styles
   ======================================== */

/* Universal fallback for all addon contexts - ensures consistent styling even if main button styles fail to load */
.explorexr-ar-addon .explorexr-button:not([style*="background"]),
.explorexr-camera-addon .explorexr-button:not([style*="background"]),
.explorexr-annotations-addon .explorexr-button:not([style*="background"]),
.explorexr-materials-addon .explorexr-button:not([style*="background"]),
.explorexr-loading-addon .explorexr-button:not([style*="background"]),
.explorexr-animation-addon .explorexr-button:not([style*="background"]),
.explorexr-woocommerce-addon .explorexr-button:not([style*="background"]),
.wrap[class*="explorexr-"] .explorexr-button:not([style*="background"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #2AACE2 0%, #1e8bb8 100%) !important;
    border: none !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Fallback for WordPress native buttons in addon contexts */
.explorexr-ar-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-camera-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-annotations-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-materials-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-loading-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-animation-addon .button:not(.explorexr-button):not([style*="background"]),
.explorexr-woocommerce-addon .button:not(.explorexr-button):not([style*="background"]),
.wrap[class*="explorexr-"] .button:not(.explorexr-button):not([style*="background"]) {
    background: linear-gradient(135deg, #2AACE2 0%, #1e8bb8 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

/* Fallback for button variants */
.explorexr-ar-addon .explorexr-button-small:not([style*="background"]),
.explorexr-camera-addon .explorexr-button-small:not([style*="background"]),
.explorexr-annotations-addon .explorexr-button-small:not([style*="background"]),
.explorexr-materials-addon .explorexr-button-small:not([style*="background"]),
.explorexr-loading-addon .explorexr-button-small:not([style*="background"]),
.explorexr-animation-addon .explorexr-button-small:not([style*="background"]),
.explorexr-woocommerce-addon .explorexr-button-small:not([style*="background"]),
.wrap[class*="explorexr-"] .explorexr-button-small:not([style*="background"]) {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

.explorexr-ar-addon .explorexr-button-link:not([style*="background"]),
.explorexr-camera-addon .explorexr-button-link:not([style*="background"]),
.explorexr-annotations-addon .explorexr-button-link:not([style*="background"]),
.explorexr-materials-addon .explorexr-button-link:not([style*="background"]),
.explorexr-loading-addon .explorexr-button-link:not([style*="background"]),
.explorexr-animation-addon .explorexr-button-link:not([style*="background"]),
.explorexr-woocommerce-addon .explorexr-button-link:not([style*="background"]),
.wrap[class*="explorexr-"] .explorexr-button-link:not([style*="background"]) {
    background: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}