/* Sand Beige Colors */
:root {
    --sand-beige: #F4A460;
    --dark-sand: #CD853F;
    --form-bg: linear-gradient(to right, #FFFBF5, #FFF8DC);
    --card-border: #D2B48C;
    --dark-text: #4B3621;
    --oasis-green: #3CB371; 
    --oasis-light: #90EE90; 
    --seeking-color: #17a2b8; /* Bootstrap Info Blue/Teal */
    --seeking-bg: #e3f7f9; 
}

/* ---------------- KEYFRAMES (DUPLICATED HERE FOR GOLD ADS) ---------------- */
@keyframes sand-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(244, 164, 96, 0.5), 0 0 10px rgba(205, 133, 63, 0.3);
    }
    50% {
        text-shadow: 0 0 10px rgba(244, 164, 96, 0.8), 0 0 20px rgba(205, 133, 63, 0.6);
    }
}
@keyframes gold-shine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes zoom-bg {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
@keyframes hand-click {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(0.95) translateY(2px); }
}
@keyframes phone-shake {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(5deg); }
    60% { transform: rotate(0deg); }
}
/* ---------------- END KEYFRAMES ---------------- */


/* ---------------- SLIDER & SEARCH BOX STYLES (Keep here for integrity) ---------------- */
/* Note: Only partial styles kept here for demo, assumes majority is in external file */
.sand-search-box { border: 2px solid var(--sand-beige); border-radius: 1rem; background: linear-gradient(135deg, #FFF8DC, #FFFBF5) !important; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); }
.sand-icon-glow { color: var(--sand-beige); animation: sand-glow 3s ease-in-out infinite alternate; }
/* ... other slider/search styles ... */

/* ---------------- GENERAL JOB CARDS ---------------- */
.hover-shadow { transition: transform .2s, box-shadow .2s; }
.hover-shadow:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.15)!important; }
.btn-call { background: linear-gradient(to bottom, #F4A460, #CD853F) !important; border: 1px solid #CD853F; color: #4B3621 !important; font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; padding: 4px 8px !important; font-size: 0.8rem !important; border-radius: 0.5rem !important; }
.btn-call .phone-icon { animation: phone-shake 1.5s infinite; }
.phone-copy-link { cursor: pointer; color: #6c757d !important; border-bottom: 1px dotted #ced4da; transition: color 0.2s ease; }
.btn-primary { background: linear-gradient(to bottom, #CD853F, #F4A460) !important; border-color: #CD853F !important; transition: all 0.3s; font-weight: bold; }
/* ... other general styles ... */


/* ---------------- FEATURED (GOLD) ADS STYLES (CRITICAL FIX) ---------------- */
/* 💡 FIX: تطبيق أنماط الـ Shine مباشرة هنا */
.section-title-glitch {
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    display: inline-block; 
    
    /* 1. إنشاء خلفية متدرجة للـ Shine Effect */
    background: linear-gradient(
        90deg, 
        #f0ad4e, /* ذهبي أغمق */
        #fceabb, /* ذهبي فاتح */
        #f8b500, /* ذهبي متوسط */
        #fceabb, /* ذهبي فاتح */
        #f0ad4e  /* ذهبي أغمق */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    background-size: 200% auto;
    animation: gold-shine 3s linear infinite; 
    text-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

.section-title-glitch .sparkle-icon {
    color: #f8b500; 
    animation: sparkle 1.5s infinite linear; 
}

.featured-ad-card-v3 {
    border-radius: 12px;
    padding: 20px 15px;
    min-height: 220px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid #f8b500;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* 🚨 FIX: إضافة قيمة افتراضية لمتغير الخلفية هنا */
    --bg-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)), url('assets/img/slider/default.jpg');
}
.featured-ad-card-v3::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* هذا يعتمد الآن على المتغير الذي يتم تعيينه بواسطة JavaScript (كود index.php) */
    background-image: var(--bg-image); 
    background-size: cover;
    background-position: center;
    animation: zoom-bg 10s infinite alternate ease-in-out; 
    z-index: -2; 
}

.ad-visit-btn .visit-icon {
    animation: hand-click 1.5s infinite ease-in-out;
}
.ad-call-btn .phone-icon {
    animation: phone-shake 1.5s infinite;
}

/* Seeking Title Animation (Applied to both latest services and seeking workers) */
.seeking-title-glitch {
    font-size: 2rem !important;
    font-weight: 700;
    position: relative;
    display: inline-block; 

    /* NEW: Solid Color for Sharpness (الحِدَّة) */
    color: var(--dark-sand); 
    
    /* REMOVED: -webkit-text-stroke / text-stroke for removing lines */
    -webkit-text-stroke: unset;
    text-stroke: unset; 
    
    /* REMOVED: Gradient background-clip/animation for removing blur/lines */
    background: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    animation: none;
    
    /* ADDED: Deep, strong shadow/glow for definition */
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8),  /* ظل أسود قوي جداً للحصول على عمق */
        0 0 4px var(--sand-beige); /* توهج رملي خفيف حول النص */
}

.seeking-title-glitch .seeking-icon {
    color: var(--dark-sand); /* Use dark sand color for icons */
    animation: sand-glow 3s ease-in-out infinite alternate; /* Keep the subtle icon glow */
}

/* Grid Spacing */
.seeking-worker-smaller {
    --bs-gutter-x: 1rem; 
    --bs-gutter-y: 1rem; 
}
.seeking-worker-card {
    border: 1px solid var(--card-border) !important; 
    background-color: white !important;
}

.seeking-notice {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(205, 133, 63, 0.9); 
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.seeking-more-btn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


/* ---------------- BROWN DESERT TITLES STYLES (MODIFIED) ---------------- */
/* Define color variables within the file scope if not already globally defined, 
   or assume they are defined elsewhere (like a main global CSS or :root). 
   We will re-define them here for clarity based on index.php's original style block. */
:root {
    --sand-beige: #F4A460; /* Sandy Brown */
    --dark-sand: #CD853F;  /* Peruvian Brown */
    --deep-brown: #4B3621; /* Very dark brown, chosen to be distinctly darker */
}

/* New Animation */
@keyframes subtle-shift {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-1px) scaleX(1.02); }
}

.brown-desert-title {
    font-size: 2rem;
    font-weight: 900;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    
    /* Color: Darker Brown */
    color: var(--deep-brown);
    
    /* Remove Border/Underline */
    border-bottom: none !important;
    
    /* Apply new animation for animation effect */
    animation: subtle-shift 3s infinite ease-in-out alternate;
    
    /* Subtle Text Shadow for depth (using original sand color for contrast) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 0 8px rgba(75, 54, 33, 0.4); 
}

.brown-desert-title .desert-icon {
    /* Keep icon color as the original sand for contrast */
    color: var(--sand-beige);
    animation: icon-pulse 2s infinite ease-in-out alternate;
}

/* Animation for desert icons */
@keyframes icon-pulse {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.05) translateY(-1px); }
}