/* Fonts loaded via in HTML head — @import removed for performance */
:root {
--font-heading: 'Poppins', 'Cairo', sans-serif;
--font-body: 'Roboto', 'Cairo', sans-serif;
--primary: #0D1117;
--accent: #2563EB;
--accent-dark: #1849c6;
--accent-light: #EFF6FF;
--accent-mid: #DBEAFE;
--teal: #059669;
--teal-light: #D1FAE5;
--gold: #F59E0B;
--gold-light: #FEF3C7;
--light: #F8FAFF;
--white: #FFFFFF;
--gray: #64748B;
--gray-light: #94A3B8;
--border: #E2E8F0;
--border-light: #F1F5F9;
--navy: #0F172A;
--navy-mid: #1E293B;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(37,99,235,0.10);
--shadow-lg: 0 12px 40px rgba(37,99,235,0.15);
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 20px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', 'Cairo', sans-serif; background: var(--light); color: var(--primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; }
/* LANG BAR */
.lang-bar { background: linear-gradient(90deg, var(--navy) 0%, var(--navy-mid) 100%); padding: 7px 5%; display: flex; justify-content: flex-end; align-items:center; gap: 6px; width: 100%; flex-wrap: wrap; }
.lang-btn { padding: 3px 14px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.lang-btn.active, .lang-btn:hover { background: #fff; color: var(--accent); border-color: #fff; }
.currency-divider { width:1px; height:18px; background:rgba(255,255,255,0.3); margin:0 4px; }
.curr-btn { padding: 3px 12px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-family: 'Poppins', 'Cairo', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.curr-btn.active, .curr-btn:hover { background: rgba(255,255,255,0.2); border-color: #fff; }
/* ===== NAVBAR — Unified Professional ===== */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 0 5%;
display: flex; align-items: center;
justify-content: space-between;
height: 68px;
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
gap: 20px;
}
/* Logo */
.logo {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0; cursor: pointer; text-decoration: none;
}
.logo-text {
font-family: 'Poppins', 'Cairo', sans-serif;
font-size: 1.5rem; font-weight: 900;
color: var(--primary); letter-spacing: -0.02em;
}
.logo-text span { color: var(--accent); }
/* Nav links */
.nav-links { display: flex; gap: 4px; list-style: none; flex: 1; justify-content: center; }
.nav-links a {
color: var(--gray); text-decoration: none;
font-size: 0.88rem; font-weight: 600;
padding: 6px 14px; border-radius: 8px;
transition: all 0.18s;
}
.nav-links a:hover { color: var(--primary); background: var(--border-light); }
/* Right section */
.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
/* Selectors (lang & currency) */
.nav-selector { position: relative; }
.nav-selector-btn {
display: flex; align-items: center; gap: 5px;
padding: 6px 11px; border-radius: 8px;
border: 1px solid var(--border);
background: #fff; color: var(--primary);
font-family: 'Roboto', 'Cairo', sans-serif;
font-size: 0.82rem; font-weight: 700;
cursor: pointer; transition: all 0.18s;
white-space: nowrap;
}
.nav-selector-btn:hover { background: var(--border-light); border-color: #cbd5e1; }
/* Dropdown */
.nav-dropdown {
display: none; position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 150px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
overflow: hidden;
z-index: 999;
animation: dropFade 0.15s ease;
}
[dir="rtl"] .nav-dropdown { left: auto; right: 0; }
.nav-dropdown.open { display: block; }
@keyframes dropFade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.nav-drop-item {
display: block; width: 100%;
padding: 10px 16px; text-align: right;
background: none; border: none;
font-family: 'Roboto', 'Cairo', sans-serif;
font-size: 0.85rem; font-weight: 600;
color: var(--primary); cursor: pointer;
transition: background 0.15s;
}
[dir="ltr"] .nav-drop-item { text-align: left; }
.nav-drop-item:hover { background: var(--accent-light); color: var(--accent); }
.nav-drop-item.active { color: var(--accent); background: var(--accent-light); }
/* Auth buttons */
.nav-actions { display: flex; gap: 8px; align-items: center; }
.btn-outline {
padding: 7px 18px;
border: 1.5px solid var(--border);
border-radius: 8px; color: var(--primary);
background: transparent;
font-family: 'Roboto', 'Cairo', sans-serif;
font-size: 0.88rem; font-weight: 700;
cursor: pointer; transition: all 0.18s;
}
.btn-outline:hover { border-color: var(--primary); background: var(--border-light); }
.btn-primary {
padding: 7px 20px;
background: var(--accent);
border: none; border-radius: 8px;
color: #fff; font-family: 'Roboto', 'Cairo', sans-serif;
font-size: 0.88rem; font-weight: 700;
cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,0.35); }
/* DB status badge — smaller in nav */
.db-status { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:50px; }
.db-status.connected { background:rgba(34,197,94,0.1); color:#16a34a; border:1px solid rgba(34,197,94,0.2); }
.db-status.demo { background:rgba(245,158,11,0.1); color:#d97706; border:1px solid rgba(245,158,11,0.2); }
.db-status-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.db-status.connected .db-status-dot { background:#22c55e; animation:pulse 2s infinite; }
.db-status.demo .db-status-dot { background:#d97706; }
/* HERO */
.hero { min-height: 88vh; background: linear-gradient(135deg, #0F172A 0%, #0F172A 60%, #0F172A 100%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 80px 7% 60px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(37,99,235,0.2) 0%, transparent 65%), radial-gradient(ellipse at 20% 80%, rgba(37,99,235,0.08) 0%, transparent 50%); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(37,99,235,0.15); border: 1px solid rgba(37,99,235,0.4); border-radius: 50px; padding: 6px 18px; color: #93c5fd; font-size: 0.85rem; font-weight: 600; margin-bottom: 28px; animation: fadeDown 0.6s ease both; position: relative; z-index: 1; }
.hero-left { position: relative; z-index: 1; }
.hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.hero-right-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(37,99,235,0.25); border-radius: 16px; padding: 20px 22px; display: flex; align-items: center; gap: 14px; transition: all 0.25s; }
.hero-right-card:hover { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.5); transform: translateX(-4px); }
.hero-right-card-icon { font-size: 2rem; width: 52px; height: 52px; background: rgba(37,99,235,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-right-card-title { color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
.hero-right-card-desc { color: rgba(255,255,255,0.45); font-size: 0.8rem; line-height: 1.5; }
.hero h1 { font-family: 'Poppins', 'Cairo', sans-serif; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 20px; animation: fadeDown 0.7s ease 0.1s both; position: relative; z-index: 1; }
.hero h1 .highlight { color: var(--accent); }
.hero p { font-size: 1.05rem; color: rgba(255,255,255,0.6); max-width: 580px; line-height: 1.9; margin-bottom: 38px; animation: fadeDown 0.7s ease 0.2s both; position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; animation: fadeDown 0.7s ease 0.3s both; margin-bottom: 40px; position: relative; z-index: 1; }
.btn-hero { padding: 14px 32px; border-radius: 10px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.25s; }
.btn-hero-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border: none; box-shadow: 0 4px 20px rgba(37,99,235,0.4); }
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,99,235,0.45); }
.btn-hero-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.btn-hero-secondary:hover { border-color: var(--accent); color: var(--accent); }
.search-bar { background: rgba(255,255,255,0.07); border: 1px solid rgba(37,99,235,0.3); border-radius: 14px; padding: 6px 6px 6px 16px; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; margin: 0 0 40px; animation: fadeDown 0.7s ease 0.35s both; position: relative; z-index: 1; }
.search-bar input { flex: 1; background: none; border: none; outline: none; color: #fff; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; padding: 10px 0; }
.search-bar input::placeholder { color: rgba(255,255,255,0.35); }
.search-bar button { background: var(--accent); border: none; border-radius: 10px; color: #fff; padding: 11px 26px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hero-stats { display: flex; gap: 40px; justify-content: flex-start; flex-wrap: wrap; animation: fadeDown 0.7s ease 0.4s both; position: relative; z-index: 1; }
.stat { text-align: center; }
.stat-num { font-size: 2rem; font-weight: 800; color: #fff; font-family: 'Poppins', 'Cairo', sans-serif; }
.stat-num span { color: var(--accent); }
.stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
/* SECTIONS */
.section { padding: 80px 7%; }
.section-title { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.section-sub { color: var(--gray); font-size: 1rem; margin-bottom: 40px; }
/* CATEGORIES */
.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.cat-card { background: #fff; border-radius: 16px; padding: 24px 14px; text-align: center; border: 1px solid var(--border); cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); text-decoration: none; color: var(--primary); box-shadow: var(--shadow-sm); }
.cat-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-lg); background: var(--accent-light); }
.cat-icon { font-size: 2rem; margin-bottom: 10px; }
.cat-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; }
.cat-count { font-size: 0.78rem; color: var(--gray); }
/* SERVICES */
.services-section { background: #fff; padding: 80px 7%; }
.services-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { padding: 7px 18px; border-radius: 50px; border: 1.5px solid var(--border); background: #fff; color: var(--gray); font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.87rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tab.active, .tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.service-card { background: #fff; border-radius: 18px; border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: var(--shadow-sm); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,0.3); }
.service-img { height: 175px; display: flex; align-items: center; justify-content: center; font-size: 3.8rem; position: relative; }
.service-img-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.service-img-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.service-img-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.service-img-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.service-img-5 { background: linear-gradient(135deg, #fa709a, #fee140); }
.service-img-6 { background: linear-gradient(135deg, #2563EB, #60a5fa); }
.service-badge { position: absolute; top: 12px; right: 12px; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 50px; font-size: 0.73rem; font-weight: 700; }
.service-body { padding: 16px; }
.seller-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.seller-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; }
.av-1 { background: var(--accent); } .av-2 { background: #10B981; } .av-3 { background: #f5a623; } .av-4 { background: #764ba2; } .av-5 { background: #4facfe; } .av-6 { background: #43e97b; }
.seller-name { font-size: 0.84rem; font-weight: 700; }
.seller-level { font-size: 0.73rem; color: var(--accent); margin-right: auto; font-weight: 700; background: var(--accent-light); padding: 2px 8px; border-radius: 50px; }
.service-title { font-size: 0.93rem; font-weight: 700; margin-bottom: 12px; line-height: 1.5; }
.service-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); }
.service-rating { font-size: 0.83rem; color: #f5a623; font-weight: 700; }
.service-price { font-size: 1rem; font-weight: 800; color: var(--accent); }
.service-price small { font-size: 0.73rem; font-weight: 400; color: var(--gray); }
/* HOW IT WORKS - NEW SECTION */
.how-it-works-section { padding: 90px 7%; background: #fff; }
.hiw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; margin-top: 56px; position: relative; }
.hiw-steps::before { content: ''; position: absolute; top: 36px; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(37,99,235,0.15)); z-index: 0; }
.hiw-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.hiw-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; font-size: 2rem; transition: all 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.06); position: relative; }
.hiw-step:hover .hiw-icon-wrap { border-color: var(--accent); background: var(--accent-light); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(37,99,235,0.18); }
.hiw-step-num { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: var(--accent); border-radius: 50%; font-size: 0.72rem; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', 'Cairo', sans-serif; }
.hiw-step h3 { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.08rem; font-weight: 800; margin-bottom: 10px; color: var(--primary); }
.hiw-step p { font-size: 0.87rem; color: var(--gray); line-height: 1.85; }
.hiw-cta { text-align: center; margin-top: 50px; }
/* FAQ SECTION */
.faq-section { padding: 90px 7%; background: var(--accent-light); }
.faq-section .section-title { text-align: center; }
.faq-section .section-sub { text-align: center; margin-bottom: 50px; }
.faq-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border-radius: 14px; border: 1.5px solid var(--border); overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; }
.faq-item.open { border-color: var(--accent); box-shadow: 0 6px 24px rgba(37,99,235,0.1); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; gap: 16px; }
.faq-question-text { font-weight: 700; font-size: 0.97rem; color: var(--primary); line-height: 1.5; }
.faq-item.open .faq-question-text { color: var(--accent); }
.faq-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent); cursor: pointer; transition: all 0.3s; flex-shrink: 0; font-weight: 800; }
.faq-item.open .faq-toggle { background: var(--accent); color: #fff; transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; }
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer-inner { padding: 0 24px 22px; font-size: 0.9rem; color: var(--gray); line-height: 1.9; border-top: 1px solid var(--border); padding-top: 16px; }
.faq-cats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.faq-cat-btn { padding: 7px 20px; border-radius: 50px; border: 1.5px solid var(--border); background: #fff; color: var(--gray); font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.faq-cat-btn.active, .faq-cat-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.faq-still { text-align: center; margin-top: 44px; background: #fff; border-radius: 16px; padding: 36px; border: 1.5px dashed rgba(37,99,235,0.3); }
.faq-still h3 { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.faq-still p { color: var(--gray); font-size: 0.9rem; margin-bottom: 20px; }
/* PAYMENT */
.payment-section { padding: 80px 7%; background: var(--accent-light); }
.payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.payment-card { background: #fff; border-radius: 16px; padding: 28px 22px; border: 2px solid transparent; text-align: center; transition: all 0.25s; cursor: pointer; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.payment-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(37,99,235,0.15); }
.payment-icon { font-size: 2.8rem; margin-bottom: 14px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
.payment-name { font-family: 'Poppins', 'Cairo', sans-serif; font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }
.payment-desc { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }
.payment-badge { display: inline-block; margin-top: 12px; padding: 3px 12px; background: var(--accent-light); color: var(--accent); border-radius: 50px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(37,99,235,0.2); }
/* HOW */
.how-section { padding: 80px 7%; background: var(--navy); position: relative; overflow: hidden; }
.how-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.1) 0%, transparent 60%); }
.how-section .section-title { color: #fff; }
.how-section .section-sub { color: rgba(255,255,255,0.45); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 50px; }
.how-card { text-align: center; }
.how-num { width: 60px; height: 60px; border-radius: 50%; background: rgba(37,99,235,0.15); border: 2px solid rgba(37,99,235,0.4); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--accent); margin: 0 auto 20px; font-family: 'Poppins', 'Cairo', sans-serif; }
.how-card h3 { color: var(--primary); font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.how-card p { color: var(--gray); font-size: 0.88rem; line-height: 1.8; }
/* FREELANCERS */
.freelancers-section { padding: 80px 7%; }
.freelancers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.freelancer-card { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 24px 18px 18px; text-align: center; cursor: pointer; transition: all 0.28s; position: relative; overflow: hidden; }
.freelancer-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(37,99,235,0.03), transparent); opacity: 0; transition: opacity 0.3s; }
.freelancer-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(37,99,235,0.14); }
.freelancer-card:hover::before { opacity: 1; }
.fl-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: #fff; margin: 0 auto 14px; position: relative; box-shadow: 0 6px 20px rgba(0,0,0,0.15); border: 3px solid rgba(255,255,255,0.8); }
.online-dot { width: 14px; height: 14px; background: #22c55e; border: 2.5px solid #fff; border-radius: 50%; position: absolute; bottom: 2px; left: 2px; animation: pulse 2s infinite; }
.fl-name { font-weight: 800; font-size: 1rem; margin-bottom: 3px; color: var(--primary); }
.fl-title { color: var(--gray); font-size: 0.82rem; margin-bottom: 12px; line-height: 1.5; }
.fl-skills { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 12px; }
.skill-tag { background: var(--accent-light); color: var(--accent); padding: 4px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; border: 1px solid rgba(37,99,235,0.15); }
.fl-rate { font-size: 0.83rem; color: var(--gray); margin-bottom: 14px; }
.fl-rate strong { color: var(--accent); font-weight: 800; font-size: 0.95rem; }
/* CTA */
/* ===== PRICING ===== */
.pricing-section { padding: 90px 7%; background: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 50px; align-items: start; }
.pricing-card {
border-radius: 20px; padding: 36px 30px;
border: 2px solid var(--border);
background: #fff; position: relative;
transition: all 0.3s; overflow: hidden;
}
.pricing-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 4px; background: var(--border);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(37,99,235,0.12); border-color: var(--accent); }
/* Pro card */
.pricing-card.pro { border-color: var(--accent); }
.pricing-card.pro::before { background: linear-gradient(90deg, #2563EB, #60a5fa); }
/* Elite card */
.pricing-card.elite {
background: linear-gradient(145deg, #0F172A 0%, #0F172A 100%);
border-color: #2563EB;
}
.pricing-card.elite::before { background: linear-gradient(90deg, #60a5fa, #2563EB, #60a5fa); }
.pricing-card.elite:hover { box-shadow: 0 20px 50px rgba(37,99,235,0.3); }
.plan-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 50px;
font-size: 0.75rem; font-weight: 800;
letter-spacing: 1px; margin-bottom: 20px;
}
.plan-badge.free { background: #f3f4f6; color: var(--gray); }
.plan-badge.pro-b { background: var(--accent-light); color: var(--accent); }
.plan-badge.elite-b { background: rgba(37,99,235,0.2); color: #60a5fa; }
.plan-name { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; color: var(--primary); }
.pricing-card.elite .plan-name { color: #fff; }
.plan-desc { font-size: 0.88rem; color: var(--gray); margin-bottom: 24px; line-height: 1.6; }
.pricing-card.elite .plan-desc { color: rgba(255,255,255,0.55); }
.plan-price { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.price-num { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 3rem; font-weight: 900; color: var(--primary); line-height: 1; }
.pricing-card.elite .price-num { color: #60a5fa; }
.pricing-card.pro .price-num { color: var(--accent); }
.price-currency { font-size: 1rem; font-weight: 700; color: var(--gray); margin-bottom: 8px; }
.pricing-card.elite .price-currency { color: rgba(255,255,255,0.5); }
.price-period { font-size: 0.82rem; color: var(--gray); margin-bottom: 28px; }
.pricing-card.elite .price-period { color: rgba(255,255,255,0.4); }
.services-allowed {
display: flex; align-items: center; gap: 10px;
background: var(--accent-light); border-radius: 10px;
padding: 12px 16px; margin-bottom: 24px;
}
.pricing-card.elite .services-allowed { background: rgba(37,99,235,0.15); }
.services-allowed-icon { font-size: 1.4rem; }
.services-allowed-text { font-size: 0.88rem; font-weight: 700; color: var(--accent); }
.pricing-card.elite .services-allowed-text { color: #60a5fa; }
.features-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.features-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--primary); }
.pricing-card.elite .features-list li { color: rgba(255,255,255,0.8); }
.feat-check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.feat-check.yes { background: var(--accent-light); color: var(--accent); }
.pricing-card.elite .feat-check.yes { background: rgba(37,99,235,0.2); color: #60a5fa; }
.feat-check.no { background: #f3f4f6; color: #ccc; }
.pricing-card.elite .feat-check.no { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.2); }
.btn-plan {
width: 100%; padding: 14px; border-radius: 12px;
font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; font-weight: 800;
cursor: pointer; transition: all 0.25s; border: none;
}
.btn-plan-free { background: #f3f4f6; color: var(--gray); }
.btn-plan-free:hover { background: #e2e8f0; }
.btn-plan-pro { background: var(--accent); color: #fff; }
.btn-plan-pro:hover { background: var(--accent-dark); box-shadow: 0 6px 20px rgba(37,99,235,0.35); transform: translateY(-1px); }
.btn-plan-elite { background: linear-gradient(135deg, #2563EB, #60a5fa); color: #fff; }
.btn-plan-elite:hover { box-shadow: 0 6px 25px rgba(37,99,235,0.5); transform: translateY(-1px); }
.popular-tag {
position: absolute; top: 20px; left: 20px;
background: var(--accent); color: #fff;
padding: 4px 12px; border-radius: 50px;
font-size: 0.72rem; font-weight: 800; letter-spacing: 1px;
}
.elite-tag {
position: absolute; top: 20px; left: 20px;
background: linear-gradient(135deg, #2563EB, #60a5fa);
color: #fff; padding: 4px 12px; border-radius: 50px;
font-size: 0.72rem; font-weight: 800; letter-spacing: 1px;
}
.cta-section { margin: 50px 7%; border-radius: 24px; background: linear-gradient(135deg, var(--accent) 0%, #ff9a00 100%); padding: 70px 7%; text-align: center; }
.cta-section h2 { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 2.2rem; color: #fff; font-weight: 800; margin-bottom: 14px; }
.cta-section p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 36px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-white { background: #fff; color: var(--accent); padding: 14px 32px; border-radius: 10px; border: none; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.btn-ghost { background: transparent; color: #fff; padding: 14px 32px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.5); font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
/* FOOTER */
footer { background: var(--navy); color: rgba(255,255,255,0.55); padding: 60px 7% 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-brand .logo { margin-bottom: 14px; color: #fff; }
.footer-brand p { font-size: 0.88rem; line-height: 1.9; max-width: 280px; }
.footer-col h4 { color: #fff; font-weight: 700; margin-bottom: 18px; font-size: 0.93rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.86rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.83rem; }
/* MODALS */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 20px; width: 100%; max-width: 500px; padding: 40px; position: relative; animation: slideUp 0.3s ease; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 16px; left: 16px; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--gray); }
.modal h2 { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.55rem; font-weight: 800; margin-bottom: 6px; }
.modal > p { color: var(--gray); margin-bottom: 26px; font-size: 0.92rem; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 7px; font-size: 0.88rem; }
.form-group input, .form-group select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.92rem; outline: none; transition: border-color 0.2s; direction: rtl; }
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-full { width: 100%; padding: 13px; background: var(--accent); border: none; border-radius: 10px; color: #fff; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 0.2s; margin-bottom: 14px; }
.btn-full:hover { background: var(--accent-dark); }
.modal-switch { text-align: center; font-size: 0.88rem; color: var(--gray); }
.modal-switch a { color: var(--accent); cursor: pointer; font-weight: 700; }
.tabs-modal { display: flex; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.tab-modal { flex: 1; text-align: center; padding: 11px; cursor: pointer; font-weight: 700; color: var(--gray); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; font-size: 0.92rem; }
.tab-modal.active { color: var(--accent); border-bottom-color: var(--accent); }
.pay-methods-label { font-weight: 700; font-size: 0.88rem; margin-bottom: 10px; margin-top: 4px; }
.payment-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.payment-option { border: 2px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 0.78rem; font-weight: 600; color: var(--gray); }
.payment-option:hover, .payment-option.selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.payment-option .pay-icon { font-size: 1.5rem; display: block; margin-bottom: 5px; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* LARGE SCREEN OPTIMIZATIONS */
@media (min-width: 1400px) {
nav { padding: 0 8%; }
.section { padding: 90px 9%; }
.services-section, .freelancers-section, .how-section, .categories-section,
.pricing-section, .faq-section, .how-it-works-section, .payment-section { padding: 90px 9%; }
.cta-section { margin: 60px 9%; padding: 80px 9%; }
footer { padding: 70px 9% 32px; }
.hero { padding: 80px 9% 60px; }
.services-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.categories-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (min-width: 1800px) {
nav { padding: 0 10%; }
.section { padding: 100px 11%; }
.services-section, .freelancers-section, .how-section, .categories-section,
.pricing-section, .faq-section, .how-it-works-section, .payment-section { padding: 100px 11%; }
.cta-section { margin: 60px 11%; }
footer { padding: 80px 11% 36px; }
.hero { padding: 90px 11% 70px; }
}
/* ===== MOBILE RESPONSIVE ===== */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
* { box-sizing: border-box; }
/* auth-mobile-bar — hidden on desktop, shown only on mobile via media query */
.auth-mobile-bar {
display: none;
}
@media (max-width: 768px) {
/* Navbar mobile */
.nav-links { display: none; }
nav {
padding: 0 3%;
height: auto;
min-height: 60px;
gap: 6px;
flex-wrap: nowrap;
overflow: visible;
}
.logo-text { font-size: 1.1rem; flex-shrink: 0; }
/* إخفاء زر "دخول" فقط والإبقاء على "ابدأ مجاناً" */
.btn-outline { display: none; }
/* زر "ابدأ مجاناً" — ثابت لا يُقطع */
.btn-primary {
padding: 8px 12px;
font-size: 0.78rem;
white-space: nowrap;
min-height: 40px;
flex-shrink: 0;
}
/* الجانب الأيمن — لا يُضغط */
.nav-right {
gap: 4px;
flex-shrink: 0;
flex-wrap: nowrap;
overflow: visible;
}
/* إخفاء شارة DB على الموبايل الصغير */
.db-status span { display: none; }
.db-status { padding: 4px 6px; flex-shrink: 0; }
/* أزرار اختيار اللغة والعملة — أصغر لكن قابلة للضغط */
.nav-selector-btn {
padding: 7px 8px;
font-size: 0.75rem;
gap: 3px;
min-height: 40px;
min-width: 44px;
}
/* إخفاء أيقونة الكرة الأرضية على الموبايل لتوفير المساحة */
.nav-selector-btn svg:first-child { display: none; }
/* الفاصل — أصغر */
.nav-divider { margin: 0 2px; }
/* nav-actions لا تُقطع أبداً */
.nav-actions {
flex-shrink: 0;
gap: 5px;
}
.nav-drop-item { text-align: right; }
/* Hero */
.hero { grid-template-columns: 1fr; padding: 60px 5% 40px; min-height: auto; gap: 30px; }
.hero-right { display: none; }
.hero h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
.hero p { font-size: 0.9rem; }
.hero-actions { flex-direction: column; gap: 10px; width: 100%; justify-content: flex-start; }
.btn-hero { width: 100%; min-height: 48px; font-size: 1rem; }
.search-bar { flex-direction: row; padding: 5px; margin: 0 0 30px; }
.search-bar input { font-size: 0.82rem; }
.hero-stats { gap: 16px; flex-wrap: wrap; justify-content: flex-start; }
/* Sections padding */
.services-section, .freelancers-section, .how-section,
.categories-section, .pricing-section, .faq-section { padding: 50px 4%; }
/* Services grid */
.services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.service-card .service-body { padding: 10px; }
.service-title { font-size: 0.82rem; }
/* Categories grid */
.cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-card { padding: 14px 8px; }
.cat-icon { font-size: 1.5rem; }
.cat-name { font-size: 0.72rem; }
/* Freelancers grid */
.freelancers-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.freelancer-card { padding: 16px 10px; }
/* How it works */
.how-grid { grid-template-columns: 1fr; gap: 20px; }
/* Pricing */
.pricing-grid { grid-template-columns: 1fr; gap: 16px; max-width: 360px; margin: 0 auto; }
/* Footer */
.footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
/* Filter bar — scrollable horizontally */
.filter-cats { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-cats::-webkit-scrollbar { display: none; }
.filter-cat-btn { padding: 8px 14px; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; min-height: 38px; }
.filter-bar { flex-direction: column; gap: 10px; }
/* Dashboard — full screen */
.dashboard { flex-direction: column; max-height: 100vh; border-radius: 0; width: 100%; }
.dashboard-overlay { padding: 0 !important; }
.dash-sidebar { width: 100%; padding: 10px 0 6px; border-bottom: 1.5px solid var(--border); }
.dash-nav { display: flex; overflow-x: auto; padding: 0 10px; gap: 4px; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav li { display: inline-block; }
.dash-nav li a { padding: 8px 12px; font-size: 0.78rem; border-radius: 8px; min-height: 40px; display: flex; align-items: center; gap: 5px; }
.dash-nav-icon { font-size: 0.9rem; }
.dash-user { display: none; }
.dash-content { padding: 16px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Modal — full screen on mobile */
.modal { padding: 24px 16px; border-radius: 16px; }
.auth-modal-overlay {
align-items: flex-end;
padding: 0;
}
.auth-modal {
border-radius: 20px 20px 0 0 !important;
margin: 0 !important;
grid-template-columns: 1fr !important;
display: flex !important;
flex-direction: column !important;
max-width: 100% !important;
width: 100% !important;
max-height: 95vh !important;
overflow: hidden !important;
}
.auth-modal-header { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; }
.auth-modal-right {
display: flex;
flex-direction: column;
flex: 1;
overflow: visible;
min-height: 0;
}
.auth-body {
padding: 16px 20px 40px;
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.auth-tabs {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
flex-shrink: 0;
}
/* Mobile top bar */
.auth-mobile-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: #fff;
}
.auth-mobile-logo {
font-family: 'Poppins', 'Cairo', sans-serif;
font-size: 1.2rem;
font-weight: 800;
color: var(--primary);
}
.auth-mobile-close {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: #fff;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray);
font-weight: 700;
}
/* Order/Payment/Review modals — bottom sheets */
.order-modal-overlay { align-items: flex-end; padding: 0; }
.order-modal { border-radius: 20px 20px 0 0; max-width: 100%; }
.payment-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
.payment-modal { border-radius: 20px 20px 0 0 !important; max-width: 100% !important; }
.review-modal-overlay { align-items: flex-end; padding: 0; }
.review-modal { border-radius: 20px 20px 0 0; max-width: 100%; }
/* Forms */
.form-row { grid-template-columns: 1fr; }
.payment-options { grid-template-columns: 1fr 1fr 1fr; }
/* iOS fix — prevent zoom on input focus */
input, textarea, select { font-size: 16px !important; }
button, a { touch-action: manipulation; }
/* User menu */
.user-name-short { display: none; }
.user-avatar-circle { width: 38px; height: 38px; font-size: 0.85rem; }
.user-avatar-btn { padding: 5px 12px 5px 6px; }
/* Notifications panel — full width */
.notif-panel { width: 92vw; right: 4%; left: auto; }
/* Messages — bigger input + safe area */
.msg-input-wrap { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
#msgInput { font-size: 16px !important; }
.msg-container { height: calc(100vh - 200px); }
/* Toast — full width */
.toast-container { left: 12px; right: 12px; transform: none; top: 70px; }
.toast { min-width: unset; width: 100%; box-sizing: border-box; }
/* FAQ touch targets */
.faq-question { padding: 16px; font-size: 0.88rem; min-height: 48px; }
} /* end @media (max-width: 768px) */
@media (max-width: 480px) {
.services-grid { grid-template-columns: 1fr; }
.freelancers-grid { grid-template-columns: 1fr; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.hero h1 { font-size: 1.7rem; }
nav { padding: 0 3%; }
.lang-bar { padding: 4px 3%; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ===== DASHBOARD ===== */
.dashboard-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.dashboard-overlay.open { display: flex; }
.dashboard { background: #fff; width: 100%; max-width: 1200px; margin: auto; border-radius: 20px; overflow: hidden; display: flex; max-height: 92vh; animation: slideUp 0.3s ease; box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.dash-sidebar { width: 260px; background: var(--navy); padding: 30px 0; flex-shrink: 0; }
.dash-user { padding: 0 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 16px; }
.dash-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.dash-name { color: #fff; font-weight: 700; font-size: 0.95rem; }
.dash-role { color: rgba(255,255,255,0.4); font-size: 0.78rem; margin-top: 2px; }
.dash-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(37,99,235,0.2); border: 1px solid rgba(37,99,235,0.4); border-radius: 50px; padding: 3px 10px; color: var(--accent); font-size: 0.72rem; font-weight: 700; margin-top: 8px; }
.dash-nav { list-style: none; padding: 0 12px; }
.dash-nav li a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: all 0.2s; cursor: pointer; }
.dash-nav li a:hover, .dash-nav li a.active { background: rgba(37,99,235,0.15); color: #fff; }
.dash-nav li a.active { color: var(--accent); }
.dash-nav-icon { font-size: 1.1rem; width: 22px; text-align: center; }
.dash-content { flex: 1; overflow-y: auto; padding: 32px; background: #f8f9fa; }
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.dash-title { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.dash-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--gray); padding: 4px 8px; border-radius: 8px; transition: background 0.2s; }
.dash-close:hover { background: #e2e8f0; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.dash-stat-card { background: #fff; border-radius: 14px; padding: 20px; border: 1.5px solid var(--border); }
.dash-stat-num { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.dash-stat-label { font-size: 0.78rem; color: var(--gray); margin-top: 4px; }
.dash-stat-trend { font-size: 0.72rem; font-weight: 700; margin-top: 6px; }
.trend-up { color: #22c55e; }
.trend-down { color: #ef4444; }
.dash-section-title { font-weight: 800; font-size: 1rem; color: var(--primary); margin-bottom: 14px; }
.dash-orders { background: #fff; border-radius: 14px; border: 1.5px solid var(--border); overflow: hidden; margin-bottom: 24px; }
.dash-orders-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 12px 20px; background: var(--accent-light); font-size: 0.78rem; font-weight: 700; color: var(--gray); }
.dash-order-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 0.85rem; align-items: center; transition: background 0.15s; }
.dash-order-row:hover { background: #fafafa; }
.order-title { font-weight: 700; color: var(--primary); }
.order-client { color: var(--gray); font-size: 0.8rem; margin-top: 2px; }
.order-status { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; }
.status-active { background: rgba(34,197,94,0.12); color: #16a34a; }
.status-pending { background: rgba(245,166,35,0.12); color: #d97706; }
.status-done { background: rgba(37,99,235,0.12); color: var(--accent); }
.dash-chart-area { background: #fff; border-radius: 14px; border: 1.5px solid var(--border); padding: 20px; }
.dash-chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 100px; margin-top: 16px; }
.dash-bar { flex: 1; background: var(--accent-light); border-radius: 6px 6px 0 0; position: relative; transition: background 0.2s; cursor: pointer; min-width: 0; }
.dash-bar:hover { background: rgba(37,99,235,0.25); }
.dash-bar .bar-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); border-radius: 6px 6px 0 0; transition: height 0.6s ease; }
.dash-bar-label { text-align: center; font-size: 0.65rem; color: var(--gray); margin-top: 6px; }
.dash-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.dash-action-btn { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--primary); }
.dash-action-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.dash-action-icon { font-size: 1.6rem; margin-bottom: 8px; }
.dash-action-label { font-size: 0.82rem; font-weight: 700; }
/* ===== AI CHATBOT ===== */
/* ===== CHATBOT ===== */
.chat-bubble { position: fixed; bottom: 24px; left: 24px; z-index: 500; }
.chat-btn {
width: 62px; height: 62px; background: linear-gradient(135deg, var(--accent), #60a5fa);
border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center;
justify-content: center; font-size: 1.6rem; box-shadow: 0 8px 30px rgba(37,99,235,0.45);
transition: all 0.3s; position: relative;
}
.chat-btn:hover { transform: scale(1.1) rotate(-8deg); }
.chat-btn-badge {
position: absolute; top: -3px; right: -3px; background: #22c55e;
width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;
animation: pulse 2s infinite;
}
.chat-window {
position: fixed; bottom: 100px; left: 24px; width: 360px;
background: #fff; border-radius: 24px;
box-shadow: 0 24px 70px rgba(0,0,0,0.18); z-index: 500;
display: none; flex-direction: column; overflow: hidden;
border: 1.5px solid var(--border);
transform: translateY(20px) scale(0.95); opacity: 0;
transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.chat-window.open {
display: flex; max-height: 560px;
transform: translateY(0) scale(1); opacity: 1;
}
/* Header */
.chat-head {
background: linear-gradient(135deg, #0F172A 0%, #0F172A 100%);
padding: 18px 20px; display: flex; align-items: center; gap: 12px;
position: relative; overflow: hidden;
}
.chat-head::before {
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,0.25), transparent 60%);
}
.chat-ai-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #60a5fa);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0; position: relative; z-index:1;
box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}
.chat-ai-info { flex: 1; position: relative; z-index:1; }
.chat-ai-name { color: #fff; font-weight: 800; font-size: 0.95rem; font-family:'Poppins','Cairo',sans-serif; }
.chat-ai-title { color: rgba(255,255,255,0.5); font-size: 0.72rem; margin-bottom: 3px; }
.chat-ai-status { color: rgba(255,255,255,0.6); font-size: 0.72rem; display: flex; align-items: center; gap: 5px; }
.chat-status-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; animation: pulse 2s infinite; }
.chat-close-btn { background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.7); font-size: 1rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; transition: all 0.2s; position: relative; z-index:1; }
.chat-close-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
/* Quick actions */
.chat-quick-actions {
padding: 12px 14px; display: flex; gap: 6px; flex-wrap: wrap;
background: linear-gradient(135deg, #fff8f4, #fff);
border-bottom: 1px solid var(--border);
}
.chat-quick-btn {
padding: 5px 11px; border-radius: 50px; border: 1.5px solid rgba(37,99,235,0.25);
background: #fff; color: var(--accent); font-size: 0.73rem; font-weight: 700;
cursor: pointer; transition: all 0.2s; font-family:'Roboto','Cairo',sans-serif;
white-space: nowrap;
}
.chat-quick-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Messages */
.chat-messages {
flex: 1; overflow-y: auto; padding: 16px; display: flex;
flex-direction: column; gap: 14px; min-height: 200px; max-height: 300px;
background: #f9fafb;
}
.chat-msg { max-width: 85%; display: flex; flex-direction: column; gap: 3px; }
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-msg-sender { font-size: 0.68rem; font-weight: 700; color: var(--gray); padding: 0 4px; }
.chat-msg.user .chat-msg-sender { text-align: right; color: var(--accent); }
.chat-bubble-msg {
padding: 11px 15px; border-radius: 18px; font-size: 0.86rem;
line-height: 1.6; word-break: break-word;
}
.chat-msg.bot .chat-bubble-msg {
background: #fff; color: var(--primary);
border-radius: 4px 18px 18px 18px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
border: 1px solid var(--border);
}
.chat-msg.user .chat-bubble-msg {
background: linear-gradient(135deg, var(--accent), #60a5fa);
color: #fff; border-radius: 18px 4px 18px 18px;
box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.chat-msg-time { font-size: 0.65rem; color: #9ca3af; padding: 0 4px; }
.chat-msg.user .chat-msg-time { text-align: right; }
/* Typing */
.chat-typing { display: none; align-items: center; gap: 5px; padding: 11px 15px; background: #fff; border-radius: 4px 18px 18px 18px; width: fit-content; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.chat-typing.show { display: flex; }
.typing-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; opacity: 0.5; animation: typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: translateY(0); opacity:0.5; } 40% { transform: translateY(-7px); opacity:1; } }
/* Suggestions */
.chat-suggestions { padding: 10px 14px; display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); background: #fff; }
.chat-suggestion { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 50px; font-size: 0.73rem; font-weight: 600; color: var(--gray); cursor: pointer; transition: all 0.2s; background: #fff; font-family:'Roboto','Cairo',sans-serif; }
.chat-suggestion:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
/* Input */
.chat-input-area { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: #fff; }
.chat-input { flex: 1; border: 1.5px solid var(--border); border-radius: 12px; padding: 9px 13px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.87rem; outline: none; transition: border-color 0.2s; background: #f9fafb; }
.chat-input:focus { border-color: var(--accent); background: #fff; }
.chat-send { background: linear-gradient(135deg, var(--accent), #60a5fa); border: none; border-radius: 12px; color: #fff; padding: 9px 15px; cursor: pointer; font-size: 1rem; transition: all 0.2s; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.chat-send:hover { transform: scale(1.05); }
/* Mobile chat */
@media (max-width: 480px) {
.chat-window { width: calc(100vw - 32px); left: 16px; bottom: 90px; }
.chat-btn { width: 54px; height: 54px; font-size: 1.4rem; }
.chat-bubble { bottom: 16px; left: 16px; }
}
/* ===== SUPABASE AUTH UI ===== */
.auth-modal-overlay { display:none; position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.auth-modal-overlay.open { display:flex; }
.auth-modal { background:#fff; border-radius:24px; width:100%; max-width:920px; overflow:clip; box-shadow:0 30px 80px rgba(0,0,0,0.25); animation:slideUp 0.3s ease; display:grid; grid-template-columns:340px 1fr; min-height:500px; }
.auth-modal-header { background:linear-gradient(135deg,#0F172A,#0F172A); padding:40px 32px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.auth-modal-logo { font-family:'Poppins','Cairo',sans-serif; font-size:1.9rem; font-weight:800; color:#fff; margin-bottom:8px; }
.auth-modal-logo span { color:var(--accent); }
.auth-modal-sub { color:rgba(255,255,255,0.55); font-size:0.88rem; line-height:1.6; margin-bottom:32px; }
.auth-modal-features { display:flex; flex-direction:column; gap:14px; margin-top:auto; }
.auth-modal-feat { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,0.75); font-size:0.85rem; font-weight:600; }
.auth-modal-feat-icon { width:36px; height:36px; background:rgba(37,99,235,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.auth-modal-right { display:flex; flex-direction:column; overflow:visible; }
.auth-tabs { display:flex; border-bottom:2px solid var(--border); }
.auth-tab { flex:1; padding:14px; text-align:center; font-weight:700; font-size:0.9rem; cursor:pointer; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.2s; }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-body { padding:28px 32px 32px; overflow-y:auto; overflow-x:visible; max-height:80vh; }
.auth-form { display:none; flex-direction:column; gap:16px; }
.auth-form.active { display:flex; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:0.82rem; font-weight:700; color:var(--primary); }
.auth-field input { border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; font-family:'Roboto','Cairo',sans-serif; font-size:0.9rem; outline:none; transition:border-color 0.2s; width:100%; box-sizing:border-box; }
.auth-field input[type="password"] { padding-left:44px; }
.auth-field input:focus { border-color:var(--accent); }
.auth-role-select { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-role-btn { border:1.5px solid var(--border); border-radius:10px; padding:12px; text-align:center; cursor:pointer; transition:all 0.2s; }
.auth-role-btn.selected { border-color:var(--accent); background:var(--accent-light); }
.auth-role-icon { font-size:1.5rem; margin-bottom:4px; }
.auth-role-label { font-size:0.8rem; font-weight:700; color:var(--primary); }
.auth-role-desc { font-size:0.7rem; color:var(--gray); margin-top:2px; }
.auth-submit { background:var(--accent); color:#fff; border:none; border-radius:10px; padding:13px; font-family:'Roboto','Cairo',sans-serif; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
.auth-submit:hover { background:var(--accent-dark); }
.auth-submit:disabled { background:#ccc; cursor:not-allowed; }
.auth-divider { text-align:center; color:var(--gray); font-size:0.8rem; position:relative; }
.auth-divider::before,.auth-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border); }
.auth-divider::before { right:0; } .auth-divider::after { left:0; }
.auth-google { border:1.5px solid var(--border); background:#fff; border-radius:10px; padding:11px; font-family:'Roboto','Cairo',sans-serif; font-size:0.9rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.2s; }
.auth-google:hover { border-color:var(--accent); background:var(--accent-light); }
.auth-error { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:10px 14px; color:#dc2626; font-size:0.82rem; display:none; }
.auth-error.show { display:block; }
.auth-success { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:10px 14px; color:#16a34a; font-size:0.82rem; display:none; }
.auth-success.show { display:block; }
.auth-close { position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; width:34px; height:34px; color:#fff; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; z-index:10; transition:background 0.2s; } .auth-close:hover { background:rgba(37,99,235,0.5); }
.auth-modal-header { position:relative; }
.auth-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; margin-left:8px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes bounce { from { transform:translateY(0); } to { transform:translateY(-16px); } }
/* FILTER SYSTEM */
.filter-cat-btn { padding:7px 16px; border-radius:50px; border:1.5px solid var(--border); background:#fff; color:var(--gray); font-family:'Roboto','Cairo',sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.filter-cat-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-cat-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.admin-overlay { display:none !important; position:fixed; inset:0; z-index:600; background:#0f172a; overflow-y:auto; }
.admin-overlay.open { display:block !important; }
.admin-topbar { background:#1e293b; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:10; }
.admin-logo { color:#fff; font-family:'Poppins','Cairo',sans-serif; font-weight:800; font-size:1.1rem; }
.admin-logo span { color:#2563EB; }
.admin-nav { display:flex; gap:6px; flex-wrap:wrap; }
.admin-nav-btn { padding:7px 14px; border-radius:8px; border:none; background:transparent; color:rgba(255,255,255,0.5); font-family:'Roboto','Cairo',sans-serif; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
.admin-nav-btn:hover, .admin-nav-btn.active { background:rgba(37,99,235,0.15); color:#2563EB; }
.admin-body { padding:24px; max-width:1200px; margin:0 auto; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.admin-stat { background:#1e293b; border-radius:14px; padding:18px; border:1px solid rgba(255,255,255,0.06); }
.admin-stat-num { font-family:'Poppins','Cairo',sans-serif; font-size:1.8rem; font-weight:800; color:#fff; }
.admin-stat-label { font-size:0.78rem; color:rgba(255,255,255,0.4); margin-top:4px; }
.admin-stat-icon { font-size:1.4rem; margin-bottom:8px; }
.admin-card { background:#1e293b; border-radius:16px; border:1px solid rgba(255,255,255,0.06); overflow:hidden; margin-bottom:16px; }
.admin-card-header { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; }
.admin-card-title { color:#fff; font-weight:800; font-size:0.92rem; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { padding:12px 16px; text-align:right; font-size:0.75rem; color:rgba(255,255,255,0.35); font-weight:600; border-bottom:1px solid rgba(255,255,255,0.06); }
.admin-table td { padding:12px 16px; font-size:0.82rem; color:rgba(255,255,255,0.7); border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }
.admin-badge { padding:3px 10px; border-radius:50px; font-size:0.7rem; font-weight:700; }
.admin-btn { padding:5px 12px; border-radius:7px; border:none; font-family:'Roboto','Cairo',sans-serif; font-size:0.75rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
.admin-btn-green { background:rgba(34,197,94,0.15); color:#22c55e; }
.admin-btn-red { background:rgba(239,68,68,0.15); color:#ef4444; }
.admin-btn-orange { background:rgba(37,99,235,0.15); color:#2563EB; }
.admin-btn-blue { background:rgba(59,130,246,0.15); color:#60a5fa; }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.admin-login-box { background:#1e293b; border-radius:20px; padding:40px; width:100%; max-width:380px; border:1px solid rgba(255,255,255,0.08); }
.payment-overlay { display:none !important; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; }
.payment-overlay.open { display:flex !important; }
.payment-modal { background:#fff; border-radius:24px; width:100%; max-width:480px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.3); animation:slideUp 0.3s ease; max-height:90vh; overflow-y:auto; }
.payment-steps { display:flex; border-bottom:1px solid var(--border); }
.payment-step { flex:1; padding:12px; text-align:center; font-size:0.75rem; font-weight:700; color:var(--gray); border-bottom:2px solid transparent; }
.payment-step.active { color:var(--accent); border-bottom-color:var(--accent); }
.payment-step.done { color:#22c55e; }
.payment-method-btn { border:2px solid var(--border); border-radius:14px; padding:16px; cursor:pointer; transition:all 0.2s; background:#fff; width:100%; text-align:right; display:flex; align-items:center; gap:14px; }
.payment-method-btn:hover, .payment-method-btn.selected { border-color:var(--accent); background:var(--accent-light); }
.payment-method-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.payment-method-name { font-weight:800; font-size:0.92rem; color:var(--primary); }
.payment-method-desc { font-size:0.75rem; color:var(--gray); margin-top:2px; }
.payment-account-box { background:linear-gradient(135deg,#0F172A,#0F172A); border-radius:14px; padding:18px; color:#fff; }
.payment-account-label { font-size:0.75rem; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.payment-account-num { font-family:'Poppins','Cairo',sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:2px; color:var(--accent); }
.payment-account-name { font-size:0.82rem; color:rgba(255,255,255,0.7); margin-top:4px; }
.upload-area { border:2px dashed var(--border); border-radius:14px; padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; }
.upload-area:hover, .upload-area.has-file { border-color:var(--accent); background:var(--accent-light); }
.upload-area-icon { font-size:2rem; margin-bottom:8px; }
.upload-area-text { font-size:0.85rem; font-weight:700; color:var(--gray); }
.upload-area-sub { font-size:0.75rem; color:var(--gray); margin-top:4px; }
/* ADMIN PAYMENT PANEL */
.admin-payment-card { background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; }
.payment-status-badge { padding:4px 10px; border-radius:50px; font-size:0.72rem; font-weight:700; }
.pstatus-pending_proof { background:rgba(245,158,11,0.12); color:#d97706; }
.pstatus-proof_submitted { background:rgba(59,130,246,0.12); color:#2563eb; }
.pstatus-confirmed { background:rgba(34,197,94,0.12); color:#16a34a; }
.pstatus-released { background:rgba(37,99,235,0.12); color:var(--accent); }
.pstatus-refunded { background:rgba(239,68,68,0.12); color:#dc2626; }
/* ===== MESSAGING SYSTEM — FULL REDESIGN ===== */
.msg-container {
display: grid;
grid-template-columns: 300px 1fr;
height: 580px;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
/* Sidebar */
.msg-sidebar { border-left: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.msg-sidebar-header {
padding: 16px 16px 12px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
background: #fff;
position: sticky; top: 0; z-index: 2;
}
.msg-sidebar-title { font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.msg-search-box {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: #fafafa;
}
.msg-search-input {
width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.82rem;
outline: none; background: #fff; transition: border-color 0.2s;
box-sizing: border-box;
}
.msg-search-input:focus { border-color: var(--accent); }
.msg-conv-item {
padding: 13px 14px; display: flex; gap: 11px; align-items: center;
cursor: pointer; transition: background 0.15s; border-bottom: 1px solid #f3f4f6;
position: relative;
}
.msg-conv-item:hover { background: #fafafa; }
.msg-conv-item.active { background: var(--accent-light); border-right: 3px solid var(--accent); }
.msg-conv-avatar-wrap { position: relative; flex-shrink: 0; }
.msg-conv-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #60a5fa);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 1rem;
}
.msg-online-dot {
width: 10px; height: 10px; background: #22c55e; border: 2px solid #fff;
border-radius: 50%; position: absolute; bottom: 1px; left: 1px;
}
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-name { font-weight: 700; font-size: 0.85rem; color: var(--primary); }
.msg-conv-preview {
font-size: 0.73rem; color: var(--gray); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-conv-preview.unread { color: var(--primary); font-weight: 700; }
.msg-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.msg-conv-time { font-size: 0.65rem; color: var(--gray); }
.msg-conv-unread-badge {
min-width: 18px; height: 18px; background: var(--accent); border-radius: 50px;
display: flex; align-items: center; justify-content: center;
font-size: 0.62rem; font-weight: 800; color: #fff; padding: 0 4px;
}
/* Chat area */
.msg-chat { display: flex; flex-direction: column; height: 100%; background: #f8f9fa; }
.msg-chat-header {
padding: 14px 18px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
background: #fff; flex-shrink: 0;
}
.msg-chat-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #60a5fa);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 0.9rem; flex-shrink: 0;
}
.msg-chat-info { flex: 1; }
.msg-chat-name { font-weight: 800; font-size: 0.92rem; color: var(--primary); }
.msg-chat-status { font-size: 0.7rem; color: #22c55e; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.msg-chat-actions { display: flex; gap: 6px; }
.msg-action-btn {
width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--border);
background: #fff; cursor: pointer; display: flex; align-items: center;
justify-content: center; font-size: 1rem; transition: all 0.2s;
}
.msg-action-btn:hover { border-color: var(--accent); background: var(--accent-light); }
/* Messages area */
.msg-messages {
flex: 1; overflow-y: auto; padding: 20px 16px;
display: flex; flex-direction: column; gap: 4px;
scroll-behavior: smooth;
}
.msg-date-sep {
text-align: center; margin: 14px 0;
font-size: 0.7rem; color: var(--gray); font-weight: 600;
display: flex; align-items: center; gap: 8px;
}
.msg-date-sep::before, .msg-date-sep::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.msg-row {
display: flex; flex-direction: column; margin: 2px 0;
}
.msg-row.sent { align-items: flex-start; }
.msg-row.received { align-items: flex-end; }
.msg-bubble-wrap { display: flex; align-items: flex-end; gap: 6px; }
.msg-row.received .msg-bubble-wrap { flex-direction: row-reverse; }
.msg-bubble {
max-width: 72%; padding: 10px 14px; font-size: 0.87rem;
line-height: 1.6; position: relative; word-break: break-word;
}
.msg-row.sent .msg-bubble {
background: var(--accent); color: #fff;
border-radius: 18px 18px 4px 18px;
}
.msg-row.received .msg-bubble {
background: #fff; color: var(--primary);
border-radius: 18px 18px 18px 4px;
border: 1.5px solid var(--border);
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
/* Image message */
.msg-bubble.msg-img-bubble {
padding: 4px; background: transparent; border: none; box-shadow: none;
}
.msg-img-thumb {
width: 200px; max-height: 200px; border-radius: 12px;
object-fit: cover; cursor: pointer; display: block;
transition: opacity 0.2s;
}
.msg-img-thumb:hover { opacity: 0.9; }
/* File message */
.msg-file-bubble {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; min-width: 160px;
background: rgba(255,255,255,0.15); border-radius: 10px;
}
.msg-row.received .msg-bubble .msg-file-bubble { background: var(--accent-light); }
.msg-file-icon { font-size: 1.6rem; flex-shrink: 0; }
.msg-file-name { font-size: 0.78rem; font-weight: 700; }
.msg-file-size { font-size: 0.65rem; opacity: 0.7; margin-top: 2px; }
.msg-file-dl { font-size: 0.72rem; font-weight: 700; text-decoration: underline; cursor: pointer; margin-top: 4px; }
.msg-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.msg-time { font-size: 0.63rem; color: var(--gray); }
.msg-read-tick { font-size: 0.65rem; }
.msg-read-tick.read { color: var(--accent); }
.msg-read-tick.delivered { color: var(--gray); }
/* Typing indicator */
.msg-typing { display: flex; align-items: center; gap: 6px; padding: 8px 14px; }
.msg-typing-dots { display: flex; gap: 3px; }
.msg-typing-dot {
width: 7px; height: 7px; background: var(--gray); border-radius: 50%;
animation: typingBounce 1.2s infinite ease-in-out;
}
.msg-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.msg-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-6px); }
}
/* Input area */
.msg-input-area {
padding: 12px 14px; border-top: 1.5px solid var(--border);
background: #fff; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
}
.msg-attachments-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.msg-attach-thumb {
width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
border: 1.5px solid var(--border); position: relative;
}
.msg-attach-remove {
position: absolute; top: -5px; right: -5px; width: 16px; height: 16px;
background: #dc2626; border-radius: 50%; display: flex; align-items: center;
justify-content: center; cursor: pointer; font-size: 0.6rem; color: #fff; font-weight: 800;
}
.msg-file-attach {
display: flex; align-items: center; gap: 8px; background: var(--accent-light);
border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; font-weight: 700; color: var(--accent);
}
.msg-input-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-attach-btns { display: flex; gap: 4px; }
.msg-attach-btn {
width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
background: #fff; cursor: pointer; display: flex; align-items: center;
justify-content: center; font-size: 1.05rem; transition: all 0.2s; flex-shrink: 0;
}
.msg-attach-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.msg-input {
flex: 1; border: 1.5px solid var(--border); border-radius: 12px;
padding: 9px 14px; font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.9rem;
outline: none; transition: border-color 0.2s; resize: none; min-height: 38px;
max-height: 100px; line-height: 1.5; background: #fafafa;
}
.msg-input:focus { border-color: var(--accent); background: #fff; }
.msg-send-btn {
width: 38px; height: 38px; background: var(--accent); border: none; border-radius: 10px;
color: #fff; cursor: pointer; font-size: 1.1rem; transition: all 0.2s;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-send-btn:hover { background: var(--accent-dark); transform: scale(1.05); }
.msg-send-btn:disabled { background: #e2e8f0; cursor: not-allowed; transform: none; }
.msg-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; color: var(--gray); text-align: center; padding: 20px;
}
/* Image lightbox */
.msg-lightbox {
display: none; position: fixed; inset: 0; z-index: 700;
background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
}
.msg-lightbox.open { display: flex; }
.msg-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 12px; object-fit: contain; }
.msg-lightbox-close {
position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.15);
border: none; color: #fff; font-size: 1.5rem; cursor: pointer; border-radius: 8px;
padding: 4px 12px; transition: background 0.2s;
}
/* Order context banner */
.msg-order-banner {
padding: 10px 14px; background: linear-gradient(135deg, #EFF6FF, #fff);
border-bottom: 1px solid rgba(37,99,235,0.15);
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.msg-order-banner-icon { font-size: 1.3rem; }
.msg-order-banner-text { font-size: 0.78rem; font-weight: 700; color: var(--accent); flex: 1; }
.msg-order-view-btn {
font-size: 0.72rem; font-weight: 700; color: var(--accent); cursor: pointer;
border: 1px solid rgba(37,99,235,0.3); border-radius: 6px; padding: 3px 8px;
background: rgba(37,99,235,0.07); transition: all 0.2s; white-space: nowrap;
}
/* Mobile chat */
@media (max-width: 768px) {
.msg-container { grid-template-columns: 1fr; height: 480px; }
.msg-sidebar { display: none; }
.msg-sidebar.mobile-show { display: flex; position: absolute; inset: 0; z-index: 10; }
.msg-container.mobile-list .msg-sidebar { display: flex; }
.msg-container.mobile-list .msg-chat { display: none; }
.msg-back-btn { display: flex; }
}
.msg-back-btn { display: none; width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; align-items: center; justify-content: center; font-size: 1.1rem; }
.review-modal-overlay { display:none; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; }
.review-modal-overlay.open { display:flex; }
.review-modal { background:#fff; border-radius:24px; width:100%; max-width:440px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.3); animation:slideUp 0.3s ease; }
.review-modal-header { background:linear-gradient(135deg,#0F172A,#0F172A); padding:24px; text-align:center; }
.review-modal-title { color:#fff; font-family:'Poppins','Cairo',sans-serif; font-size:1.1rem; font-weight:800; }
.review-modal-service { color:rgba(255,255,255,0.55); font-size:0.82rem; margin-top:4px; }
.review-modal-body { padding:24px; }
.stars-container { display:flex; justify-content:center; gap:10px; margin:16px 0; direction:ltr; }
.star-btn { font-size:2.2rem; cursor:pointer; transition:transform 0.15s; filter:grayscale(1); opacity:0.4; background:none; border:none; padding:0; }
.star-btn.active, .star-btn:hover { filter:grayscale(0); opacity:1; transform:scale(1.2); }
.star-label { text-align:center; font-size:0.85rem; font-weight:700; color:var(--gray); margin-bottom:16px; min-height:20px; }
/* SERVICE REVIEWS SECTION */
.reviews-section { padding:20px 0; }
.review-card { background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; }
.review-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:0.9rem; flex-shrink:0; }
.review-stars { color:#f59e0b; font-size:0.9rem; letter-spacing:1px; }
.review-text { font-size:0.85rem; color:var(--primary); line-height:1.6; }
.review-date { font-size:0.72rem; color:var(--gray); margin-top:6px; }
.notif-bell { position:relative; cursor:pointer; background:none; border:none; font-size:1.3rem; padding:6px; border-radius:8px; transition:background 0.2s; }
.notif-bell:hover { background:var(--accent-light); }
.notif-badge { position:absolute; top:2px; left:2px; background:#ef4444; color:#fff; font-size:0.6rem; font-weight:800; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; display:none; }
.notif-badge.show { display:flex; }
.notif-panel { position:absolute; top:calc(100% + 10px); left:0; background:#fff; border-radius:16px; box-shadow:0 15px 50px rgba(0,0,0,0.15); border:1.5px solid var(--border); width:320px; z-index:300; overflow:hidden; display:none; animation:fadeDown 0.2s ease; }
.notif-panel.open { display:block; }
.notif-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.notif-title { font-weight:800; font-size:0.9rem; color:var(--primary); }
.notif-mark-all { font-size:0.75rem; color:var(--accent); cursor:pointer; font-weight:600; background:none; border:none; }
.notif-list { max-height:360px; overflow-y:auto; }
.notif-item { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:flex-start; cursor:pointer; transition:background 0.15s; }
.notif-item:hover { background:#fafafa; }
.notif-item.unread { background:#EFF6FF; border-right:3px solid var(--accent); }
.notif-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.notif-icon.order { background:rgba(34,197,94,0.12); }
.notif-icon.status { background:rgba(59,130,246,0.12); }
.notif-icon.system { background:rgba(37,99,235,0.12); }
.notif-content { flex:1; min-width:0; }
.notif-text { font-size:0.82rem; font-weight:600; color:var(--primary); line-height:1.4; }
.notif-time { font-size:0.7rem; color:var(--gray); margin-top:3px; }
.notif-empty { text-align:center; padding:32px 16px; color:var(--gray); }
.notif-empty-icon { font-size:2rem; margin-bottom:8px; }
.notif-empty-text { font-size:0.85rem; font-weight:600; }
/* PUSH PERMISSION BANNER */
.push-banner { background:linear-gradient(135deg,var(--primary),#0F172A); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:16px; display:none; }
.push-banner.show { display:flex; }
.push-banner-text { flex:1; color:#fff; font-size:0.82rem; font-weight:600; }
.push-banner-sub { color:rgba(255,255,255,0.55); font-size:0.72rem; margin-top:2px; }
.push-banner-btn { background:var(--accent); border:none; border-radius:8px; color:#fff; padding:8px 14px; font-family:'Roboto','Cairo',sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; white-space:nowrap; }
.order-modal-overlay { display:none; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; }
.order-modal-overlay.open { display:flex; }
.order-modal { background:#fff; border-radius:24px; width:100%; max-width:500px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.3); animation:slideUp 0.3s ease; }
.order-modal-header { background:linear-gradient(135deg,#0F172A,#0F172A); padding:24px 28px; position:relative; }
.order-modal-title { color:#fff; font-family:'Poppins','Cairo',sans-serif; font-size:1.2rem; font-weight:800; }
.order-modal-price { color:var(--accent); font-size:1.5rem; font-weight:800; margin-top:4px; }
.order-modal-close { position:absolute; top:16px; left:16px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; width:32px; height:32px; color:#fff; cursor:pointer; font-size:1.1rem; }
.order-modal-body { padding:24px 28px; display:flex; flex-direction:column; gap:16px; }
.order-info-row { display:flex; align-items:center; gap:12px; background:var(--accent-light); border-radius:12px; padding:14px; }
.order-info-icon { font-size:1.5rem; }
.order-info-text { font-size:0.85rem; color:var(--primary); font-weight:600; }
.order-info-sub { font-size:0.75rem; color:var(--gray); margin-top:2px; }
/* STATUS BADGES */
.status-pending { background:rgba(245,166,35,0.12); color:#d97706; }
.status-active { background:rgba(34,197,94,0.12); color:#16a34a; }
.status-delivered { background:rgba(59,130,246,0.12); color:#2563eb; }
.status-completed { background:rgba(37,99,235,0.12); color:var(--accent); }
.status-cancelled { background:rgba(239,68,68,0.12); color:#dc2626; }
.user-menu { position:relative; }
.user-avatar-btn { display:flex; align-items:center; gap:10px; background:var(--accent-light); border:2px solid var(--accent); border-radius:50px; padding:6px 16px 6px 8px; cursor:pointer; transition:all 0.2s; }
.user-avatar-btn:hover { background:var(--accent); color:#fff; }
.user-avatar-circle { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; color:#fff; flex-shrink:0; overflow:hidden; }
.user-avatar-circle img { width:100%; height:100%; object-fit:cover; }
.user-name-short { font-weight:700; font-size:0.85rem; color:var(--primary); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-avatar-btn:hover .user-name-short { color:#fff; }
.user-dropdown { position:absolute; top:calc(100% + 10px); left:0; background:#fff; border-radius:14px; box-shadow:0 15px 40px rgba(0,0,0,0.15); border:1.5px solid var(--border); width:220px; z-index:200; overflow:hidden; display:none; animation:fadeDown 0.2s ease; }
.user-dropdown.open { display:block; }
.user-dropdown-header { padding:16px; background:var(--accent-light); border-bottom:1px solid var(--border); }
.user-dropdown-name { font-weight:800; font-size:0.92rem; color:var(--primary); }
.user-dropdown-email { font-size:0.75rem; color:var(--gray); margin-top:2px; }
.user-dropdown-role { display:inline-block; background:var(--accent); color:#fff; font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:50px; margin-top:6px; }
.user-dropdown-items { padding:8px; }
.user-dropdown-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:0.85rem; font-weight:600; color:var(--primary); transition:background 0.15s; }
.user-dropdown-item:hover { background:var(--accent-light); color:var(--accent); }
.user-dropdown-item.danger { color:#dc2626; }
.user-dropdown-item.danger:hover { background:#fef2f2; }
.user-dropdown-divider { height:1px; background:var(--border); margin:4px 8px; }
/* TOAST NOTIFICATION */
.toast-container { position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background:#fff; border-radius:12px; padding:14px 20px; box-shadow:0 8px 30px rgba(0,0,0,0.15); border-right:4px solid var(--accent); display:flex; align-items:center; gap:12px; font-size:0.88rem; font-weight:600; min-width:280px; animation:toastIn 0.3s ease; pointer-events:all; }
.toast.success { border-right-color:#22c55e; }
.toast.error { border-right-color:#ef4444; }
.toast.info { border-right-color:#3b82f6; }
.toast-icon { font-size:1.2rem; }
.toast-text { flex:1; color:var(--primary); }
@keyframes toastIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
/* LOADING SKELETON */
.skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:8px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.service-card.loading .service-img { height:160px; }
.service-card.loading .service-title { height:40px; margin:12px; }
.service-card.loading .service-footer { height:24px; margin:0 12px 12px; }
/* DB STATUS BADGE */
.db-status { display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:600; padding:3px 10px; border-radius:50px; }
.db-status.connected { background:rgba(34,197,94,0.12); color:#16a34a; }
.db-status.demo { background:rgba(245,166,35,0.12); color:#d97706; }
.db-status-dot { width:6px; height:6px; border-radius:50%; }
.db-status.connected .db-status-dot { background:#22c55e; animation:pulse 2s infinite; }
.db-status.demo .db-status-dot { background:#d97706; }
/* ===== ENHANCED STYLES ===== */
/* Smooth scrolling */
html { scroll-behavior: smooth; }
/* Better section backgrounds */
.categories-section { background: var(--light); }
.services-section { background: var(--white); }
.freelancers-section { background: var(--border-light); }
.how-section, .how-it-works-section { background: var(--white); }
.faq-section { background: var(--light); }
/* Improved tabs */
.tab { padding: 8px 20px; border-radius: 50px; border: 1.5px solid var(--border); background: #fff; color: var(--gray); font-family: 'Roboto', 'Cairo', sans-serif; font-size: 0.87rem; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-sm); }
.tab.active, .tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 14px rgba(37,99,235,0.3); }
/* Section titles improvement */
.section-title { font-family: 'Poppins', 'Cairo', sans-serif; font-size: 2.2rem; font-weight: 900; color: var(--primary); margin-bottom: 10px; letter-spacing: -0.02em; }
.section-sub { color: var(--gray); font-size: 1.05rem; margin-bottom: 44px; line-height: 1.7; }
/* Better pricing cards */
.pricing-card { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.pricing-card:hover { transform: translateY(-6px); }
.pricing-card.popular { box-shadow: 0 20px 60px rgba(37,99,235,0.2); }
/* Footer improvements */
footer { background: var(--navy); color: rgba(255,255,255,0.75); }
/* Better filter buttons */
.filter-cat-btn { transition: all 0.2s; }
.filter-cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 12px rgba(37,99,235,0.3); }
/* Freelancer cards */
.freelancer-card { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.freelancer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Badge improvements */
.badge-pro { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.badge-elite { background: linear-gradient(135deg, #7C3AED, #5B21B6); }
/* Input focus states */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
outline: none;
}
/* Search bar improvements */
.search-bar button:hover { background: var(--accent-dark); }
/* CTA section */
.cta-section { background: linear-gradient(135deg, var(--navy) 0%, #1E3A8A 100%); border-radius: var(--radius-lg); }
/* ===================================================
تحسينات الموبايل — الـ Navbar
إصلاح: قطع الأزرار عند تغيير اللغة
إصلاح: عناصر صغيرة يصعب الضغط عليها
=================================================== */
/* حد أدنى لمناطق الضغط على كل الأجهزة */
button, a, [role="button"] {
-webkit-tap-highlight-color: transparent;
}
/* ضمان عدم قطع الـ navbar على أي شاشة */
nav {
box-sizing: border-box;
overflow: visible !important;
}
.nav-right {
flex-shrink: 0 !important;
overflow: visible !important;
}
.nav-actions {
flex-shrink: 0 !important;
}
/* الأزرار الرئيسية — حد أدنى للحجم */
.btn-primary, .btn-outline, .nav-selector-btn {
min-height: 44px;
touch-action: manipulation;
}
@media (max-width: 480px) {
nav { padding: 0 2% !important; gap: 3px !important; }
.nav-selector-btn {
padding: 6px 7px !important;
font-size: 0.72rem !important;
min-height: 40px !important;
min-width: 42px !important;
gap: 2px !important;
}
/* إخفاء أيقونة الكرة الأرضية لتوفير مساحة */
.nav-selector-btn svg:first-child {
display: none !important;
}
.btn-primary {
padding: 7px 10px !important;
font-size: 0.74rem !important;
min-height: 40px !important;
white-space: nowrap !important;
}
/* إخفاء شارة DB تماماً */
.db-status { display: none !important; }
/* تصغير الفاصل */
.nav-divider { margin: 0 1px !important; }
}
/* شاشات صغيرة جداً (أقل من 380px) */
@media (max-width: 380px) {
.logo-text { font-size: 1rem !important; }
.nav-selector-btn {
padding: 5px 6px !important;
font-size: 0.7rem !important;
min-width: 38px !important;
}
.btn-primary {
padding: 6px 8px !important;
font-size: 0.7rem !important;
}
/* إخفاء العملة على أصغر الشاشات */
.nav-selector:nth-child(4) { display: none !important; }
}
/* ===================================================
إصلاح قسم "كيف يعمل" على الموبايل
المشكلة: الخطوات تظهر أفقية ضيقة جداً فتختفي النصوص
=================================================== */
@media (max-width: 768px) {
.how-it-works-section { padding: 50px 5%; }
/* تحويل الـ grid إلى عمودين على الموبايل */
.hiw-steps {
grid-template-columns: 1fr 1fr !important;
gap: 32px 16px !important;
}
/* إخفاء الخط الأفقي الواصل — لا معنى له في العمودين */
.hiw-steps::before { display: none !important; }
.hiw-step { padding: 0 10px; }
.hiw-icon-wrap {
width: 64px;
height: 64px;
font-size: 1.6rem;
margin-bottom: 14px;
}
.hiw-step h3 { font-size: 0.95rem; margin-bottom: 8px; }
.hiw-step p { font-size: 0.8rem; line-height: 1.7; }
}
@media (max-width: 400px) {
/* على الشاشات الصغيرة جداً — عمود واحد */
.hiw-steps {
grid-template-columns: 1fr !important;
gap: 28px !important;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
}
/* =====================================================
✅ حزمة تصحيحات الموبايل الشاملة — My Skill
النقاط المُصلَحة:
1. أزرار FAQ categories
2. بطاقات الخدمات والمستقلين (touch states)
3. زر سكيلي العائم (لا يغطي المحتوى)
4. أزرار باقات Pricing
5. Payment Modal (iOS keyboard + touch)
===================================================== */
/* --------------------------------------------------
1. أزرار فئات FAQ — min-height للضغط المريح
-------------------------------------------------- */
.faq-cat-btn {
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.faq-question {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
.faq-cats {
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.faq-cat-btn {
padding: 9px 18px;
font-size: 0.82rem;
min-height: 44px;
}
.faq-question {
padding: 18px 16px;
min-height: 54px;
}
}
/* --------------------------------------------------
2. بطاقات الخدمات والمستقلين
إزالة hover translateY على اللمس — استبدال بـ active state
-------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
/* إلغاء hover animations على أجهزة اللمس */
.service-card:hover {
transform: none;
box-shadow: var(--shadow-sm);
border-color: var(--border);
}
.freelancer-card:hover {
transform: none;
box-shadow: none;
border-color: var(--border);
}
.freelancer-card:hover::before { opacity: 0; }
/* إضافة active state بدلاً */
.service-card:active {
transform: scale(0.98);
box-shadow: var(--shadow-md);
border-color: rgba(37,99,235,0.3);
transition: transform 0.1s;
}
.freelancer-card:active {
transform: scale(0.98);
border-color: var(--accent);
transition: transform 0.1s;
}
/* تكبير منطقة الضغط على بطاقات الخدمة */
.service-card {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.freelancer-card {
-webkit-tap-highlight-color: transparent;
}
}
@media (max-width: 768px) {
/* جعل الصورة أصغر قليلاً لتوفير مساحة */
.service-img { height: 140px !important; }
.service-body { padding: 12px !important; }
.service-title { font-size: 0.84rem !important; }
/* بطاقة المستقل */
.freelancer-card {
padding: 18px 12px !important;
}
}
/* --------------------------------------------------
3. زر سكيلي العائم — منع تغطية المحتوى السفلي
-------------------------------------------------- */
@media (max-width: 768px) {
.chat-bubble {
bottom: 80px !important; /* ارتفاع أكبر عن حافة الشاشة */
left: 16px !important;
z-index: 400;
}
.chat-window {
bottom: 150px !important;
left: 12px !important;
width: calc(100vw - 24px) !important;
max-height: 65vh !important;
}
/* عندما يكون الكيبورد مفتوحاً — رفع النافذة */
.chat-window.open {
bottom: 150px !important;
}
}
@media (max-width: 480px) {
.chat-bubble {
bottom: 70px !important;
left: 12px !important;
}
.chat-btn {
width: 52px !important;
height: 52px !important;
font-size: 1.3rem !important;
}
}
/* --------------------------------------------------
4. أزرار باقات Pricing — تكبير + touch friendly
-------------------------------------------------- */
.btn-plan {
min-height: 50px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media (hover: none) and (pointer: coarse) {
.btn-plan-pro:hover,
.btn-plan-elite:hover {
transform: none;
box-shadow: none;
}
.btn-plan-pro:active {
transform: scale(0.97);
background: var(--accent-dark);
}
.btn-plan-elite:active {
transform: scale(0.97);
}
.btn-plan-free:active {
background: #e2e8f0;
transform: scale(0.97);
}
}
@media (max-width: 768px) {
.pricing-grid {
grid-template-columns: 1fr !important;
gap: 16px;
max-width: 380px;
margin: 0 auto;
}
.pricing-card {
padding: 28px 22px !important;
}
.btn-plan {
min-height: 52px;
font-size: 1rem;
}
/* بطاقة Elite — تصغير padding على الموبايل */
.pricing-card.elite {
padding: 28px 22px !important;
}
}
/* --------------------------------------------------
5. Payment Modal — تحسين iOS keyboard + touch
-------------------------------------------------- */
@media (max-width: 768px) {
/* منع تحريك الصفحة عند فتح الكيبورد */
.payment-modal {
max-height: 85vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}
/* خطوات الدفع — أكبر للضغط */
.payment-step {
padding: 14px 8px !important;
font-size: 0.72rem !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* خيارات الدفع */
.payment-option {
min-height: 70px !important;
padding: 14px 8px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
.payment-option .pay-icon {
font-size: 1.8rem !important;
margin-bottom: 6px !important;
}
/* حقول الإدخال داخل Modal */
.payment-modal input,
.payment-modal textarea,
.payment-modal select {
font-size: 16px !important; /* منع zoom على iOS */
min-height: 48px !important;
padding: 12px 14px !important;
}
/* زر الإرسال */
.payment-modal .btn-full,
.payment-modal button[type="submit"],
.payment-modal .pay-submit-btn {
min-height: 52px !important;
font-size: 1rem !important;
touch-action: manipulation !important;
}
}
/* --------------------------------------------------
تحسينات عامة إضافية لكل الأزرار على الموبايل
-------------------------------------------------- */
@media (max-width: 768px) {
/* كل الأزرار — منع double-tap zoom */
button, a, [role="button"], input[type="submit"], input[type="button"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* حقول الإدخال — منع zoom على iOS */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
font-size: 16px !important;
}
/* Safe area للشاشات بالـ notch */
.chat-bubble {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
footer {
padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* =====================================================
🚀 تحسينات الأداء — Scroll Animations + Skeleton
===================================================== */
/* حالة ما قبل الظهور */
.service-card,
.freelancer-card,
.hiw-step,
.pricing-card,
.faq-item,
.cat-card,
.how-card,
.admin-stat {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Fallback: إظهار كل شيء إذا لم يعمل JS بعد 0.8 ثانية */
.ms-anim-ready .service-card:not(.ms-visible),
.ms-anim-ready .freelancer-card:not(.ms-visible),
.ms-anim-ready .hiw-step:not(.ms-visible),
.ms-anim-ready .pricing-card:not(.ms-visible),
.ms-anim-ready .faq-item:not(.ms-visible),
.ms-anim-ready .cat-card:not(.ms-visible),
.ms-anim-ready .how-card:not(.ms-visible),
.ms-anim-ready .admin-stat:not(.ms-visible) {
opacity: 0;
transform: translateY(24px);
}
/* بدون class ms-anim-ready — كل شيء ظاهر (JS لم يعمل) */
body:not(.ms-anim-ready) .service-card,
body:not(.ms-anim-ready) .freelancer-card,
body:not(.ms-anim-ready) .hiw-step,
body:not(.ms-anim-ready) .pricing-card,
body:not(.ms-anim-ready) .faq-item,
body:not(.ms-anim-ready) .cat-card,
body:not(.ms-anim-ready) .how-card,
body:not(.ms-anim-ready) .admin-stat {
opacity: 1 !important;
transform: none !important;
}
/* حالة الظهور عند التمرير */
.ms-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* تعطيل animation على أجهزة تفضل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
.service-card,
.freelancer-card,
.hiw-step,
.pricing-card,
.faq-item,
.cat-card,
.how-card,
.admin-stat {
opacity: 1;
transform: none;
transition: none;
}
}
/* تحسين Skeleton shimmer */
.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e8e8e8 37%,
#f0f0f0 63%
);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
border-radius: 8px;
}
@keyframes shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Skeleton للرسائل والطلبات */
.skeleton-conv,
.skeleton-order {
animation: fadeInSkel 0.3s ease;
}
@keyframes fadeInSkel {
from { opacity: 0; }
to { opacity: 1; }
}
/* تحسين أداء الصور — منع layout shift */
img {
content-visibility: auto;
}
.service-img img,
.freelancer-avatar img {
transition: opacity 0.3s ease;
}
/* CSS للصور التي لم تُحمَّل بعد */
img[loading="lazy"] {
opacity: 0;
}
img[loading="lazy"].loaded {
opacity: 1;
transition: opacity 0.4s ease;
}
/* =====================================================
🌙 Dark Mode — prefers-color-scheme
===================================================== */
/* ═══ Dark Mode — body.dark-mode class ═══ */
body.dark-mode {
--primary: #E2E8F0;
--light: #0F172A;
--white: #1E293B;
--border: #2D3748;
--border-light: #1E293B;
--gray: #94A3B8;
--gray-light: #64748B;
--navy: #0A0F1E;
--navy-mid: #0D1117;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.3);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
--accent-light: #1E3A5F;
--accent-mid: #1E3A5F;
/* semantic tokens */
--bg-page: #0F172A;
--bg-card: #1E293B;
--bg-input: #2D3748;
--text-main: #E2E8F0;
--text-sub: #94A3B8;
color-scheme: dark;
}
body.dark-mode { background: var(--bg-page) !important; color: var(--text-main) !important; }
/* Navbar */
body.dark-mode nav { background: rgba(13,17,23,0.95); border-bottom-color: #30363D; }
body.dark-mode .nav-selector-btn { background: #161B22; color: #F1F5F9; border-color: #30363D; }
body.dark-mode .nav-dropdown { background: #161B22; border-color: #30363D; }
body.dark-mode .nav-drop-item { color: #F1F5F9; }
body.dark-mode .nav-drop-item:hover { background: #1C2A3A; }
/* البطاقات */
.service-card,
body.dark-mode .freelancer-card,
body.dark-mode .pricing-card,
body.dark-mode .faq-item,
body.dark-mode .how-card { background: var(--bg-card, #1E293B) !important; border-color: var(--border, #2D3748) !important; }
/* Hero */
body.dark-mode .hero { background: linear-gradient(135deg, #010409 0%, #0D1117 100%); }
/* Sections */
body.dark-mode .services-section,
body.dark-mode .how-it-works-section,
body.dark-mode .faq-section,
body.dark-mode .payment-section { background: var(--bg-page, #0F172A) !important; }
.categories-section,
.freelancers-section,
body.dark-mode .pricing-section { background: #161B22; }
/* Search bar */
body.dark-mode .search-bar { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body.dark-mode .search-bar input { background: transparent; color: #F1F5F9; }
body.dark-mode .search-bar input::placeholder { color: rgba(255,255,255,0.3); }
/* Filter buttons */
body.dark-mode .filter-cat-btn { background: #161B22; color: #8B949E; border-color: #30363D; }
body.dark-mode .filter-cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Forms */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-mode textarea,
body.dark-mode select {
background: var(--bg-input, #2D3748) !important;
color: var(--text-main, #E2E8F0) !important;
border-color: var(--border, #2D3748) !important;
}
/* Modals */
.modal,
.auth-modal,
.order-modal,
.payment-modal,
body.dark-mode .review-modal { background: #161B22; }
/* FAQ */
body.dark-mode .faq-question { background: #161B22; }
body.dark-mode .faq-answer { background: #0D1117; }
/* Chat */
body.dark-mode .chat-window { background: #161B22; border-color: #30363D; }
body.dark-mode .chat-messages { background: #0D1117; }
body.dark-mode .chat-input { background: #0D1117; color: #F1F5F9; border-color: #30363D; }
body.dark-mode .chat-suggestions { background: #161B22; border-color: #30363D; }
body.dark-mode .chat-suggestion { background: #0D1117; border-color: #30363D; color: #8B949E; }
/* Toast */
body.dark-mode .toast { background: #161B22; border-color: #30363D; color: #F1F5F9; }
/* Dashboard */
body.dark-mode .dashboard { background: #161B22; }
body.dark-mode .dash-content { background: #0D1117; }
/* Skeleton في الـ Dark Mode */
body.dark-mode .skeleton {
background: linear-gradient(90deg, #21262D 25%, #30363D 37%, #21262D 63%);
background-size: 400% 100%;
}
/* Footer */
body.dark-mode footer { background: #010409; }
/* Section titles */
body.dark-mode .section-title { color: #F1F5F9; }
body.dark-mode .section-sub { color: #8B949E; }
/* CTA */
body.dark-mode .cta-section { background: linear-gradient(135deg, #1C2A3A, #1E3A5F); }
/* Pricing elite card يبقى كما هو */
body.dark-mode .pricing-card.elite { background: linear-gradient(135deg, #0F172A, #1E293B); }
/* ===== إصلاح بطاقات التصنيف في Dark Mode ===== */
body.dark-mode .cat-card {
background: #161B22 !important;
border-color: #30363D !important;
color: #F1F5F9 !important;
}
body.dark-mode .cat-card:hover {
background: #1C2A3A !important;
border-color: var(--accent) !important;
}
body.dark-mode .cat-name { color: #F1F5F9 !important; }
body.dark-mode .cat-count { color: #8B949E !important; }
/* ===== إصلاح قسم "كيف يعمل" في Dark Mode ===== */
body.dark-mode .how-section { background: var(--navy) !important; }
body.dark-mode .how-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .how-card h3 { color: #F1F5F9 !important; }
body.dark-mode .how-card p { color: rgba(255,255,255,0.5) !important; }
body.dark-mode .how-section .section-title { color: #F1F5F9 !important; }
body.dark-mode .how-section .section-sub { color: rgba(255,255,255,0.45) !important; }
/* ===== إصلاح بطاقات الخدمات ===== */
body.dark-mode .service-card { background: #161B22 !important; border-color: #30363D !important; }
body.dark-mode .service-title { color: #F1F5F9 !important; }
body.dark-mode .service-rating { color: #8B949E !important; }
body.dark-mode .seller-name { color: #F1F5F9 !important; }
/* ===== إصلاح Stats ===== */
body.dark-mode .stat-number { color: var(--accent) !important; }
body.dark-mode .stat-label { color: #8B949E !important; }
/* ===== إصلاح Pricing ===== */
body.dark-mode .plan-name { color: #F1F5F9 !important; }
body.dark-mode .plan-desc { color: #8B949E !important; }
body.dark-mode .plan-feature { color: #F1F5F9 !important; }
body.dark-mode .plan-price { color: #F1F5F9 !important; }
/* ===== إصلاح FAQ ===== */
body.dark-mode .faq-question { color: #F1F5F9 !important; }
body.dark-mode .faq-answer,
body.dark-mode .faq-answer p { color: #8B949E !important; }
/* ===== إصلاح Footer ===== */
body.dark-mode footer { color: #8B949E; }
body.dark-mode footer a { color: rgba(255,255,255,0.85) !important; }
body.dark-mode footer a:hover { color: #F1F5F9 !important; }
body.dark-mode .footer-title { color: #F1F5F9 !important; }
/* ===== Section titles عامة ===== */
body.dark-mode .section-title { color: #F1F5F9 !important; }
body.dark-mode .section-sub { color: #8B949E !important; }
/* =====================================================
✨ تحسينات UX إضافية
===================================================== */
/* Focus visible للـ keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* تحسين cursor على العناصر التفاعلية */
.service-card,
.freelancer-card,
.cat-card,
.pricing-card,
.faq-question {
cursor: pointer;
}
/* Smooth scroll للصفحة كاملة */
html {
scroll-behavior: smooth;
}
/* تحسين اختيار النص */
::selection {
background: var(--accent);
color: #fff;
}
/* تحسين Toast notifications */
.toast {
backdrop-filter: blur(8px);
}
/* تحسين رسائل الخطأ في الـ forms */
.form-error {
color: #dc2626;
font-size: 0.78rem;
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* تحسين Empty States */
.empty-state {
text-align: center;
padding: 50px 20px;
color: var(--gray);
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 14px;
opacity: 0.6;
}
.empty-state-title {
font-weight: 700;
font-size: 1rem;
margin-bottom: 8px;
color: var(--primary);
}
.empty-state-sub {
font-size: 0.85rem;
line-height: 1.7;
}
/* زر Scroll to Top */
.scroll-top-btn {
position: fixed;
bottom: 90px;
left: 90px;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: none;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: 0 4px 16px rgba(37,99,235,0.35);
transition: all 0.3s;
z-index: 300;
touch-action: manipulation;
}
.scroll-top-btn.visible {
display: flex;
animation: fadeIn 0.3s ease;
}
.scroll-top-btn:hover { transform: translateY(-3px); }
@media (max-width: 768px) {
.scroll-top-btn { bottom: 80px; left: 16px; }
}
/* ── Modals Dark Mode ── */
body.dark-mode .auth-modal { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .auth-modal .auth-form-right { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .order-modal { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .order-modal-body { background: var(--bg-card, #1E293B) !important; color: var(--text-main, #E2E8F0) !important; }
body.dark-mode .payment-modal { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .payment-modal .payment-body { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .review-modal { background: var(--bg-card, #1E293B) !important; }
body.dark-mode .review-modal-body { background: var(--bg-card, #1E293B) !important; color: var(--text-main, #E2E8F0) !important; }
body.dark-mode .order-modal-label,
body.dark-mode .order-modal-price-label { color: var(--text-sub, #94A3B8) !important; }
body.dark-mode .payment-step { color: var(--text-sub, #94A3B8) !important; border-color: var(--border, #2D3748) !important; }
body.dark-mode .payment-step.active { color: var(--accent) !important; }
/* ── Cloudflare Turnstile — ضمان الظهور ── */
.cf-turnstile,
.cf-turnstile iframe,
.cf-turnstile > div {
overflow: visible !important;
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
}
.auth-form .cf-turnstile {
display: block !important;
min-height: 65px;
margin-bottom: 8px;
}
/* ── TURNSTILE FIX v2 — overflow ancestors ── */
.auth-form { overflow: visible !important; }
.cf-turnstile { position: relative; z-index: 9999; }
/* =====================================================
📱 MOBILE UX IMPROVEMENTS — MySkill
=====================================================
الإصلاحات المُطبَّقة:
1. Hero — تقليل padding + إصلاح stats bar
2. Services grid — عمودان على 480px بدل 1
3. Filter bar — إعادة تنظيم على الموبايل
4. Section titles — clamp() لكل الأحجام
5. Dashboard stats — responsive grid
6. Auth modal — safe-area-inset-bottom
7. Pricing grid — ضبط على 320px
8. Scroll-to-top — موضع صحيح
9. Category text — قراءة أفضل
10. How-it-works — safe area
11. Search bar — منع التجاوز
12. PWA banner — لا تداخل مع chat
===================================================== */
/* ─── 1. Hero ─── */
@media (max-width: 768px) {
.hero {
padding: 48px 5% 32px !important;
gap: 20px !important;
}
.hero-stats {
gap: 12px !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
.stat {
min-width: 80px;
}
.stat-num {
font-size: 1.3rem !important;
}
.stat-label {
font-size: 0.7rem !important;
}
}
@media (max-width: 480px) {
.hero {
padding: 40px 4% 28px !important;
}
/* Stats — 2×2 grid على الشاشات الصغيرة */
.hero-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
width: 100% !important;
}
.stat {
background: rgba(255,255,255,0.06);
border-radius: 10px;
padding: 10px 12px;
text-align: center;
min-width: unset !important;
}
}
@media (max-width: 360px) {
.hero h1 { font-size: 1.55rem !important; }
.hero p { font-size: 0.82rem !important; }
}
/* ─── 2. Services grid — عمودان على 480px ─── */
@media (max-width: 480px) {
.services-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.service-img { height: 110px !important; }
.service-body { padding: 8px 10px !important; }
.service-title { font-size: 0.78rem !important; line-height: 1.3; }
.service-meta { font-size: 0.72rem !important; }
.service-price { font-size: 0.85rem !important; }
}
/* ─── 3. Filter bar ─── */
@media (max-width: 768px) {
.filter-bar {
flex-direction: column !important;
gap: 8px !important;
align-items: stretch !important;
}
.filter-sort {
width: 100% !important;
}
.filter-sort select {
width: 100% !important;
min-height: 44px !important;
font-size: 0.85rem !important;
}
/* Price range — أفقي جنباً إلى جنب */
.price-range-wrap {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
.price-range-wrap input[type="number"] {
flex: 1 !important;
min-width: 0 !important;
}
}
/* ─── 4. Section titles — clamp() ─── */
@media (max-width: 768px) {
.section-title {
font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
line-height: 1.3 !important;
}
.section-sub {
font-size: clamp(0.82rem, 3vw, 0.95rem) !important;
}
}
/* ─── 5. Dashboard stats grid ─── */
@media (max-width: 768px) {
.dash-stats {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.dash-stat-num {
font-size: 1.4rem !important;
}
.dash-quick-actions {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 8px !important;
}
.dash-action-btn {
padding: 12px 8px !important;
}
.dash-action-icon { font-size: 1.3rem !important; }
.dash-action-label { font-size: 0.72rem !important; }
}
@media (max-width: 400px) {
.dash-stats {
grid-template-columns: 1fr 1fr !important;
}
.dash-quick-actions {
grid-template-columns: 1fr 1fr !important;
}
}
/* ─── 6. Auth modal — safe-area + padding ─── */
@media (max-width: 768px) {
.auth-body {
padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 16px)) !important;
}
.auth-submit {
min-height: 52px !important;
font-size: 1rem !important;
touch-action: manipulation !important;
}
.auth-field label {
font-size: 0.85rem !important;
margin-bottom: 5px !important;
display: block;
}
.auth-field input,
.auth-field select {
min-height: 48px !important;
padding: 12px 14px !important;
border-radius: 10px !important;
}
/* Google button — touch friendly */
.auth-google {
min-height: 50px !important;
font-size: 0.9rem !important;
}
}
/* ─── 7. Pricing — ضبط 320px ─── */
@media (max-width: 340px) {
.pricing-grid {
max-width: 100% !important;
padding: 0 !important;
}
.pricing-card {
padding: 22px 16px !important;
}
}
/* ─── 8. Scroll-to-top — موضع صحيح ─── */
@media (max-width: 768px) {
.scroll-top-btn {
bottom: 140px !important; /* فوق chat bubble */
left: 16px !important;
width: 38px !important;
height: 38px !important;
font-size: 1rem !important;
}
}
/* ─── 9. Category — نص أكثر قراءة ─── */
@media (max-width: 768px) {
.cat-name {
font-size: 0.76rem !important;
line-height: 1.3 !important;
word-break: break-word;
}
.cat-count {
font-size: 0.68rem !important;
}
.cat-card {
padding: 12px 6px !important;
}
}
@media (max-width: 360px) {
.cat-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.cat-icon { font-size: 1.4rem !important; }
.cat-name { font-size: 0.72rem !important; }
}
/* ─── 10. How-it-works — safe area ─── */
@media (max-width: 768px) {
.how-it-works-section,
.how-section {
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ─── 11. Search bar — منع التجاوز ─── */
@media (max-width: 768px) {
.search-bar {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden;
}
.search-bar input {
min-width: 0 !important;
flex: 1 !important;
}
}
/* ─── 12. PWA banner — لا تداخل ─── */
@media (max-width: 768px) {
#pwaBanner {
bottom: 160px !important; /* فوق chat bubble */
}
}
/* ─── تحسينات عامة إضافية ─── */
/* Freelancers grid — عمودان على 360px */
@media (max-width: 360px) {
.freelancers-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin: 0 auto;
}
}
/* Footer — padding أكبر على الموبايل */
@media (max-width: 480px) {
.footer-grid {
gap: 28px !important;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
footer {
padding: 40px 5% calc(32px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* Notif panel — منع التجاوز */
@media (max-width: 480px) {
.notif-panel {
width: calc(100vw - 24px) !important;
right: 12px !important;
left: 12px !important;
max-height: 75vh !important;
overflow-y: auto !important;
}
}
/* Order modal على الموبايل */
@media (max-width: 480px) {
.order-modal {
padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 16px)) !important;
}
}
/* أزرار Hero — تحسين المسافة */
@media (max-width: 480px) {
.hero-actions {
gap: 8px !important;
}
.btn-hero {
padding: 14px 20px !important;
font-size: 0.95rem !important;
}
}
/* منع أي نص من الخروج عن الـ viewport */
@media (max-width: 768px) {
h1, h2, h3, h4, p, span, div {
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
}
}
/* تحسين الـ active state لكل الأزرار */
@media (hover: none) and (pointer: coarse) {
.btn-hero:active,
.btn-primary:active,
.btn-outline:active,
.auth-submit:active {
transform: scale(0.97) !important;
transition: transform 0.1s !important;
}
.cat-card:active {
transform: scale(0.96) !important;
border-color: var(--accent) !important;
transition: transform 0.1s !important;
}
.how-card:active,
.pricing-card:active {
transform: scale(0.98) !important;
transition: transform 0.1s !important;
}
}
/* ─── Overscroll behavior — منع pull-to-refresh العرضي ─── */
body {
overscroll-behavior-y: contain;
}
.auth-body,
.dash-content,
.chat-messages,
.notif-panel {
overscroll-behavior: contain;
}
/* =====================================================
🪪 KYC — التحقق من الهوية
===================================================== */
/* منطقة رفع الملفات */
.kyc-upload-zone {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: #fafafa;
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.kyc-upload-zone:hover {
border-color: var(--accent);
background: var(--accent-light);
}
.kyc-upload-zone.drag-over {
border-color: var(--accent);
background: var(--accent-light);
transform: scale(1.01);
}
.kyc-upload-zone.has-file {
border-color: #22c55e;
background: #f0fdf4;
border-style: solid;
}
/* بطاقة KYC في لوحة المستقلين */
.kyc-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
}
.kyc-badge-pending { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }
.kyc-badge-approved { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.kyc-badge-rejected { background: #fee2e2; color: #9f1239; border: 1px solid #fecdd3; }
.kyc-badge-none { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
/* بطاقة طلب KYC في الأدمن */
.kyc-admin-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
padding: 16px;
margin-bottom: 10px;
transition: background 0.2s;
}
.kyc-admin-card:hover {
background: rgba(255,255,255,0.08);
}
.kyc-doc-thumb {
width: 80px;
height: 56px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.15);
cursor: pointer;
transition: transform 0.2s;
}
.kyc-doc-thumb:hover {
transform: scale(1.05);
}
/* شارة موثّق على بطاقة المستقل */
.verified-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: #dcfce7;
color: #14532d;
border: 1px solid #86efac;
border-radius: 50px;
font-size: 0.68rem;
font-weight: 700;
padding: 2px 8px;
}
/* Modal عرض صورة الوثيقة */
.kyc-img-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.kyc-img-lightbox img {
max-width: 90vw;
max-height: 85vh;
border-radius: 12px;
object-fit: contain;
}
/* Dark mode */
body.dark-mode .kyc-upload-zone {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.15);
}
body.dark-mode .kyc-upload-zone:hover {
background: rgba(37,99,235,0.15);
border-color: var(--accent);
}
body.dark-mode .kyc-upload-zone.has-file {
background: rgba(34,197,94,0.1);
border-color: #22c55e;
}
@media (max-width: 768px) {
.kyc-doc-thumb { width: 60px; height: 44px; }
.kyc-admin-card { padding: 12px; }
}
/* =====================================================
🪪 KYC STYLES
===================================================== */
/* منطقة رفع الصور */
.kyc-upload-zone {
border: 2px dashed var(--border);
border-radius: 14px;
padding: 24px 16px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: #fafafa;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.kyc-upload-zone:hover {
border-color: var(--accent);
background: #EFF6FF;
}
body.dark-mode .kyc-upload-zone {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.15);
}
body.dark-mode .kyc-upload-zone:hover {
border-color: var(--accent);
background: rgba(37,99,235,0.06);
}
/* حالات KYC */
#kycStatePending,
#kycStateApproved,
#kycStateRejected {
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* dark mode للنماذج */
body.dark-mode #tab-kyc .auth-field select,
body.dark-mode #tab-kyc select {
background: rgba(255,255,255,0.05);
color: #fff;
border-color: rgba(255,255,255,0.15);
}
body.dark-mode #tab-kyc .auth-error { background: rgba(220,38,38,0.15); }
/* responsive */
@media (max-width: 480px) {
#tab-kyc [style*="grid-template-columns:repeat(3,1fr)"] {
grid-template-columns: 1fr !important;
}
.kyc-upload-zone { padding: 16px 10px; }
}
/* ── PERFORMANCE HINTS ── */
.service-card,
.freelancer-card,
.pricing-card,
.cat-card,
.how-card,
.payment-card {
will-change: transform;
contain: layout style;
}
.ms-reveal {
will-change: opacity, transform;
}
.hero-right-card {
will-change: transform;
}
/* GPU acceleration for nav */
nav {
will-change: transform;
backface-visibility: hidden;
}
/* Optimize font rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
/* Reduce paint areas */
.modal,
.auth-modal,
#authModal,
.service-detail-modal {
contain: layout style paint;
}
/* content-visibility for off-screen sections */
/* content-visibility removed — caused iOS scroll glitches */
.faq-section,
.payment-section,
.how-section,
.pricing-section {
content-visibility: visible;
}
/* ================================================================
📱 MOBILE SCROLL FIX — منع قفل scroll الصفحة
================================================================ */
/* Ensure html/body are scrollable when no modal is open */
html {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* iOS Safari fix — prevent momentum scroll freeze */
body {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
}
/* Modal scrollable content on mobile */
.auth-body,
.dash-content,
.payment-modal,
.order-modal,
.review-modal {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
/* Prevent double-tap zoom on interactive elements */
button, a, input, select, textarea {
touch-action: manipulation;
}
/* Fix: modals that are display:none should NOT lock scroll */
.auth-modal-overlay[style*="none"],
.dashboard-overlay:not(.open),
.modal-overlay:not(.open) {
pointer-events: none;
}
/* KYC steps — correct ordering in RTL */
#kycStateNone [style*="grid-template-columns:repeat(3,1fr)"] {
direction: ltr;
}
#kycStateNone [style*="grid-template-columns:repeat(3,1fr)"] > div {
direction: rtl;
}
/* dash-title responsive */
.dash-title {
font-size: clamp(0.9rem, 2vw, 1.3rem) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}