/* ==========================================================================
   WBPWA — member portal (member.html)
   --------------------------------------------------------------------------
   One card, five states: the membership number, the pass key from the
   mail, the password path, the password the member chooses, and the
   member's own page.  Shares the verification card's look (verify.css)
   so both public member surfaces read as one family.
   ========================================================================== */

/* The hidden attribute MUST win.  Author rules like .mp-dash{display:flex}
   or .mp-photo{display:block} outrank the browser's [hidden]{display:none},
   so without this the dashboard could never be hidden: an expired session
   left a BLANK full-screen dashboard stuck over the login form (and the
   broken photo icon showing), with no way back in. */
[hidden] { display: none !important; }

.mp-wrap { max-width: 640px; margin: 46px auto 70px; padding: 0 18px; }

.mp-card {
  background: #fff; border: 1px solid rgba(13, 28, 58, .1);
  border-radius: 18px; box-shadow: 0 16px 40px rgba(13, 28, 58, .1);
  padding: 34px 32px;
}

.mp-head { text-align: center; margin-bottom: 24px; }
.mp-head h1 { margin: 0 0 8px; font-size: 25px; color: #0d1c3a; }
.mp-head p { margin: 0; color: #64748b; font-size: 15px; }

/* ---- forms ---- */

.mp-form { text-align: left; }
.mp-form label { display: block; font-size: 13.5px; font-weight: 600; color: #0d1c3a; margin-bottom: 7px; }

.mp-row { display: flex; gap: 10px; }
.mp-row input {
  flex: 1; min-width: 0; padding: 11px 13px; font: inherit; font-size: 15px;
  border: 1px solid rgba(13, 28, 58, .2); border-radius: 9px; background: #fbfcfe;
  letter-spacing: .05em;
}
.mp-row input:focus { outline: none; border-color: #0d1c3a; box-shadow: 0 0 0 3px rgba(13, 28, 58, .1); }
.mp-row .btn { flex: none; padding: 11px 20px; }

/* stacked inputs (password screens) */
.mp-form > input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 11px 13px; font: inherit; font-size: 15px;
  border: 1px solid rgba(13, 28, 58, .2); border-radius: 9px; background: #fbfcfe;
}
.mp-form > input:focus { outline: none; border-color: #0d1c3a; box-shadow: 0 0 0 3px rgba(13, 28, 58, .1); }
.mp-form > .btn { display: block; width: 100%; padding: 11px 20px; }

/* the key is typed OFF the mail — monospace, spaced, centred, so a
   transcription error is visible at a glance */
#mpKey {
  text-align: center; font-family: "Courier New", monospace;
  font-weight: 700; font-size: 17px; letter-spacing: .24em; text-transform: uppercase;
}

.mp-hint { margin: 11px 0 0; font-size: 12.8px; color: #7b879b; line-height: 1.55; }

.mp-sent {
  margin: 0 0 14px; font-size: 14px; color: #33415c; line-height: 1.6;
  background: #f7f9fc; border: 1px solid rgba(13, 28, 58, .08);
  border-radius: 9px; padding: 10px 12px;
}

.mp-err { margin: 11px 0 0; font-size: 13.5px; color: #b3261e; font-weight: 600; }
.mp-err.ok { color: #14663a; }

.mp-switch { margin: 16px 0 0; font-size: 13px; color: #7b879b; }
.mp-switch a { color: #0d1c3a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mp-switch a:hover { color: #c1440e; }

/* ---- the member's own page ---- */

.mp-person { display: flex; gap: 16px; align-items: center; text-align: left; margin-bottom: 20px; }
.mp-photo {
  width: 84px; height: 100px; flex: none; object-fit: cover;
  border-radius: 10px; border: 2px solid rgba(13, 28, 58, .14); background: #f5f7fb;
}
.mp-mid { font-size: 21px; font-weight: 800; color: #0d1c3a; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.mp-name { font-size: 16.5px; font-weight: 600; color: #33415c; margin-top: 3px; }
.mp-badge {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; background: #eef1f6; color: #475569;
  text-transform: uppercase; letter-spacing: .05em;
}
.mp-badge.ok { background: #e8f7ee; color: #14663a; }

.mp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px; margin: 0 0 20px; text-align: left;
  padding: 18px; background: #f8fafd; border-radius: 12px;
}
.mp-grid > div { min-width: 0; }
.mp-grid > .mp-wide { grid-column: 1 / -1; }   /* address runs the full row */
.mp-grid dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #7b879b; }
.mp-grid dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: #0d1c3a; word-break: break-word; }

.mp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-actions .btn { flex: 1; min-width: 150px; }

/* .btn-ghost is defined per-page elsewhere — this page needs its own */
.btn-ghost { background: #fff; color: #0d1c3a; border: 1.5px solid rgba(13, 28, 58, .2); box-shadow: none; }
.btn-ghost:hover { background: #f4f7fb; }

/* ==========================================================================
   The member dashboard — full screen once signed in
   --------------------------------------------------------------------------
   Signed in, the page stops being a login card: the site header, the
   card and the footer drop away, and one full-viewport dashboard
   takes over — a slim top bar, a strip of service HEADLINES, and the
   picked service's content in the panel below.  The headline strip
   slides on its own and pauses whenever it is pointed at, focused or
   touched.
   ========================================================================== */

body.dash-open .site-header,
body.dash-open .mp-wrap,
body.dash-open .site-footer { display: none; }

.mp-dash {
  position: fixed; inset: 0; z-index: 850;
  display: flex; flex-direction: column;
  background: #f4f6fb; overflow: hidden;
}

/* ---- top bar ---- */

.mp-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 22px;
  background: linear-gradient(135deg, #0d1c3a, #16294f); color: #fff;
}
.mp-top-brand { display: flex; align-items: center; gap: 11px; font-size: 15.5px; cursor: pointer; }
.mp-top-brand img { display: block; border-radius: 50%; background: #fff; }
.mp-top-brand i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: #9fb3d1; letter-spacing: .04em; }

.mp-top-me { display: flex; align-items: center; gap: 14px; }
.mp-top-id { text-align: right; line-height: 1.25; }
.mp-top-id b { display: block; font-size: 14px; }
.mp-top-id small { display: block; font-size: 11.5px; color: #9fb3d1; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mp-top-out { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); padding: 8px 16px; font-size: 13.5px; }
.mp-top-out:hover { background: rgba(255, 255, 255, .12); }

/* ---- the headline row: plain words, sitting still in the dark bar ---- */

.mp-nav {
  flex: 1; min-width: 0; position: relative;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;                 /* it is a menu, not a carousel */
}
.mp-nav::-webkit-scrollbar { display: none; }

.mp-nav-track {
  display: flex; gap: 2px; width: max-content;
  padding: 4px 8px; margin: 0 auto;      /* centred whenever it fits */
}

@keyframes mp-naveslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mp-nav-btn {
  flex: none; display: inline-flex; align-items: center;
  padding: 7px 13px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; font: inherit; font-size: 13.2px; font-weight: 600;
  color: #9fb3d1; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mp-nav-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mp-nav-btn.on { background: #fff; color: #0d1c3a; }

/* "My Profile" sits beside Log out, so it carries a border like a
   real button — and lights white when the profile pane is showing. */
.mp-me-btn { border-color: rgba(255, 255, 255, .35); color: #fff; }
.mp-me-btn:hover { background: rgba(255, 255, 255, .12); }
.mp-me-btn.on { background: #fff; color: #0d1c3a; border-color: #fff; }

/* ---- the "More" dropdown: whatever the bar had no room for ---- */

.mp-more { flex: none; position: relative; }

.mp-more-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
  background: transparent; font: inherit; font-size: 13.2px; font-weight: 600;
  color: #fff; white-space: nowrap; cursor: pointer;
  transition: background .15s ease;
}
.mp-more-btn:hover { background: rgba(255, 255, 255, .12); }
.mp-more-btn.on { background: #fff; color: #0d1c3a; border-color: #fff; }

.mp-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 244px; margin: 0; padding: 7px; list-style: none;
  background: #fff; border: 1px solid rgba(13, 28, 58, .1); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(13, 28, 58, .22);
}
.mp-more-menu[hidden] { display: none; }

.mp-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; border-radius: 8px;
  background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: #33415c; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.mp-more-item:hover { background: #f1f4f9; color: #0d1c3a; }
.mp-more-item.on { background: #0d1c3a; color: #fff; }
.mp-more-item .ico { font-size: 17px; line-height: 1; }

/* ---- the big card lane under the nav ---- */

.mp-lane {
  flex: none; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #eef2f8, #f7f9fc);
  border-bottom: 1px solid rgba(13, 28, 58, .1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.mp-lane-track {
  display: flex; gap: 18px; width: max-content;
  padding: 22px 18px; animation: mp-naveslide 30s linear infinite;
}
.mp-lane:hover .mp-lane-track,
.mp-lane:focus-within .mp-lane-track,
.mp-lane.is-held .mp-lane-track { animation-play-state: paused; }

.mp-lane-card {
  flex: none; width: 272px; min-height: 152px;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; cursor: pointer;
  background: #fff; border: 1px solid rgba(13, 28, 58, .09); border-radius: 16px;
  padding: 20px 20px 17px; font: inherit; color: inherit;
  box-shadow: 0 2px 6px rgba(13, 28, 58, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mp-lane-card:hover, .mp-lane-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(193, 68, 14, .4);
  box-shadow: 0 14px 30px rgba(13, 28, 58, .16);
  outline: none;
}
.mp-lane-card.on {
  border-color: #c1440e;
  box-shadow: 0 10px 26px rgba(193, 68, 14, .22);
}

.mp-lane-card .ico {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  font-size: 25px; line-height: 1;
  background: linear-gradient(135deg, #eef2f8, #e2e8f2);
  border: 1px solid rgba(13, 28, 58, .08); border-radius: 13px;
}
.mp-lane-card.on .ico { background: linear-gradient(135deg, #c1440e, #e0622a); }

/* ---- an icon that is a PICTURE, not an emoji ---------------------
   The administrator may upload one — the panel shrinks it to a 128 px
   square before it is stored — and member.js puts it inside the very
   same span, so the card, the More menu and the pane heading keep
   their slot, their size and their layout: only the glyph changes. */
.ico-img { display: block; object-fit: contain; }
.mp-lane-card .ico-img { width: 100%; height: 100%; }
.mp-more-item .ico-img {
  display: inline-block; width: 21px; height: 21px;
  vertical-align: -5px; margin-right: 2px;
}
.mp-pane-h .ico-img {
  display: inline-block; width: 26px; height: 26px;
  vertical-align: -6px;
}

.mp-lane-card .t {
  display: block; font-size: 16.5px; font-weight: 700; color: #0d1c3a;
  line-height: 1.3; letter-spacing: -.01em;
}
.mp-lane-card .go {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: auto; padding-top: 14px;
  font-size: 12.5px; font-weight: 700; color: #c1440e;
  letter-spacing: .07em; text-transform: uppercase;
}

/* ---- the panel that shows what was picked ----
   Every option now fills this area — the bar and the cards stay common
   above it, and nothing a member picks is allowed to look narrower or
   wider than anything else.  The 860px reading column is gone: panes,
   frames and modules all stand in the same full-width space. */

.mp-panel { flex: 1; overflow-y: auto; padding: 26px clamp(16px, 4vw, 40px) 70px; }

.mp-pane { max-width: none; margin: 0 auto; text-align: left; }
.mp-pane-h { margin: 0 0 16px; font-size: 21px; color: #0d1c3a; }
.mp-pane-h .ico { margin-right: 8px; }

.mp-pane-lead { margin: 0 0 18px; font-size: 14.5px; color: #64748b; line-height: 1.6; max-width: 62ch; }
.mp-pane-body { font-size: 14.5px; color: #475569; line-height: 1.7; }
.mp-pane-body p { margin: 0 0 12px; }
.mp-pane-body ul { margin: 0 0 12px; padding-left: 20px; }
.mp-pane-body li { margin-bottom: 6px; }

.mp-pane-note {
  margin: 16px 0 0; padding: 13px 15px; font-size: 13.5px; color: #33415c;
  background: #fff8f2; border: 1px solid rgba(193, 68, 14, .28); border-radius: 10px;
  line-height: 1.6;
}

.mp-pane-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.mp-pane-actions .btn { min-width: 170px; }

/* ---- Book Your Freelancer: options that open IN the pane ----------
   No window, no navigation — the menu sits under the module's own copy
   and fills the panel below it. */
.mp-opts { margin-top: 22px; }
.mp-opts-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.mp-opt {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 13px 15px;
  border: 1px solid #dbe3ee; border-radius: 12px;
  background: #fff; color: inherit; font: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mp-opt:hover { border-color: #b9c6da; transform: translateY(-1px); }
.mp-opt.on {
  border-color: #0b2a5b; background: #f7faff;
  box-shadow: 0 0 0 2px rgba(11, 42, 91, .12);
}
.mp-opt-l { font-weight: 700; font-size: 14.5px; color: #0b2a5b; }
.mp-opt-bn { font-size: 14px; color: #33415a; }
.mp-opt-h { font-size: 12.5px; color: #7b8aa3; line-height: 1.5; }

.mp-opts-panel {
  margin-top: 14px; padding: 16px;
  border: 1px solid #e6ecf5; border-radius: 12px;
  background: #fbfcfe;
}
.mp-opt-msg { margin: 0; font-size: 14.5px; line-height: 1.7; color: #475569; }
.mp-opt-msg.err { color: #b42318; }
.mp-opt-msg.soon { border-left: 3px solid #d9a441; padding-left: 12px; }

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

/* status chip — Bengali first, English under it: the label is bilingual
   for every one of the module's statuses, as 14 asks */
.mp-st {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  padding: 3px 9px; border-radius: 999px;
  background: #eef2f8; font-style: normal;
}
.mp-st b { font-size: 12.5px; color: #0b2a5b; }
.mp-st i { font-size: 10.5px; color: #7b8aa3; font-style: normal; }

/* the profile pane reuses the card's person/grid/badge pieces */
.mp-pane .mp-person { margin-bottom: 16px; }

/* ---- renewal details on My Profile ---- */

.mp-renew {
  margin-top: 6px; padding: 16px 16px 14px;
  background: #fff; border: 1px solid rgba(13, 28, 58, .1); border-radius: 12px;
}
.mp-renew-h { margin: 0 0 12px; font-size: 15px; color: #0d1c3a; }
.mp-renew-grid { margin-bottom: 0; background: transparent; padding: 0; }

.mp-muted { color: #7b879b !important; font-weight: 500 !important; }
.mp-warn { color: #b45309 !important; }
.mp-bad { color: #b3261e !important; }

.mp-renew-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 9px;
  font-size: 13px; line-height: 1.55; font-weight: 600;
}
.mp-renew-note.warn { background: #fff7ec; color: #92400e; border: 1px solid rgba(180, 83, 9, .3); }
.mp-renew-note.bad { background: #fdecea; color: #b3261e; border: 1px solid rgba(179, 38, 30, .3); }

@media (prefers-reduced-motion: reduce) {
  .mp-nav-track, .mp-lane-track { animation: none; width: auto; flex-wrap: wrap; }
  .mp-nav, .mp-lane { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

@media (max-width: 520px) {
  .mp-card { padding: 26px 18px; border-radius: 14px; }
  .mp-row { flex-direction: column; }
  .mp-person { flex-direction: column; text-align: center; }
  .mp-actions .btn { min-width: 0; }
  .mp-top { padding: 10px 14px; }
  .mp-top-brand b { font-size: 13.5px; }
  .mp-top-id { display: none; }
  .mp-panel { padding: 18px 14px 60px; }
  .mp-pane-actions .btn { min-width: 0; width: 100%; }
  .mp-lane-card { width: 228px; min-height: 138px; padding: 17px 16px 14px; }
  .mp-lane-card .ico { width: 42px; height: 42px; font-size: 22px; margin-bottom: 12px; }
  .mp-lane-card .t { font-size: 15px; }
  .mp-lane-track { gap: 13px; padding: 17px 13px; }
}

/* ---- embedded options (gear market, notices, exhibition, registry) --
   The pane itself fills the whole area now, so this class no longer has
   to break out of a reading column — it is kept as the marker that the
   option is a frame, and as the place the frame's height lives. */
.mp-pane.mp-pane-embed { max-width: none; }
.mp-embed { margin-top: 4px; }
.mp-embed iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 350px);
  min-height: 540px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}