/**
 * ==============================================================================
 * منصة صيانة أونلاين — Upwork-Style Design System
 * ==============================================================================
 */
:root {
    /* Upwork Green Primary */
    --color-primary: #14a800;
    --color-primary-hover: #108a00;
    --color-primary-dark: #0d6e00;
    --color-primary-light: #f2fff0;
    --color-primary-border: #b2dfac;

    /* Accent */
    --color-accent: #f59e0b;
    --color-accent-hover: #d97706;

    /* Upwork Footer (dark charcoal) */
    --color-footer-bg: #1a1a1a;
    --color-footer-border: rgba(255,255,255,0.1);
    --color-footer-card-bg: rgba(255,255,255,0.05);
    --color-footer-card-border: rgba(255,255,255,0.08);
    --color-footer-text: #d1d5db;
    --color-footer-title: #ffffff;

    /* Sync legacy variables */
    --color-brand: var(--color-primary);
    --color-brand-hover: var(--color-primary-hover);
    --color-brand-light: var(--color-primary-light);
    --color-brand-border: var(--color-primary-border);
}

/* ==============================================================================
   GLOBAL BASE
   ============================================================================== */
body, html {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #ffffff !important;
    color: #101828 !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, select, textarea, label {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #101828;
}

.text-white, h1.text-white, h2.text-white, h3.text-white, h4.text-white, p.text-white, span.text-white, a.text-white, button.text-white {
    color: #ffffff !important;
}
.text-white\/85, .text-white\/90, .text-white\/80, .text-white\/75 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==============================================================================
   Text Contrast — Upwork sharp dark text
   ============================================================================== */
