/* styles.css */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #ffffff;
    color: #111111;
}

/* Navbar scroll effect */
nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: #111111;
    border-bottom: 1px solid #f0f0f0;
}
nav.scrolled select {
    color: #111;
}

nav:not(.scrolled) select {
    color: white;
}
nav:not(.scrolled) select option {
    color: #111;
}

/* RTL Specific enhancements */
.is-ar {
    font-family: 'Tajawal', sans-serif !important;
}

.is-ar h1, .is-ar h2, .is-ar h3, .is-ar h4, .is-ar .font-bold, .is-ar .font-semibold {
    font-weight: 700;
}

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Modal Animation */
@keyframes modalEnter {
    from { opacity: 0; transform: scale(0.98) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes backdropEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content-animated {
    animation: modalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-backdrop-animated {
    animation: backdropEnter 0.4s ease-out forwards;
}

/* Toast Animation */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

.toast-animated {
    animation: slideUpFade 3s ease-in-out forwards;
}

/* Tesla aesthetics */
.tesla-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s;
    border: 1px solid transparent;
}

.tesla-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
    border-color: #f0f0f0;
}

button {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}