/**
 * OVATEQ Academy Portal - UI Enhancements
 *
 * Toast notifications, full-page loading screen, dark mode,
 * accessibility helpers and micro-animations.
 *
 * Loaded on every frontend page alongside ovateq-frontend.css.
 *
 * @package OVATEQ_Academy_Portal
 * @since   1.0.0
 */

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */

.ovateq-toast-wrap {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 360px;
    width: calc(100% - 2.5rem);
    pointer-events: none;
}

.ovateq-toast {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.7rem;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    border-left: 4px solid var(--ovateq-primary);
    font-size: 0.9rem;
    line-height: 1.4;
    pointer-events: auto;
    animation: ovateq-toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    cursor: pointer;
}

.ovateq-toast.ovateq-toast-out {
    animation: ovateq-toast-out 0.3s ease forwards;
}

.ovateq-toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 700;
}

.ovateq-toast--success { border-left-color: var(--ovateq-success); }
.ovateq-toast--success .ovateq-toast-icon { background: var(--ovateq-success); }

.ovateq-toast--error { border-left-color: var(--ovateq-error); }
.ovateq-toast--error .ovateq-toast-icon { background: var(--ovateq-error); }

.ovateq-toast--warning { border-left-color: var(--ovateq-warning); }
.ovateq-toast--warning .ovateq-toast-icon { background: var(--ovateq-warning); }

.ovateq-toast--info { border-left-color: var(--ovateq-primary); }
.ovateq-toast--info .ovateq-toast-icon { background: var(--ovateq-primary); }

@keyframes ovateq-toast-in {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ovateq-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(120%); }
}

/* ============================================================================
   FULL-PAGE LOADING SCREEN
   ============================================================================ */

.ovateq-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ovateq-loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ovateq-loading-screen .ovateq-pulse {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ovateq-primary), var(--ovateq-secondary));
    animation: ovateq-pulse 1.2s ease-in-out infinite;
}

@keyframes ovateq-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50%      { transform: scale(1.1); opacity: 1; }
}

.ovateq-loading-screen .ovateq-loading-text {
    font-size: 0.85rem;
    color: var(--ovateq-gray-500);
    letter-spacing: 0.04em;
}

/* Skeleton content shimmer while forms hydrate. */
.ovateq-skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
    animation: ovateq-shimmer 1.4s ease infinite;
    border-radius: 0.5rem;
}

@keyframes ovateq-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ============================================================================
   BUTTON LOADING STATE
   ============================================================================ */

.ovateq-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.ovateq-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin: -0.55rem 0 0 -0.55rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ovateq-spin 0.7s linear infinite;
}

.ovateq-btn:not(.ovateq-submit-btn).is-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--ovateq-primary);
}

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

/* ============================================================================
   DARK MODE
   ============================================================================ */

:root {
    --ovateq-bg: #ffffff;
    --ovateq-surface: #ffffff;
    --ovateq-surface-2: #f9fafb;
    --ovateq-text: #1f2937;
    --ovateq-text-muted: #6b7280;
    --ovateq-border: #e5e7eb;
}

html[data-ovateq-theme="dark"] {
    --ovateq-bg: #0f172a;
    --ovateq-surface: #1e293b;
    --ovateq-surface-2: #111827;
    --ovateq-text: #e2e8f0;
    --ovateq-text-muted: #94a3b8;
    --ovateq-border: #334155;
    --ovateq-gray-900: #f8fafc;
    --ovateq-gray-800: #e2e8f0;
    --ovateq-gray-700: #cbd5e1;
    --ovateq-gray-600: #94a3b8;
    --ovateq-gray-500: #64748b;
    --ovateq-gray-400: #475569;
    --ovateq-gray-300: #334155;
    --ovateq-gray-200: #1e293b;
    --ovateq-gray-100: #0f172a;
    --ovateq-gray-50: #0b1220;
}

html[data-ovateq-theme="dark"] .ovateq-loading-screen,
html[data-ovateq-theme="dark"] .ovateq-toast {
    background: #1e293b;
    color: #e2e8f0;
}

/* Dark-mode toggle button. */
.ovateq-theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9000;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid var(--ovateq-border);
    background: var(--ovateq-surface);
    color: var(--ovateq-text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.ovateq-theme-toggle:hover {
    transform: scale(1.08);
}

.ovateq-theme-toggle svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Visible focus ring for keyboard users. */
.ovateq-container :focus-visible {
    outline: 3px solid var(--ovateq-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   FADE-UP ENTRANCE ANIMATION
   ============================================================================ */

.ovateq-fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: ovateq-fade-up 0.5s ease forwards;
}

@keyframes ovateq-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

.ovateq-delay-1 { animation-delay: 0.08s; }
.ovateq-delay-2 { animation-delay: 0.16s; }
.ovateq-delay-3 { animation-delay: 0.24s; }