.text-slate-300 { color: #6b7280 !important; }
.text-slate-400 { color: #4b5563 !important; }
.text-slate-500 { color: #374151 !important; }
.text-slate-600 { color: #1f2937 !important; }
.text-slate-700 { color: #111827 !important; }
.text-slate-800 { color: #0d1117 !important; }
.text-slate-900 { color: #0a0d12 !important; }

/* ==============================================================================
   UPWORK ARBITRARY TAILWIND CLASSES (CRITICAL FOR BUTTONS & CARDS)
   ============================================================================== */
/* Backgrounds */
.bg-\[\#101828\] { background-color: #101828 !important; }
.bg-\[\#14a800\] { background-color: #14a800 !important; }
.bg-\[\#108a00\] { background-color: #108a00 !important; }
.bg-\[\#e4f8dd\] { background-color: #e4f8dd !important; }
.bg-\[\#f0fff0\] { background-color: #f0fff0 !important; }
.bg-\[\#f2f7f2\] { background-color: #f2f7f2 !important; }
.bg-\[\#0c1410\] { background-color: #0c1410 !important; }
.bg-\[\#0d1612\] { background-color: #0d1612 !important; }
.bg-\[\#141414\] { background-color: #141414 !important; }
.bg-black { background-color: #000000 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-transparent { background-color: transparent !important; }

/* Hover Backgrounds */
.hover\:bg-black:hover { background-color: #000000 !important; }
.hover\:bg-\[\#108a00\]:hover { background-color: #108a00 !important; }
.hover\:bg-\[\#14a800\]:hover { background-color: #14a800 !important; }
.hover\:bg-\[\#f0fff0\]:hover { background-color: #f0fff0 !important; }
.hover\:bg-\[\#e4f6e1\]:hover { background-color: #e4f6e1 !important; }
.hover\:bg-slate-50:hover { background-color: #f8fafc !important; }
.hover\:bg-slate-100:hover { background-color: #f1f5f9 !important; }

/* Text Colors */
.text-\[\#14a800\] { color: #14a800 !important; }
.hover\:text-\[\#14a800\]:hover { color: #14a800 !important; }
.group:hover .group-hover\:text-\[\#14a800\] { color: #14a800 !important; }
.text-\[\#101828\] { color: #101828 !important; }
.hover\:text-white:hover { color: #ffffff !important; }

/* Borders */
.border-\[\#14a800\] { border-color: #14a800 !important; }
.hover\:border-\[\#14a800\]:hover { border-color: #14a800 !important; }
.group:hover .group-hover\:border-\[\#14a800\] { border-color: #14a800 !important; }
.border-\[\#e4ebe4\] { border-color: #e4ebe4 !important; }
.border-\[\#c4ebb9\] { border-color: #c4ebb9 !important; }
.border-\[\#bbf7d0\] { border-color: #bbf7d0 !important; }
.border-\[\#b2dfac\] { border-color: #b2dfac !important; }
.border-\[\#d5e7d5\] { border-color: #d5e7d5 !important; }

/* Gradients */
.from-\[\#14a800\] {
    --tw-gradient-from: #14a800 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 168, 0, 0)) !important;
}
.to-\[\#108a00\] {
    --tw-gradient-to: #108a00 !important;
}

/* ==============================================================================
   Legacy Mappings (Primary / Brand)
   ============================================================================== */
.bg-primary, .bg-brand, .bg-brand-primary,
.bg-\[\#000094\], .bg-\[\#1a68aa\], .bg-\[\#13385e\], .yp-blue-bg {
    background-color: var(--color-primary) !important;
}

.hover\:bg-primary-hover:hover, .hover\:bg-brand-hover:hover,
.hover\:bg-primary:hover, .hover\:bg-\[\#000075\]:hover,
.hover\:bg-\[\#145389\]:hover, .hover\:bg-\[\#1a68aa\]:hover,
.yp-blue-bg:hover {
    background-color: var(--color-primary-hover) !important;
}

.text-primary, .text-brand, .text-primary-brand,
.text-\[\#000094\], .text-\[\#1a68aa\], .text-\[\#13385e\], .yp-blue {
    color: var(--color-primary) !important;
}

.hover\:text-primary:hover, .hover\:text-brand:hover,
.hover\:text-\[\#000094\]:hover, .hover\:text-\[\#145389\]:hover,
.group:hover .group-hover\:text-\[\#000094\] {
    color: var(--color-primary-hover) !important;
}

.border-primary, .border-brand, .border-primary-brand,
.border-\[\#000094\], .border-\[\#1a68aa\], .border-\[\#13385e\] {
    border-color: var(--color-primary) !important;
}

.hover\:border-primary:hover, .hover\:border-\[\#000094\]:hover,
.group:hover .group-hover\:border-\[\#000094\] {
    border-color: var(--color-primary) !important;
}

/* Focus States */
.focus\:border-primary:focus, .focus\:border-brand:focus,
.focus\:border-\[\#000094\]:focus, .focus\:border-\[\#14a800\]:focus {
    border-color: var(--color-primary) !important;
}
.focus-within\:border-primary:focus-within,
.focus-within\:border-brand:focus-within,
.focus-within\:border-\[\#000094\]:focus-within,
.focus-within\:border-\[\#14a800\]:focus-within {
    border-color: var(--color-primary) !important;
}
.ring-primary, .ring-brand, .ring-\[\#000094\],
.focus\:ring-\[\#000094\]:focus,
.focus-within\:ring-\[\#000094\]:focus-within {
    --tw-ring-color: rgba(20, 168, 0, 0.25) !important;
}
.accent-\[\#000094\] { accent-color: var(--color-primary) !important; }

/* ==============================================================================
   HEADER — Clean white Upwork style
   ============================================================================== */
header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
header nav a {
    font-size: 14px;
    font-weight: 600;
    color: #374151 !important;
    transition: color 0.15s ease;
}
header nav a:hover {
    color: var(--color-primary) !important;
}

/* ==============================================================================
   BUTTONS — Upwork pill style
   ============================================================================== */
.so-btn-primary, a.so-btn-primary, button.so-btn-primary {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 24px !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    border: 2px solid var(--color-primary) !important;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.so-btn-primary:hover, a.so-btn-primary:hover, button.so-btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* bg-primary buttons */
.bg-primary { background-color: var(--color-primary) !important; }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }

/* ==============================================================================
   CARDS — Clean white with subtle border
   ============================================================================== */
article {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    transition: box-shadow 0.2s, border-color 0.2s;
}
article:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}

/* ==============================================================================
   CATEGORY CARDS
   ============================================================================== */
a[href*="search?super_category"],
a[href*="search?cat"] {
    transition: all 0.2s ease;
}

/* ==============================================================================
   SKILL PILLS — Upwork tag chips
   ============================================================================== */
.inline-block.bg-slate-100, .inline-block.bg-slate-100\/80 {
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 100px !important;
    color: #374151 !important;
}

/* ==============================================================================
   FORM INPUTS — Clean borders
   ============================================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], select, textarea {
    border-color: #d1d5db !important;
    border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,168,0,0.12) !important;
}

/* ==============================================================================
   SECTIONS — Upwork clean alternating white/near-white
   ============================================================================== */
.bg-slate-50 { background-color: #fafafa !important; }
.bg-slate-100 { background-color: #f5f5f5 !important; }

/* ==============================================================================
   FOOTER
   ============================================================================== */
.siyanah-footer-root {
    background-color: #1a1a1a !important;
    color: #d1d5db !important;
    border-top: 1px solid #2d2d2d !important;
    margin-top: 0 !important;
}
.siyanah-footer-badge:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.siyanah-footer-root nav a { color: #9ca3af; transition: color 0.15s ease; }
.siyanah-footer-root nav a:hover { color: #ffffff !important; }

/* ==============================================================================
   GRADIENTS (Keep working, mapped to green)
   ============================================================================== */
.from-\[\#000094\] {
    --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(20,168,0,0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-\[\#000094\] {
    --tw-gradient-to: var(--color-primary) var(--tw-gradient-to-position) !important;
}

/* ==============================================================================
   SELECTION
   ============================================================================== */
::selection { background: #d1fac4; color: #14a800; }