/* Sitefy Marketplace — Dashboard & Chat Styles */

/* ===================================================
   ACCOUNT BAR (sitewide, injected via wp_body_open)
   =================================================== */
.smp-account-bar,
.smp-account-bar *,
.smp-account-bar *::before,
.smp-account-bar *::after {
  box-sizing: border-box;
}
.smp-account-bar {
  background: linear-gradient(135deg, #001c2c 0%, #00334e 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  position: relative;
  z-index: 500;
  width: 100%;
  line-height: 1;
}
.smp-account-bar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  font-size: 13px;
  gap: 12px;
}

/* Override the theme's global button/link borders (Hello Elementor styles
   every <button> and <a> with a 1px accent-colored border by default) */
.smp-account-bar a,
.smp-account-bar button,
.smp-account-bar a:hover,
.smp-account-bar button:hover,
.smp-account-bar a:focus,
.smp-account-bar button:focus,
.smp-account-bar a:active,
.smp-account-bar button:active {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.smp-account-bar a:focus-visible,
.smp-account-bar button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(22,214,199,.55) !important;
  border-radius: 8px;
}

/* ── Brand ── */
.smp-acc-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}
.smp-acc-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00b67a;
  box-shadow: 0 0 8px rgba(0,182,122,.7);
  flex-shrink: 0;
}
.smp-acc-brand-text {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smp-acc-brand-sub {
  color: rgba(255,255,255,.4);
  font-weight: 500;
  margin-left: 5px;
}

/* ── Right cluster ── */
.smp-acc-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.smp-acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: background .15s, color .15s;
}
.smp-acc-pill svg { flex-shrink: 0; opacity: .85; }
.smp-acc-pill:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.smp-acc-pill-primary {
  background: #00b67a;
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 700;
}
.smp-acc-pill-primary:hover {
  background: #00a36c;
  color: #fff;
}

/* ── Bell ── */
.smp-acc-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.smp-acc-bell {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  transition: background .15s, color .15s;
}
.smp-acc-bell svg { display: block; flex-shrink: 0; }
.smp-acc-bell:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.smp-acc-bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #ff5a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  border: 1.5px solid #00263b;
}
.smp-acc-bell-dropdown {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: 330px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,20,32,.28);
  z-index: 600;
}
.smp-acc-bell-loading,
.smp-acc-bell-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: #7a9aaa;
}
.smp-acc-bell-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  font-size: 13px;
  color: #1a2b38;
  text-decoration: none;
  border-bottom: 1px solid #f0f4f7;
  line-height: 1.4;
}
.smp-acc-bell-item:hover { background: #f8fbfc; }
.smp-acc-bell-item:first-child { border-radius: 12px 12px 0 0; }
.smp-acc-bell-item:last-child { border-bottom: none; border-radius: 0 0 12px 12px; }

/* ── Divider ── */
.smp-acc-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.14);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ===================================================
   NAV MENU INTEGRATION (Appearance → Menus)
   Add a Custom Link to any menu and put one of these in
   its URL field — the item is swapped for a live widget,
   and auto-hidden when it doesn't apply to the visitor:

     #sitefy-login          Sign In     (logged out only)
     #sitefy-register       Register    (logged out only)
     #sitefy-account        My Account  (logged in only)
     #sitefy-notifications  Bell        (logged in only)
     #sitefy-logout         Sign Out    (logged in only)

   Colors inherit from the surrounding menu (`currentColor`/
   `inherit`) so this fits any theme's header styling.
   =================================================== */
/* The widget's <li> is deliberately left alone: since the widget now carries
   the theme's own menu-link classes, the theme lays it out exactly like any
   other item. The only nudge needed is for flex-based menus, where a block
   child would otherwise stretch to the full row height. */
li > .smp-navkit,
li > .smp-bell-wrap,
li > .smp-nav-account {
  align-self: center;
}

/* ── Bell button: block the theme's global button styling ──
   OceanWP applies `body button:hover { background: <accent> }` to every
   <button> on the page, which paints a solid green block behind the bell
   icon on hover. Our bell must stay transparent (nav) or keep its own
   subtle grey (dashboard), so restate both states explicitly. */
