/* ============================================================
   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;
}

* {
  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 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}
.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-only on mobile (compact pill; label + caret dropped). */
  /* 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; }
  .page-container--dashboard .header { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---- 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 40px;
}

/* 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. */
.header--app { padding: 12px 32px; }

.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 — slim primary bar that auto-shows during any fetch */
.app-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 56, 93, 0.12);
  z-index: 10000;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.app-loader.is-active { opacity: 1; }
.app-loader__bar {
  position: absolute;
  top: 0;
  left: -30%;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, rgba(255,56,93,0) 0%, #ff385d 50%, rgba(255,56,93,0) 100%);
  animation: appLoaderSlide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes appLoaderSlide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* 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 16px;
    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 12px;
    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 12px;
    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;
  z-index: 999;
  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;
  width: 280px;
  max-width: 80vw;
  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;
}
.foot__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.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; }
    .foot__cols { grid-template-columns: repeat(2, 1fr); }
}
@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; }

@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 base dashboard CSS reorders sidebar items via flex `order` (nav:1,
     profile:99) which scrambles the drawer's DOM order. Pin explicit orders so
     the drawer reads: logo/close -> country -> nav -> (gap) -> upgrade -> user card.
     !important because dashboard.css loads after styles.css. */
  .dashboard-sidebar .drawer-top { order: 0 !important; }
  .dashboard-sidebar .drawer-browse-btn { order: 1 !important; }
  .dashboard-sidebar .sidebar-nav { order: 3 !important; }
  .dashboard-sidebar .sidebar-logout { order: 4 !important; margin-top: 0 !important; }
  .dashboard-sidebar .sidebar-upgrade { order: 5 !important; }
  .dashboard-sidebar .profile-card { order: 7 !important; margin-top: 0 !important; }
  /* When there's no upgrade card, the profile card itself pushes to the bottom. */
  .dashboard-sidebar .profile-card.profile-card--push { margin-top: auto !important; }
  /* Flush the user card to the bottom — remove the extra gap + border below it. */
  .dashboard-sidebar .profile-card--bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    /* Divider line above the profile block — matches the user-profile panel's
       header divider (.pd-divider). */
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
  }
  .dashboard-sidebar { padding-bottom: 16px !important; }
}

/* ---- 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; }

  /* Off-canvas drawer + its backdrop must float above the bottom bar. */
  .dashboard-sidebar { z-index: 1200; }
  .dashboard-backdrop { z-index: 1150; }
}

/* ============================================================
   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; }

  /* Guest drawer: flush under the header (exact height via --pub-header-h), no top bar.
     Content left-aligned to the header brand name (--pub-brand-x, minus the link's
     own 12px padding) so the list sits directly under "Pixlfy". */
  .mobile-nav-drawer {
    top: var(--pub-header-h, 60px);
    height: calc(100% - var(--pub-header-h, 60px));
    /* Item TEXT aligns under the brand; the icon (18px) + gap (12px) + link
       padding (12px) = 42px sits to the left, in the gutter. */
    padding-left: max(6px, calc(var(--pub-brand-x, 56px) - 42px));
  }
  .mobile-nav-drawer__top { display: none; }

  /* Logged-in public drawer (drawer-only variant): same, but its emoji icon is
     28px wide → 28 + 12 gap + 12 padding = 52px gutter before the text. */
  .dashboard-sidebar--drawer-only {
    top: var(--pub-header-h, 60px) !important;
    padding-left: max(6px, calc(var(--pub-brand-x, 56px) - 52px)) !important;
  }
  .dashboard-sidebar--drawer-only .drawer-top { display: none !important; }
}

/* 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;
  }
}