/* ============================================================
   TYPOGRAPHY STANDARD — single source of truth for the app's
   fonts. Headings use the editorial serif; everything else uses
   the body sans. Change a value here and it updates everywhere.
   ============================================================ */
:root {
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* PAGE GUTTER — the single left/right margin every page edge lines up on.
     The public header set this visual rhythm at 48px; the logged-in dashboard
     used to sit at 32px, so the brand name visibly jumped left on sign-in.
     Everything that touches a page edge now reads from this one token:
     the header (public + dashboard), the sidebar rail, and the content column.
     Change it here and the whole app follows. */
  --page-gutter: 48px;
}

/* Narrower gutters as the screen shrinks — same steps the public header
   already used, now shared by every panel. */
@media (max-width: 1024px) { :root { --page-gutter: 16px; } }
@media (max-width: 768px)  { :root { --page-gutter: 12px; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global responsive guardrail — media never overflows its container on any
   device. (Horizontal scroll is already prevented via html,body overflow-x.) */
img, svg, video, canvas, iframe, table {
  max-width: 100%;
}

/* Headings → editorial serif, app-wide. Covers semantic headings and
   any *title* class (BEM titles like .ep-head__title), but never
   *subtitle* (those stay body sans). !important overrides the many
   per-component font-family declarations without rewriting them. */
h1, h2, h3, h4, h5, h6,
[class*="title"]:not([class*="subtitle"]):not([class*="Subtitle"]) {
  font-family: var(--font-heading) !important;
}

html, body {
  /* min-height (not height) so the page grows naturally with long content
     and the browser handles vertical scrolling. height:100% would clamp
     body to the viewport and trap overflow. */
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;   /* clip — hidden would trap position:sticky elements */
}

body {
  font-family: var(--font-body);
  background-color: #f8f6f2;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-container {
  min-height: 100vh;
  position: relative;
}

/* Avatar initials fallback — used by layouts/partials/user-avatar.blade.php
   when a user hasn't uploaded a profile photo. Scales to fill the parent
   avatar container; font-size is capped here but parents may override. */
.user-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ff385d;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;             /* default — overridden per-context below */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50%;
  user-select: none;
  /* Avatar frames already define their own width/height; force the initials
     span to inherit those exactly. */
  box-sizing: border-box;
}

/* Per-frame initials sizing. Keeps a consistent ~35% font:diameter ratio so
   the typography reads the same across small (40px) and large (160px) frames. */
.profile-info__avatar .user-avatar-initials { font-size: 56px; }
.review-card__avatar.user-avatar-initials,
.review-card__avatar .user-avatar-initials { font-size: 17px; }
.dash-row__avatar.user-avatar-initials,
.dash-row__avatar .user-avatar-initials { font-size: 14px; }
.client-card__avatar-img.user-avatar-initials,
.client-card__avatar-img .user-avatar-initials { font-size: 20px; }
.st-profile__avatar .user-avatar-initials { font-size: 18px; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 16px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  /* Hairline + faint shadow so page content scrolling underneath the fixed
     header stays visually separated (no bleed-through at the top edge). */
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}
.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6.7px;
}
.logo__icon {
  width: 34px;
  height: 34px;
  background-color: #ff385d;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 6px 14px rgba(255, 56, 93, 0.28);
}
.logo__icon-letter {
  display: inline-block;
  line-height: 1;
  color: #ffffff;
  font-weight: 800;
}
.logo__text {
  font-size: 22px;
  font-weight: 800;
  color: #181012;
  letter-spacing: -0.5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__link {
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav__link--active {
  color: #ff385d;
}
.nav__link:hover {
  color: #171717;
}

.nav__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  font-family: "Inter", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ff385d;
  background-color: transparent;
  border: 1px solid #ff385d;
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.nav__signin:hover {
  background-color: rgba(255, 56, 93, 0.06);
  color: #e62e53;
  border-color: #e62e53;
  transform: translateY(-1px);
}

.nav__cta-text {
  font-family: "Inter", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .nav__cta-text { display: none; }
}

.nav__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background-color: #ff385d;
  color: #ffffff;
  white-space: nowrap;
  font-family: "Inter", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(255, 56, 93, 0.28);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.nav__join:hover {
  background-color: #e62e53;
  transform: translateY(-1px);
}

/* Primary CTA in the logged-in header (Post a Project / Find Work) */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  background-color: #ff385d;
  color: #ffffff;
  white-space: nowrap;
  font-family: "Inter", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(255, 56, 93, 0.28);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.header-cta:hover {
  background-color: #e62e53;
  transform: translateY(-1px);
}
.header-cta svg {
  flex-shrink: 0;
}
/* The "Find Work" (creator) CTA icon shows ONLY on phones — desktop stays
   text-only, exactly as before. */
.header-cta__icon-m {
  display: none;
}
/* Find Work CTA is no longer used in the top bar (moved out per redesign). */
.header-cta { display: none !important; }

/* Messages icon shows only in the mobile/tablet header (<=1024, where the
   hamburger drawer is active). The desktop header stays original. */
.header-msg-btn { display: none; }
@media (max-width: 1024px) {
  /* Messages now lives in the persistent bottom nav — drop it from the header. */
  .header-msg-btn { display: none !important; }
  /* Mobile header = ☰ (far left) + logo + country + notifications + profile (right).
     Search stays out; the profile shows as a bare avatar (tap opens its dropdown). */
  .header-search-wrap { display: none !important; }
  .header .user-profile { display: inline-flex !important; gap: 0 !important; }
  .header .user-profile__info { display: none !important; }
  /* Hamburger to the far left; the country/bell/profile cluster pinned far right. */
  .header > .mobile-menu-btn { order: -1; margin-right: 0; }
  /* Snug the brand up against the hamburger (pull it left, closer to ☰). */
  .header__left { margin-left: -6px; }
  .header__right { margin-left: auto; }
  /* Country picker → flag + name + down caret (dropdown style) on mobile. */
  .header .nav__country { padding: 0 10px; gap: 5px; }
  .header .nav__country-caret { display: block; opacity: .55; }
  .header .nav__country-globe { font-size: 16px; line-height: 1; }
  /* Dashboard "Upgrade Plan" banner is redundant on mobile — the drawer already
     carries the upgrade card. (!important beats the inline display:flex.) */
  .upgrade-prompt { display: none !important; }
  /* Browse button lives in the drawer on mobile — hide the hero CTA. */
  .dash-hero__btn { display: none !important; }
  /* Dashboard header now shares the same --page-gutter as the public one, so it
     no longer needs its own narrower override here. */
}

/* ---- Header search: full bar on desktop, icon on mobile/tablet ---- */
.header-search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
}
.search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 9999px;
  padding: 8px;
  flex-shrink: 0;
}
.search-toggle:hover { background: #f5f5f5; }

@media (max-width: 1024px) {
  .header-search-wrap { flex: 0 0 auto; }
  .search-toggle { display: flex; }
  .header-search-wrap .search-bar { display: none; }
  /* Expanded: full-width search row pinned just below the fixed header */
  .header-search-wrap.is-open .search-bar {
    display: flex;
    position: fixed;
    top: 62px;
    left: 12px;
    right: 12px;
    max-width: none;
    min-width: 0;
    z-index: 120;
    box-shadow: 0 12px 28px -8px rgba(17, 24, 39, 0.18);
  }
}
@media (max-width: 480px) {
  .header-search-wrap.is-open .search-bar { top: 56px; }
}

.header--public {
  background-color: #ffffff;
  border-bottom: 1px solid #f0ebe0;
  padding: 14px 48px;
}

/* Logged-in users get the SAME header padding as the dashboard on public pages
   (Browse Projects, Find Talent), so navigating between them doesn't shift the
   header. Guests keep the .header--public padding above.
   Reads --page-gutter like the dashboard header does: the hardcoded 32px here
   predated the token and left the brand name 16px left of where the dashboard
   puts it, so it jumped on every dashboard → public-page navigation. */
.header--app { padding: 12px var(--page-gutter); }

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  height: 44px;
  width: auto;
  max-width: 360px;
  min-width: 180px;
  flex: 1;
  position: relative;
}
.search-bar__input {
  flex: 1;
  height: 100%;
  padding: 0 16px;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
}
.search-bar__input::placeholder {
  color: #6b7280;
}
.search-bar__input:focus {
  outline: none;
}
.search-bar__divider {
  width: 1px;
  height: 29px;
  background-color: #dbdbdb;
}
.search-bar__dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
}
.search-bar__dropdown svg {
  color: #6b7280;
}
.search-bar__btn {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
}

