/**
 * Rakmyaty Button Widget Styles
 * Professional, fully-customizable button with RTL support
 *
 * @package Rakmyat Core
 * @version 1.0.0
 */

/* ========================================
   Base Wrapper
   ======================================== */

.rmt-button-wrapper {
    display: block;
    width: 100%;
}

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

.rmt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rmt-button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.rmt-button:active {
    transform: scale(0.98);
}

/* ========================================
   Button Type - Default
   ======================================== */

.rmt-button.rmt-button-default {
    background-color: #0073aa;
    color: #ffffff;
    border-color: #0073aa;
}

.rmt-button.rmt-button-default:hover {
    background-color: #005a87;
    border-color: #005a87;
}

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

/* Small Button */
.rmt-button.rmt-button-sm,
.rmt-button.rmt-button-size-small {
    padding: 8px 16px;
    font-size: 14px;
}

/* Medium Button (Default) */
.rmt-button.rmt-button-size-medium {
    padding: 12px 24px;
    font-size: 16px;
}

/* Large Button */
.rmt-button.rmt-button-lg,
.rmt-button.rmt-button-size-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* Custom Size - controlled by Elementor padding control */
.rmt-button.rmt-button-size-custom {
    /* Padding will be set via Elementor controls */
}

/* ========================================
   Button Block (Full Width)
   ======================================== */

.rmt-button.rmt-button-block {
    display: flex;
    width: 100%;
}

/* ========================================
   Button Icon Styles
   ======================================== */

.rmt-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.3s ease;
}

.rmt-button-icon i {
    line-height: 1;
    transition: all 0.3s ease;
    display: inline-block;
}

.rmt-button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: all 0.3s ease;
    display: inline-block;
}

.rmt-button-icon img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Icon Position - Before (supports RTL) */
.rmt-button-icon-before {
    /* Margin set via Elementor controls for RTL support */
}

/* Icon Position - After (supports RTL) */
.rmt-button-icon-after {
    /* Margin set via Elementor controls for RTL support */
}

/* ========================================
   Button Text
   ======================================== */

.rmt-button-text {
    display: inline-block;
}

/* ========================================
   Hover Effects
   ======================================== */

/* Smooth transitions for all interactive elements */
.rmt-button:hover .rmt-button-icon i,
.rmt-button:hover .rmt-button-icon svg,
.rmt-button:hover .rmt-button-icon img {
    /* Icon color and transform transitions handled by Elementor controls */
    /* All transforms are smooth with transition: all 0.3s ease */
}

/* Default icon hover - slight move for better UX */
.rmt-button:hover .rmt-button-icon {
    /* Custom hover effects applied via Elementor */
}

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

.rmt-button:disabled,
.rmt-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Loading State (Optional for future use)
   ======================================== */

.rmt-button.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

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

@keyframes rmt-button-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   RTL Support
   ======================================== */

/* RTL is handled via CSS logical properties and Elementor controls */
[dir="rtl"] .rmt-button {
    direction: rtl;
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Tablet Breakpoint (768px) - Responsive button sizes */
@media (max-width: 1024px) {
    /* Tablet size overrides - only if different size selected for tablet */
    /* These are placeholders - Elementor generates these dynamically */
}

@media (max-width: 768px) {
    /* Mobile breakpoint - button size adjustments */
    /* Elementor will apply the responsive button_size value here */

    /* Only apply mobile size reductions if the user hasn't set a custom mobile size */
    /* These fallback sizes only apply if responsive control is not customized */
}

@media (max-width: 480px) {
    /* Extra small mobile breakpoint */
    /* Stack icon vertically on very small screens if needed */
    .rmt-button.rmt-button-block {
        width: 100%;
    }
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus visible for keyboard navigation */
.rmt-button:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Remove outline for mouse clicks */
.rmt-button:focus:not(:focus-visible) {
    outline: none;
}

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

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .rmt-button,
    .rmt-button *,
    .rmt-button::before,
    .rmt-button::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .rmt-button {
        color: #000;
        background: #fff;
        border: 1px solid #000;
    }
}

/* ========================================
   Elementor Editor Specific
   ======================================== */

/* Ensure buttons look correct in Elementor editor */
.elementor-editor-active .rmt-button {
    pointer-events: auto;
}

/* ========================================
   Icon Animations (Elementor Native)
   ======================================== */

/* Elementor hover animations are applied via classes */
/* No additional CSS needed - handled by Elementor */

/* ========================================
   Custom Transform Effects
   ======================================== */

/* Transform effects are controlled via Elementor selectors */
/* Applied on hover state through widget controls */

/* ========================================
   Z-Index Management
   ======================================== */

.rmt-button {
    z-index: 1;
}

.rmt-button:hover {
    z-index: 2;
}

/* ========================================
   Browser Compatibility
   ======================================== */

/* Ensure proper rendering in older browsers */
.rmt-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Prevent text selection on double-click */
.rmt-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ========================================
   End of Rakmyaty Button Styles
   ======================================== */