/**
 * Malik Suite Core Design System
 * 
 * Defines CSS variables and shared styles for all Malik Suite shortcodes.
 */

/* Global Container Styles */
.malik-suite-container {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--malik-text-main);
}

.malik-suite-container *,
.malik-suite-container *::before,
.malik-suite-container *::after {
    box-sizing: inherit;
}

.malik-suite-container :where(a, button, input, select, textarea):focus-visible,
.malik-app-container :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--malik-primary) 45%, transparent);
    outline-offset: 3px;
}

.malik-suite-loading,
.malik-suite-empty,
.malik-suite-error,
.malik-suite-success {
    border: 1px solid var(--malik-border);
    border-radius: var(--malik-radius-md);
    color: var(--malik-text-muted);
    padding: 20px;
    text-align: center;
}

.malik-suite-loading {
    animation: malik-pulse 1.5s ease-in-out infinite;
    background: var(--malik-surface);
}

.malik-suite-error {
    background: color-mix(in srgb, var(--malik-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--malik-danger) 35%, transparent);
    color: var(--malik-danger);
}

.malik-suite-success {
    background: color-mix(in srgb, var(--malik-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--malik-success) 35%, transparent);
    color: var(--malik-success);
}

@keyframes malik-pulse {
    50% {
        opacity: 0.65;
    }
}

/* Icons via CSS Mask (Bypasses wp_kses stripping) */
.malik-icon {
    display: inline-block;
    background-color: currentColor;
}

.malik-icon-bell {
    width: 20px;
    height: 20px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

.malik-icon-star {
    width: 16px;
    height: 16px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.malik-icon-flame {
    width: 16px;
    height: 16px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.malik-icon-trophy {
    width: 16px;
    height: 16px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Guest Prompts & Buttons (Shared) */
.malik-guest-prompt {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--malik-text-main);
    margin-bottom: 1rem;
    text-align: center;
}

.malik-guest-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.malik-btn {
    border: none;
    border-radius: var(--malik-radius-md);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    transition: var(--malik-transition);
    cursor: pointer;
    min-height: 44px;
}

.malik-btn:disabled,
.malik-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.malik-btn--login {
    background: linear-gradient(90deg, #4790dc 0%, #3bc6d9 100%);
    color: #111012 !important;
}

.malik-btn--register {
    background: var(--malik-primary);
    color: var(--malik-text-inverse) !important;
    border: 1px solid var(--malik-border);
}

.malik-btn--login:hover,
.malik-btn--login:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 144, 220, 0.3);
    color: #111012 !important;
}

.malik-btn--register:hover,
.malik-btn--register:focus-visible {
    background: var(--malik-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--malik-shadow-sm);
    color: var(--malik-text-inverse) !important;
}

@media (max-width: 600px) {
    .malik-app-container {
        padding: 12px;
    }

    .malik-guest-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .malik-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .malik-suite-container *,
    .malik-suite-container *::before,
    .malik-suite-container *::after,
    .malik-app-container *,
    .malik-app-container *::before,
    .malik-app-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}