/**
 * Agilysys Pardot Gated Form Styles
 * Minimal custom CSS - relies heavily on Tailwind utility classes
 * 
 * @package AgilysysPardotGatedForms
 * @author  Agilysys IDC
 * @since   1.0.0
 */

/* =============================================================================
   Essential Modal & Animation Styles
   ========================================================================== */

#agilysys-pardot-modal {
    z-index: 999999 !important;
    font-family: inherit;
}

/* Modal entrance animation */
#agilysys-pardot-modal.agilysys-modal-entering .agilysys-modal-content {
    animation: agilysysSlideUp 0.3s ease-out;
}

/* =============================================================================
   Keyframe Animations (Not available in Tailwind by default)
   ========================================================================== */

@keyframes agilysysSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes agilysysSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================================================
   Loading Spinner Component
   ========================================================================== */

.agilysys-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: agilysysSpin 1s linear infinite;
    display: inline-block;
}

/* =============================================================================
   Button Ripple Effect Animation
   ========================================================================== */

[data-agilysys-pardot-trigger] {
    position: relative;
    overflow: hidden;
}

[data-agilysys-pardot-trigger]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /*background: rgba(255, 255, 255, 0.2);*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

[data-agilysys-pardot-trigger]:hover::before {
    width: 200px;
    height: 200px;
}

[data-agilysys-pardot-trigger] > * {
    position: relative;
    z-index: 1;
}

/* =============================================================================
   WordPress Admin Bar Compatibility
   ========================================================================== */

.admin-bar #agilysys-pardot-modal {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #agilysys-pardot-modal {
        top: 46px;
    }
}

/* =============================================================================
   Accessibility & Motion Preferences
   ========================================================================== */

/* Enhanced focus states for better accessibility */
[data-agilysys-pardot-trigger]:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    #agilysys-pardot-modal *,
    [data-agilysys-pardot-trigger],
    [data-agilysys-pardot-trigger]::before,
    .agilysys-spinner {
        animation: none !important;
        transition: none !important;
    }
    
    [data-agilysys-pardot-trigger]:hover {
        transform: none !important;
    }
}

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

@media print {
    #agilysys-pardot-modal,
    [data-agilysys-pardot-trigger] {
        display: none !important;
    }
}

/* =============================================================================
   Dark Mode Support (Works with Tailwind's dark mode)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .agilysys-spinner {
        border-color: #374151;
        border-top-color: #60a5fa;
    }
}