/* local-job-post-form.css
   Modern "app-like" popup form styles for local-job-post
   Place this file in the same folder as your PHP/JS and enqueue it.
*/

/* बेसिक CSS variables — रंग/स्पेसिंग आसानी से बदलें */
:root{
  --ljp-bg: #ffffff;
  --ljp-panel: #f7fbfc;
  --ljp-border: #c9d6dd;
  --ljp-accent: #0b6b78; /* primary */
  --ljp-accent-2: #0f8b9a;
  --ljp-muted: #6b7e86;
  --ljp-radius: 18px;
  --ljp-radius-sm: 8px;
  --ljp-shadow: 0 8px 28px rgba(9,20,28,0.12);
  --ljp-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* बेसिक सफाई */
.ljp-postbox-wrapper { font-family: var(--ljp-font); }
.ljp-postbox { display:flex; align-items:center; gap:12px; cursor:pointer; max-width:420px; margin:8px 0; }
.ljp-left-avatar img, .ljp-header-avatar img { border-radius:50%; display:block; }
.ljp-avatar-placeholder { width:48px; height:48px; border-radius:50%; background:var(--ljp-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; }

/* main "Post your job ads" pill */
.ljp-post-input {
  background:var(--ljp-bg);
  border:1px solid var(--ljp-border);
  padding:12px 14px;
  border-radius:28px;
  flex:1;
  box-shadow: 0 2px 6px rgba(11,107,120,0.04);
}
.ljp-placeholder { color:var(--ljp-accent); font-weight:600; }

/* Overlay */
.ljp-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,12,15,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 99999;
  padding: 22px;
}

/* Card */
.ljp-popup-card {
  width: 100%;
  max-width: 380px; /* mobile-app width */
  background: linear-gradient(180deg, var(--ljp-panel), var(--ljp-bg));
  border-radius: var(--ljp-radius);
  padding: 18px;
  box-shadow: var(--ljp-shadow);
  border: 1px solid rgba(11,107,120,0.07);
  position: relative;
}

/* Close button */
.ljp-close-popup {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ljp-muted);
  cursor: pointer;
}

/* Header */
.ljp-popup-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.ljp-header-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; }
.ljp-header-avatar img { width:100%; height:100%; object-fit:cover; }
.ljp-header-name { font-weight:700; color:var(--ljp-accent); }

/* Form fields */
.ljp-field { margin-bottom:12px; }
.ljp-field label { display:block; font-size:13px; color:var(--ljp-muted); margin-bottom:6px; }
.ljp-field input[type="text"],
.ljp-field textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--ljp-border);
  border-radius: var(--ljp-radius-sm);
  background: #fff;
  font-size:14px;
  color:#123238;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow .12s, border-color .12s;
}
.ljp-field textarea { resize: vertical; min-height:80px; }

/* focus */
.ljp-field input:focus,
.ljp-field textarea:focus {
  border-color: var(--ljp-accent-2);
  box-shadow: 0 4px 14px rgba(15,139,154,0.08);
}

/* inline row (mobile two-col look) */
.ljp-row-inline { display:flex; gap:10px; flex-wrap:wrap; }
.ljp-col { flex:1 1 0; min-width:140px; }
.ljp-col-half { flex: 1 1 calc(50% - 5px); }

/* submit row */
.ljp-submit-row { display:flex; justify-content:flex-end; margin-top:8px; }
.ljp-button { background: var(--ljp-accent); color:#fff; border:none; padding:8px 14px; border-radius:12px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(11,107,120,0.12); }
.ljp-button[disabled] { opacity:0.6; cursor:not-allowed; box-shadow:none; }

/* errors */
.ljp-error { color:#b02a37; font-size:12px; margin-top:6px; min-height:14px; }

/* Suggestions dropdown */
.ljp-suggestions {
  position: relative;
  display:none;
  margin-top:6px;
}
.ljp-suggestions[data-for] { position: absolute; left:0; right:0; z-index: 30; }
.ljp-suggest-item {
  background: #fff;
  padding:8px 10px;
  border:1px solid var(--ljp-border);
  border-radius:10px;
  margin-bottom:6px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(9,20,28,0.05);
  font-size:14px;
  color:#0f3b45;
}
.ljp-suggest-item:hover { transform: translateY(-1px); }

/* toast */
.ljp-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 38px;
  background: var(--ljp-accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(9,20,28,0.18);
  z-index: 100000;
}

/* prevent body scroll while popup open */
body.ljp-no-scroll { overflow: hidden; }

/* small screens adjustments */
@media (max-width:420px){
  .ljp-popup-card { max-width: 360px; padding:16px; border-radius:16px; }
  .ljp-header-name { font-size:15px; }
  .ljp-col-half { flex-basis: 48%; }
}

/* accessibility focus outline */
#ljp-open-post-popup:focus, .ljp-button:focus, .ljp-close-popup:focus {
  outline: 3px solid rgba(11,107,120,0.12);
  outline-offset: 2px;
}