/* =================================
Mawread Jobs Intelligence
Main Styles v1.0
================================= */


/* Variables */

:root {

--primary:#0f766e;
--secondary:#2563eb;
--background:#f8fafc;
--card:#ffffff;
--text:#1f2937;
--muted:#64748b;
--border:#e5e7eb;

}


/* Reset */

* {
box-sizing:border-box;
margin:0;
padding:0;
}


body {

font-family:
system-ui,
-apple-system,
"Segoe UI",
Arial,
sans-serif;

background:
var(--background);

color:
var(--text);

line-height:
1.7;

}


/* Layout */

header,
main,
footer {

max-width:
1200px;

margin:
auto;

padding:
1rem;

}

/* ===============================
Header
=============================== */

header {

display:flex;
justify-content:space-between;
align-items:center;

gap:1rem;

background:
var(--card);

border-bottom:
1px solid var(--border);

}


.logo a {

text-decoration:none;

font-size:1.25rem;

font-weight:800;

color:
var(--primary);

}


nav {

display:flex;

gap:1rem;

}


nav a {

text-decoration:none;

color:
var(--text);

font-size:.95rem;

}



/* ===============================
Hero
=============================== */


.hero {

text-align:center;

padding:
2rem 1rem;

}


.hero h1 {

font-size:
clamp(1.8rem,5vw,2.8rem);

margin-bottom:
1rem;

font-weight:
800;

}


.hero p {

color:
var(--muted);

max-width:
650px;

margin:
auto;

}



/* ===============================
Search Box
=============================== */


.search-box {

background:
var(--card);

margin-top:
2rem;

padding:
1.5rem;

border-radius:
1rem;

border:
1px solid var(--border);

box-shadow:
0 5px 20px rgba(0,0,0,.05);

}



.search-box label {

display:block;

text-align:right;

font-weight:
600;

margin-bottom:
.5rem;

}



.search-box input,
.search-box select {


width:100%;

padding:
.9rem;

margin-bottom:
1rem;

border:
1px solid var(--border);

border-radius:
.6rem;

font-size:
1rem;

background:
white;

}



.filters {

display:grid;

grid-template-columns:
1fr;

gap:
1rem;

}



/* Search Button */


#searchButton {


width:100%;

padding:
1rem;

border:
none;

border-radius:
.6rem;

background:
var(--primary);

color:white;

font-size:
1.1rem;

font-weight:
700;

cursor:pointer;

transition:
.2s;

}



#searchButton:hover {

opacity:.9;

}

/* ===============================
Quick Search
=============================== */


.quick-search,
.trending,
.tips {

background:
var(--card);

padding:
1.5rem;

margin-top:
1.5rem;

border-radius:
1rem;

border:
1px solid var(--border);

}



.quick-search h2,
.trending h2,
.tips h2,
#results h2 {

font-size:
1.3rem;

margin-bottom:
1rem;

}



.quick-search button {


background:
#f1f5f9;

border:
1px solid var(--border);

padding:
.7rem 1rem;

border-radius:
2rem;

cursor:pointer;

margin:
.25rem;

font-size:
.9rem;

}



.quick-search button:hover {

background:
#e2e8f0;

}



/* ===============================
Trending
=============================== */


.trending ul {

list-style:none;

display:grid;

gap:
.7rem;

}



.trending li {

padding:
.8rem;

background:
#f8fafc;

border-radius:
.5rem;

}



/* ===============================
Ads
=============================== */


.ad-box {


min-height:
120px;

display:flex;

align-items:center;

justify-content:center;

margin:
1.5rem 0;

background:
#f1f5f9;

border:
1px dashed var(--border);

color:
var(--muted);

font-size:
.9rem;

}



/* ===============================
Results
=============================== */


#results {

margin-top:
2rem;

}



#resultsContainer {


display:grid;

gap:
1rem;

}



/* Result Card */


.result-card {


background:
var(--card);

padding:
1.5rem;

border-radius:
1rem;

border:
1px solid var(--border);

}



.result-card h3 {


margin-bottom:
.5rem;

}



.result-card .badge {


display:inline-block;

background:
#ecfdf5;

color:
var(--primary);

padding:
.3rem .7rem;

border-radius:
2rem;

font-size:
.8rem;

margin-bottom:
1rem;

}



.result-card p {

color:
var(--muted);

}



.result-card .cta {


display:block;

margin-top:
1rem;

padding:
.8rem;

text-align:center;

background:
var(--secondary);

color:white;

text-decoration:none;

border-radius:
.5rem;

font-weight:
700;

}

/* ===============================
Footer
=============================== */


footer {

text-align:center;

padding:
2rem 1rem;

color:
var(--muted);

font-size:.9rem;

}



/* ===============================
Responsive
=============================== */


@media (min-width:768px){


.filters {

grid-template-columns:
repeat(3,1fr);

}


#resultsContainer {

grid-template-columns:
repeat(2,1fr);

}


.quick-search button {

margin:.4rem;

}


}



@media (min-width:1024px){


header {

padding:
1.5rem 2rem;

}


main {

padding:
2rem;

}



#resultsContainer {

grid-template-columns:
repeat(3,1fr);

}



.search-box {

padding:
2rem;

}


}



/* ===============================
Accessibility
=============================== */


button,
input,
select {

font-family:
inherit;

}



button:focus,
input:focus,
select:focus {


outline:
3px solid rgba(37,99,235,.25);

}



/* ===============================
Utility
=============================== */


.hidden {

display:none;

}

/* تنسيقات فلاتر الإصدار v0.2 */
.search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
    justify-content: center;
}

.search-box input, 
.search-box select {
    padding: 12px;
    font-size: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #fff;
    /* لجعل العناصر تتمدد بشكل متناسق وتنزل لسطر جديد في الشاشات الصغيرة */
    flex: 1 1 160px; 
    max-width: 100%;
}

.search-box input:focus, 
.search-box select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* تنسيق كروت المنصات بشكل عصري وأنيق */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.provider-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.provider-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.provider-card h3 {
    margin-top: 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 700;
}

.provider-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* تنسيق زر "ابحث الآن" التفاعلي */
.search-btn {
    width: 100%;
    padding: 10px 20px;
    background-color: #3b82f6; /* لون أزرق جذاب */
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.search-btn:hover {
    background-color: #2563eb;
}

.search-btn:active {
    transform: scale(0.98);
}

/* حالة الكارت المعطل قبل كتابة كلمة البحث */
.provider-card.disabled {
    opacity: 0.65;
}

.provider-card.disabled .search-btn {
    background-color: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
}
/* تحسينات v1.0.0 Beta */
[hidden] { display: none !important; }

.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.provider-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.search-btn {
    display: block;
    background: #0f766e;
    color: white !important;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
}