/* =====================================================================
 *  freelancer.css — Book Your Freelancer
 *
 *  Everything this module looks like lives here and is prefixed bf-.
 *  It is deliberately NOT in member.css: the module keeps its own screen,
 *  its own script and its own styles, so a change to the portal's look
 *  cannot quietly change this one, and vice versa.
 *
 *  The screen sits inside the member page and replaces it — no second
 *  window, no new tab, no navigation away from the login page.
 * ===================================================================== */

.bf-module {
  min-height: 100vh;
  background: #f4f7fb;
}

.bf-back {
  font-size: 14px; font-weight: 600;
  color: #cbd5e8; text-decoration: none;
}
.bf-back:hover { color: #fff; text-decoration: underline; }

/* The screen itself is a fixed, full-viewport flex box with
   overflow:hidden (member.css).  So THIS element is the one that has to
   scroll: it is the flex child, and a flex child will not shrink below
   its content unless min-height:0 says so — without it the form was
   simply clipped at the bottom of the viewport, and its own Send button
   was never reachable. */
.bf-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* ---- the module carried INTO the portal's pane --------------------
   pickService() moves this very node out of #viewFreelancer and into
   the dashboard's pane, so Book Your Freelancer opens under the common
   bar and the card lane like every other option.  The 1040px column
   and the inner scroller belong to the module's own full-screen view:
   inside the pane the PORTAL's panel scrolls, so the column gives way
   to the whole area and nothing here may clip what it holds. */
.mp-pane .bf-main {
  max-width: none;
  overflow: visible;
}

.bf-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px;
  font-size: 26px; font-weight: 700; color: #0b2a5b;
}
.bf-h .ico { font-size: 24px; }

.bf-lead {
  margin: 0 0 16px;
  font-size: 16px; font-weight: 600; color: #33415a;
}

.bf-body {
  font-size: 14.5px; color: #475569; line-height: 1.7;
  background: #fff; border: 1px solid #e6ecf5;
  border-radius: 14px; padding: 18px 20px;
}
.bf-body p { margin: 0 0 12px; }
.bf-body ul { margin: 0; padding-left: 20px; }
.bf-body li { margin-bottom: 6px; }

/* ---- the options: a NAV BAR across the top of the screen ----------
   Above everything else, sticky while the form scrolls underneath, and
   scrolling sideways when the five do not fit (it never wraps — a menu
   that has wrapped is a menu you cannot see the end of).  Same dark
   bar the portal's own header uses, because it IS the portal's header
   for this screen.  Choosing one fills the panel below it; nothing
   here navigates and nothing opens a window. */
