@font-face {
    font-family: 'Sahel';
    src: url("Sahel.eot");
    src: url("/assets/PublicAssets/fonts/SahelFont/Sahel.eot") format("embedded-opentype"), url("/assets/PublicAssets/fonts/SahelFont/Sahel.woff") format("woff"), url("/assets/PublicAssets/fonts/SahelFont/Sahel.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'vazir';
    src: url("/assets/PublicAssets/fonts/VazirFont/vazir.eot");
    src: url("/assets/PublicAssets/fonts/VazirFont/vazir.eot") format("embedded-opentype"), url("/assets/PublicAssets/fonts/VazirFont/vazir.woff") format("woff"), url("/assets/PublicAssets/fonts/VazirFont/vazir.ttf") format("truetype");
    font-weight: normal;
    font-display: swap;
}

* {
    font-family: "Sahel", "vazir";
}

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    font-size: clamp(10px, 13px, 18px);
}

::-webkit-progress-value {
    background-color: #0080ff;
}

::-moz-progress-bar {
    background-color: #0080ff;
}

progress[value]::-webkit-progress-value {
    transition: width 0.8s ease;
}

progress[value]::-moz-progress-bar {
    transition: width 0.8s ease;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    letter-spacing: 5px;
}

.active {
    background-color: #155e75;
    color: #fff;
}
/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #efefef;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #858585;
    border-radius: 30px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #858585;
    }

abbr {
    font-style: italic;
    position: relative;
}

    abbr:hover::after {
        background: #add8e6;
        border-radius: 4px;
        bottom: 100%;
        content: attr(title);
        display: block;
        left: 100%;
        padding: 1em;
        position: absolute;
        width: 280px;
        z-index: 1;
    }

#map {
    height: 300px;
z-index: 0;
}

.leaflet-control-container {
    display: none;
}

.leaflet-attribution-flag {
    display: none !important;
}

.leaflet-touch .leaflet-bar {
    display: none;
}

.navbar-hidden {
    transform: translateY(100%);
}

.navbar-visible {
    transform: translateY(0);
}

.transition-transform {
    transition: transform 0.4s ease-in-out;
}

@media print {
    .no-print {
        display: none;
    }
}

.loader {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    margin-bottom: -3px;
    margin-left: 3px;
    opacity: .3;
}

    .loader::after,
    .loader::before {
        content: '';
        width: 15px;
        height: 15px;
        border: 2px solid #0d2cd8;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        animation: rotation 2s ease-in-out infinite;
    }

    .loader::after {
        border-color: #FF3D00;
        animation-delay: 1s;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeOpacity {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes moveLines {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(2px, 2px);
    }
}

.animate-grid-animation {
    animation: fadeOpacity 8s infinite alternate ease-in-out;
}

.animate-grid-lines {
    animation: moveLines 6s infinite alternate ease-in-out;
}

.animate-grid-opacity {
    animation: fadeOpacity 10s infinite alternate ease-in-out;
}

.leaflet-popup-content {
    width: 200px !important;
}

.leaflet-marker-icon.circle-icon {
    border-radius: 50%;
    border: 2px solid white;
}



.form-input, .form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem; /* py-2.5 px-4 */
    border-radius: 0.5rem; /* rounded-md */
    border: 1px solid #D1D5DB; /* border-gray-300 */
    background-color: #F9FAFB; /* bg-gray-50 */
    color: #111827; /* text-gray-900 */
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem; /* text-sm */
}

    .form-input::placeholder {
        color: #6B7280; /* placeholder-gray-600 */
    }

    .form-input:focus, .form-select:focus {
        outline: none;
        border-color: #3B82F6; /* focus:border-blue-500 */
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); /* focus:ring-blue-500 */
        background-color: #FFFFFF; /* bg-white on focus */
    }

    .form-input:disabled, .form-select:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #E5E7EB; /* bg-gray-200 */
    }

/* Floating Label Specific Styles */
.floating-label-group {
    position: relative;
}

    .floating-label-group input:not(:placeholder-shown) ~ label,
    .floating-label-group input:focus ~ label {
        top: -0.75rem; /* -top-3 */
        font-size: 0.75rem; /* text-xs */
        color: #4B5563; /* text-gray-600 */
        background-color: #fff; /* bg-white */
        padding: 0 0.25rem; /* px-1 */
    }

    .floating-label-group label {
        position: absolute;
        top: 0.625rem; /* py-2.5 or top of input */
        right: 1rem; /* px-4 */
        font-size: 0.875rem; /* text-sm */
        color: #6B7280; /* text-gray-500 */
        transition: all 0.2s ease-in-out;
        pointer-events: none;
        transform-origin: right top;
    }

.alert-green {
    background-color: #D1FAE5; /* bg-green-100 */
    border: 1px solid #34D399; /* border-green-300 */
    color: #065F46; /* text-green-800 */
    padding: 1rem 1.5rem; /* px-6 py-4 */
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 1.5rem; /* mb-6 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-red {
    background-color: #FEE2E2; /* bg-red-100 */
    border: 1px solid #F87171; /* border-red-300 */
    color: #991B1B; /* text-red-800 */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-blue {
    background-color: #DBEAFE; /* bg-blue-100 */
    border: 1px solid #60A5FA; /* border-blue-300 */
    color: #1E40AF; /* text-blue-800 */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners{
    display: none !important;
}