/* ============================================ */
/* Custom Tabs Styling - Shared Across All Pages */
/* Created: 2025-11-04 */
/* ============================================ */

/* Custom Tabs Styling for White Text */
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    color: white !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient for inactive */
    border: 1px solid #764ba2;
    border-radius: 0.375rem 0.375rem 0 0;
    margin-left: 2px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); /* Reverse gradient on hover */
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; /* Pink-Red gradient for active */
    color: white !important;
    border-color: #f5576c #f5576c #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}

.custom-search-tabs .nav-link i,
.custom-tabs .nav-link i {
    margin-left: 5px;
}

/* ============================================ */
/* Alternative Color Schemes */
/* Uncomment any section to use */
/* ============================================ */

/* Option 1: Blue Ocean (أزرق محيطي) */
/* 
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: 1px solid #00f2fe;
}
.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
}
.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #0575e6 0%, #021b79 100%) !important;
    border-color: #021b79 #021b79 #fff;
    box-shadow: 0 4px 12px rgba(5, 117, 230, 0.4);
}
*/

/* Option 2: Orange Sunset (برتقالي غروب) */
/* 
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    border: 1px solid #fee140;
}
.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
}
.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%) !important;
    border-color: #ee0979 #ee0979 #fff;
    box-shadow: 0 4px 12px rgba(238, 9, 121, 0.4);
}
*/

/* Option 3: Green Nature (أخضر طبيعي) */
/* 
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    border: 1px solid #8fd3f4;
}
.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
}
.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%) !important;
    border-color: #56ab2f #56ab2f #fff;
    box-shadow: 0 4px 12px rgba(86, 171, 47, 0.4);
}
*/

/* Option 4: Red Fire (أحمر ناري) */
/* 
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    border: 1px solid #fecfef;
}
.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #fecfef 0%, #ff9a9e 100%);
}
.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
    border-color: #eb3349 #eb3349 #fff;
    box-shadow: 0 4px 12px rgba(235, 51, 73, 0.4);
}
*/

/* Option 5: Teal Professional (تركواز احترافي) */
/* 
.custom-search-tabs .nav-link,
.custom-tabs .nav-link {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    border: 1px solid #38f9d7;
}
.custom-search-tabs .nav-link:hover,
.custom-tabs .nav-link:hover {
    background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);
}
.custom-search-tabs .nav-link.active,
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    border-color: #11998e #11998e #fff;
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}
*/