/* --- Modernized Styles --- */
:root {
  --fcm-primary-color: #0d6efd;
  --fcm-primary-hover: #0b5ed7;
  --fcm-secondary-color: #6c757d;
  --fcm-secondary-hover: #5a6268;
  --fcm-light-gray: #f8f9fa;
  --fcm-border-color: #e5e7eb;
  --fcm-text-color: #212529;
  --fcm-text-light: #495057;
  --fcm-text-placeholder: #9ca3af;
  --fcm-star-color: #f5b301;
  --fcm-success-bg: #d1e7dd;
  --fcm-success-border: #a3cfbb;
  --fcm-success-text: #0a3622;
  --fcm-error-bg: #f8d7da;
  --fcm-error-border: #f5c6cb;
  --fcm-error-text: #721c24;
  --fcm-border-radius: 12px;
  --fcm-shadow: 0 8px 24px rgba(0,0,0,0.08);
  --fcm-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* General Layout & Typography */
.fcm-map-wrap, .fcm-list-wrap, .fcm-profile-wrap {
  font-family: var(--fcm-font-family);
  color: var(--fcm-text-color);
  background: #ffffff; /* Ensure a light background for the wrapper */
}
.fcm-map-wrap, .fcm-list-wrap {
  border-radius: 16px;
  box-shadow: var(--fcm-shadow);
  overflow: hidden;
}
.fcm-profile-wrap { max-width: 800px; margin: 0 auto; }
.fcm-profile { padding: 24px; display: grid; gap: 16px; box-shadow: var(--fcm-shadow); background: #fff; border-radius: 14px;}
.fcm-map { width:100%; height:60vh; }
@media (max-width:768px){ .fcm-map{ height: 70vh; } }

/* Toolbar & Forms - Theme Independent Styling */
.fcm-toolbar {
  display:flex; gap:12px; padding:12px; background: var(--fcm-light-gray); align-items:center; flex-wrap:wrap; border-bottom: 1px solid var(--fcm-border-color);
}

/* Ensure all frontend inputs have a light theme and proper text color */
.fcm-toolbar input, .fcm-profile input, .fcm-profile select, .fcm-profile textarea, .fcm-modal-content textarea {
  padding:10px 14px; 
  border:1px solid var(--fcm-border-color); 
  border-radius:8px; 
  font-size:14px; 
  background-color: #fff !important; /* Override theme styles */
  color: var(--fcm-text-color) !important; /* Override theme styles */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; 
  width: 100%; 
  box-sizing: border-box;
}

/* Placeholder text styling */
.fcm-toolbar input::placeholder, .fcm-profile input::placeholder, .fcm-profile textarea::placeholder, .fcm-modal-content textarea::placeholder {
  color: var(--fcm-text-placeholder) !important;
  opacity: 1; /* Firefox */
}

/* Responsive filter fields */
.fcm-toolbar .fcm-input-wrap {
  flex: 1 1 180px; /* Allow items to grow and shrink, with a base size */
}

.fcm-toolbar input[type="number"] {
    flex: 0 1 120px; /* Give radius a smaller, fixed base size */
}

.fcm-toolbar .fcm-btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
}

@media (max-width: 600px) {
    .fcm-toolbar .fcm-input-wrap,
    .fcm-toolbar input[type="number"],
    .fcm-toolbar .fcm-btn {
        flex-basis: 100%; /* Stack all items on small screens */
    }
}


.fcm-profile input:focus, .fcm-profile select:focus, .fcm-profile textarea:focus, .fcm-toolbar input:focus, .fcm-modal-content textarea:focus {
  border-color: var(--fcm-primary-color) !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
  outline: none;
}
.fcm-profile label { font-weight: 500; margin-bottom: -8px; color: var(--fcm-text-color) !important; }
.fcm-profile h3 { margin-top: 1.5em; color: var(--fcm-text-color) !important; }
.fcm-profile h3:first-of-type { margin-top: 0; }
.fcm-profile p { color: var(--fcm-text-light); margin: 0.5em 0 1em; }

/* Buttons */
.fcm-btn {
  padding:10px 16px; border-radius:8px; background: var(--fcm-primary-color); color:#fff; border:none; cursor:pointer; font-weight: 500; font-size: 14px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fcm-btn:hover { background: var(--fcm-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.fcm-btn.secondary { background: var(--fcm-secondary-color); }
.fcm-btn.secondary:hover { background: var(--fcm-secondary-hover); }
.fcm-btn:disabled { background:#a0a0a0; cursor: not-allowed; transform: none; box-shadow: none; }

/* Modal Animation */
@keyframes fcm-modal-pop-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.fcm-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:9999;
  opacity:0; transition: opacity 0.3s ease; backdrop-filter: blur(4px);
}
.fcm-modal.show { display:flex; opacity:1; }
.fcm-modal-content {
  background:#fff; padding:24px; border-radius:var(--fcm-border-radius); width:min(520px,92vw);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transform: scale(0.95); opacity: 0;
}
.fcm-modal.show .fcm-modal-content { animation: fcm-modal-pop-in 0.3s ease forwards; }
.fcm-close { float:right; cursor:pointer; font-weight:700; font-size: 24px; line-height: 1; opacity: 0.5; transition: opacity 0.2s; }
.fcm-close:hover { opacity: 1; }
.fcm-modal-content h3 { color: var(--fcm-text-color) !important; margin-top: 0; }
.fcm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1em; }

/* Job & Rating styles */
.fcm-jobs-wrap, .fcm-ratings-wrap { margin-top: 2em; }
.fcm-job-item { border-top: 1px solid var(--fcm-border-color); padding: 1.5em 0; }
.fcm-job-item:first-of-type { border-top: none; padding-top: 0.5em; }
.fcm-job-item h4 { margin: 0 0 0.8em 0; }
.fcm-job-item p { margin: 0.3em 0; }
.fcm-rating-form { margin-top: 1em; display: grid; gap: 10px; }
.fcm-star-rating { display: inline-block; direction: rtl; }
.fcm-star-rating input[type=radio] { display: none; }
.fcm-star-rating label { color: #ddd !important; font-size: 2em; cursor: pointer; transition: color 0.2s ease; }
.fcm-star-rating input[type=radio]:checked ~ label, .fcm-star-rating label:hover, .fcm-star-rating label:hover ~ label { color: var(--fcm-star-color) !important; }

/* Notices */
.fcm-notice { padding:14px 16px; border-radius:8px; margin-bottom: 1.5em; border-width: 1px; border-style: solid; }
.fcm-notice.success { background:var(--fcm-success-bg); border-color:var(--fcm-success-border); color: var(--fcm-success-text); }
.fcm-notice.error { background:var(--fcm-error-bg); border-color:var(--fcm-error-border); color: var(--fcm-error-text); }

/* Freelancer List & Profile Job Table */
.fcm-freelancers-table-wrap { padding: 10px; }
.fcm-freelancers-table { width: 100%; border-collapse: collapse; }
.fcm-freelancers-table th, .fcm-freelancers-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--fcm-border-color); color: var(--fcm-text-light); }
.fcm-freelancers-table th { font-weight: 600; background-color: var(--fcm-light-gray); color: var(--fcm-text-color); }
.fcm-freelancers-table tbody tr { transition: background-color 0.2s ease, opacity 0.4s ease, transform 0.4s ease; opacity: 0; transform: translateY(10px); }
.fcm-freelancers-table tbody tr.fcm-visible { opacity: 1; transform: translateY(0); }
.fcm-freelancers-table tbody tr:last-child td { border-bottom: none; }
.fcm-freelancers-table tbody tr:hover { background-color: #f9fafb; }
.fcm-freelancers-table .fcm-btn { padding: 8px 12px; font-size: 13px; }

/* Pagination */
.fcm-pagination { margin-top: 1.5em; text-align: center; }
.fcm-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 2px; border: 1px solid var(--fcm-border-color); border-radius: 8px; text-decoration: none; color: var(--fcm-primary-color); transition: background-color 0.2s, color 0.2s; }
.fcm-pagination .page-numbers:hover { background-color: #f0f3ff; }
.fcm-pagination .page-numbers.current { background-color: var(--fcm-primary-color); color: #fff; border-color: var(--fcm-primary-color); }

/* Autocomplete */
.fcm-input-wrap { 
  position: relative; 
  flex-grow: 1;
}
.fcm-autocomplete-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1010; background: #fff; border: 1px solid var(--fcm-border-color); border-top: none;
  border-radius: 0 0 var(--fcm-border-radius) var(--fcm-border-radius); box-shadow: 0 8px 16px rgba(0,0,0,.1);
  box-sizing: border-box; max-height: 200px; overflow-y: auto;
  transform-origin: top center;
  animation: fcm-fade-in 0.2s ease;
}
@keyframes fcm-fade-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.fcm-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--fcm-text-color); }
.fcm-autocomplete-item:hover { background: #f0f0f0; }

/* Admin Users List Tabs */
.wrap .subsubsub { margin-bottom: 1em; }
.fcm-users-list { clear: both; }

/* Map Popups */
.leaflet-popup-content-wrapper { border-radius: 10px !important; }
.leaflet-popup-content { font-family: var(--fcm-font-family); font-size: 14px !important; }
.fcm-popup-contact { background: var(--fcm-primary-color); color: white; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-top: 8px; width: 100%; transition: background-color 0.2s ease; }
.fcm-popup-contact:hover { background: var(--fcm-primary-hover); }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    /* Responsive Table to Card Layout - FLEXBOX IMPLEMENTATION */
    .fcm-list-wrap .fcm-freelancers-table thead,
    .fcm-profile-wrap .fcm-freelancers-table thead {
        display: none;
    }
    .fcm-list-wrap .fcm-freelancers-table tr,
    .fcm-profile-wrap .fcm-freelancers-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--fcm-border-color);
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
    }
    .fcm-list-wrap .fcm-freelancers-table td,
    .fcm-profile-wrap .fcm-freelancers-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border-bottom: 1px dotted var(--fcm-border-color);
        padding: 10px 5px;
    }
    .fcm-list-wrap .fcm-freelancers-table td:last-child,
    .fcm-profile-wrap .fcm-freelancers-table td:last-child {
        border-bottom: none;
    }
    .fcm-list-wrap .fcm-freelancers-table td::before,
    .fcm-profile-wrap .fcm-freelancers-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        padding-right: 15px;
        color: var(--fcm-text-color);
    }
}

@media (max-width: 600px) {
    /* Responsive Buttons */
    .fcm-btn {
        padding: 9px 14px;
        font-size: 13px;
    }
    .fcm-modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    .fcm-modal-actions .fcm-btn {
        width: 100%;
        text-align: center;
    }
    .fcm-modal-actions .fcm-btn.secondary {
        order: 2; /* Put cancel button last */
    }
}