.bf-opts {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px;
  margin: 0 -20px 20px;
  padding: 0 10px;
  background: linear-gradient(135deg, #0d1c3a, #16294f);
  box-shadow: 0 6px 18px rgba(13, 28, 58, .18);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;                 /* it is a menu, not a carousel */
}
.bf-opts::-webkit-scrollbar { display: none; }

.bf-opt {
  flex: none;
  display: inline-flex; flex-direction: column; gap: 1px; justify-content: center;
  text-align: left; padding: 11px 14px 9px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; color: #d5e0f2; font: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.bf-opt:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.bf-opt:focus-visible { outline: 2px solid #f0b429; outline-offset: -3px; }
.bf-opt.on {
  background: rgba(255, 255, 255, .14);
  border-bottom-color: #f0b429; color: #fff;
}
.bf-opt-l { font-weight: 700; font-size: 13.5px; color: inherit; }
.bf-opt-bn { font-size: 12.5px; color: #9fb3d1; }
.bf-opt.on .bf-opt-bn { color: #eaf1fc; }
/* the hint is on the button as its tooltip, not as a third line —
   a one-line menu stays a one-line menu at any width */
.bf-opt-h { display: none; font-size: 12.5px; color: #7b8aa3; line-height: 1.5; }

.bf-panel {
  margin-top: 14px; padding: 18px;
  border: 1px solid #e6ecf5; border-radius: 14px;
  background: #fff; min-height: 120px;
}
.bf-msg { margin: 0; font-size: 14.5px; line-height: 1.7; color: #475569; }
.bf-msg.err { color: #b42318; }
.bf-msg.soon { border-left: 3px solid #d9a441; padding-left: 14px; }

.bf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bf-row {
  padding: 13px 15px;
  border: 1px solid #e6ecf5; border-radius: 12px;
  background: #fbfcfe;
}
.bf-row-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 700; color: #0b2a5b;
}
.bf-row-t { margin-top: 6px; font-size: 15px; font-weight: 600; color: #16233b; }
.bf-row-m { margin-top: 3px; font-size: 13px; color: #7b8aa3; }

/* status chip — Bengali first, English beneath, for all fourteen */
.bf-st {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  padding: 3px 9px; border-radius: 999px;
  background: #eef2f8; font-style: normal;
}
.bf-st b { font-size: 12.5px; color: #0b2a5b; }
.bf-st i { font-size: 10.5px; color: #7b8aa3; font-style: normal; }

/* ==================================================================== *
 *  THE POST FORM (§3)                                                  *
 * ==================================================================== */
.bf-form-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bf-form-h b { font-size: 16px; color: #0b2a5b; }
.bf-form-h span { font-size: 12.5px; color: #7b8aa3; }
.bf-form-h p.bf-form-lead { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: #475569; }
.bf-form-h p.bf-form-lead span { display: block; margin-top: 6px; font-size: 12.5px; color: #8b98ad; }

.bf-ladder {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: #eaf6ee; border: 1px solid #bfe3cc;
  font-size: 13.5px; line-height: 1.5; color: #14532d;
}
.bf-ladder b { display: block; font-size: 13.5px; }
.bf-ladder span { display: block; font-size: 12px; color: #4b7a5d; }

.bf-fs { border: 1px solid #e4e9f1; border-radius: 12px; padding: 14px; margin: 0 0 14px; }
.bf-fs legend {
  font-size: 13px; font-weight: 700; color: #0b2a5b;
  padding: 0 6px; letter-spacing: .01em;
}

.bf-field { display: block; margin-bottom: 12px; }
.bf-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.bf-l .bn { font-size: 13.5px; font-weight: 600; color: #16233b; }
.bf-l .bn i { color: #d0493f; font-style: normal; }
.bf-l .en { font-size: 11.5px; color: #8b98ad; }
.bf-hint { display: block; font-size: 11.5px; color: #8b98ad; margin-top: 3px; }

.bf-form input[type="text"], .bf-form input[type="date"], .bf-form input[type="time"],
.bf-form input[type="number"], .bf-form select, .bf-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid #d7dee9; border-radius: 9px;
  font: inherit; font-size: 14px; color: #16233b; background: #fff;
}
.bf-form input:focus, .bf-form select:focus, .bf-form textarea:focus {
  outline: none; border-color: #2f6bd8; box-shadow: 0 0 0 3px rgba(47,107,216,.14);
}
.bf-form textarea { resize: vertical; line-height: 1.5; }

/* the field grid the sections lay themselves out in: three columns when
   there is room, two on a tablet, one on a phone — auto-fit decides, so
   nothing is ever squeezed and nothing overflows sideways.  The grid's
   own fields drop the block margin they would otherwise carry. */
.bf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 13px 16px;
  align-items: start;
}
.bf-grid > * { min-width: 0; }
.bf-grid > .bf-field { margin-bottom: 0; }
.bf-span2 { grid-column: 1 / -1; }

/* the "not in the list — type it yourself" box: hidden until the door
   is chosen, and a dashed line so it reads as an escape hatch rather
   than a second answer */
.bf-escape {
  display: block; box-sizing: border-box; width: 100%;
  margin-top: 6px; padding: 9px 11px;
  border: 1px dashed #b9c6da; border-radius: 9px;
  font: inherit; font-size: 14px; color: #16233b; background: #fdfefe;
}
.bf-escape[hidden] { display: none; }
.bf-escape:focus {
  outline: none; border-style: solid; border-color: #2f6bd8;
  box-shadow: 0 0 0 3px rgba(47, 107, 216, .14);
}

/* latitude / longitude / the button, in one row that wraps */
.bf-gps { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-gps input { flex: 1 1 130px; min-width: 0; }
.bf-gps .bf-geo { flex: 1 1 100%; margin-bottom: 0; }

/* "who sees it first" — the two-languages promise, then the door */
.bf-who { display: grid; gap: 10px; }
.bf-who p {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: #f7faff; border: 1px solid #e4ecf8;
  font-size: 13.5px; line-height: 1.6; color: #33415a;
}
.bf-who p b { color: #0b2a5b; }
.bf-who p span { display: block; margin-top: 6px; font-size: 12.5px; color: #7b8aa3; }
.bf-who .bf-check.bf-wide { margin: 0; }

.bf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bf-total {
  margin: 2px 0 0; padding: 8px 11px; border-radius: 9px;
  background: #f4f7fc; font-size: 13px; color: #465570;
}
.bf-total b { color: #0b2a5b; }

.bf-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.bf-check {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 8px 10px; border: 1px solid #e4e9f1; border-radius: 9px; background: #fbfcfe;
}
.bf-check input { margin-top: 2px; accent-color: #2f6bd8; }
.bf-check span { font-size: 13px; color: #16233b; line-height: 1.35; }
.bf-check small { display: block; font-size: 11px; color: #8b98ad; }
.bf-check:hover { border-color: #c8d3e4; }
.bf-wide { margin: 4px 0 14px; }

.bf-geo, .bf-send {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px;
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
}
.bf-geo { background: #f4f7fc; border-color: #dde4ef; color: #2b3a56; margin-bottom: 4px; }
.bf-geo:hover { background: #eaeff7; }
.bf-send { background: #1f6f43; color: #fff; }
.bf-send:hover { background: #195c37; }
.bf-send:disabled { opacity: .6; cursor: default; }

.bf-geo-note { margin: 4px 0 0; font-size: 12.5px; color: #4b7a5d; min-height: 1em; }

.bf-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #7b8aa3; }
.bf-note span { display: block; font-size: 11.5px; color: #9aa7bb; }

.bf-form-msg { font-size: 13.5px; line-height: 1.55; min-height: 1.2em; margin-top: 8px; }
.bf-form-msg.err {
  padding: 9px 12px; border-radius: 9px;
  background: #fdeeec; border: 1px solid #f5c9c3; color: #a12c22;
}
.bf-form-msg:not(.err) { color: #465570; }

/* ---- what it looked like once it landed ------------------------ */
.bf-done { padding: 4px 0; }
.bf-done-h {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 17px; font-weight: 700; color: #14532d; margin-bottom: 10px;
}
.bf-done-h span { font-size: 12.5px; font-weight: 600; color: #4b7a5d; }
.bf-id-l { margin: 0 0 8px; font-size: 13px; color: #7b8aa3; }
.bf-done-l { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; color: #465570; }
.bf-done-l li { margin-bottom: 5px; }
.bf-done-a { display: grid; gap: 8px; margin-top: 12px; }

/* ==================================================================== *
 *  THE DASHBOARD STRIP + THE ALERT BAR                                 *
 * ==================================================================== */
.bf-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0 4px; }
.bf-dash-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border: 1px solid #e4e9f1; border-radius: 11px; background: #fbfcfe;
}
.bf-dash-cell .k { font-size: 12.5px; font-weight: 700; color: #0b2a5b; }
.bf-dash-cell .v { font-size: 21px; font-weight: 800; color: #16233b; line-height: 1.1; }
.bf-dash-cell .v small { font-size: 12px; font-weight: 700; color: #7b8aa3; margin-left: 3px; }
.bf-dash-cell .s { font-size: 11.5px; color: #8b98ad; }
.bf-dash.has-offers .bf-dash-cell:first-child {
  background: #fff7e6; border-color: #f4cf7a;
}
.bf-dash.has-offers .bf-dash-cell:first-child .v { color: #b26a00; }

/* ---- "Post a Job / ফ্রিল্যান্সার খুঁজুন" ---------------------------
   The module's own entry row, spelled exactly as the marketplace's nav
   spells it — because that is the wording the poster already knows.
   It is a header for THIS module and points at nothing else: pressing
   it fills the panel underneath with the module's own form, in place. */
.bf-postjob {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  width: 100%; margin: 16px 0 0; padding: 9px 6px 8px;
  background: transparent;
  border: 0; border-bottom: 3px solid #f0b429;
  border-radius: 0;
  font: inherit; font-size: 15px; color: #0b2a5b;
  text-align: left; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.bf-postjob .ico { font-size: 14px; line-height: 1; }
.bf-postjob .en { font-weight: 800; }
.bf-postjob .sep { color: #94a3b8; font-weight: 600; }
.bf-postjob .bn { font-weight: 700; color: #33415a; }
.bf-postjob:hover { background: #f7faff; }
.bf-postjob:focus-visible { outline: 2px solid #0b2a5b; outline-offset: 3px; }
.bf-postjob.on { background: #f7faff; box-shadow: inset 3px 0 0 #0b2a5b; }
.bf-postjob.on .bn { color: #0b2a5b; }

/* the bar that blinks, chimes and speaks */
.bf-alertbar {
  margin: 10px 0 0; padding: 11px 13px; border-radius: 10px;
  background: #fff7e6; border: 1px solid #f4cf7a;
  font-size: 13.5px; color: #7a4a00; line-height: 1.5;
}
.bf-alertbar b { display: block; font-size: 14px; color: #a35c00; margin-bottom: 2px; }

/* the toast that rides over WHICHEVER view is showing */
.bf-toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9999; max-width: min(560px, calc(100vw - 24px));
  box-sizing: border-box; padding: 12px 42px 12px 14px;
  border-radius: 12px; background: #fff7e6; border: 2px solid #f0b429;
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
  font-size: 13.5px; line-height: 1.5; color: #7a4a00;
  animation: bfToastBlink 1.1s ease-in-out infinite;
}
.bf-toast b { display: block; font-size: 14.5px; color: #a35c00; margin-bottom: 2px; }
.bf-toast-x {
  position: absolute; top: 4px; right: 6px; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 20px; line-height: 1; color: #a35c00; cursor: pointer;
}
.bf-toast-x:hover { background: rgba(163,92,0,.14); }
@keyframes bfToastBlink {
  0%, 100% { border-color: #f0b429; background: #fff7e6; }
  50%      { border-color: #d97706; background: #ffe9b3; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-toast { animation: none; }
}

/* the Offers tab itself, until it has been looked at */
.bf-opt.bf-blink { animation: bfBlink 1.1s ease-in-out infinite; }
@keyframes bfBlink {
  0%, 100% { background: #fff7e6; border-color: #f4cf7a; box-shadow: 0 0 0 0 rgba(244,207,122,.9); }
  50%      { background: #ffe9b3; border-color: #f0b429; box-shadow: 0 0 0 7px rgba(244,207,122,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bf-opt.bf-blink { animation: none; border-color: #f0b429; }
}

/* ---- offers: the round badges and the "be first" clock --------- */
.bf-row.hot { border-left: 3px solid #f0b429; }
.bf-clock { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #b26a00; }
.bf-round {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.bf-round.r1 { background: #eaf6ee; color: #14532d; }
.bf-round.r2 { background: #eef2f8; color: #465570; }

/* ---- phone --------------------------------------------------------
   One column, 16px fields (so iOS never zooms the viewport the moment a
   box takes focus), the nav scrolling sideways instead of wrapping, and
   every tap target tall enough for a thumb. */
@media (max-width: 640px) {
  .bf-main { padding: 0 12px 44px; }

  .bf-opts { margin: 0 -12px 16px; padding: 0 6px; gap: 0; }
  .bf-opt { padding: 11px 12px 9px; }
  .bf-opt-l { font-size: 13px; }
  .bf-opt-bn { font-size: 12px; }

  /* the module's own copy of the portal top bar, tightened to fit */
  .bf-module .mp-top { padding: 10px 12px; gap: 8px; }
  .bf-module .mp-top-brand { font-size: 14px; gap: 8px; }
  .bf-module .mp-top-brand img { width: 34px; height: 34px; }
  .bf-module .mp-top-brand i { font-size: 10.5px; }
  .bf-back { font-size: 13px; white-space: nowrap; }

  .bf-h { font-size: 21px; }
  .bf-lead { font-size: 15px; }
  .bf-body { padding: 14px; }
  .bf-dash { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .bf-panel { padding: 14px; }
  .bf-grid { grid-template-columns: 1fr; gap: 12px; }
  .bf-fs { padding: 12px 11px; }
  .bf-checks { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .bf-postjob { padding: 11px 6px 10px; font-size: 14.5px; }

  .bf-form input[type="text"], .bf-form input[type="date"], .bf-form input[type="time"],
  .bf-form input[type="number"], .bf-form select, .bf-form textarea,
  .bf-escape, .bf-gps input {
    font-size: 16px; padding: 10px 11px;
  }
  .bf-send { padding: 13px 14px; font-size: 15px; }
  .bf-geo { padding: 12px 14px; font-size: 15px; }
  .bf-l .bn { font-size: 14px; }
  .bf-l .en { font-size: 12px; }
  .bf-note { font-size: 12.5px; }
}

/* a 320px handset: the nav and the headings still have to fit */
@media (max-width: 380px) {
  .bf-main { padding: 0 10px 40px; }
  .bf-opts { margin: 0 -10px 14px; padding: 0 4px; }
  .bf-opt { padding: 10px 10px 8px; }
  .bf-h { font-size: 19px; }
  .bf-h .ico { font-size: 20px; }
  .bf-panel { padding: 12px; }
}