.notification-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 9999px;
  padding: 8px;
}
.notification-btn:hover {
  background-color: #f5f5f5;
}
.notification-btn__badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: #ff385d;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-btn__badge[hidden] {
  display: none;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-profile__avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-profile__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 56, 93, 0.2);
}
.user-profile__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #ff385d;
  color: #faf8f8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.user-profile__status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 9999px;
  z-index: 1;
}
.user-profile__info {
  display: flex;
  flex-direction: column;
}
/* Header = avatar only. The name/role already live in the dropdown panel
   (opened by clicking the avatar), so we don't repeat them beside it. This
   matches the mobile header and keeps the top bar clean on every page. */
.header .user-profile__info { display: none; }
.user-profile__name {
  font-size: 14px;
  font-weight: 800;
  color: #000000;
}
.user-profile__role {
  font-size: 12px;
  font-weight: 400;
  color: #6b6b6b;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 88px 40px 40px;
}

.profile-setup-card {
  background-color: #ffffff;
  border: 1px solid #ebe5d8;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 765px;
  overflow: hidden;
}
.profile-setup-card__hero {
  padding: 16px;
}
.profile-setup-card__hero-inner {
  border: 1px solid rgba(255, 56, 93, 0.05);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 56, 93, 0.03) 0%, rgba(255, 56, 93, 0.01) 100%);
}
.profile-setup-card__hero-image {
  width: 100%;
  height: 406px;
  object-fit: cover;
  display: block;
}
.profile-setup-card__content {
  padding: 16px 32px 8px;
  text-align: center;
}
.profile-setup-card__title {
  font-size: 30px;
  font-weight: 800;
  color: #171717;
  letter-spacing: -0.75px;
  margin-bottom: 16px;
}
.profile-setup-card__description {
  font-size: 16px;
  font-weight: 500;
  color: #525252;
  line-height: 26px;
  max-width: 400px;
  margin: 0 auto;
}
.profile-setup-card__actions {
  padding: 32px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.45px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn--primary {
  background-color: #ff385d;
  color: #ffffff;
  box-shadow: 0px 10px 15px -3px rgba(255, 56, 93, 0.2), 0px 4px 6px -4px rgba(255, 56, 93, 0.2);
}
.btn--primary:hover {
  background-color: rgb(255, 30.5, 72.2412060302);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
}

/* Reusable dropdown — borderless white card. Use for any select-like control.
   Markup pattern:
     <div class="ep-fdrop">
       <button class="ep-fdrop__btn" data-fdrop-toggle>
         <span class="ep-fdrop__label">…current selection…</span>
         <svg class="ep-fdrop__chev">…</svg>
       </button>
       <div class="ep-fdrop__panel">
         <input class="ep-fdrop__search" data-fdrop-search>          ← optional
         <div class="ep-fdrop__list" data-fdrop-list>                ← optional wrapper
           <button class="ep-fdrop__item" data-value="…">…</button>
         </div>
       </div>
       <select hidden>…</select>                                     ← optional mirror
     </div>
   Variant: .ep-fdrop--inline → trigger fits in a prefix slot. */
.ep-fdrop { position: relative; width: 100%; }
.ep-fdrop--inline { width: auto; display: flex; align-items: stretch; }

.ep-fdrop__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #0f172a;
  cursor: pointer; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ep-fdrop__btn:hover { border-color: #cbd5e1; }
.ep-fdrop.is-open .ep-fdrop__btn,
.ep-fdrop__btn:focus-visible {
  border-color: #ff385d;
  box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.12);
}

/* Inline trigger — sits inside a prefix slot (e.g., phone country code) */
.ep-fdrop--inline .ep-fdrop__btn {
  width: auto; min-width: 78px; height: 100%;
  padding: 0 10px 0 14px;
  background: #f8fafc; border: none; border-right: 1px solid #e2e8f0; border-radius: 0;
  font-weight: 600;
}
.ep-fdrop--inline .ep-fdrop__btn:hover { background: #f1f5f9; }
.ep-fdrop--inline.is-open .ep-fdrop__btn,
.ep-fdrop--inline .ep-fdrop__btn:focus-visible {
  background: #f1f5f9;
  box-shadow: none;
  border-color: transparent;
  border-right: 1px solid #e2e8f0;
}

.ep-fdrop__label {
  flex: 1; min-width: 0;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-fdrop__label--placeholder { color: #94a3b8; }
.ep-fdrop__chev { color: #64748b; flex-shrink: 0; transition: transform 0.2s ease; }
.ep-fdrop.is-open .ep-fdrop__chev { transform: rotate(180deg); color: #0f172a; }

.ep-fdrop__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 110;
  min-width: 100%;
  /* Hard cap so the panel can never sprawl past its card onto the
     Save/Cancel footer below. Long lists scroll inside. */
  max-height: 180px;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  padding: 6px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Internal scroll on the items list so the panel stays the fixed 180px tall. */
.ep-fdrop__panel > [data-fdrop-list],
.ep-fdrop__list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.ep-fdrop.is-open .ep-fdrop__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ep-fdrop--inline .ep-fdrop__panel { min-width: 140px; max-width: calc(100vw - 32px); }

/* Upward variant — panel opens above the trigger (use when below would clip) */
.ep-fdrop--up .ep-fdrop__panel {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px);
}
.ep-fdrop--up.is-open .ep-fdrop__panel { transform: translateY(0); }

.ep-fdrop__search {
  width: auto;
  margin: -6px -6px 6px;
  padding: 8px 12px;
  border: none; border-bottom: 1px solid #f1f5f9; border-radius: 0;
  background: #ffffff;
  font-family: 'Inter', sans-serif; font-size: 12px; color: #0f172a;
  outline: none;
}
.ep-fdrop__search::placeholder { color: #94a3b8; }

.ep-fdrop__list {
  max-height: 220px; overflow-y: auto;
}
.ep-fdrop__list::-webkit-scrollbar { width: 6px; }
.ep-fdrop__list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.ep-fdrop__list::-webkit-scrollbar-track { background: transparent; }

.ep-fdrop__item {
  display: block; width: 100%;
  padding: 7px 12px;
  background: transparent; border: none; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #475569;
  text-align: left; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-variant-numeric: tabular-nums;
}
.ep-fdrop__item:hover { background: #f8fafc; color: #0f172a; }
.ep-fdrop__item.is-active { background: transparent; color: #0f172a; font-weight: 600; }
.ep-fdrop__item.is-active:hover { background: #f8fafc; }

/* Row modifier — for items with two columns, e.g. "Country  +code" */
.ep-fdrop__item--row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ep-fdrop__item-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.ep-fdrop__item-code {
  flex-shrink: 0;
  color: #64748b; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ep-fdrop__item--row.is-active .ep-fdrop__item-code { color: #0f172a; }
.ep-fdrop__item-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px; color: #94a3b8;
  font-family: 'Inter', sans-serif;
}

/* Unsaved-changes warning modal */
body.unsaved-modal-open { overflow: hidden; }
.unsaved-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.unsaved-modal.is-open { display: flex; }
.unsaved-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: unsavedFadeIn 0.18s ease forwards;
}
.unsaved-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.30), 0 8px 16px rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: unsavedScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.unsaved-modal__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 56, 93, 0.12);
  color: #ff385d;
  box-shadow: 0 0 0 6px rgba(255, 56, 93, 0.06);
}
.unsaved-modal__title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.1px;
}
.unsaved-modal__msg {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #64748b;
  margin: 0 0 22px;
  line-height: 1.55;
}
.unsaved-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.unsaved-modal__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.unsaved-modal__btn--ghost {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}
.unsaved-modal__btn--ghost:hover { background: #f8fafc; border-color: #cbd5e1; }
.unsaved-modal__btn--secondary {
  background: #0f172a;
  color: #fff;
}
.unsaved-modal__btn--secondary:hover { background: #1e293b; }
.unsaved-modal__btn--primary {
  background: #ff385d;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 56, 93, 0.22);
}
.unsaved-modal__btn--primary:hover { background: #e62e53; }
.unsaved-modal__btn:disabled { opacity: 0.6; cursor: wait; }

@keyframes unsavedFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes unsavedScaleIn {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Top progress loader — the bar's own styles live with its markup in
   components/loader.blade.php, so there is exactly one definition. */

/* ==========================================================================
   Page transitions (CSS View Transitions)
   ==========================================================================
   Cross-document view transitions: the browser holds the OLD page on screen
   until the new one is ready to paint, then crossfades between them. That is
   what removes the white flash between server-rendered pages — no SPA router,
   no JS. Browsers without support just navigate normally (no fallback needed).

   Transition TYPES are tagged by the onboarding pages (see
   partials/page-transitions.blade.php) so multi-step forms slide sideways
   instead of crossfading, which reads as forward/back progress. */
@view-transition {
  navigation: auto;
}

/* Default: a quick crossfade with a small rise on the incoming page.
   Kept short — a transition long enough to notice is a transition that makes
   the app feel slower, not smoother. */
::view-transition-old(root) {
  animation: pxlPageOut 90ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: pxlPageIn 200ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes pxlPageOut {
  to { opacity: 0; }
}
@keyframes pxlPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Onboarding / multi-step forms: slide in the direction of travel.
   Old and new pages are stacked so they move across each other. */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation: pxlSlideOutLeft 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation: pxlSlideInRight 260ms cubic-bezier(0, 0, 0.2, 1) both;
}
html:active-view-transition-type(back)::view-transition-old(root) {
  animation: pxlSlideOutRight 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
html:active-view-transition-type(back)::view-transition-new(root) {
  animation: pxlSlideInLeft 260ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes pxlSlideOutLeft  { to   { opacity: 0; transform: translateX(-28px); } }
@keyframes pxlSlideInRight  { from { opacity: 0; transform: translateX(28px); } }
@keyframes pxlSlideOutRight { to   { opacity: 0; transform: translateX(28px); } }
@keyframes pxlSlideInLeft   { from { opacity: 0; transform: translateX(-28px); } }

/* Respect the OS "reduce motion" setting: keep the flash-free swap, drop all
   movement. A plain opacity fade carries no vestibular risk, so every
   transition type collapses to the same short crossfade. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  html:active-view-transition-type(forward)::view-transition-old(root),
  html:active-view-transition-type(back)::view-transition-old(root) {
    animation: pxlPageOut 90ms linear both;
  }
  ::view-transition-new(root),
  html:active-view-transition-type(forward)::view-transition-new(root),
  html:active-view-transition-type(back)::view-transition-new(root) {
    animation: pxlFadeIn 120ms linear both;
  }
}
@keyframes pxlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Toast Notification — slim, dark glass gradient, primary-accented, consistent across app */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 380px;
  padding: 11px 14px 11px 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 60%, rgba(51, 65, 85, 0.86) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #ff385d;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  z-index: 9999;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transform: translate(-50%, 120%);
  animation: toastSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff385d;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.18);
}
.toast__icon svg { display: block; }
.toast__msg { line-height: 1.4; min-width: 0; color: #f8fafc; letter-spacing: 0.1px; }
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #ff385d;
  animation: toastProgress 3s linear forwards;
}

/* Variants — accent color shifts; the dark gradient base stays for elegance */
.toast--success { border-left-color: #10b981; }
.toast--success .toast__icon { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }
.toast--success .toast__progress { background: #10b981; }

.toast--error { border-left-color: #ef4444; }
.toast--error .toast__icon { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }
.toast--error .toast__progress { background: #ef4444; }

.toast--info { border-left-color: #ff385d; }
.toast--info .toast__icon { background: #ff385d; box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.20); }
.toast--info .toast__progress { background: #ff385d; }

@keyframes toastSlideIn {
  from { transform: translate(-50%, 120%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translate(-50%, 0); opacity: 1; }
  to { transform: translate(-50%, 120%); opacity: 0; }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

@media (max-width: 1024px) {
  /* Below the desktop width the full nav + search + profile row can't fit
     without colliding, so switch to the compact header + hamburger drawer.
     The drawer (layouts/navigation) already carries every nav link. */
  .header {
    padding: 14px var(--page-gutter);
    gap: 8px;
    position: relative;
  }
  .header__left {
    flex: 0 0 auto;
    min-width: 0;
    gap: 24px;
  }
  .header .nav {
    display: none;
  }
  .header__right {
    flex: 1;
    gap: 10px;
    min-width: 0;
    justify-content: flex-end;
  }
  .header--public .header__right {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .header--public .nav__signin {
    display: none; /* in the drawer's CTA — keep the mobile header clean */
  }
  .header--public .nav__join {
    display: none; /* in the drawer's CTA — keep the mobile header clean */
  }
  .header .search-bar {
    flex: 1;
    max-width: 320px;
    min-width: 0;
    height: 40px;
    flex-direction: row-reverse;
  }
  .header .search-bar__btn {
    width: 36px;
    flex-shrink: 0;
    order: -1;
  }
  .header .search-bar__btn svg {
    width: 16px;
    height: 16px;
  }
  .header .search-bar__input {
    padding: 0 8px;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header .search-bar__dropdown { display: none; }
  .header .search-bar__divider { display: none; }
  .user-profile__info { display: none !important; }
  .user-profile { gap: 0 !important; }
  .user-profile__avatar { width: 36px; height: 36px; }
  .notification-btn { width: 36px; height: 36px; padding: 8px; flex-shrink: 0; }
  .mobile-menu-btn { display: flex !important; }
  .header__right .btn--primary { padding: 8px 14px !important; font-size: 13px !important; }
}
@media (max-width: 768px) {
  .header {
    padding: 12px var(--page-gutter);
    gap: 8px;
    position: relative;
  }
  .header__left {
    flex: 0 0 auto;
    min-width: 0;
  }
  /* Hide desktop nav on mobile */
  .header .nav {
    display: none;
  }
  .header__right {
    flex: 1;
    gap: 10px;
    min-width: 0;
    justify-content: flex-end;
  }
  /* On auth pages (no search bar) keep only the join button + hamburger pinned right */
  .header--public .header__right {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .header--public .nav__signin {
    display: none; /* in the drawer's CTA — keep the mobile header clean */
  }
  .header--public .nav__join {
    display: none; /* in the drawer's CTA — keep the mobile header clean */
  }
  .header .search-bar {
    flex: 1;
    max-width: none;
    min-width: 0;
    height: 40px;
    flex-direction: row-reverse;
  }
  .header .search-bar__btn {
    width: 36px;
    flex-shrink: 0;
    order: -1;
  }
  .header .search-bar__btn svg {
    width: 16px;
    height: 16px;
  }
  .header .search-bar__input {
    padding: 0 8px 0 8px;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header .search-bar__dropdown {
    display: none;
  }
  .header .search-bar__divider {
    display: none;
  }
  /* Hide user name/role, keep avatar only */
  .user-profile__info {
    display: none !important;
  }
  .user-profile {
    gap: 0 !important;
  }
  .user-profile__avatar {
    width: 34px;
    height: 34px;
  }
  .notification-btn {
    width: 34px;
    height: 34px;
    padding: 7px;
    flex-shrink: 0;
  }
  /* Show hamburger */
  .mobile-menu-btn {
    display: flex !important;
  }
  /* Keep login button visible */
  .header__right .btn--primary {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .main {
    padding: 80px 16px 24px;
  }
  .profile-setup-card__hero-image {
    height: 280px;
  }
  .profile-setup-card__title {
    font-size: 24px;
  }
  .profile-setup-card__description {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 10px var(--page-gutter);
    position: relative;

  }

  .logo {
    gap: 5px;
  }

  .logo__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .logo__icon svg {
    width: 20px;
    height: 20px;
  }

  .logo__text {
    font-size: 20px;
  }

  .main {
    padding: 72px 12px 20px;
  }
}

/* Mobile menu button - hidden by default */
.mobile-menu-btn {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: #f5f5f5;
}

/* Hamburger bars — animate into an X when the drawer is open */
.mobile-menu-btn__bar {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #374151;
  transition: top 0.28s ease, transform 0.28s ease, opacity 0.18s ease;
}

.mobile-menu-btn__bar--1 { top: 13px; }
.mobile-menu-btn__bar--2 { top: 17px; }
.mobile-menu-btn__bar--3 { top: 21px; }

/* Hamburger → cross (X) when its drawer is open. Both JS toggles set
   aria-expanded on the button, so one rule covers guest + logged-in headers. */
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--1 { top: 17px; transform: rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--2 { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--3 { top: 17px; transform: rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above the header (z:1300) so the drawer is a self-contained full-screen
     overlay — it covers the header instead of depending on it staying at the
     viewport top, which broke once the (position:relative) header scrolled away. */
  z-index: 1400;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-nav-overlay.active {
  opacity: 1;
}

.mobile-nav-drawer {
  position: absolute;
  top: 0;
  left: 0;
  /* Standard drawer width (matches the logged-in dashboard drawer). */
  width: 284px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  padding: 12px 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-nav-overlay.active .mobile-nav-drawer {
  transform: translateX(0);
}

/* Drawer top bar: logo on the left, close (X) on the right */
.mobile-nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: #374151;
  flex-shrink: 0;
}

.mobile-nav-drawer__close:hover {
  background: #f5f5f5;
}

.mobile-nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  transition: all 0.15s ease;
}

.mobile-nav-drawer__link:hover {
  background: #f8f6f2;
}

.mobile-nav-drawer__link--active {
  background: rgba(255, 56, 93, 0.1);
  color: #ff385d;
}

.mobile-nav-drawer__divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

/* Guest drawer: Sign In + Join Free as a matched button pair */
.mobile-nav-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.mobile-nav-drawer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mobile-nav-drawer__btn--outline {
  background: #fff;
  color: #374151;
  border: 1.5px solid #e5e7eb;
}

.mobile-nav-drawer__btn--outline:hover {
  background: #f8f6f2;
  border-color: #d1d5db;
}

.mobile-nav-drawer__btn--filled {
  background: #ff385d;
  color: #fff;
  border: 1.5px solid #ff385d;
}

.mobile-nav-drawer__btn--filled:hover {
  background: #e93054;
  border-color: #e93054;
}

@media (min-width: 1025px) {
  .mobile-nav-overlay {
    display: none !important;
  }
}

/* =============== GLOBAL SITE FOOTER (.foot) =============== */
.foot { background: #120b0d; color: #cbd5e1; padding: 60px 48px 28px; }
.foot__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 3fr;
    gap: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.foot__brand { display: flex; flex-direction: column; gap: 14px; }
.foot__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.4px;
}
.foot__logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ff385d;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}
.foot__tagline {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    max-width: 280px;
    line-height: 1.6;
}
/* Link columns sit flush against the right edge — `auto` sizes each column to
   its own content and `justify-content: end` pushes the whole set right, so no
   empty track is left over on the far side. */
.foot__cols {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: end;
    gap: 24px 72px;
}
.foot__cols h5 {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.foot__cols a {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.15s;
}
.foot__cols a:hover { color: #fff; }
.foot__bottom {
    max-width: 1280px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.foot__social {
    display: flex;
    align-items: center;
    gap: 14px;
}
.foot__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.foot__social-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
@media (max-width: 1100px) {
    .foot__inner { grid-template-columns: 1fr; gap: 32px; }
    /* Stacked layout — back to left-aligned, evenly split columns. */
    .foot__cols { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 24px; }
}
@media (max-width: 720px) {
    .foot { padding: 48px 20px 24px; }
    .foot__cols { grid-template-columns: 1fr 1fr; }
    .foot__bottom { flex-direction: column; text-align: center; }
}

/* =====================================================================
 * App-wide modal lock — used by lightbox and confirm dialogs.
 * ===================================================================== */
body.app-modal-open { overflow: hidden; }

/* =====================================================================
 * Shared image lightbox (window.openImageLightbox)
 * ===================================================================== */
.app-image-lightbox {
    position: fixed; inset: 0; z-index: 10002;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.92); padding: 24px;
}
.app-image-lightbox.is-open { display: flex; }
.app-image-lightbox__image {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.app-image-lightbox__close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; padding: 0;
    background: rgba(255, 255, 255, 0.10); border: none; border-radius: 50%;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.app-image-lightbox__close:hover { background: rgba(255, 255, 255, 0.20); }

/* =====================================================================
 * Shared confirmation dialog (window.openConfirmDialog)
 * ===================================================================== */
.app-confirm {
    position: fixed; inset: 0; z-index: 10001;
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.app-confirm.is-open { display: flex; }
.app-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.app-confirm__panel {
    position: relative; z-index: 1; width: 100%; max-width: 420px;
    background: #fff; border-radius: 16px; padding: 26px 24px 22px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.30), 0 8px 16px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.app-confirm__icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 56, 93, 0.12); color: #ff385d;
    box-shadow: 0 0 0 6px rgba(255, 56, 93, 0.06);
}
.app-confirm__title {
    font-family: 'Inter', sans-serif;
    font-size: 18px; font-weight: 800; color: #0f172a;
    margin: 0 0 8px; letter-spacing: -0.1px;
}
.app-confirm__msg {
    font-family: 'Inter', sans-serif;
    font-size: 13px; color: #64748b; margin: 0 0 22px; line-height: 1.55;
}
.app-confirm__actions {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.app-confirm__btn {
    flex: 1 1 auto; min-width: 0; padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    border-radius: 10px; cursor: pointer; transition: all 0.15s ease;
    border: 1px solid transparent; white-space: nowrap;
}
.app-confirm__btn--ghost { background: #fff; border-color: #e2e8f0; color: #475569; }
.app-confirm__btn--ghost:hover { background: #f8fafc; border-color: #cbd5e1; }
.app-confirm__btn--primary {
    background: #ff385d; color: #fff;
    box-shadow: 0 4px 12px rgba(255, 56, 93, 0.22);
}
.app-confirm__btn--primary:hover { background: #e62e53; }
.app-confirm__btn--danger {
    background: #ff385d; color: #fff;
    box-shadow: 0 4px 12px rgba(255, 56, 93, 0.22);
}
.app-confirm__btn--danger:hover { background: #e62e53; }
.app-confirm__btn:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   GLOBAL SHARED COMPONENTS
   These classes are used across multiple pages — keep them here
   so every blade gets them via styles.css (loaded everywhere).
   ============================================================ */

/* ---- Status pills (used in dashboard, bookings, billing, notifications) ---- */
.pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; text-transform:capitalize; }
.pill--confirmed { background:#dcfce7; color:#15803d; }
.pill--pending   { background:#fef3c7; color:#a16207; }
.pill--inquiry   { background:#dbeafe; color:#1d4ed8; }
.pill--new       { background:#fce7f3; color:#be185d; }
.pill--responded { background:#dbeafe; color:#1d4ed8; }
.pill--completed { background:#dcfce7; color:#15803d; }
.pill--cancelled { background:#fee2e2; color:#b91c1c; }
.pill--default   { background:#f1f5f9; color:#64748b; }

/* ---- Avatar initial gradients (used in dashboard, dropdown, profile rows) ---- */
.av-rose   { background:linear-gradient(135deg,#ec4899,#db2777); }
.av-blue   { background:linear-gradient(135deg,#60a5fa,#3b82f6); }
.av-green  { background:linear-gradient(135deg,#4ade80,#22c55e); }
.av-purple { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.av-orange { background:linear-gradient(135deg,#fb923c,#ea580c); }
.av-teal   { background:linear-gradient(135deg,#2dd4bf,#0d9488); }

/* ============================================================
   MOBILE DRAWER extras — only rendered when the dashboard-sidebar
   is an off-canvas drawer (<=1024px). Desktop sidebar is untouched.
   ============================================================ */
/* Hidden by default (desktop); the media query below re-shows them <=1024. */
.sidebar-mobile-only { display: none; }

/* Country selector at the top of the drawer */
/* Drawer primary browse button */
.drawer-browse-btn {
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 14px;
  margin-bottom: 8px;
  background: #ff385d;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  text-decoration: none;
}
.drawer-browse-btn:hover { background: #e62e53; }
/* Public pages use the dashboard sidebar ONLY as a mobile drawer — hide the desktop rail. */
@media (min-width: 1025px) {
  .dashboard-sidebar--drawer-only { display: none !important; }
}

.sidebar-country {
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #f8f6f2;
  border: 1px solid #ebe5d8;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #181012;
  cursor: pointer;
}
.sidebar-country__flag { border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.sidebar-country__label { flex: 1; text-align: left; }
.sidebar-country__caret { color: #9ca3af; flex-shrink: 0; }

/* Divider line */
.sidebar-divider { height: 1px; background: #ebe5d8; margin: 4px 0; border: 0; }
/* Pushes the divider + profile card to the very bottom of the flex-column sidebar */
.sidebar-divider--push { margin-top: auto; }

/* Upgrade card (shown when no paid plan) */
.sidebar-upgrade {
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff385d, #ff6f5b);
  color: #fff;
  text-decoration: none;
  /* top:auto pushes the upgrade card (and the profile card below it) to the
     bottom of the drawer, just above the user card. */
  margin: auto 0 8px;
}
.sidebar-upgrade__title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; }
.sidebar-upgrade__text { font-family: 'Inter', sans-serif; font-size: 12.5px; opacity: 0.92; line-height: 1.4; }
.sidebar-upgrade__btn {
  margin-top: 8px;
  align-self: flex-start;
  background: #fff;
  color: #ff385d;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
}

.profile-card--bottom { margin-top: 4px; }

/* Drawer top bar: Pixlfy logo (left) + close X (right) */
.drawer-top {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  color: #374151;
  flex-shrink: 0;
}
.drawer-close:hover { background: #f5f5f5; }

/* ============================================================
   SIDE NAV → OFF-CANVAS DRAWER (<=1024px)
   SINGLE SOURCE OF TRUTH. dashboard.css / dashboard-client.css used to
   carry their own copies of these rules, which fought each other in the
   cascade (profile card at the top in one, at the bottom in the other) and
   left the drawer half-styled. They no longer do — edit only this block.

   Layout: the panel is a fixed, full-height flex column with three parts —
   a pinned top bar, a SINGLE scrolling area (the nav list), and a pinned
   footer (upgrade card + user card). Only the nav list scrolls, so the
   drawer can never "break" mid-scroll no matter how long the menu is or how
   far the page behind it was scrolled.

   Selectors are written `.dashboard-sidebar.dashboard-sidebar` (the class
   repeated) purely to out-weigh the desktop rules in dashboard*.css, which
   load after this file. It avoids a wall of !important.
   ============================================================ */
@media (max-width: 1024px) {
  /* top profile card is desktop-only; the drawer shows its own at the bottom */
  .sidebar-desktop-only { display: none; }
  .drawer-top { display: flex; }
  .drawer-browse-btn { display: flex; }
  .sidebar-country { display: flex; }
  .sidebar-divider.sidebar-mobile-only { display: block; }
  .sidebar-upgrade { display: flex; }
  .profile-card--bottom { display: flex; }
  /* Drawer-only nav links (Your Profile / Subscription) + profile country flag */
  .sidebar-nav__link.sidebar-mobile-only { display: flex; }
  .profile-card__role img.sidebar-mobile-only { display: inline-block; }

  /* ---- The sliding panel ---- */
  .dashboard-sidebar.dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: none;
    min-height: 0;
    height: auto;
    z-index: 1400;
    margin: 0;
    padding: 0;            /* each row owns its own padding now */
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    border-bottom: none;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    /* The panel itself never scrolls — .sidebar-nav inside it does.
       !important: the messages page forces overflow-y:auto on the rail. */
    overflow: hidden !important;
    overscroll-behavior: contain;
    /* Closed state. visibility keeps it out of the tab order + screen readers
       while it is parked off-screen; it flips instantly on open and only after
       the slide-out finishes on close (the 0s .3s delay). */
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
    will-change: transform;
  }

  .dashboard-sidebar.dashboard-sidebar.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  /* ---- Row 1: pinned top bar (logo + close X) ---- */
  .dashboard-sidebar.dashboard-sidebar .drawer-top {
    order: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
  }

  /* ---- Row 2: pinned primary CTA ---- */
  .dashboard-sidebar.dashboard-sidebar .drawer-browse-btn {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    margin: 14px 16px 2px;
    padding: 11px 14px;
  }

  /* ---- Row 3: the ONLY scrolling area ---- */
  .dashboard-sidebar.dashboard-sidebar .sidebar-nav {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;                    /* lets a flex child actually shrink+scroll */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;     /* scrolling the menu never scrolls the page */
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-sidebar.dashboard-sidebar .sidebar-nav__link {
    padding: 11px 12px;
    font-size: 15px;
    flex-shrink: 0;                   /* rows keep their height in the scroller */
  }

  /* Hairline where the scrolling list meets the pinned upgrade card, so a
     half-scrolled row reads as "there's more below" instead of as a broken
     cut-off. Not needed above the user card — that has its own border-top. */
  .dashboard-sidebar.dashboard-sidebar .sidebar-nav:has(+ .sidebar-upgrade) {
    border-bottom: 1px solid #f1f5f9;
  }

  /* ---- Row 4 + 5: pinned footer ---- */
  .dashboard-sidebar.dashboard-sidebar .sidebar-logout {
    order: 3;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
  }

  .dashboard-sidebar.dashboard-sidebar .sidebar-upgrade {
    order: 4;
    flex: 0 0 auto;
    margin: 0 16px 12px;
  }

  .dashboard-sidebar.dashboard-sidebar .profile-card {
    order: 5;
    flex: 0 0 auto;
    margin: 0;
    /* safe-area padding keeps the user card clear of the iOS home indicator */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border: 0;
    border-top: 1px solid #f1f5f9;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- Dimmed backdrop (element is created by the drawer script) ---- */
  .dashboard-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1390;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .dashboard-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  /* ---- Page scroll lock while the drawer is open ----
     Freezing the body with position:fixed (instead of overflow:hidden, which
     iOS Safari ignores) is what stops the page behind from scrolling and
     losing its place. The script stores/restores the scroll offset in `top`. */
  body.drawer-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
}

/* Respect the OS "reduce motion" setting — the drawer snaps instead of slides. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .dashboard-sidebar.dashboard-sidebar,
  .dashboard-sidebar.dashboard-sidebar.is-open,
  .dashboard-backdrop { transition-duration: 0s; }
}

/* Never let the drawer or its backdrop leak into the desktop rail layout. */
@media (min-width: 1025px) {
  .dashboard-backdrop { display: none !important; }
  body.drawer-open { position: static; overflow: visible; }
}

/* ---- Sidebar nav emoji icons (used by every internal page that includes dashboard-sidebar) ---- */
.sidebar-nav__link .nav-emoji {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    background: #f1f5f9;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-nav__link:hover .nav-emoji { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(15,23,42,0.06); }
.sidebar-nav__link--active .nav-emoji { box-shadow: 0 2px 6px rgba(255,56,93,0.18); }
.nav-emoji--rose    { background: #fef2f4; }
.nav-emoji--emerald { background: #dcfce7; }
.nav-emoji--amber   { background: #fef3c7; }
.nav-emoji--blue    { background: #dbeafe; }
.nav-emoji--violet  { background: #ede9fe; }
.nav-emoji--slate   { background: #f1f5f9; }

/* ---- Unread message badge (used in sidebar + header) ---- */
.unread-message-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E8284A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* ============================================================
   Upgrade modal (extracted from components/upgrade-modal.blade.php)
   Triggered globally via showUpgradeModal(featureKey).
   ============================================================ */
.upgrade-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 9999;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.upgrade-modal.is-open { display: flex; }
.upgrade-modal__panel {
    background: #fff; border-radius: 16px;
    max-width: 420px; width: 90%;
    padding: 32px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: upgradeSlideIn 0.25s ease;
}
.upgrade-modal__close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; cursor: pointer;
    padding: 4px; color: #94a3b8;
}
.upgrade-modal__icon {
    width: 64px; height: 64px;
    background: rgba(255, 56, 93, 0.08);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.upgrade-modal__title {
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700;
    color: #181012; margin-bottom: 8px;
}
.upgrade-modal__msg {
    font-family: 'Inter', sans-serif;
    font-size: 14px; color: #64748b;
    line-height: 1.6; margin-bottom: 24px;
}
.upgrade-modal__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: #ff385d; color: #fff;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}
.upgrade-modal__cta:hover { background: #e62e53; }
.upgrade-modal__note {
    font-family: 'Inter', sans-serif;
    font-size: 12px; color: #94a3b8;
    margin-top: 16px;
}
@keyframes upgradeSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Confirm modal — same visual language as upgrade-modal, with two buttons.
   Opened from JS via window.showConfirmModal({title, message, confirmText, onConfirm}).
   ============================================================ */
.confirm-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 9999;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.confirm-modal.is-open { display: flex; }
.confirm-modal__panel {
    background: #fff; border-radius: 16px;
    max-width: 420px; width: 90%;
    padding: 32px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: upgradeSlideIn 0.25s ease;
}
.confirm-modal__close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; cursor: pointer;
    padding: 4px; color: #94a3b8;
}
.confirm-modal__icon {
    width: 64px; height: 64px;
    background: rgba(255, 56, 93, 0.08);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.confirm-modal__title {
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700;
    color: #181012; margin-bottom: 8px;
}
.confirm-modal__msg {
    font-family: 'Inter', sans-serif;
    font-size: 14px; color: #64748b;
    line-height: 1.6; margin-bottom: 24px;
}
.confirm-modal__actions {
    display: flex; gap: 12px; justify-content: center;
}
.confirm-modal__cancel {
    padding: 12px 24px; background: #f1f5f9; color: #334155;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.confirm-modal__cancel:hover { background: #e2e8f0; }
.confirm-modal__cta {
    padding: 12px 28px; background: #ff385d; color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.confirm-modal__cta:hover { background: #e62e53; }

/* ============================================================
   Currency picker — sits in place of the static "$" prefix on a
   price-input. The trigger looks like a flat pill; the menu is an
   absolutely-positioned list of {symbol, code, name} options.
   ============================================================ */
.currency-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.currency-picker__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 8px 0 12px;
    background: transparent; border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    color: #181012;
    cursor: pointer;
    border-right: 1px solid #e2e8f0;
    margin-right: 0;
    height: 28px;
}
.currency-picker__symbol { font-size: 15px; }
.currency-picker__code { color: #0f172a; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.currency-picker__chevron { color: #6b7280; }
.currency-picker__menu {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    z-index: 1000;
    min-width: 96px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 4px;
    list-style: none;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}
.currency-picker__option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #181012;
}
.currency-picker__option:hover { background: #f8fafc; }
.currency-picker__option.is-selected { background: rgba(255, 56, 93, 0.08); color: #ff385d; }
.currency-picker__option-symbol { font-weight: 700; min-width: 24px; }
.currency-picker__option-code { font-weight: 700; min-width: 36px; }
.currency-picker__option-name { color: #64748b; font-size: 12px; }

/* ============================================================
   User profile dropdown (extracted from layouts/partials/user-profile-dropdown.blade.php)
   ============================================================ */
.user-profile__dropdown {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 260px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 28px -8px rgba(17, 24, 39, 0.18), 0 4px 10px -4px rgba(17, 24, 39, 0.08);
    border: 1px solid #f1f5f9;
    z-index: 200;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.user-profile__dropdown.is-open { display: block; }
.user-profile__dropdown.is-visible { opacity: 1; transform: none; }
.user-profile__header {
    padding: 16px 18px 14px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.user-profile__avatar {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fde2e4; color: #e11d48;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 14px;
    /* overflow:hidden removed so the status dot can overlay the frame edge.
       Inner img/initials get their own border-radius below to stay circular. */
}
.user-profile__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.user-profile__avatar-initials {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: #ff385d; color: #fff;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 14px;
    text-transform: uppercase;
}
.user-profile__avatar-status {
    position: absolute; right: 1px; bottom: 1px;
    width: 10px; height: 10px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1;
}
.user-profile__user { min-width: 0; }
.user-profile__name {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 14px;
    color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-profile__role { font-size: 12px; color: #6b7280; }

.pd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px;
    color: #374151;
    text-decoration: none;
    font-weight: 500; font-size: 14px;
}
.pd-item:hover { background: #f9fafb; }
.pd-item--primary { color: #ff385d; background: #fff1f3; font-weight: 600; }
.pd-item--logout {
    width: 100%;
    background: none; border: 0; cursor: pointer;
    color: #ff385d; font-weight: 600;
    text-align: left;
    font-family: inherit;
}
.pd-item--row { justify-content: space-between; cursor: default; }
.pd-item__row-left { display: flex; align-items: center; gap: 12px; }
.pd-item__badge {
    padding: 3px 10px; background: #f3f4f6;
    color: #6b7280;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    border-radius: 8px;
}
.pd-divider { height: 1px; background: #f1f5f9; }

/* ============================================================
   Reference Links collapse — used by project create + edit so
   the tag list doesn't grow unbounded. When .reference-tags has
   .reference-tags--collapsed, tags beyond the 4th are hidden;
   the inline JS toggle button switches the class.
   ============================================================ */
.reference-tags.reference-tags--collapsed .reference-tag:nth-child(n+5) {
    display: none;
}
.reference-toggle-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ff385d;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.reference-toggle-btn:hover {
    background: rgba(255, 56, 93, 0.05);
    border-color: #ff385d;
}

/* ============================================================
   Global form-error styling
   Any input/select/textarea that the Blade `@error` block (or
   client-side JS) marks with .form-input--error gets a red
   border; .form-error message text is red. Centralised here so
   every page renders validation errors consistently.
   ============================================================ */
.form-input--error,
input.form-input--error,
select.form-input--error,
textarea.form-input--error {
    border-color: #ff385d !important;
    box-shadow: 0 0 0 1px rgba(255, 56, 93, 0.15);
}

.form-select-wrapper.form-input--error,
.form-select.form-input--error,
.form-input-wrapper.form-input--error {
    border-color: #ff385d !important;
    box-shadow: 0 0 0 1px rgba(255, 56, 93, 0.15);
}

.form-error {
    display: block;
    color: #dc2626;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}

/* ============================================================
   Tab rows (nf-tabs / portfolio-tabs) scroll horizontally as a
   carousel on mobile instead of wrapping to multiple lines.
   Desktop layout is unchanged.
   ============================================================ */
@media (max-width: 768px) {
  .nf-tabs,
  .portfolio-tabs,
  .inv-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .nf-tabs::-webkit-scrollbar,
  .portfolio-tabs::-webkit-scrollbar,
  .inv-tabs::-webkit-scrollbar { display: none; }
  .nf-tabs > *,
  .portfolio-tabs > *,
  .inv-tabs > * { flex-shrink: 0; white-space: nowrap; }
}

/* ============================================================
   BOTTOM NAVIGATION — mobile only, logged-in users
   Five primary tabs fixed at the viewport bottom (native-app style).
   Hidden on desktop; the drawer/backdrop float above it on mobile.
   ============================================================ */
.bottom-nav { display: none; }

@media (max-width: 1024px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: #ffffff;
    border-top: 1px solid #ececec;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.06);
  }

  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 0;
    text-decoration: none;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }

  .bottom-nav__item svg {
    width: 23px;
    height: 23px;
    display: block;
  }

  .bottom-nav__item.is-active { color: #ff385d; }

  .bottom-nav__badge {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff385d;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-sizing: content-box;
  }

  /* Reserve space so the fixed bar never covers page content — only when the
     bar actually exists (i.e. logged in; guests have no .bottom-nav element). */
  body:has(.bottom-nav) { padding-bottom: 64px; }
  /* The drawer (z-index 1400) and its backdrop (1390) already float above this
     bar — see the "SIDE NAV → OFF-CANVAS DRAWER" block. */
}

/* ============================================================
   PUBLIC DRAWER — clean hamburger↔X toggle.
   The public header floats ABOVE its drawer, so the hamburger (which
   morphs to an X) stays visible and IS the close. The drawer slides in
   BELOW the header and its own top-bar X is hidden. Dashboard pages use
   header--white (untouched) and keep their in-drawer close.
   ============================================================ */
@media (max-width: 1024px) {
  .header--public { z-index: 1300; }

  /* Both mobile drawers are SELF-CONTAINED full-screen overlays that sit ABOVE
     the header (see the z-index bumps) and carry their OWN top bar (logo +
     close). They no longer depend on the header staying at the viewport top —
     the header is position:relative and scrolls away, which is exactly what
     broke the old header-anchored drawers once the page was scrolled. Solid
     panel from top:0, height:100%, no header-height padding hacks. */
  .mobile-nav-drawer {
    top: 0;
    height: 100%;
  }
  .mobile-nav-drawer__top { display: flex; }

  /* The dashboard drawer on public pages needs nothing extra — the canonical
     drawer block already pins it to top:0/bottom:0 with its own top bar. */
}

/* Get-started page: keep the "Sign In" link in the mobile header, on the right
   just after the country pill (other guest pages hide it — it's in the drawer). */
@media (max-width: 1024px) {
  body.page--get-started .header--public .nav__signin {
    display: inline-flex;
    align-items: center;
    padding: 8px 8px;
    font-size: 13px;
    flex-shrink: 0;
  }
}