/* Saudi Tourism Theme - مرشدي */

/* Import TailwindCSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Saudi Theme Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Base Styles */
body {
    font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif !important;
    direction: rtl;
    text-align: right;
}

html[lang="en"] body {
    font-family: 'Poppins', 'Roboto', sans-serif !important;
    direction: ltr;
    text-align: left;
}

/* Saudi Theme Colors */
:root {
    --saudi-primary: #1B4D3E;
    --saudi-secondary: #B6935A;
    --saudi-accent: #E4C590;
    --saudi-background: #F9F7F2;
    --saudi-text: #2E2E2E;
    --saudi-dark: #143D31;
}

/* Saudi Gradient Background */
.saudi-gradient {
    background: linear-gradient(135deg, var(--saudi-primary) 0%, var(--saudi-secondary) 100%) !important;
}

/* Saudi Cards */
.saudi-card {
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px rgba(27, 77, 62, 0.1) !important;
    border: 1px solid #f3f4f6 !important;
    transition: all 0.3s ease !important;
}

.saudi-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(27, 77, 62, 0.15) !important;
}

/* Saudi Buttons */
.saudi-btn-primary {
    background: var(--saudi-primary) !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.saudi-btn-primary:hover {
    background: var(--saudi-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(27, 77, 62, 0.3) !important;
}

.saudi-btn-secondary {
    background: var(--saudi-secondary) !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.saudi-btn-secondary:hover {
    background: #a67c52 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(182, 147, 90, 0.3) !important;
}

.saudi-btn-outline {
    border: 2px solid var(--saudi-primary) !important;
    color: var(--saudi-primary) !important;
    background: transparent !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.saudi-btn-outline:hover {
    background: var(--saudi-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(27, 77, 62, 0.3) !important;
}

/* Saudi Inputs */
.saudi-input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.saudi-input:focus {
    outline: none !important;
    border-color: var(--saudi-primary) !important;
    box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.1) !important;
}

/* Saudi Text Colors */
.saudi-text-primary {
    color: var(--saudi-primary) !important;
}

.saudi-text-secondary {
    color: var(--saudi-secondary) !important;
}

.saudi-text-accent {
    color: var(--saudi-accent) !important;
}

/* Saudi Background Colors */
.saudi-bg-primary {
    background-color: var(--saudi-primary) !important;
}

.saudi-bg-secondary {
    background-color: var(--saudi-secondary) !important;
}

.saudi-bg-accent {
    background-color: var(--saudi-accent) !important;
}

.saudi-bg-light {
    background-color: var(--saudi-background) !important;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

/* Custom Animations */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
    from { 
        opacity: 0; 
        transform: translateX(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .saudi-btn-primary,
    .saudi-btn-secondary,
    .saudi-btn-outline {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    .saudi-card {
        border-radius: 0.75rem !important;
    }
}

/* Override Bootstrap and other frameworks */
.navbar {
    background: white !important;
    box-shadow: 0 2px 10px rgba(27, 77, 62, 0.1) !important;
    border: none !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: #2E2E2E !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--saudi-primary) !important;
}

/* Footer Styles */
footer {
    background: var(--saudi-primary) !important;
    color: white !important;
}

/* Form Overrides */
.form-control {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: var(--saudi-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(27, 77, 62, 0.25) !important;
}

/* Button Overrides */
.btn-primary {
    background-color: var(--saudi-primary) !important;
    border-color: var(--saudi-primary) !important;
    border-radius: 50px !important;
}

.btn-primary:hover {
    background-color: var(--saudi-dark) !important;
    border-color: var(--saudi-dark) !important;
}

.btn-secondary {
    background-color: var(--saudi-secondary) !important;
    border-color: var(--saudi-secondary) !important;
    border-radius: 50px !important;
}

.btn-secondary:hover {
    background-color: #a67c52 !important;
    border-color: #a67c52 !important;
}