/**
 * Dubai Jobs Plus - Main Stylesheet
 * Clean, modern, mobile-responsive design
 */

/* CSS Variables */
:root {
    --color-primary: #0a66c2;
    --color-primary-dark: #084e96;
    --color-primary-light: #e8f3fc;
    --color-secondary: #7c7c7c;
    --color-success: #4d934d;
    --color-success-light: #d2f7d0;
    --color-danger: #dc3545;
    --color-white: #ffffff;
    --color-gray-50: #f9f9f9;
    --color-gray-100: #f3f3f3;
    --color-gray-200: #e3e3e3;
    --color-gray-300: #d5d5d5;
    --color-gray-400: #b6b6b6;
    --color-gray-500: #848484;
    --color-gray-600: #636363;
    --color-gray-700: #404040;
    --color-gray-800: #2d2d2d;
    --color-gray-900: #1a1a1a;
    --font-primary: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 50%;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-gray-200);
    min-height: 100vh;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--color-gray-900); }

.container { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 var(--spacing-md); }
.main-content { padding: var(--spacing-md) 0; }

.header { background-color: var(--color-white); padding: var(--spacing-sm) 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.header-content { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; }
.logo-icon { font-size: 1.75rem; line-height: 1; }
.logo-text { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-gray-900); }

.card { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-md); overflow: hidden; }
.card-body { padding: var(--spacing-lg); }

.search-section { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-md); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-sm); }
.search-tagline { text-align: center; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-gray-100); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); color: var(--color-secondary); font-size: var(--font-size-sm); font-weight: 600; }
.search-tagline i { margin-right: var(--spacing-xs); }
.search-title { color: var(--color-gray-500); font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); font-weight: 400; text-align: center; }

.filter-row { display: flex; gap: var(--spacing-sm); overflow-x: auto; padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-md); scrollbar-width: thin; }
.filter-row::-webkit-scrollbar { height: 4px; }
.filter-row::-webkit-scrollbar-thumb { background-color: var(--color-gray-300); border-radius: var(--radius-full); }

.filter-btn { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); color: var(--color-gray-600); font-size: var(--font-size-base); white-space: nowrap; transition: all var(--transition-fast); cursor: pointer; }
.filter-btn:hover { background-color: var(--color-gray-50); border-color: var(--color-gray-400); }
.filter-btn.active { background-color: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn .flag { width: 20px; height: auto; }
.filter-btn i.fa-caret-down { margin-left: var(--spacing-xs); font-size: var(--font-size-sm); }
.filter-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.search-input-wrapper { position: relative; }
.search-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: var(--font-size-base); transition: all var(--transition-fast); background-color: var(--color-white); }
.search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

.autocomplete-container { position: relative; }
.autocomplete-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; max-height: 300px; overflow-y: auto; background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); }
.autocomplete-item { padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; transition: background-color var(--transition-fast); color: var(--color-gray-700); }
.autocomplete-item:hover, .autocomplete-item.active { background-color: var(--color-primary-light); }

.company-header { text-align: center; padding: var(--spacing-lg); background-color: var(--color-white); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-sm); }
.company-logo { width: 80px; height: 80px; border-radius: var(--radius-lg); border: 1px solid var(--color-gray-300); padding: var(--spacing-xs); margin-bottom: var(--spacing-md); object-fit: contain; display: inline-block; }
.company-name { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--spacing-xs); text-transform: uppercase; }
.company-stats { color: var(--color-gray-500); font-size: var(--font-size-sm); }

.results-header { text-align: center; padding: var(--spacing-md); background-color: var(--color-primary-light); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); color: var(--color-primary-dark); font-weight: 600; }

.listing-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-gray-200); transition: background-color var(--transition-fast); }
.listing-card:last-child { border-bottom: none; }
.listing-card:hover { background-color: var(--color-gray-50); }
.listing-avatar { flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--radius-full); object-fit: cover; }
.listing-avatar-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--radius-full); background-color: var(--color-gray-100); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.detail-icon { font-size: 3rem; margin-bottom: var(--spacing-sm); }
.listing-content { flex: 1; min-width: 0; }
.listing-title { font-size: var(--font-size-base); font-weight: 700; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.listing-title a { color: var(--color-gray-900); }
.listing-title a:hover { color: var(--color-primary); }
.listing-title .linkedin-icon { color: #0a66c2; font-size: var(--font-size-lg); }
.listing-subtitle { color: var(--color-gray-600); font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); }
.listing-location { color: var(--color-gray-500); font-size: var(--font-size-sm); }
.job-type-badge { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); margin-left: var(--spacing-sm); }
.listing-action { flex-shrink: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; transition: all var(--transition-fast); cursor: pointer; text-decoration: none; }
.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-primary-dark); color: var(--color-white); }
.btn-secondary { background-color: var(--color-gray-600); color: var(--color-white); }
.btn-secondary:hover { background-color: var(--color-gray-700); color: var(--color-white); }
.btn-outline { background-color: transparent; border-color: var(--color-gray-300); color: var(--color-gray-600); }
.btn-outline:hover { background-color: var(--color-gray-50); border-color: var(--color-gray-400); }
.btn-success { background-color: var(--color-success); color: var(--color-white); }
.btn-apply { background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }
.btn-apply:hover { background-color: var(--color-primary-dark); color: var(--color-white); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.employer-detail { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-sm); }
.employer-header { text-align: center; margin-bottom: var(--spacing-lg); }
.employer-avatar { width: 100px; height: 100px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: var(--spacing-md); object-fit: cover; }
.employer-name { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--spacing-xs); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); }
.employer-position { font-size: var(--font-size-base); color: var(--color-gray-600); margin-bottom: var(--spacing-xs); }
.employer-location { color: var(--color-gray-500); font-size: var(--font-size-sm); }

