/* The project's own CSS that the compiled bundle used to carry: theme tokens (shadcn), base rules, custom utilities and animations.
   Link it right after tailwind.css, on every page that links that. */

:root {
    --page-bg: #f5f5f5; /* background of every page, and of the go-top curve in layouts/footer.php */
    --background: 0 0% 100%;
    --foreground: 216 12% 15%;
    --primary: 216 84% 58%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 216 84% 68%;
    --primary-dark: 216 84% 48%;
    --gold: 45 100% 65%;
    --gold-foreground: 216 12% 15%;
    --gold-light: 45 100% 75%;
    --gold-dark: 45 100% 55%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 216 12% 15%;
    --muted: 210 20% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 216 84% 95%;
    --accent-foreground: 216 84% 58%;
    --card: 0 0% 100%;
    --card-foreground: 216 12% 15%;
    --card-hover: 216 84% 98%;
    --popover: 0 0% 100%;
    --popover-foreground: 216 12% 15%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 216 84% 58%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --radius: .75rem;
    --shadow-soft: 0 4px 6px -1px hsl(216 84% 58% / .1);
    --shadow-medium: 0 10px 15px -3px hsl(216 84% 58% / .1);
    --shadow-strong: 0 25px 50px -12px hsl(216 84% 58% / .25);
    --gradient-primary: linear-gradient(135deg, hsl(216 84% 58%), hsl(216 84% 68%));
    --gradient-gold: linear-gradient(135deg, hsl(45 100% 65%), hsl(45 100% 75%));
    --gradient-hero: linear-gradient(135deg, hsl(216 84% 58% / .9), hsl(216 84% 48% / .7));
    --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%
}

* {
    border-color: hsl(var(--border))
}

body {
    background-color: var(--page-bg);
    font-family: IRANYekanXFaNum, sans-serif;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1
}

[dir=rtl] {
    direction: rtl
}

.animate-fade-in-up {
    animation: fadeInUp .6s ease-out forwards
}

.animate-scale-in {
    animation: scaleIn .4s ease-out forwards
}

.animate-kenburns-pan {
    animation: hero-kenburns 20s ease-in-out infinite alternate
}

.animate-slide-in-left {
    animation: slideInLeft .8s cubic-bezier(.16, 1, .3, 1) forwards
}

.animate-slide-out-left {
    animation: slideOutLeft .5s cubic-bezier(.4, 0, 1, 1) forwards !important
}

.animate-pulse-slow {
    animation: pulseSlow 3s ease-in-out infinite
}

.gradient-hero {
    background: var(--gradient-hero)
}

.gradient-primary {
    background: var(--gradient-primary)
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 20px 20px
}

.shadow-travel {
    box-shadow: var(--shadow-medium)
}

.shadow-travel-strong {
    box-shadow: var(--shadow-strong)
}

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

.hide-scrollbar, .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.95)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes hero-kenburns {
    0% {
        transform: scale(1.03) translate(0)
    }
    50% {
        transform: scale(1.1) translate(1.5%, -1.5%)
    }
    to {
        transform: scale(1.05) translate(-1%, 1%)
    }
}

@keyframes hero-pan-x {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0% 50%
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate(-100%) scale(.9)
    }
    60% {
        opacity: 1;
        transform: translate(5%) scale(1.02)
    }
    to {
        opacity: 1;
        transform: translate(0) scale(1)
    }
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translate(0) scale(1)
    }
    to {
        opacity: 0;
        transform: translate(-120%) scale(.85)
    }
}

@keyframes pulseSlow {
    0%, to {
        opacity: 1;
        transform: scale(1)
    }
    50% {
        opacity: .85;
        transform: scale(1.05)
    }
}

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / .2) transparent
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / .2);
    border-radius: 3px
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / .4)
}

@media (prefers-reduced-motion: reduce) {
    .animate-kenburns-pan {
        animation: none !important
    }
}

.hover\:shadow-travel-strong:hover, .group:hover .group-hover\:shadow-travel-strong {
    box-shadow: var(--shadow-strong)
}