body {
    font-family: 'Baloo Bhaijaan 2', sans-serif !important;
    scroll-behavior: smooth;
}
.category-scroller::-webkit-scrollbar {
    display: none;
}
.category-scroller {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease;
}
/* Unified styles for job and freelancer descriptions */
.job-card-description,
.freelancer-description {
    min-height: 3rem; /* Ensures uniform height even with short descriptions - approx 2 lines */
    line-height: 1.5rem; /* Assuming default line height, adjust if needed */
    max-height: 3rem; /* Corresponds to leading-6 * 2 lines */
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    position: relative; /* For potential gradient overlay if text is cut off */
    white-space: pre-wrap; /* يحافظ على المسافات البيضاء وفواصل الأسطر، مع السماح بالالتفاف */
}

.job-card-description.needs-read-more,
.freelancer-description.needs-read-more {
    /* Styles for when the description is truncated and needs a 'Read More' button */
    /* You might add a subtle gradient at the bottom to indicate cut-off text */
}

/* Expanded state with scrollbar */
.job-card-description.expanded,
.freelancer-description.expanded {
    max-height: 20rem; /* Increased max-height for expanded view */
    overflow-y: auto; /* Enable vertical scrollbar if content exceeds max-height */
    padding-right: 0.5rem; /* Add some padding for the scrollbar to prevent text touching it */
}
/* Custom scrollbar for webkit browsers */
.job-card-description.expanded::-webkit-scrollbar,
.freelancer-description.expanded::-webkit-scrollbar {
    width: 8px;
}

.job-card-description.expanded::-webkit-scrollbar-track,
.freelancer-description.expanded::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.job-card-description.expanded::-webkit-scrollbar-thumb,
.freelancer-description.expanded::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.job-card-description.expanded::-webkit-scrollbar-thumb:hover,
.freelancer-description.expanded::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Original Category Section Styles (reverted to simpler forms) */
/* No specific container-wrapper or section-header styles here, using Tailwind classes directly in HTML */

/* Slider container has base styles, but most positioning/flex is in HTML */
.slider-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 12px; /* Adjusted gap to match original appearance more closely */
    padding: 0; /* No padding from CSS, handled by button padding in HTML */
    direction: rtl;
    flex-grow: 1;
}

.slider-container::-webkit-scrollbar {
    display: none;
}

/* Arrow Buttons (reverted to original structure and styles) */
.arrow-btn {
    display: flex; /* Always flex for centering icon */
    position: absolute; /* Absolute positioning relative to parent section */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.arrow-btn:hover {
    background-color: white;
}

.arrow-right {
    right: -10px; /* Adjusted to be closer to content */
}

.arrow-left {
    left: -10px; /* Adjusted to be closer to content */
}

@media (min-width: 768px) {
    .arrow-btn {
        display: flex; /* Show on medium and larger screens */
    }
}
 
/* Category Box Style (reverted to original simpler button styles) */
.category-chip { /* Reverted to using category-chip class for simplicity */
    flex-shrink: 0; /* Prevent shrinking */
}

/* New: Freelancer Card Styles */
.freelancer-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes footer to bottom */
}

/* Premium Job Card Styling (Frontend) */
.premium-job-card {
    border: 2px solid #fcd34d !important; /* Yellow border to make it stand out */
    box-shadow: 0 4px 10px rgba(252, 211, 77, 0.4); /* Enhanced yellow shadow */
    position: relative; /* For the premium badge positioning */
    background-color: #fffef2 !important; /* Light yellow background */
}

.premium-job-card .premium-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background-color: #fcd34d; /* Yellow background */
    color: #78350f; /* Dark brown text for contrast */
    padding: 12px 15px 1px 20px;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: bold;
    z-index: 10; /* Ensure it's above other content */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Small shadow for depth */
    margin-bottom: 10px !important;
}

.premium-job-card .premium-badge svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* NEW: Premium Freelancer Card Styling (Frontend) */
.premium-freelancer-card {
    border: 2px solid #2196f3 !important; /* إطار أزرق مميز */
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4); /* ظل أزرق */
    position: relative; /* For the premium badge positioning */
    background-color: #f2fafc !important; /* لون أزرق فاتح جداً */
}

.premium-freelancer-card .premium-badge {
    position: absolute;
    top: -3px; /* 10px from top */
    right: -7px; /* 10px from left */
   /* right: auto;  Ensure it doesn't try to position from right */
    background-color: #2196f3; /* لون أزرق للشارة */
    color: white; /* White text */
    padding: 5px 20px 1px 20px;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: bold;
    z-index: 10; /* Ensure it's above other content */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Small shadow for depth */
    margin-bottom: 10px; /* 10px spacing below the badge */
}

.premium-freelancer-card .premium-badge svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* NEW: Verified Freelancer Badge Styling (Frontend) */
.verified-badge {
    display: inline-flex; /* Use inline-flex for proper alignment with text/icon */
    align-items: center; /* Vertically align items */
    background-color: #d1fae5; /* Light green background */
    color: #065f46; /* Dark green text */
    padding: 0.1em 0.9em; /* Smaller padding */
    border-radius: 9999px; /* Rounded full */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* semi-bold */
    margin-right: 0.5rem; /* Margin to separate from name */
    vertical-align: middle; /* Align with middle of the text */
}

.verified-badge .fa-check-circle {
    margin-left: 0.25rem; /* Space between icon and text */
    font-size: 0.8em; /* Adjust icon size relative to text */
}
/* في admin.css أو ملفات CSS الأخرى لديك */
.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* Tailwind's rounded-md */
    margin-right: 0.25rem; /* ml-1 in RTL context */
}

.badge.bg-yellow-500 {
    background-color: #f59e0b; /* Tailwind yellow-500 */
    color: #fff;
}

.badge.bg-green-500 {
    background-color: #22c55e; /* Tailwind green-500 */
    color: #fff;
}

.badge.bg-red-500 {
    background-color: #ef4444; /* Tailwind red-500 */
    color: #fff;
}

/* لتنسيق زر السحب */
#premiumToggleContainer .peer:checked + div {
    background-color: #2563eb; /* bg-blue-600 */
}
/* لمؤشر عدم السماح */
.cursor-not-allowed {
    cursor: not-allowed;
}

/* تنسيق شارة العاجل الجديدة */
.urgent-badge-inline {
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.urgent-badge-inline lord-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* تنسيق ثابت للشارة العاجلة بدون تأثيرات حركية */