.smp-navkit .smp-bell-toggle,
.smp-navkit .smp-bell-toggle:hover,
.smp-navkit .smp-bell-toggle:focus,
.smp-navkit .smp-bell-toggle:active,
li .smp-bell-wrap .smp-bell-toggle,
li .smp-bell-wrap .smp-bell-toggle:hover,
li .smp-bell-wrap .smp-bell-toggle:focus,
li .smp-bell-wrap .smp-bell-toggle:active {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
.smp-dash-profile-bar .smp-bell-toggle,
.smp-dash-profile-bar .smp-bell-toggle:focus,
.smp-dash-profile-bar .smp-bell-toggle:active {
  background: #f4f8fa !important;
  color: #00334e !important;
  box-shadow: none !important;
  border: none !important;
}
.smp-dash-profile-bar .smp-bell-toggle:hover {
  background: #e8f0f4 !important;
  color: #00334e !important;
}
/* The unread badge must keep its own red regardless of the above. */
.smp-bell-toggle .smp-bell-badge { background: #ff5a5f !important; color: #fff !important; }

/* ── Notification dropdown: wrap, never scroll sideways ──
   Long notification text previously forced a horizontal scrollbar.
   The panel is a fixed width; text now wraps onto as many lines as
   it needs instead. */
.smp-bell-dropdown,
.smp-acc-bell-dropdown {
  overflow-x: hidden !important;
  max-height: none !important;
  overflow-y: visible !important;
}
.smp-bell-dropdown .smp-acc-bell-item,
.smp-acc-bell-dropdown .smp-acc-bell-item,
.smp-navkit-dropdown .smp-acc-bell-item {
  white-space: normal !important;
  align-items: flex-start !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.smp-bell-dropdown .smp-acc-bell-item span,
.smp-acc-bell-dropdown .smp-acc-bell-item span,
.smp-navkit-dropdown .smp-acc-bell-item span {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  flex: 1;
}

/* ── My Account on full-width page templates ──
   When the account page uses a full-width template (Elementor Full Width
   or OceanWP's content-full-width), the theme's centring container is
   removed entirely — so WooCommerce's account layout runs edge-to-edge and
   the left tab column is flush against the browser edge and looks cropped.
   Re-introduce a contained, padded area just for account pages. */
body.woocommerce-account .site-main > .woocommerce {
  max-width: 1500px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  body.woocommerce-account .site-main > .woocommerce {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Menu-context overrides ──────────────────────────
   Themes reset padding/margin on everything inside a menu with
   descendant-star selectors — OceanWP ships
       .sf-menu, .sf-menu *            { padding: 0 }
       .dropdown-menu, .dropdown-menu * { padding: 0 }
   which outweighs our single-class rules and flattens every item
   in our dropdowns. Re-assert the widget's own spacing here. */
.smp-bell-dropdown .smp-acc-bell-item,
.smp-navkit-dropdown .smp-acc-bell-item {
  padding: 12px 16px !important;
  margin: 0 !important;
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4 !important;
  text-align: left;
}
.smp-bell-dropdown .smp-acc-bell-loading,
.smp-bell-dropdown .smp-acc-bell-empty {
  padding: 26px 16px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.smp-navkit-dropdown .smp-navkit-link {
  padding: 9px 13px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: left;
}
.smp-navkit-dropdown,
.smp-bell-dropdown {
  padding: 7px !important;
  margin-top: 10px !important;
}
.smp-bell-dropdown { padding: 0 !important; }
.smp-navkit-dropdown .smp-navkit-sep {
  margin: 5px 8px !important;
  padding: 0 !important;
}

/* ── All-in-one nav widget (#sitefy-menu) ── */
/* The outer element carries the theme's own menu-link classes, so it keeps
   that theme's padding AND line-height. Many themes (OceanWP, Astra, Kadence)
   vertically centre menu labels with a tall line-height equal to the header
   height rather than with flexbox — forcing line-height:1 here destroys that
   and drops the widget to the top of the bar. So: leave the outer box alone,
   and centre the real content inside it with vertical-align:middle, exactly
   the way the theme centres its own link text. */
.smp-navkit {
  display: block;
  vertical-align: middle;
}
.smp-navkit-inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  vertical-align: middle;
  line-height: 1;
}

/* Themes style every <a>/<button> in a menu with their own border and
   padding — neutralise that for the widget's own inner controls only. */
.smp-navkit-inner a,
.smp-navkit-inner button,
.smp-navkit-inner span {
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}
.smp-navkit-inner a,
.smp-navkit-inner button {
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.smp-navkit-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.smp-navkit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.smp-navkit-caret {
  opacity: .55;
  flex-shrink: 0;
  transition: transform .18s;
}
.smp-navkit-user:hover .smp-navkit-caret,
.smp-navkit-user:focus-within .smp-navkit-caret { transform: rotate(180deg); }

.smp-navkit-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 194px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,20,32,.22);
  padding: 7px;
  display: flex;
  flex-direction: column;
  z-index: 99999;
  /* Hidden by default, revealed on hover/keyboard focus. Using
     visibility+opacity (not display:none) keeps it keyboard-navigable
     and lets the fade animate. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Invisible bridge so the pointer can travel from the chip to the dropdown
   across the 10px gap without the menu closing mid-move. */
.smp-navkit-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.smp-navkit-user:hover .smp-navkit-dropdown,
.smp-navkit-user:focus-within .smp-navkit-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.smp-navkit-dropdown .smp-navkit-link {
  display: block;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a3040 !important;
  text-decoration: none !important;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.smp-navkit-dropdown .smp-navkit-link:hover {
  background: #f0f5f8;
  color: #00334e !important;
}
.smp-navkit-dropdown .smp-navkit-link-out { color: #d0342c !important; }
.smp-navkit-dropdown .smp-navkit-link-out:hover { background: #fdecea; color: #b02a22 !important; }

.smp-navkit-sep {
  display: block;
  height: 1px;
  background: #eef3f6;
  margin: 5px 8px;
}

@media (max-width: 782px) {
  .smp-navkit-inner { gap: 10px; }
  .smp-navkit .smp-nav-account-name { display: none; }
  .smp-navkit-dropdown { right: auto; left: 0; }
}

.smp-nav-login,
.smp-nav-logout {
  color: inherit;
  text-decoration: none !important;
}
/* Specificity is raised (and padding/height forced) because the theme's own
   nav-link padding otherwise inflates this pill and pushes its label off-centre. */
.smp-nav-register,
.smp-navkit .smp-nav-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #00b67a;
  color: #fff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 18px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .15s;
}
.smp-nav-register:hover,
.smp-navkit .smp-nav-register:hover { background: #00a06a; color: #fff !important; }

.smp-nav-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: inherit;
}
.smp-nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00b67a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.smp-nav-account-name {
  font-size: inherit;
  font-weight: inherit;
}

.smp-nav-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.smp-nav-bell {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}
.smp-nav-bell svg { display: block; }
.smp-nav-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #ff5a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  padding: 0 3px;
}
.smp-nav-bell-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,20,32,.28);
  z-index: 9999;
  text-align: left;
}
@media (max-width: 480px) {
  .smp-nav-bell-dropdown { width: 280px; right: -60px; }
}

/* ── User chip ── */
.smp-acc-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .15s;
}
.smp-acc-user:hover {
  background: rgba(255,255,255,.08);
}
.smp-acc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00b67a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.smp-acc-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  min-width: 0;
}
.smp-acc-user-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.smp-acc-role-badge {
  display: inline-block;
  width: fit-content;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.5;
}
.smp-role-buyer  { background: rgba(22,214,199,.18); color: #5eece2; }
.smp-role-seller { background: rgba(0,182,122,.2);   color: #5fe0a8; }

/* ── Sign out ── */
.smp-acc-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: background .15s, color .15s, border-color .15s;
}
.smp-account-bar .smp-acc-signout {
  border: 1px solid rgba(255,255,255,.16) !important;
}
.smp-acc-signout:hover {
  background: rgba(255,90,95,.12);
  color: #ff8a8e;
}
.smp-account-bar .smp-acc-signout:hover {
  border-color: rgba(255,90,95,.4) !important;
}

@media (max-width: 760px) {
  .smp-acc-pill-icon span { display: none; }
  .smp-acc-pill-icon { padding: 8px; border-radius: 50%; }
  .smp-acc-pill-icon svg { opacity: 1; margin: 0; }
  .smp-acc-user-name { display: none; }
  .smp-acc-divider { margin: 0 2px; }
}

@media (max-width: 640px) {
  .smp-account-bar-inner { padding: 0 14px; gap: 6px; }
  .smp-acc-right { gap: 2px; }
  .smp-acc-link-watchlist { display: none; }
  .smp-acc-signout span { display: none; }
  .smp-acc-signout { padding: 8px; border-radius: 50%; }
  .smp-acc-bell-dropdown {
    position: fixed;
    top: 52px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

@media (max-width: 420px) {
  .smp-acc-brand-sub { display: none; }
}

/* ===================================================
   DASHBOARD WRAPPER
   =================================================== */
.smp-dash-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-family: inherit;
}

/* Profile Bar */
.smp-dash-profile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0,51,78,.07);
  margin-bottom: 24px;
  gap: 16px;
}

.smp-dash-profile-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.smp-dash-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0eaee;
}

.smp-dash-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #00334e;
}

