@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

/* M3 Color System - Semantic Variables */
:root {
    /* Primary */
    --md-sys-color-primary: #1e3a8a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eff6ff;
    --md-sys-color-on-primary-container: #172554;
    
    /* Surface */
    --md-sys-color-surface: #f9fafb;
    --md-sys-color-surface-container: #ffffff;
    --md-sys-color-surface-container-high: #f3f4f6;
    --md-sys-color-surface-container-highest: #e5e7eb;
    --md-sys-color-on-surface: #111827;
    --md-sys-color-on-surface-variant: #6b7280;
    
    /* Outline */
    --md-sys-color-outline: #6b7280;
    --md-sys-color-outline-variant: #d1d5db;
    
    /* Secondary (Brand Yellow) */
    --md-sys-color-secondary: #eab308;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #fef3c7;
    --md-sys-color-on-secondary-container: #713f12;
    
    /* Error */
    --md-sys-color-error: #dc2626;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #fef2f2;
    --md-sys-color-on-error-container: #7f1d1d;
    
    /* Success */
    --md-sys-color-success: #16a34a;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-success-container: #f0fdf4;
    --md-sys-color-on-success-container: #14532d;
}

/* M3 State Layers */
.m3-state-layer {
    position: relative;
    overflow: hidden;
}

.m3-state-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.m3-state-layer:hover::before {
    opacity: 0.08;
}

.m3-state-layer:focus-visible::before {
    opacity: 0.12;
}

.m3-state-layer:active::before {
    opacity: 0.12;
}

/* M3 Color Utility Classes */
.bg-m3-primary {
    background-color: var(--md-sys-color-primary);
}

.text-m3-on-primary {
    color: var(--md-sys-color-on-primary);
}

.bg-m3-primary-container {
    background-color: var(--md-sys-color-primary-container);
}

.text-m3-on-primary-container {
    color: var(--md-sys-color-on-primary-container);
}

.bg-m3-secondary {
    background-color: var(--md-sys-color-secondary);
}

.text-m3-on-secondary {
    color: var(--md-sys-color-on-secondary);
}

.bg-m3-surface {
    background-color: var(--md-sys-color-surface);
}

.bg-m3-surface-container {
    background-color: var(--md-sys-color-surface-container);
}

.text-m3-on-surface {
    color: var(--md-sys-color-on-surface);
}

.text-m3-on-surface-variant {
    color: var(--md-sys-color-on-surface-variant);
}

.border-m3-outline {
    border-color: var(--md-sys-color-outline);
}

.border-m3-outline-variant {
    border-color: var(--md-sys-color-outline-variant);
}

/* M3 Typography Scale - Cairo Font */
.m3-display-large {
    font-family: 'Cairo', sans-serif;
    font-size: 3.5625rem; /* 57px */
    line-height: 4rem; /* 64px */
    letter-spacing: -0.015625rem; /* -0.25px */
    font-weight: 400;
}

.m3-display-medium {
    font-family: 'Cairo', sans-serif;
    font-size: 2.8125rem; /* 45px */
    line-height: 3.25rem; /* 52px */
    letter-spacing: 0;
    font-weight: 400;
}

.m3-display-small {
    font-family: 'Cairo', sans-serif;
    font-size: 2.25rem; /* 36px */
    line-height: 2.75rem; /* 44px */
    letter-spacing: 0;
    font-weight: 400;
}

.m3-headline-large {
    font-family: 'Cairo', sans-serif;
    font-size: 2rem; /* 32px */
    line-height: 2.5rem; /* 40px */
    letter-spacing: 0;
    font-weight: 400;
}

.m3-headline-medium {
    font-family: 'Cairo', sans-serif;
    font-size: 1.75rem; /* 28px */
    line-height: 2.25rem; /* 36px */
    letter-spacing: 0;
    font-weight: 400;
}

.m3-headline-small {
    font-family: 'Cairo', sans-serif;
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
    letter-spacing: 0;
    font-weight: 400;
}

.m3-title-large {
    font-family: 'Cairo', sans-serif;
    font-size: 1.375rem; /* 22px */
    line-height: 1.75rem; /* 28px */
    letter-spacing: 0;
    font-weight: 500;
}

.m3-title-medium {
    font-family: 'Cairo', sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    letter-spacing: 0.009375rem; /* 0.15px */
    font-weight: 500;
}

.m3-title-small {
    font-family: 'Cairo', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    letter-spacing: 0.00625rem; /* 0.1px */
    font-weight: 500;
}

.m3-body-large {
    font-family: 'Cairo', sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    letter-spacing: 0.03125rem; /* 0.5px */
    font-weight: 400;
}

.m3-body-medium {
    font-family: 'Cairo', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    letter-spacing: 0.015625rem; /* 0.25px */
    font-weight: 400;
}

.m3-body-small {
    font-family: 'Cairo', sans-serif;
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    letter-spacing: 0.025rem; /* 0.4px */
    font-weight: 400;
}

.m3-label-large {
    font-family: 'Cairo', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    letter-spacing: 0.00625rem; /* 0.1px */
    font-weight: 500;
}

.m3-label-medium {
    font-family: 'Cairo', sans-serif;
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    letter-spacing: 0.03125rem; /* 0.5px */
    font-weight: 500;
}

.m3-label-small {
    font-family: 'Cairo', sans-serif;
    font-size: 0.6875rem; /* 11px */
    line-height: 1rem; /* 16px */
    letter-spacing: 0.03125rem; /* 0.5px */
    font-weight: 500;
}

/* M3 Motion - Easing Curves */
.m3-emphasized-decelerate {
    transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
}

.m3-emphasized-accelerate {
    transition-timing-function: cubic-bezier(0.3, 0.0, 0.8, 0.15);
}

.m3-standard {
    transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
}

.m3-duration-enter {
    transition-duration: 400ms;
}

.m3-duration-leave {
    transition-duration: 200ms;
}

/* M3 Motion Presets */
.m3-enter {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
}

.m3-leave {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.3, 0.0, 0.8, 0.15);
}

body {
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

.accordion-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-content.active {
    opacity: 1;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-btn[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-btn[aria-expanded="true"] {
    color: #4B0082;
    background-color: #f3e8ff;
}

/* M3 Primary Tabs - Hide Scrollbar */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* M3 Premium Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f9fafb;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
/* Auth Card Entrance Animation */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-slide-up-fade {
    animation: slideUpFade 0.6s cubic-bezier(0.2, 0.0, 0, 1.0) forwards;
}

/* M3 Error Shake Physics */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.input-shake {
    animation: errorShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    border-color: var(--md-sys-color-error, #ba1a1a) !important;
}

/* M3 Floating Label Webkit Autofill Override */
input:-webkit-autofill ~ label,
input:-webkit-autofill:hover ~ label,
input:-webkit-autofill:focus ~ label,
input:-webkit-autofill:active ~ label {
    transform: translateY(-0.75rem) scale(0.75) !important;
    color: var(--md-sys-color-primary, #0056b3) !important;
    z-index: 20;
}

/* Maintain transparent background for M3 style during autofill */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
}