/**
 * QuickAct Buttons - Enhanced Styles
 * 
 * Professional styling for QuickAct Buttons plugin shortcodes.
 * Provides consistent, responsive design with smooth animations
 * and accessibility features.
 * 
 * @package QuickActButtons
 * @version 1.0.0
 * @author Ayman Fikry
 */

/*
 * =============================================================================
 * BASE BUTTON STYLES
 * =============================================================================
 * Common styling for all button types with modern design patterns
 */
.qab-whatsapp,
.qab-call {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 25px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
    font-family: inherit;
    margin: 10px 0;
    width: 100%;
}

/*
 * =============================================================================
 * BUTTON TYPE SPECIFIC COLORS
 * =============================================================================
 * Default colors for different button types - can be overridden via admin settings
 */

/* WhatsApp button - Official WhatsApp green */
.qab-whatsapp {
    background-color: #25D366; /* WhatsApp brand color */
    color: #ffffff;
}

/* Call button - Material Design green for phone actions */
.qab-call {
    background-color: #4CAF50; /* Material green */
    color: #ffffff;
}

/*
 * =============================================================================
 * INTERACTIVE STATES
 * =============================================================================
 * Smooth hover, active, and focus states for better user experience
 */

/* Enhanced hover effects with smooth transitions */
.qab-whatsapp:hover,
.qab-call:hover {
    opacity: 0.85;                                    /* Subtle transparency */
    transform: translateY(-1px);                      /* Gentle lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);      /* Enhanced shadow */
    text-decoration: none;                            /* Remove underline */
    color: inherit;                                   /* Maintain text color */
}

/* Active state when button is being pressed */
.qab-whatsapp:active,
.qab-call:active {
    transform: translateY(0);   /* Reset lift effect */
    opacity: 0.9;               /* Slightly more opaque than hover */
}

/* Focus state for keyboard navigation and accessibility */
.qab-whatsapp:focus,
.qab-call:focus {
    outline: 2px solid currentColor;  /* High contrast outline */
    outline-offset: 2px;              /* Space between button and outline */
    opacity: 0.9;                     /* Indicate focused state */
}

/*
 * =============================================================================
 * ICON STYLING
 * =============================================================================
 * Consistent sizing and positioning for both SVG and IMG icons
 */

/* Icon styling for both SVG and IMG elements */
.qab-whatsapp svg,
.qab-call svg,
.qab-whatsapp img,
.qab-call img {
    flex-shrink: 0;          /* Prevent icon from shrinking */
    width: 20px;             /* Fixed width for consistency */
    height: 20px;            /* Fixed height for consistency */
    vertical-align: middle;  /* Center align with text */
    border: none !important; /* Remove any theme borders */
    margin: 0 !important;    /* Remove any theme margins */
}

/*
 * =============================================================================
 * FORM SLOT CONTAINER
 * =============================================================================
 * Styling for the [qab_form] shortcode container and placeholder
 */

/* Main container for form slot shortcode */
.qab-form-slot {
    margin: 20px 0;  /* Vertical spacing around form */
}

/* Placeholder message when no form is configured */
.qab-form-slot p {
    margin: 0;                    /* Remove default paragraph margins */
    padding: 20px;                /* Internal spacing */
    text-align: center;           /* Center the message */
    background: #f9f9f9;          /* Light background */
    border: 1px dashed #ccc;      /* Dashed border for placeholder feel */
    border-radius: 4px;           /* Subtle rounded corners */
    color: #666;                  /* Muted text color */
    font-style: italic;           /* Emphasize placeholder nature */
}

/*
 * =============================================================================
 * RESPONSIVE DESIGN
 * =============================================================================
 * Mobile-first responsive adjustments for better touch interaction
 */

/* Mobile and tablet adjustments */
@media (max-width: 768px) {
    /* Larger buttons for better touch targets */
    .qab-whatsapp,
    .qab-call {
        padding: 12px 18px;  /* More generous padding */
        font-size: 16px;     /* Larger text for readability */
        gap: 10px;           /* More space between icon and text */
    }

    /* Slightly larger icons on mobile */
    .qab-whatsapp svg,
    .qab-call svg,
    .qab-whatsapp img,
    .qab-call img {
        width: 22px;   /* Bigger icons for mobile */
        height: 22px;
    }
}

/*
 * =============================================================================
 * ACCESSIBILITY & DARK MODE
 * =============================================================================
 * Support for different color schemes and accessibility preferences
 */

/* Dark mode support for form placeholder */
@media (prefers-color-scheme: dark) {
    .qab-form-slot p {
        background: #2a2a2a;    /* Dark background */
        border-color: #555;     /* Darker border */
        color: #ccc;            /* Light text */
    }
}

/* Reduced motion support for users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
    .qab-whatsapp,
    .qab-call {
        transition: none;  /* Disable transitions */
    }
    
    .qab-whatsapp:hover,
    .qab-call:hover {
        transform: none;   /* Disable transform animations */
    }
}