.smp-dash-role-label {
  display: block;
  font-size: 12px;
  color: #7a9aaa;
  font-weight: 500;
}

.smp-dash-profile-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smp-dash-unread-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #00b67a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
}

/* Bell in the dashboard profile bar — always visible, no menu setup needed */
.smp-dash-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.smp-dash-bell {
  background: #f4f8fa;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #00334e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s;
}
.smp-dash-bell:hover { background: #e8f0f4; }
.smp-dash-bell-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #ff5a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  border: 1.5px solid #fff;
}
.smp-dash-bell-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,20,32,.28);
  z-index: 9999;
  text-align: left;
}
@media (max-width: 480px) {
  .smp-dash-bell-dropdown { width: 260px; right: -40px; }
}

/* Tabs */
.smp-dash-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 1px 8px rgba(0,51,78,.07);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.smp-dash-tabs::-webkit-scrollbar { display: none; }

.smp-dash-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #5a7a8a;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  transition: background .15s, color .15s;
}
.smp-dash-tab:hover { background: #f0f4f7; color: #00334e; }
.smp-dash-tab-active { background: #00334e; color: #fff; }
.smp-dash-tab-active:hover { background: #00334e; color: #fff; }
.smp-dash-tab svg { flex-shrink: 0; }

.smp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: #ff7a18;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 4px;
  line-height: 1;
}

/* Panel */
.smp-dash-content { position: relative; }

.smp-dash-panel {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 8px rgba(0,51,78,.07);
}
.smp-dash-panel-flush { padding: 0; overflow: hidden; }

.smp-dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.smp-dash-panel-title {
  font-size: 18px;
  font-weight: 800;
  color: #00334e;
  margin: 0 0 20px;
}
.smp-dash-panel-header .smp-dash-panel-title { margin: 0; }

.smp-become-seller-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 20px 22px;
  background: #f0f9f7;
  border: 1.5px solid #b0e8d4;
  border-radius: 10px;
}
.smp-become-seller-box h4 {
  font-size: 14px;
  font-weight: 700;
  color: #00334e;
  margin: 0 0 4px;
}
.smp-become-seller-box p {
  font-size: 13px;
  color: #4a6a7a;
  margin: 0;
  max-width: 420px;
}
.smp-become-seller-box .smp-btn { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
  .smp-become-seller-box { flex-direction: column; align-items: flex-start; }
}

.smp-dash-empty {
  text-align: center;
  padding: 48px 20px;
}
.smp-dash-empty p { color: #7a9aaa; margin-bottom: 20px; }

/* Table */
.smp-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e0eaee;
}

.smp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.smp-table thead th {
  background: #f0f5f8;
  color: #4a6a7a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e0eaee;
}

.smp-table tbody tr { border-bottom: 1px solid #f0f5f8; transition: background .12s; }
.smp-table tbody tr:last-child { border-bottom: none; }
.smp-table tbody tr:hover { background: #f8fbfc; }
.smp-table tbody td { padding: 13px 16px; color: #2a4a5a; vertical-align: middle; }
.smp-table a { color: #00334e; font-weight: 600; text-decoration: none; }
.smp-table a:hover { color: #00b67a; }
.smp-table-actions { display: flex; gap: 6px; white-space: nowrap; }

/* Status badges */
.smp-listing-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
}
.smp-status-live    { background: #e6f9f2; color: #00834a; }
.smp-status-pending { background: #fff4e6; color: #b85400; }
.smp-status-sold    { background: #fde8e8; color: #b0302c; }

.smp-offer-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.smp-offer-note {
  font-size: 12px;
  color: #7a9aaa;
  margin: 4px 0 0;
  font-style: italic;
}

/* Small buttons */
.smp-btn-xs {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 6px;
}

.smp-btn-outline {
  background: transparent;
  border: 1.5px solid #00334e;
  color: #00334e;
}
.smp-btn-outline:hover { background: #00334e; color: #fff; }

.smp-btn-danger {
  background: #e74c3c;
  color: #fff;
  border: none;
}
.smp-btn-danger:hover { background: #c0392b; }

/* Watchlist grid */
.smp-watch-grid { gap: 16px; }

.smp-watch-card {
  background: #fff;
  border: 1px solid #e0eaee;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.smp-watch-card:hover { box-shadow: 0 4px 20px rgba(0,51,78,.1); }

.smp-watch-card-img {
  height: 80px;
}

.smp-watch-card-body { padding: 14px; }
.smp-watch-card-title { font-size: 14px; font-weight: 700; color: #00334e; margin: 0 0 4px; line-height: 1.3; }
.smp-watch-card-title a { text-decoration: none; color: inherit; }
.smp-watch-card-price { font-size: 15px; font-weight: 800; color: #00b67a; margin: 0 0 10px; }
.smp-watch-card-actions { display: flex; gap: 8px; }

/* Profile form */
.smp-profile-form { max-width: 540px; }
.smp-form-row { display: flex; gap: 12px; }
.smp-form-row .smp-form-group { flex: 1; }

/* Modal */
.smp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.smp-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.smp-modal-title { font-size: 18px; font-weight: 800; color: #00334e; margin: 0 0 20px; }
.smp-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ===================================================
   CHAT / MESSAGING
   =================================================== */
.smp-chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 640px;
  border: 1px solid #e6edf1;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,51,78,.06);
}

/* Shared avatar chip — conversation list, chat header, message bubbles */
.smp-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

/* Conversation sidebar */
.smp-conv-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eef3f6;
  background: #fafcfd;
  overflow: hidden;
}

.smp-conv-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 14px;
}

.smp-conv-sidebar-title {
  font-size: 16px;
  font-weight: 800;
  color: #00334e;
  margin: 0;
  letter-spacing: -.01em;
}

.smp-conv-count {
  background: #00b67a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  display: none;
}

.smp-conv-search-wrap {
  position: relative;
  /* margin, not padding — padding would be included in this element's own
     box height, which top:50% below centers against, pulling the icon
     down off the input's actual visual center. */
  margin: 0 16px 14px;
}
.smp-conv-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: #9ab0bc;
  pointer-events: none;
}
.smp-conv-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  font-size: 13px;
  color: #1a3040;
  background: #fff;
  border: 1.5px solid #e6edf1;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.smp-conv-search:focus { border-color: #00b67a; }

.smp-conv-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
  flex: 1;
}

.smp-conv-loading,
.smp-conv-empty {
  padding: 32px 18px;
  font-size: 13px;
  color: #9ab0bc;
  text-align: center;
}

.smp-conv-item {
  cursor: pointer;
  border-radius: 12px;
  transition: background .12s;
  margin-bottom: 2px;
  list-style: none;
}
.smp-conv-item:hover { background: #f0f5f8; }
.smp-conv-item.smp-conv-active { background: #e9f7f1; }

.smp-conv-item-inner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 10px;
}

.smp-conv-body {
  flex: 1;
  min-width: 0;
}

.smp-conv-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.smp-conv-other {
  font-size: 13.5px;
  font-weight: 700;
  color: #00334e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smp-conv-time {
  font-size: 11px;
  color: #9ab0bc;
  white-space: nowrap;
  flex-shrink: 0;
}

.smp-conv-listing {
  font-size: 11.5px;
  font-weight: 600;
  color: #00b67a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.smp-conv-snippet {
  font-size: 12.5px;
  color: #7a9aaa;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smp-conv-unread {
  background: #00b67a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Chat main */
.smp-chat-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fdfefe;
}

.smp-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: #9ab0bc;
  text-align: center;
}
.smp-chat-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eef6f4;
  color: #00b67a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.smp-chat-empty p { margin: 0; font-size: 14px; color: #5a7a8a; font-weight: 600; }
.smp-chat-empty-sub { font-size: 13px; max-width: 260px; font-weight: 400 !important; color: #9ab0bc !important; }

.smp-chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Chat header */
.smp-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef3f6;
  background: #fff;
  flex-shrink: 0;
}

.smp-chat-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-right: -4px;
  color: #5a7a8a;
  display: none;
  flex-shrink: 0;
}

.smp-chat-header-avatar .smp-avatar-circle { width: 34px; height: 34px; font-size: 12px; }

.smp-chat-header-info { flex: 1; overflow: hidden; display: flex; flex-direction: column-reverse; }

.smp-chat-listing-title {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #00b67a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smp-chat-other-party {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #00334e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smp-chat-view-listing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #5a7a8a;
  background: #f4f8fa;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.smp-chat-view-listing:hover { color: #00334e; background: #e8f0f4; }

/* Messages area */
.smp-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,182,122,.03), transparent 40%),
    #fdfefe;
}

.smp-msg-row {
  display: flex;
  align-items: flex-end;
}
.smp-msg-out { justify-content: flex-end; }
.smp-msg-in  { justify-content: flex-start; }

.smp-msg-bubble {
  max-width: 70%;
  border-radius: 18px;
  padding: 11px 15px;
  box-shadow: 0 1px 2px rgba(0,51,78,.05);
}
.smp-msg-out .smp-msg-bubble {
  background: #00334e;
  color: #fff;
  border-bottom-right-radius: 5px;
}
.smp-msg-in .smp-msg-bubble {
  background: #fff;
  color: #1a3040;
  border: 1px solid #eef3f6;
  border-bottom-left-radius: 5px;
}

.smp-msg-bubble p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.smp-msg-bubble time {
  display: block;
  font-size: 10.5px;
  opacity: .6;
  text-align: right;
}

/* ── ESCROW ── */
.smp-chat-escrow-area {
  flex-shrink: 0;
  white-space: nowrap;
}

.smp-chat-escrow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff3eb;
  border: 1.5px solid #ffc89a;
  color: #c05a00;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.smp-chat-escrow-btn:hover { background: #ffe6d2; border-color: #ffaa66; }
.smp-chat-escrow-btn:disabled { opacity: .6; cursor: not-allowed; }

.smp-chat-escrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
}
.smp-escrow-pending { background: #fff3eb; color: #c05a00; border: 1.5px solid #ffc89a; }
.smp-escrow-active  { background: #e6f9f1; color: #00834a; border: 1.5px solid #a0e8c4; }

.smp-msg-escrow .smp-msg-bubble {
  background: #fff3eb !important;
  color: #7a4500 !important;
  border: 1.5px solid #ffc89a;
}
.smp-msg-sender-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c05a00;
  margin-bottom: 4px;
}

.smp-msg-system {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}
.smp-msg-system span {
  background: #f0f4f7;
  color: #5a7a8a;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-align: center;
  max-width: 80%;
}

@media (max-width: 560px) {
  .smp-chat-escrow-btn, .smp-chat-escrow-badge { font-size: 11px; padding: 6px 10px; }
  .smp-chat-view-listing { display: none; }
}

/* Input */
.smp-chat-input-wrap {
  padding: 14px 20px;
  border-top: 1px solid #eef3f6;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
}

.smp-chat-input-pill {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #f4f8fa;
  border: 1.5px solid transparent;
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  transition: border-color .15s, background .15s;
}
.smp-chat-input-pill:focus-within {
  border-color: #00b67a;
  background: #fff;
}

.smp-chat-textarea {
  flex: 1;
  padding: 8px 0;
  font-size: 14px;
  color: #1a3040;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.5;
  font-family: inherit;
}
.smp-chat-textarea::placeholder { color: #9ab0bc; }

/* Extra specificity + !important: the active theme (Hello Elementor) applies
   its own padding, line-height and border to every <button>, which otherwise
   wins over these rules and knocks the label off-centre. */
.smp-chat-input-wrap .smp-chat-send-btn,
.smp-chat-input-pill .smp-chat-send-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #00b67a;
  border: none !important;
  border-radius: 19px !important;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.smp-chat-input-wrap .smp-chat-send-btn:hover { background: #00a06a; }
.smp-chat-input-wrap .smp-chat-send-btn:active { transform: scale(.96); }

/* Offer modal on listing page */
.smp-offer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Responsive */
@media (max-width: 900px) {
  .smp-dash-profile-bar { padding: 16px 20px; }
  .smp-dash-panel { padding: 20px; }
}

@media (max-width: 768px) {
  .smp-chat-layout {
    grid-template-columns: 1fr;
    height: 560px;
  }
  .smp-conv-sidebar {
    border-right: none;
    border-bottom: 1px solid #e8f0f4;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #f8fbfc;
    border-radius: 14px;
  }
  .smp-conv-sidebar.smp-conv-hidden {
    display: none;
  }
  .smp-chat-main {
    height: 100%;
  }
  .smp-chat-main.smp-chat-fullscreen {
    position: absolute;
    inset: 0;
    z-index: 3;
  }
  .smp-chat-back { display: flex; }
  .smp-chat-layout { position: relative; overflow: hidden; }

  .smp-dash-tabs { gap: 2px; }
  .smp-dash-tab { padding: 8px 12px; font-size: 13px; }

  .smp-auth-grid-2 { grid-template-columns: 1fr; }
  .smp-form-row { flex-direction: column; gap: 0; }
}

@media (max-width: 560px) {
  .smp-dash-panel { padding: 16px; }
  .smp-dash-profile-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .smp-watch-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================
   MOBILE PASS
   Dashboards, chat, notifications, tables, modals.
   =================================================== */

/* Never let plugin UI push the page sideways. */
.smp-dash-wrap, .smp-chat-layout, .smp-dash-panel { max-width: 100%; }

@media (max-width: 782px) {
  /* Standard flex/grid overflow fix — scoped to mobile so desktop sizing
     is left exactly as it was. */
  .smp-dash-wrap * { min-width: 0; }

  /* --- Notification dropdowns ---
     Anchoring to the small bell button pushed the panel off-screen on
     narrow viewports (it sits near the left edge, so a right-aligned
     260px panel ran past 0). Span the container instead. */
  .smp-dash-profile-bar { position: relative; }
  .smp-dash-bell-wrap { position: static; }
  .smp-dash-bell-dropdown {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin-top: 8px;
  }
  /* Nav-menu bell lives inside the collapsed menu, so pin it to the viewport. */
  .smp-nav-bell-dropdown {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .smp-bell-dropdown { max-height: 60vh; overflow-y: auto; }

  /* --- Account dropdown --- */
  .smp-navkit-dropdown {
    right: auto;
    left: 0;
    min-width: 190px;
  }

  /* --- Dashboard shell --- */
  .smp-dash-profile-bar { padding: 16px 18px; gap: 14px; }
  .smp-dash-profile-right { width: 100%; justify-content: space-between; }
  .smp-dash-panel { padding: 18px 16px; }
  .smp-dash-panel-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .smp-dash-panel-header .smp-btn { width: 100%; justify-content: center; }

  /* Tabs stay swipeable but lose the scrollbar and gain edge padding
     so the last tab isn't clipped flush against the card edge. */
  .smp-dash-tabs {
    padding: 6px 10px;
    scroll-padding: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .smp-dash-tabs::-webkit-scrollbar { display: none; }
  .smp-dash-tab { flex-shrink: 0; }

  /* --- Tables: scroll rather than crush the columns --- */
  .smp-table-wrap { -webkit-overflow-scrolling: touch; }
  .smp-table { min-width: 560px; }
  .smp-table th, .smp-table td { white-space: nowrap; }
  .smp-table-actions { display: flex; gap: 6px; }
  /* Comfortable tap targets on row actions */
  .smp-table .smp-btn-xs { min-height: 34px; padding: 7px 12px; }

  /* --- Chat --- */
  .smp-chat-layout { height: 70vh; min-height: 460px; }
  .smp-chat-messages { padding: 16px 14px 8px; }
  .smp-msg-bubble { max-width: 85%; }
  .smp-chat-header { padding: 12px 14px; gap: 10px; }
  .smp-chat-input-wrap { padding: 12px 14px; }
  .smp-conv-sidebar-head { padding: 16px 14px 12px; }
  .smp-conv-search-wrap { margin: 0 14px 12px; }
  .smp-conv-list { padding: 0 6px 6px; }

  /* --- Modals: behave like a sheet, never taller than the screen --- */
  .smp-modal-overlay { padding: 14px; align-items: flex-end; }
  .smp-modal {
    max-width: 100%;
    padding: 22px 20px;
    border-radius: 18px;
    max-height: 88vh;
    overflow-y: auto;
  }
  .smp-modal-footer { flex-direction: column-reverse; gap: 8px; }
  .smp-modal-footer .smp-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .smp-dash-profile-bar { padding: 14px 15px; }
  .smp-dash-avatar { width: 38px; height: 38px; }
  .smp-dash-name { font-size: 14px; }
  .smp-watch-grid { grid-template-columns: 1fr; }
  .smp-chat-layout { height: 74vh; min-height: 420px; }
  .smp-conv-item-inner { padding: 10px 8px; gap: 10px; }
  .smp-avatar-circle { width: 34px; height: 34px; font-size: 12px; }
  .smp-chat-send-btn { padding: 0 16px !important; }
}

/* Comfortable tap targets throughout the plugin's own controls. */
@media (max-width: 782px) and (pointer: coarse) {
  .smp-dash-tab,
  .smp-btn,
  .smp-navkit-link,
  .smp-acc-bell-item { min-height: 44px; display: flex; align-items: center; }
  .smp-dash-tab, .smp-btn { justify-content: center; }
  .smp-acc-bell-item { align-items: flex-start; }
}

/* ===================================================
   NAV WIDGET INSIDE A MOBILE / OFF-CANVAS MENU
   Those menus stack items vertically at full width, so the
   horizontal-bar layout (fixed height copied from a sibling,
   floating hover dropdown) doesn't apply. `is-stacked` is
   added by the JS when it detects a full-width menu item,
   which keeps this theme-agnostic.
   =================================================== */
.smp-navkit.is-stacked {
  display: block !important;
  width: 100%;
  height: auto !important;
  padding: 12px 14px !important;
  box-sizing: border-box;
  text-align: center;
}

/* `display: contents` lets the trigger and the link list become direct
   children of the row below, so the bell and avatar can share one centred
   line while the links still span the full width beneath them. */
.smp-navkit.is-stacked .smp-navkit-user {
  display: contents;
}

.smp-navkit.is-stacked .smp-navkit-inner {
  display: flex !important;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: normal;
}

/* Row 1 — bell and account chip, centred together */
.smp-navkit.is-stacked .smp-bell-wrap { order: 1; margin: 0; }
.smp-navkit.is-stacked .smp-navkit-trigger {
  order: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0;
  width: auto;
}
.smp-navkit.is-stacked .smp-nav-account-name {
  display: inline !important;
  font-weight: 700;
}
/* Row 2 — the account links, as a tap-to-open accordion rather than a hover
   dropdown (there is no hover on touch, so the menu would be unreachable).
   Collapsed until the trigger is tapped — see the .is-open rules below. */
.smp-navkit.is-stacked .smp-navkit-dropdown {
  order: 3;
  flex: 0 0 100%;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  min-width: 0;
  width: 100%;
}
.smp-navkit.is-stacked .smp-navkit-dropdown::before { display: none; }

/* Closed until the trigger is tapped. Hover is overridden explicitly: a
   theme's mobile drawer is still hoverable with a mouse, and a panel that
   pops open on mouse-over would shove the rest of the menu around. */
.smp-navkit.is-stacked .smp-navkit-dropdown,
.smp-navkit.is-stacked .smp-navkit-user:hover .smp-navkit-dropdown,
.smp-navkit.is-stacked .smp-navkit-user:focus-within .smp-navkit-dropdown {
  display: none !important;
}
.smp-navkit.is-stacked .smp-navkit-user.is-open .smp-navkit-dropdown {
  display: block !important;
}
.smp-navkit.is-stacked .smp-navkit-caret {
  display: inline-block !important;
  transition: transform .18s ease;
}
.smp-navkit.is-stacked .smp-navkit-user.is-open .smp-navkit-caret { transform: rotate(180deg); }
.smp-navkit.is-stacked .smp-navkit-link {
  padding: 9px 0 !important;
  border-radius: 0;
  color: inherit !important;
  opacity: .85;
  min-height: 42px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.smp-navkit.is-stacked .smp-navkit-link:hover { background: transparent !important; opacity: 1; }
.smp-navkit.is-stacked .smp-navkit-sep {
  margin: 4px auto !important;
  background: currentColor;
  opacity: .16;
  width: 60%;
}

/* Logged out — sized to their text and centred as a pair, rather than
   stretched edge to edge (which left each label off-centre on screen). */
.smp-navkit.is-stacked .smp-nav-login,
.smp-navkit.is-stacked .smp-nav-register {
  flex: 0 0 auto;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 20px;
}
.smp-navkit.is-stacked .smp-nav-login {
  border: 1.5px solid rgba(125,148,161,.4);
  border-radius: 999px;
  font-weight: 600;
}

/* Belt and braces: whichever variant is used — the all-in-one widget or a
   standalone bell / account item — keep it centred in a stacked menu. */
.smp-navkit.is-stacked,
li > .smp-bell-wrap.is-stacked,
li > .smp-nav-account.is-stacked {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
li:has(> .smp-navkit.is-stacked),
li:has(> .smp-bell-wrap.is-stacked),
li:has(> .smp-nav-account.is-stacked) {
  text-align: center;
}

/* Notification panel renders as a full-width row in normal flow. Absolute or
   fixed positioning inside a drawer either gets clipped or lands off-screen.
   The wrap is flattened so the button and the panel are both direct children
   of the row — otherwise the panel could only be as wide as the bell icon. */
.smp-navkit.is-stacked .smp-bell-wrap { display: contents !important; }
.smp-navkit.is-stacked .smp-bell-toggle { order: 1; }
.smp-navkit.is-stacked .smp-bell-dropdown,
li > .smp-bell-wrap.is-stacked .smp-bell-dropdown {
  order: 4;
  flex: 0 0 100%;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px 0 0 !important;
  box-shadow: none !important;
  border-radius: 8px;
}
.smp-navkit.is-stacked .smp-bell-dropdown::before,
li > .smp-bell-wrap.is-stacked .smp-bell-dropdown::before { display: none !important; }

/* Standalone bell / account items added to a menu on their own. */
li > .smp-bell-wrap.is-stacked,
li > .smp-nav-account.is-stacked {
  width: 100%;
  height: auto !important;
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  min-height: 44px;
}
li > .smp-nav-account.is-stacked .smp-nav-account-name { display: inline !important; }

/* The drawer caps itself (OceanWP uses max-height + overflow-y: auto), which
   put a scrollbar inside the menu once the account links were added. Let it
   grow to fit and scroll the page instead. */
#mobile-dropdown,
#sidr-main,
.sidr {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ===================================================
   MOBILE MENU — CSS-ONLY FALLBACK
   The stacked layout above is switched on by a JS-added
   class. If that hasn't run yet (or a theme's markup
   defeats the detection), these rules still centre the
   widget on phone widths so it can never fall back to the
   left-aligned horizontal layout.
   =================================================== */
@media (max-width: 782px) {
  .smp-navkit,
  li > .smp-bell-wrap,
  li > .smp-nav-account {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .smp-navkit .smp-navkit-inner {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;
    gap: 10px;
  }
  .smp-navkit .smp-navkit-user { display: contents; }
  .smp-navkit .smp-bell-wrap { order: 1; margin: 0 !important; }
  .smp-navkit .smp-navkit-trigger {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    padding: 0;
  }
  .smp-navkit .smp-nav-account-name { display: inline !important; }
  .smp-navkit .smp-navkit-dropdown {
    order: 3;
    flex: 0 0 100%;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
    width: 100%;
  }

  /* ── Accordion: both panels start closed ──────────────
     Hover can't open anything on touch, so the trigger and the bell each
     toggle an .is-open class (see sitefy-user.js). These rules have to
     out-specify both the hover rules and the .is-stacked block above,
     hence the doubled class. */
  .smp-navkit .smp-navkit-dropdown.smp-navkit-dropdown,
  .smp-navkit-user:hover .smp-navkit-dropdown,
  .smp-navkit-user:focus-within .smp-navkit-dropdown {
    display: none !important;
  }
  .smp-navkit .smp-navkit-user.is-open .smp-navkit-dropdown.smp-navkit-dropdown {
    display: block !important;
  }
  .smp-navkit .smp-navkit-caret {
    display: inline-block !important;
    transition: transform .18s ease;
  }
  .smp-navkit .smp-navkit-user.is-open .smp-navkit-caret { transform: rotate(180deg); }

  /* The notification panel becomes a full-width row under the trigger.
     Absolute/fixed positioning inside a drawer either clips or lands
     off-screen, so put it in normal flow instead. */
  /* Flatten the wrap so the toggle and its panel both become direct flex
     children of the row — otherwise a 100%-wide panel would only be as wide
     as the little bell button that contains it. */
  .smp-navkit .smp-bell-wrap { display: contents !important; }
  .smp-navkit .smp-bell-toggle { order: 1; }
  li > .smp-bell-wrap {
    position: static !important;
    display: block !important;
  }
  li > .smp-bell-wrap .smp-bell-toggle { margin: 0 auto; }

  .smp-navkit .smp-bell-dropdown,
  .is-stacked .smp-bell-dropdown,
  li > .smp-bell-wrap .smp-bell-dropdown {
    order: 4;
    flex: 0 0 100%;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 60vh;
    overflow-y: auto;
    margin: 4px 0 0 !important;
    box-shadow: none !important;
    border-radius: 8px;
  }
  .smp-navkit .smp-bell-dropdown::before,
  li > .smp-bell-wrap .smp-bell-dropdown::before { display: none !important; }
  .smp-navkit .smp-navkit-link {
    justify-content: center !important;
    text-align: center !important;
    padding: 9px 0 !important;
    min-height: 42px;
    color: inherit !important;
  }
  .smp-navkit .smp-nav-login,
  .smp-navkit .smp-nav-register {
    flex: 0 0 auto !important;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
  }
}

/* ===================================================
   TOUCH TARGETS
   The account trigger is a <span>. iOS Safari only dispatches a bubbling
   click from a tap on a non-interactive element if that element looks
   clickable — i.e. it (or an ancestor) has cursor:pointer. Without this the
   delegated handler never fires on iPhone/iPad, while desktop Chrome's
   device emulation works fine, so it looks like it works when it doesn't.
   touch-action removes the 300ms double-tap-zoom delay.
   =================================================== */
.smp-navkit-trigger,
.smp-navkit-user,
.smp-bell-toggle {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Comfortable tap targets in a drawer. */
.smp-navkit.is-stacked .smp-navkit-trigger,
.smp-navkit.is-stacked .smp-bell-toggle,
li > .smp-bell-wrap.is-stacked .smp-bell-toggle {
  min-height: 44px;
}