@import "global_fonts.css";

* {
    font-family: "Shabnam", "Vazirmatn", "Tahoma", sans-serif;
}

/* Hide elements with x-cloak until Alpine.js is ready */
[x-cloak] {
    display: none !important;
}


/* Custom scrollbar for all scrollable areas - USER VERSION (Red/Orange/Pink) */
/* Hidden by default, appears on scroll/hover */

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.3s ease;
}

/* Show scrollbar when scrolling or hovering */
*:hover::-webkit-scrollbar-thumb,
*:active::-webkit-scrollbar-thumb,
*:focus::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #ec4899 100%);
}

*:hover::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #db2777 100%);
}

*:hover::-webkit-scrollbar-track,
*:active::-webkit-scrollbar-track {
    background: #fef2f2;
}

/* For Firefox - hidden by default */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

/* Show scrollbar on hover for Firefox */
*:hover {
    scrollbar-color: #f97316 #fef2f2;
}

/* Selection color - matching theme */
::selection {
    background: linear-gradient(135deg, #ef4444, #ec4899);
    color: white;
}

::-moz-selection {
    background: linear-gradient(135deg, #ef4444, #ec4899);
    color: white;
}

/* Focus outline for accessibility */
:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Disable smooth scrolling for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}



/* Custom radio and checkbox accent color */
input[type="radio"],
input[type="checkbox"] {
    accent-color: #ef4444;
}

/* Button hover effects */
.btn-primary {
    background: linear-gradient(135deg, #ef4444, #ec4899);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #dc2626, #db2777);
}


:root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

[dir="ltr"] {
    --margin-left-auto: auto;
    --margin-right-auto: 0;
    --padding-left: var(--space-md);
    --padding-right: 0;
}

[dir="rtl"] {
    --margin-left-auto: 0;
    --margin-right-auto: auto;
    --padding-left: 0;
    --padding-right: var(--space-md);
}

/* Auto spacing classes */
.auto-mx {
    margin-left: var(--margin-left-auto, auto);
    margin-right: var(--margin-right-auto, auto);
}

.auto-px {
    padding-left: var(--padding-left, var(--space-md));
    padding-right: var(--padding-right, var(--space-md));
}