@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap');

:root {
    --color-primary: #001F3F;
    --color-secondary: #ff9900;
    --color-surface: #ffffff;
}

body {
    font-family: 'Noto Sans Arabic', sans-serif;
    background-color: var(--color-primary);
    -webkit-tap-highlight-color: transparent;
}

/* Background Pattern */
.bg-pattern {
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Floating Label Logic refined for new classes */
.floating-input:placeholder-shown + .floating-label {
    transform: translateY(0) scale(1);
    color: #9CA3AF;
    background-color: transparent;
}

.floating-input:not(:placeholder-shown) + .floating-label,
.floating-input:focus + .floating-label,
.floating-input:valid + .floating-label,
.floating-input[value]:not([value=""]) + .floating-label,
.floating-input.has-value + .floating-label {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--color-primary);
    background-color: #ffffff;
    padding: 0 0.5rem;
}

/* Ensure label is raised when input has value on page load */
.floating-input[value]:not([value=""]):not(:focus) + .floating-label {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--color-primary);
    background-color: #ffffff;
    padding: 0 0.5rem;
}

/* Fix: browser autofill may not trigger placeholder/value selectors immediately */
.floating-input:-webkit-autofill + .floating-label {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--color-primary);
    background-color: #ffffff;
    padding: 0 0.5rem;
}

.input-group.error .floating-input {
    border-color: #EF4444;
}
.input-group.error .floating-label {
    color: #EF4444;
}
.input-group.success .floating-input {
    border-color: #10B981;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    100% { transform: translateX(2px); }
}

.shake-animation {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Animations */
.slide-down {
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Button Shine Effect */
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}

.btn-shine:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* Animation Delays */
.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Responsive Fixes */
@media screen and (max-width: 1024px) {
    .floating-input {
        font-size: 16px; /* Prevent Zoom on iOS */
    }
}