.job-description { background-color: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: var(--spacing-lg); margin: var(--spacing-lg) 0; }
.job-description h3 { text-align: center; margin-bottom: var(--spacing-md); color: var(--color-gray-800); }
.job-description-content { line-height: 1.8; color: var(--color-gray-700); }
.job-description-content h2 { font-size: var(--font-size-base); margin: var(--spacing-md) 0 var(--spacing-sm); }

.apply-form { background-color: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-top: var(--spacing-lg); }
.apply-form h3 { text-align: center; margin-bottom: var(--spacing-lg); color: var(--color-gray-800); }
.form-group { margin-bottom: var(--spacing-md); }
.form-label { display: block; margin-bottom: var(--spacing-xs); font-weight: 600; color: var(--color-gray-700); }
.form-control { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: var(--font-size-base); transition: all var(--transition-fast); }
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.form-control.is-invalid { border-color: var(--color-danger); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-error { color: var(--color-danger); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); display: none; }
.success-message { background-color: var(--color-success-light); color: var(--color-gray-800); padding: var(--spacing-md); border-radius: var(--radius-md); text-align: center; font-weight: 600; display: none; }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-md); flex-wrap: wrap; }
.pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--spacing-sm); background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); color: var(--color-gray-600); font-size: var(--font-size-sm); transition: all var(--transition-fast); text-decoration: none; }
.pagination-btn:hover { background-color: var(--color-gray-50); border-color: var(--color-gray-400); color: var(--color-gray-700); }
.pagination-btn.active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; }
.modal-backdrop.show { display: block; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden; z-index: 1001; display: none; }
.modal.show { display: block; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-gray-200); }
.modal-title { font-size: var(--font-size-base); font-weight: 600; }
.modal-close { background: none; border: none; font-size: var(--font-size-xl); color: var(--color-gray-500); cursor: pointer; padding: var(--spacing-xs); line-height: 1; }
.modal-close:hover { color: var(--color-gray-700); }
.modal-search { padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--color-gray-200); }
.modal-search .search-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); }
.modal-body { padding: var(--spacing-md) var(--spacing-lg); max-height: 60vh; overflow-y: auto; }
.modal-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); text-decoration: none; transition: background-color var(--transition-fast); }
.modal-item:hover { background-color: var(--color-gray-50); }
.modal-item:last-child { border-bottom: none; }
.modal-item-icon { width: 24px; text-align: center; color: var(--color-primary); }

.footer { background-color: var(--color-gray-800); color: var(--color-gray-300); padding: var(--spacing-lg) 0; margin-top: var(--spacing-2xl); }
.footer-content { text-align: center; font-size: var(--font-size-sm); }
.footer a { color: var(--color-gray-300); }
.footer a:hover { color: var(--color-white); }

.back-to-top { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; background-color: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all var(--transition-base); z-index: 99; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: var(--color-primary-dark); }

.ad-container { margin: var(--spacing-md) 0; text-align: center; }

.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--color-gray-300); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: var(--spacing-2xl); color: var(--color-gray-500); }
.empty-state-icon { font-size: 3rem; margin-bottom: var(--spacing-md); color: var(--color-gray-400); }

.text-center { text-align: center; }
.text-muted { color: var(--color-gray-500); }
.d-none { display: none; }
.d-block { display: block; }
.mt-2 { margin-top: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-md); }
.w-100 { width: 100%; }

/* Legal Pages (Terms, Privacy) */
.legal-page { padding: var(--spacing-xl); }
.legal-page h1 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); }
.legal-page h2 { font-size: var(--font-size-lg); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); color: var(--color-gray-800); padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--color-gray-200); }
.legal-page h3 { font-size: var(--font-size-base); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); color: var(--color-gray-700); }
.legal-page p { margin-bottom: var(--spacing-md); line-height: 1.7; color: var(--color-gray-700); }
.legal-page ul { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); }
.legal-page ul li { margin-bottom: var(--spacing-xs); line-height: 1.6; color: var(--color-gray-700); list-style-type: disc; }
.legal-page a { color: var(--color-primary); text-decoration: underline; }
.legal-page a:hover { color: var(--color-primary-dark); }
.legal-updated { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-bottom: var(--spacing-lg); font-style: italic; }
.legal-footer { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 2px solid var(--color-gray-200); background-color: var(--color-gray-50); padding: var(--spacing-lg); border-radius: var(--radius-md); }
.legal-footer p { margin-bottom: 0; font-weight: 600; color: var(--color-gray-800); }

@media (max-width: 768px) {
    :root { --font-size-base: 0.9375rem; --spacing-md: 0.875rem; --spacing-lg: 1.25rem; }
    .container { padding: 0 var(--spacing-sm); }
    .listing-card { flex-wrap: wrap; }
    .listing-action { width: 100%; margin-top: var(--spacing-sm); }
    .listing-action .btn { width: 100%; }
    .employer-detail { padding: var(--spacing-md); }
    .pagination { gap: 2px; }
    .pagination-btn { min-width: 32px; height: 32px; font-size: var(--font-size-xs); }
    .modal { width: 95%; }
    .filter-btn { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }
}
@media (max-width: 480px) {
    .listing-avatar { width: 40px; height: 40px; }
    .company-logo { width: 60px; height: 60px; }
    .employer-avatar { width: 80px; height: 80px; }
}