/* Loopin Platform — Pinterest Ideas inspired UI */
@import url('../webfonts/fonts.css');

/* Hide theme header on Loopin Platform pages (Explore, Artists, profiles, etc.) */
body.loopin-social-page #header,
body.loopin-social-page #headerimg,
body.loopin-social-page #page > hr,
body.loopin-user-portal-page #header,
body.loopin-user-portal-page #headerimg,
body.loopin-user-portal-page #page > hr,
body.loopin-social-page .lx-header,
body.loopin-social-page .lx-mobile-panel,
body.loopin-social-page header.wp-block-template-part,
body.loopin-user-portal-page .lx-header,
body.loopin-user-portal-page .lx-mobile-panel,
body.loopin-user-portal-page header.wp-block-template-part,
/* Geloni coded site header (geloni-coded-header) — conflicts with platform nav.
 * Theme forces #glh-header{display:block !important}; beat it with body+id. */
body.loopin-social-page header.glh,
body.loopin-social-page .glh,
body.loopin-social-page .glh-drawer,
body.loopin-social-page #glh-header,
body.loopin-social-page #glh-drawer,
body.loopin-user-portal-page header.glh,
body.loopin-user-portal-page .glh,
body.loopin-user-portal-page .glh-drawer,
body.loopin-user-portal-page #glh-header,
body.loopin-user-portal-page #glh-drawer,
body.loopin-pin-page header.glh,
body.loopin-pin-page .glh,
body.loopin-pin-page .glh-drawer,
body.loopin-pin-page #glh-header,
body.loopin-pin-page #glh-drawer,
body.loopin-auth-page header.glh,
body.loopin-auth-page .glh,
body.loopin-auth-page .glh-drawer,
body.loopin-auth-page #glh-header,
body.loopin-auth-page #glh-drawer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.loopin-social-page .wp-block-post-title,
body.loopin-user-portal-page .wp-block-post-title,
body.loopin-social-page .entry-header,
body.loopin-user-portal-page .entry-header,
body.loopin-social-page main .wp-block-site-title,
body.loopin-user-portal-page main .wp-block-site-title {
  display: none !important;
}

body.loopin-social-page main.wp-block-group,
body.loopin-user-portal-page main.wp-block-group {
  margin-top: 0 !important;
}

body.loopin-social-page main .wp-block-group.alignfull,
body.loopin-user-portal-page main .wp-block-group.alignfull {
  padding-top: 0 !important;
}

body.loopin-social-page .lx-main {
  padding-top: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body.loopin-social-page .lx-section {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  max-width: none;
}

body.loopin-social-page .lx-section > .lx-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.loopin-social-page .lx-article,
body.loopin-social-page .lx-article-content,
body.loopin-social-page .lx-single-layout {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.loopin-social-page .lx-sidebar,
body.loopin-social-page aside.lx-sidebar {
  display: none !important;
}

body.loopin-social-page .lx-article-content {
  margin-top: 0;
}

/* Page title duplicates Explore / Artists nav tabs */
body.loopin-social-page .lx-article > article > h1 {
  display: none !important;
}

body.loopin-user-portal-page .lx-main {
  padding-top: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body.loopin-user-portal-page .lx-section {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  max-width: none;
}

body.loopin-user-portal-page .lx-section > .lx-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.loopin-user-portal-page .lx-article,
body.loopin-user-portal-page .lx-article-content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.loopin-user-portal-page .lx-article > article > h1 {
  display: none !important;
}

#loopin-social-wrap {
  --loopin-red: #1B1B1B;
  --loopin-red-hover: #000000;
  --loopin-red-light: #FFE0E6;
  --loopin-bg: #FFFFFF;
  --loopin-bg-soft: #F1F1F1;
  --loopin-surface: #FFFFFF;
  --loopin-surface-solid: #FFFFFF;
  --loopin-text: #111111;
  --loopin-muted: #767676;
  --loopin-border: #E9E9E9;
  --loopin-border-strong: #CDCDCD;
  --loopin-primary: var(--loopin-red);
  --loopin-primary-dark: var(--loopin-red-hover);
  --loopin-primary-light: var(--loopin-red-light);
  --loopin-blush: #FFF0F3;
  --loopin-success: #007A6B;
  --loopin-warning: #B8924A;
  --loopin-danger: #C62828;
  --loopin-shadow-pin: 0 2px 8px rgba(0, 0, 0, 0.12);
  --loopin-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
  --loopin-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.16);
  --loopin-radius-pin: 16px;
  --loopin-radius-pill: 24px;
  --loopin-radius-sm: 12px;
  --loopin-font-serif: 'Cormorant Garamond', Georgia, serif;
  --loopin-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --loopin-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --loopin-swipe-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --loopin-swipe-duration: 0.45s;
  --loopin-pin-col: 236px;
  --loopin-pin-gap: 16px;
  --loopin-content-max: 1320px;
  --loopin-side-pad: clamp(1.5rem, 5vw, 3rem);
  --loopin-page-pad: var(--loopin-side-pad);

  background: var(--loopin-bg);
  color: var(--loopin-text);
  padding: clamp(1rem, 2vw, 1.5rem) var(--loopin-page-pad) 3rem;
  line-height: 1.5;
  font-family: var(--loopin-font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

#loopin-social-wrap * { box-sizing: border-box; }

#loopin-social-wrap {
  isolation: isolate;
}

#loopin-social-wrap[dir="rtl"],
#loopin-wrap[dir="rtl"],
#loopin-user-portal[dir="rtl"],
.loopin-social[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

#loopin-social-wrap[dir="ltr"],
#loopin-wrap[dir="ltr"],
#loopin-user-portal[dir="ltr"],
.loopin-social[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.loopin-social-main {
  max-width: var(--loopin-content-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(0.25rem, 1.5vw, 1rem);
}

/* Mobile page shell — consistent side padding (avoid edge-stuck content) */
@media (max-width: 767px) {
  #loopin-social-wrap {
    --loopin-side-pad: 1rem;
    --loopin-page-pad: 1rem;
    padding-top: 0;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .loopin-social-main,
  .loopin-dashboard-page .loopin-social-main,
  .loopin-social--portal-embed .loopin-social-main {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .loopin-user-portal {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  body.loopin-user-portal-page #loopin-user-portal {
    --loopin-dashboard-gutter: 16px;
    border-radius: 0;
    margin: 0;
    padding-inline: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.loopin-auth-page #loopin-user-portal {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .loopin-social-subheader {
    margin-bottom: 0;
  }

  .loopin-social-subheader-inner,
  .loopin-social-subheader-inner--megabar {
    max-width: none;
    /* Keep side inset so actions like «ورود» are not clipped by overflow-x: clip */
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .loopin-mobile-nav-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0;
    gap: 0.5rem;
    box-sizing: border-box;
  }

  .loopin-mobile-nav-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto !important;
    min-width: 0;
    max-width: none !important;
    margin-inline-start: auto !important;
  }

  .loopin-mobile-nav-bar-btn {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /*
   * Theme/Additional CSS previously restyled the search control into a fake
   * full-width input (placeholder via ::before). Force icon-only button.
   */
  .loopin-mobile-nav-bar .loopin-nav-search-btn,
  .loopin-mobile-nav-bar .loopin-nav-search-btn[data-loopin-open-explore-search],
  .loopin-mobile-nav-bar .loopin-nav-search-btn[data-loopin-open-specialists-search] {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--loopin-text, #111) !important;
    box-shadow: none !important;
  }

  .loopin-mobile-nav-bar .loopin-nav-search-btn::before,
  .loopin-mobile-nav-bar .loopin-nav-search-btn[data-loopin-open-explore-search]::before,
  .loopin-mobile-nav-bar .loopin-nav-search-btn[data-loopin-open-specialists-search]::before,
  body.loopin-page-explore-category .loopin-mobile-nav-bar .loopin-nav-search-btn[data-loopin-open-explore-search]::before {
    content: none !important;
    display: none !important;
  }

  .loopin-mobile-nav-bar .loopin-nav-search-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  .loopin-stories-bar {
    margin-block: 0 12px;
  }

  .loopin-stories-bar-inner {
    padding-inline: 0;
  }

  .loopin-directory,
  .loopin-directory--specialists,
  .loopin-feed,
  .loopin-feed--ideas,
  .loopin-profile,
  .loopin-profile-page,
  .loopin-onboarding,
  .loopin-dashboard-v2,
  .loopin-member-dashboard,
  .loopin-cert-view,
  .loopin-cert-view-shell,
  .loopin-single-post,
  .loopin-validation-grid,
  .loopin-specialists-results,
  .loopin-feed-header,
  .loopin-ideas-hero,
  .loopin-guest-membership-empty {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .loopin-specialists-hero,
  .loopin-specialists-advanced-search,
  .loopin-feed-header,
  .loopin-ideas-hero {
    padding-inline: 0;
  }

  .loopin-directory--specialists .loopin-specialists-hero,
  .loopin-directory--specialists .loopin-specialists-advanced-search {
    padding-inline: 0;
  }

  .loopin-pin-page .loopin-social-subheader {
    padding-inline: 0;
  }

  .loopin-pin-view-panel,
  .loopin-pin-view-below {
    padding-inline: 0;
  }

  .loopin-dashboard-v2 .loopin-dash-card,
  .loopin-dashboard-v2 .loopin-glass-card,
  .loopin-user-portal-intro,
  .loopin-user-portal-nav-list,
  .loopin-user-portal-section .loopin-dash-card,
  .loopin-user-portal-section .loopin-glass-card,
  .loopin-user-portal-section .loopin-form {
    border-radius: 12px;
  }

  .loopin-user-portal-intro,
  .loopin-user-portal-nav-list {
    margin-inline: 0;
  }

  .loopin-auth-card {
    border-radius: 12px;
    max-width: none;
    padding-inline: 0;
  }

  .loopin-social-main:has(.loopin-directory--specialists) {
    max-width: none;
    padding-inline: 0;
  }

  .loopin-directory--specialists {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Desktop/tablet layout — restore centered shells */
@media (min-width: 768px) {
  #loopin-social-wrap {
    --loopin-side-pad: clamp(1.5rem, 5vw, 3rem);
    --loopin-page-pad: var(--loopin-side-pad);
    padding: clamp(1rem, 2vw, 1.5rem) var(--loopin-page-pad) 3rem;
  }

  #loopin-social-wrap:has(.loopin-social-subheader) {
    padding-top: 0;
  }

  .loopin-social-main,
  .loopin-dashboard-page .loopin-social-main,
  .loopin-social--portal-embed .loopin-social-main {
    max-width: var(--loopin-content-max, 1320px);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.25rem, 1.5vw, 1rem);
  }

  .loopin-user-portal {
    max-width: var(--loopin-portal-max-width, 1320px);
    width: 100%;
    margin: 0 auto;
    padding-inline: clamp(0.85rem, 2.5vw, 1.25rem);
  }

  body.loopin-user-portal-page #loopin-user-portal {
    border-radius: var(--loopin-radius-xl, 28px) var(--loopin-radius-xl, 28px) 0 0;
    margin-inline: auto;
    margin-bottom: 0;
    padding-inline: clamp(0.85rem, 2.5vw, 1.25rem);
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.loopin-auth-page #loopin-user-portal {
    padding-inline: clamp(0.85rem, 2.5vw, 1.25rem);
  }

  .loopin-social-subheader {
    margin-bottom: 1rem;
  }

  .loopin-social-subheader-inner,
  .loopin-social-subheader-inner--megabar {
    max-width: var(--loopin-content-max, 1320px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
  }

  .loopin-stories-bar {
    margin-block: 12px 18px;
  }

  .loopin-stories-bar-inner {
    max-width: var(--loopin-content-max, 1320px);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 2vw, 1rem);
  }

  .loopin-social-subheader-inner--megabar {
    width: 100%;
    box-sizing: border-box;
  }

  .loopin-social-megabar-desktop {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .loopin-social-megabar-desktop .loopin-social-megabar {
    width: 100%;
  }

  .loopin-directory,
  .loopin-feed,
  .loopin-feed--ideas,
  .loopin-profile,
  .loopin-profile-page,
  .loopin-onboarding,
  .loopin-dashboard-v2,
  .loopin-member-dashboard,
  .loopin-cert-view,
  .loopin-single-post,
  .loopin-validation-grid,
  .loopin-specialists-results,
  .loopin-guest-membership-empty {
    max-width: none;
    width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  .loopin-cert-view-shell {
    max-width: 760px;
    margin-inline: auto;
  }

  .loopin-ideas-hero {
    padding: clamp(2rem, 5vw, 3.5rem) 1rem 1.5rem;
  }

  .loopin-feed-header {
    padding: 2rem 1rem;
  }

  .loopin-dashboard-v2 {
    max-width: 1180px;
    margin-inline: auto;
  }

  .loopin-dashboard-v2 .loopin-dash-card,
  .loopin-dashboard-v2 .loopin-glass-card,
  .loopin-user-portal-intro,
  .loopin-user-portal-nav-list,
  .loopin-user-portal-section .loopin-dash-card,
  .loopin-user-portal-section .loopin-glass-card {
    border-radius: var(--loopin-radius-lg, 16px);
  }

  .loopin-user-portal-intro,
  .loopin-user-portal-nav-list {
    margin-inline: 0;
  }

  .loopin-auth-card {
    border-radius: var(--loopin-radius-pin, 16px);
    max-width: min(440px, 100%);
    margin-inline: auto;
    padding: clamp(1.15rem, 3vw, 1.65rem);
  }

  .loopin-directory--specialists {
    padding-inline: 5%;
  }

  .loopin-directory--specialists .loopin-specialists-hero,
  .loopin-directory--specialists .loopin-specialists-advanced-search {
    padding-inline: 0;
  }
}

/* ── Pinterest Ideas hero ─────────────────────────────────── */
.loopin-ideas-hero {
  text-align: center;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1rem 1rem;
}

.loopin-ideas-title {
  font-family: var(--loopin-font-sans);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--loopin-text);
}

.loopin-ideas-subtitle {
  margin: 0 auto;
  max-width: 36ch;
  font-size: 1rem;
  color: var(--loopin-muted);
  line-height: 1.5;
}

.loopin-h1 {
  font-family: var(--loopin-font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.loopin-h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.loopin-h3 { font-size: 1rem; font-weight: 600; margin: 0; }

.loopin-lead {
  color: var(--loopin-muted);
  margin: 0 auto 1.5rem;
  max-width: 40ch;
  font-size: 1rem;
}

.loopin-moderation-notice {
  color: var(--loopin-muted);
  margin: -0.75rem 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.loopin-moderation-notice--compact {
  margin: 0.5rem 0 0;
  width: 100%;
  flex-basis: 100%;
}

/* ── Browse categories (horizontal scroll) ────────────────── */
.loopin-browse-section {
  margin-bottom: 1.25rem;
  padding: 0;
}

.loopin-browse-heading,
.loopin-review-form-title {
  font-family: var(--loopin-font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
  color: var(--loopin-text);
}

.loopin-browse-hint {
  margin: -.35rem 0 .75rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--loopin-muted);
}

.loopin-browse-intro {
  margin: 0 auto;
  max-width: 42ch;
}

.loopin-seo-crosslinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  margin: .85rem auto 0;
  max-width: 52ch;
}

.loopin-seo-crosslink {
  font-size: .875rem;
  font-weight: 600;
  color: var(--loopin-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.loopin-seo-crosslink:hover {
  color: var(--loopin-red-hover);
}

.loopin-featured-artists {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--loopin-border);
}

.loopin-featured-artists-title {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.loopin-artist-grid--preview {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (min-width: 1200px) {
  .loopin-artist-grid--preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.loopin-featured-artists-cta {
  margin: 1.35rem 0 0;
  text-align: center;
}

.loopin-feed--ideas,
.loopin-profile-page .loopin-tab-panel[data-tab="created"] {
  width: 100%;
}

/* ── Browse toolbar (dropdown filters) ───────────────────── */
.loopin-browse-toolbar {
  margin-bottom: 1.25rem;
}

.loopin-browse-toolbar--inline {
  margin-bottom: 0;
}

.loopin-browse-toolbar-fields {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-end;
  justify-content: center;
}

.loopin-directory-toolbar--filters {
  align-items: flex-end;
}

.loopin-browse-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.loopin-browse-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--loopin-muted);
  line-height: 1.2;
}

.loopin-browse-select {
  min-width: 9rem;
  max-width: 11rem;
}

.loopin-browse-clear {
  align-self: center;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--loopin-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: .5rem .25rem;
}

.loopin-browse-clear:hover {
  color: var(--loopin-text);
}

/* ── Mobile filter drawer ─────────────────────────────────── */
.loopin-mobile-filter-toggle,
.loopin-filter-backdrop,
.loopin-filter-panel-head {
  display: none;
}

.loopin-explore-search-form {
  margin: 0;
}

.loopin-explore-search-control {
  display: none;
}

.loopin-explore-search-icon svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.loopin-filter-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--loopin-text);
}

@media (max-width: 768px) {
  .loopin-mobile-filter-shell {
    position: relative;
    margin-bottom: 1rem;
  }

  .loopin-explore-search-shell:not(.is-open) {
    margin-bottom: 0;
  }

  .loopin-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem 1rem;
    border: 1px solid var(--loopin-border);
    border-radius: var(--loopin-radius-pill);
    background: #fff;
    color: var(--loopin-text);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
  }

  .loopin-explore-search-shell > .loopin-mobile-filter-toggle.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .loopin-explore-search-control {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .35rem .35rem .35rem .85rem;
    border: 1px solid var(--loopin-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 17, 17, .04);
  }

  .loopin-explore-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--loopin-red, #c2410c);
  }

  .loopin-explore-search-input.loopin-mobile-filter-toggle {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: .45rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: .9rem;
    font-weight: 500;
    color: var(--loopin-text);
    cursor: pointer;
  }

  .loopin-explore-search-input.loopin-mobile-filter-toggle::placeholder {
    color: var(--loopin-muted);
    font-weight: 500;
  }

  .loopin-explore-search-input.loopin-mobile-filter-toggle:focus {
    outline: none;
  }

  .loopin-explore-search-submit {
    flex: 0 0 auto;
    min-height: 2.15rem;
    padding: .45rem .95rem;
    border: 0;
    border-radius: 999px;
    background: var(--loopin-red, #c2410c);
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
  }

  .loopin-mobile-filter-toggle-icon {
    font-size: 1rem;
    line-height: 1;
  }

  .loopin-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(17, 17, 17, .35);
  }

  .loopin-filter-backdrop[hidden] {
    display: none !important;
  }

  .loopin-filter-panel {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 121;
    max-height: min(85vh, 640px);
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 32px rgba(17, 17, 17, .12);
    transform: translateY(100%);
    transition: transform .22s ease;
    overflow: hidden;
  }

  .loopin-filter-panel[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
  }

  .loopin-mobile-filter-shell.is-open .loopin-filter-panel {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .loopin-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem .25rem;
    border-bottom: 1px solid var(--loopin-border);
  }

  .loopin-filter-panel-close {
    border: 0;
    background: transparent;
    color: var(--loopin-text);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    padding: .35rem .5rem;
  }

  .loopin-filter-panel-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    max-height: calc(min(85vh, 640px) - 3rem);
  }

  .loopin-mobile-filter-shell .loopin-browse-toolbar,
  .loopin-mobile-filter-shell.loopin-directory-toolbar--filters > .loopin-filter-panel-body > .loopin-browse-toolbar {
    margin-bottom: 0;
  }

  .loopin-mobile-filter-shell .loopin-browse-toolbar-fields,
  .loopin-mobile-filter-shell.loopin-directory-toolbar--filters > .loopin-filter-panel-body {
    align-items: stretch;
  }

  .loopin-mobile-filter-shell .loopin-browse-field,
  .loopin-mobile-filter-shell .loopin-directory-search,
  .loopin-mobile-filter-shell .loopin-directory-sort,
  .loopin-mobile-filter-shell .loopin-directory-level {
    width: 100%;
    max-width: none;
  }

  .loopin-mobile-filter-shell .loopin-browse-select {
    max-width: none;
    width: 100%;
  }

  body.loopin-filter-panel-open {
    overflow: hidden;
  }
}

@media (min-width: 769px) {
  .loopin-mobile-filter-shell > .loopin-filter-panel {
    display: contents;
  }

  .loopin-mobile-filter-shell > .loopin-filter-panel > .loopin-filter-panel-body {
    display: contents;
  }
}

.loopin-review-form-title {
  margin-bottom: .25rem;
}

.loopin-category-scroller {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.loopin-category-scroller::-webkit-scrollbar { display: none; }

.loopin-cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.1rem;
  border: none;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

a.loopin-cat-pill:visited {
  color: var(--loopin-text);
}

.loopin-cat-pill:hover {
  background: #E9E9E9;
}

.loopin-cat-pill.is-active {
  background: var(--loopin-text);
  color: #fff;
}

a.loopin-cat-pill.is-active:visited {
  color: #fff;
}

.loopin-cat-pill.is-active:hover {
  background: #333;
}

/* ── Pin grid (fixed columns — related / non-feed grids) ─ */
.loopin-masonry {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--loopin-pin-gap);
  width: 100%;
}

@media (max-width: 1400px) {
  .loopin-masonry {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .loopin-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .loopin-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .loopin-masonry {
    grid-template-columns: 1fr;
  }
}

.loopin-masonry .loopin-empty,
.loopin-masonry .loopin-skeleton {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
}

/*
 * Explore feed: irregular (Pinterest-style) masonry via CSS columns.
 * Different image heights pack without large row gaps from CSS Grid.
 */
.loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
  display: block;
  width: 100%;
  column-count: 5;
  column-gap: var(--loopin-pin-gap, 16px);
  column-fill: balance;
}

.loopin-feed--ideas .loopin-feed-grid-view .loopin-pin,
.loopin-feed--ideas .loopin-feed-grid-view .loopin-portfolio-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--loopin-pin-gap, 16px);
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.loopin-feed--ideas .loopin-feed-grid-view .loopin-pin-media .loopin-portfolio-img,
.loopin-feed--ideas .loopin-feed-grid-view .loopin-pin-media video,
.loopin-feed--ideas .loopin-feed-grid-view .loopin-pin-media img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  display: block;
}

.loopin-feed--ideas .loopin-feed-grid-view .loopin-empty,
.loopin-feed--ideas .loopin-feed-grid-view .loopin-skeleton {
  column-span: all;
  -webkit-column-span: all;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

@media (max-width: 1400px) {
  .loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
    column-count: 4;
  }
}

@media (max-width: 1200px) {
  .loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
    column-count: 3;
  }
}

@media (max-width: 900px) {
  .loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
    column-count: 2;
  }
}

@media (max-width: 479px) {
  .loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
    column-count: 1;
  }
}

/* ── Pin card ─────────────────────────────────────────────── */
.loopin-pin,
.loopin-portfolio-card {
  margin-bottom: 0;
  display: block;
  width: 100%;
  min-width: 0;
}

.loopin-pin-media {
  position: relative;
  border-radius: var(--loopin-radius-pin);
  overflow: hidden;
  background: var(--loopin-bg-soft);
}

.loopin-pin-image-link {
  display: block;
  line-height: 0;
}

.loopin-pin-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  line-height: 0;
  text-align: left;
  position: relative;
}

.loopin-pin-gallery-open .loopin-portfolio-img,
.loopin-pin-gallery-open video {
  pointer-events: none;
  cursor: zoom-in;
}

.loopin-pin--profile .loopin-pin-gallery-open .loopin-portfolio-img,
.loopin-pin--profile .loopin-pin-gallery-open video {
  border-radius: var(--loopin-radius-pin);
}

.loopin-portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.loopin-portfolio-lightbox[hidden] {
  display: none !important;
}

body.loopin-lightbox-open {
  overflow: hidden;
}

body.loopin-lightbox-open #loopin-social-wrap {
  pointer-events: none;
}

body.loopin-lightbox-open #loopin-social-wrap video:not(.loopin-portfolio-lightbox-video) {
  visibility: hidden !important;
}

body.loopin-lightbox-open.loopin-lightbox-profile #loopin-social-wrap {
  visibility: hidden;
}

body.loopin-lightbox-open.loopin-lightbox-feed #loopin-social-wrap {
  visibility: visible;
  filter: blur(3px) saturate(0.92);
}

.loopin-portfolio-lightbox-backdrop {
  position: fixed;
  inset: 0;
}

.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-backdrop {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.loopin-portfolio-lightbox--profile .loopin-portfolio-lightbox-backdrop {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.loopin-portfolio-lightbox:not(.loopin-portfolio-lightbox--feed):not(.loopin-portfolio-lightbox--profile) .loopin-portfolio-lightbox-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.loopin-portfolio-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(960px, 100%);
  max-height: calc(100vh - 2rem);
  pointer-events: none;
}

.loopin-portfolio-lightbox-dialog > * {
  pointer-events: auto;
}

.loopin-portfolio-lightbox-stage {
  position: relative;
  display: block;
  line-height: 0;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
}

.loopin-portfolio-lightbox-image,
.loopin-portfolio-lightbox-video {
  max-width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  background: #111;
  vertical-align: middle;
}

.loopin-portfolio-lightbox-image[hidden],
.loopin-portfolio-lightbox-video[hidden] {
  display: none !important;
}

.loopin-portfolio-lightbox-close,
.loopin-portfolio-lightbox-nav {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.loopin-portfolio-lightbox-close {
  top: .75rem;
  right: .75rem;
}

.loopin-portfolio-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.loopin-portfolio-lightbox-prev { left: .75rem; }
.loopin-portfolio-lightbox-next { right: .75rem; }

.loopin-portfolio-lightbox-nav[hidden] {
  display: none !important;
}

.loopin-portfolio-lightbox--profile .loopin-portfolio-lightbox-nav:not([hidden]) {
  display: inline-flex;
}

.loopin-portfolio-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: .85rem;
  color: #fff;
}

.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-footer {
  display: none;
}

.loopin-portfolio-lightbox--profile .loopin-portfolio-lightbox-footer {
  display: flex;
}

.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-dialog {
  width: auto;
  max-width: none;
}

.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-stage {
  max-height: calc(100vh - 2rem);
}

.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-image,
.loopin-portfolio-lightbox--feed .loopin-portfolio-lightbox-video {
  max-width: calc(100vw - 2.5rem);
  max-height: calc(100vh - 2.5rem);
}

.loopin-portfolio-lightbox-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.loopin-portfolio-lightbox-counter {
  font-size: .875rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.loopin-portfolio-img,
.loopin-pin-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--loopin-radius-pin);
  transition: transform 0.5s var(--loopin-swipe-ease, var(--loopin-ease)), opacity 0.35s ease;
}

.loopin-pin-gallery-open:hover .loopin-portfolio-img,
.loopin-pin-gallery-open:hover video {
  transform: scale(1.02);
}

.loopin-pin-hover {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.1rem;
  padding: 0 .5rem 1rem;
  opacity: 0;
  transition: opacity 0.35s var(--loopin-swipe-ease, var(--loopin-ease));
  pointer-events: none;
  border-radius: inherit;
  background: transparent;
  z-index: 4;
}

.loopin-pin:hover .loopin-pin-hover,
.loopin-pin:focus-within .loopin-pin-hover {
  opacity: 1;
}

.loopin-pin-hover .loopin-pin-action,
.loopin-pin-hover .loopin-like-btn,
.loopin-pin-hover .loopin-share-btn,
.loopin-pin-hover .loopin-save-post-control,
.loopin-pin-hover .loopin-save-post-button {
  pointer-events: auto;
}

.loopin-pin-hover .loopin-pin-action,
.loopin-pin-hover .loopin-like-btn,
.loopin-pin-hover .loopin-share-btn,
.loopin-pin-hover .loopin-save-post-control {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .2rem;
  width: 1.75rem;
  min-width: 1.75rem;
  max-width: 1.75rem;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.loopin-pin-hover .loopin-pin-action:hover,
.loopin-pin-hover .loopin-like-btn:hover,
.loopin-pin-hover .loopin-share-btn:hover,
.loopin-pin-hover .loopin-save-post-button:hover,
.loopin-pin-hover .loopin-save-post-button:focus-visible {
  background: transparent;
  color: #fff;
  opacity: 0.9;
}

.loopin-pin-hover .loopin-like-btn.is-liked {
  color: #fff;
}

.loopin-pin-hover .loopin-like-btn .loopin-like-count {
  position: static;
  width: 100%;
  max-width: 1.75rem;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  clip: auto;
  white-space: nowrap;
  border: 0;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}

.loopin-pin-hover .loopin-share-btn {
  font-size: 0;
  line-height: 0;
}

.loopin-pin-hover .loopin-share-btn::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.loopin-pin-action {
  padding: .55rem .9rem;
  border: none;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-red);
  color: #fff;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--loopin-shadow-pin);
  transition: background .15s ease;
}

.loopin-pin-action.loopin-like-btn {
  background: rgba(255, 255, 255, 0.95);
  color: var(--loopin-text);
}

.loopin-pin-action:hover {
  background: var(--loopin-red-hover);
}

.loopin-pin-action.loopin-like-btn:hover {
  background: #fff;
}

.loopin-pin-action.loopin-like-btn.is-liked {
  background: var(--loopin-red-light);
  color: var(--loopin-red);
}

.loopin-pin-action.loopin-like-btn.is-liked:hover {
  background: var(--loopin-red-light);
}

.loopin-pin-action.loopin-like-btn::before {
  content: '♡ ';
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.05em;
}

.loopin-pin-action.loopin-like-btn.is-liked::before {
  content: '♥ ';
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.05em;
}

/* Pin-hover uses Instagram-style SVG icons — must follow generic .loopin-pin-action rules. */
.loopin-pin-hover .loopin-pin-action.loopin-like-btn::before,
.loopin-pin-hover .loopin-like-btn::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.loopin-pin-hover .loopin-pin-action.loopin-like-btn.is-liked::before,
.loopin-pin-hover .loopin-like-btn.is-liked::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z' fill='%23ff3040'/%3E%3C/svg%3E");
}

.loopin-pin-hover .loopin-pin-action,
.loopin-pin-hover .loopin-pin-action.loopin-like-btn,
.loopin-pin-hover .loopin-pin-action.loopin-like-btn.is-liked,
.loopin-pin-hover .loopin-pin-action.loopin-like-btn:hover,
.loopin-pin-hover .loopin-pin-action.loopin-like-btn.is-liked:hover,
.loopin-pin-hover .loopin-pin-action.loopin-share-btn,
.loopin-pin-hover .loopin-pin-action.loopin-share-btn:hover {
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: #fff;
}

.loopin-pin-meta {
  padding: .6rem .15rem .35rem;
}

.loopin-pin-title {
  font-family: var(--loopin-font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loopin-pin-title a {
  color: var(--loopin-text);
  text-decoration: none;
}

.loopin-pin-title a:hover {
  text-decoration: underline;
}

.loopin-pin-author {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  font-size: .8125rem;
  color: var(--loopin-muted);
}

.loopin-pin-author a {
  color: var(--loopin-muted);
  text-decoration: none;
  font-weight: 500;
}

.loopin-pin-author a:hover {
  color: var(--loopin-text);
}

.loopin-pin-category {
  display: block;
  margin-top: .3rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--loopin-muted);
}

.loopin-mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Profile (Pinterest creator) ──────────────────────────── */
.loopin-profile-page {
  width: 100%;
}

.loopin-profile-header {
  display: grid;
  gap: 1.25rem;
  padding: 1rem 0 1.25rem;
  margin-bottom: .5rem;
}

.loopin-profile-header--with-map {
  align-items: start;
}

@media (min-width: 960px) {
  .loopin-profile-header--with-map {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 1.5rem;
  }
}

.loopin-profile-header-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  gap: 0;
  min-width: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .loopin-profile-header-main {
    align-items: flex-start;
    text-align: right;
  }
}

.loopin-profile-header-location {
  min-width: 0;
}

.loopin-profile-header-location .loopin-profile-drive {
  height: 100%;
  padding: 1.15rem 1.2rem 1.2rem;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pin);
}

.loopin-profile-avatar {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.loopin-profile-header-body {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.loopin-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: var(--loopin-radius-pill);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}

.loopin-badge-valid {
  background: #E6F4EA;
  color: var(--loopin-success);
}

.loopin-name-with-verified {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.loopin-name-with-verified .loopin-name-text {
  min-width: 0;
}

.loopin-skill-level-badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  border: 1px solid var(--loopin-border);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--loopin-muted);
  white-space: nowrap;
}

.loopin-profile-identity {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 .65rem;
  max-width: 100%;
}

.loopin-profile-identity .loopin-name-with-verified,
.loopin-profile-identity .loopin-h1,
.loopin-profile-identity .loopin-artist-card-name,
.loopin-profile-identity .loopin-pin-view-creator-name,
.loopin-profile-identity .loopin-profile-name {
  margin: 0;
}

.loopin-identity-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.loopin-identity-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--loopin-bg-soft);
  color: var(--loopin-muted);
  font-size: 1.35rem;
  font-weight: 700;
  border: 1px solid var(--loopin-border);
}

.loopin-profile-identity--sm .loopin-identity-avatar,
.loopin-profile-identity--sm .loopin-identity-avatar--placeholder {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.loopin-profile-identity--md .loopin-identity-avatar,
.loopin-profile-identity--md .loopin-identity-avatar--placeholder {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.loopin-profile-identity--lg .loopin-identity-avatar,
.loopin-profile-identity--lg .loopin-identity-avatar--placeholder {
  width: 64px;
  height: 64px;
}

.loopin-pin-view-creator .loopin-profile-identity {
  margin: 0;
}

.loopin-verified-tick {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}

.loopin-verified-tick svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.loopin-verified-tick--sm svg {
  width: 1.375rem;
  height: 1.375rem;
}

.loopin-verified-tick--md svg {
  width: 1.625rem;
  height: 1.625rem;
}

.loopin-verified-tick--lg svg {
  width: 2rem;
  height: 2rem;
}

.loopin-pin-view-creator.loopin-name-with-verified,
.loopin-pin-view-creator .loopin-name-with-verified {
  gap: .4rem;
}

.loopin-profile-bio {
  margin: .35rem 0 .75rem;
  font-size: 1rem;
  color: var(--loopin-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.loopin-profile-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-start;
  margin-bottom: .85rem;
}

@media (min-width: 768px) {
  .loopin-profile-social {
    justify-content: flex-start;
  }

  .loopin-profile-bio {
    max-width: none;
  }
}

.loopin-profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.loopin-profile-social-icon:hover {
  transform: translateY(-2px);
  opacity: .92;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.loopin-profile-social-icon-svg {
  display: block;
  flex-shrink: 0;
}

.loopin-profile-social-icon--eitaa {
  background: #f57c00;
}

.loopin-profile-social-icon--bale {
  background: #00a884;
}

.loopin-profile-social-icon--rubika {
  background: #7b2cbf;
}

.loopin-profile-social-icon--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.loopin-profile-social-icon--whatsapp {
  background: #25d366;
}

.loopin-profile-social-icon--youtube {
  background: #ff0000;
}

.loopin-profile-social-icon--tiktok {
  background: #111;
  border: 1px solid rgba(255, 255, 255, .12);
}

.loopin-profile-social-icon--telegram {
  background: #0088cc;
}

.loopin-profile-social-icon--linkedin {
  background: #0077b5;
}

.loopin-profile-social-icon--twitter {
  background: #111;
  border: 1px solid rgba(255, 255, 255, .12);
}

.loopin-profile-social-icon--website {
  background: var(--loopin-text, #111);
  color: #fff;
}

/* Legacy text pill links (fallback). */
.loopin-profile-social-link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.loopin-profile-social-link:hover {
  background: #E9E9E9;
  color: var(--loopin-red);
}

.loopin-profile-drive-title {
  font-size: .875rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  letter-spacing: -0.01em;
  color: var(--loopin-text);
}

.loopin-profile-drive-address {
  margin: 0 0 .65rem;
  font-size: .9375rem;
  color: var(--loopin-muted);
  line-height: 1.45;
}

.loopin-profile-drive-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .85rem;
}

.loopin-profile-map {
  border-radius: var(--loopin-radius-sm);
  overflow: hidden;
  border: 1px solid var(--loopin-border);
  background: var(--loopin-bg-soft);
}

.loopin-profile-map iframe {
  display: block;
  width: 100%;
  min-height: 180px;
  height: 200px;
  border: 0;
}

/* ── Public profile (Instagram-like) ───────────────────────── */
.loopin-public-profile-header {
  padding: 1rem 0 1.25rem;
}

.loopin-public-profile-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}

.loopin-public-profile-avatar-wrap {
  flex-shrink: 0;
}

.loopin-public-profile-avatar-button {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.loopin-public-profile-avatar-button:focus-visible {
  outline: 2px solid var(--loopin-red, #1B1B1B);
  outline-offset: 3px;
}

.loopin-public-profile-avatar-wrap.is-expandable .loopin-public-profile-avatar {
  cursor: pointer;
}

.loopin-public-profile-avatar,
.loopin-public-profile-avatar-wrap .loopin-identity-avatar--placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Instagram-style profile photo viewer */
.loopin-avatar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

.loopin-avatar-lightbox[hidden] {
  display: none !important;
}

.loopin-avatar-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

.loopin-avatar-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(22rem, 86vw);
  aspect-ratio: 1;
  max-height: min(86vw, 86vh);
  pointer-events: none;
}

.loopin-avatar-lightbox-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: #111;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}

body.loopin-avatar-lightbox-open {
  overflow: hidden;
}

.loopin-public-profile-avatar-wrap .loopin-identity-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  background: var(--loopin-bg-soft);
  color: var(--loopin-muted);
}

.loopin-public-profile-story-ring.loopin-story-ring,
.loopin-public-profile-avatar-button .loopin-public-profile-story-ring {
  display: inline-flex;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.loopin-public-profile-avatar-wrap.is-story-seen .loopin-public-profile-story-ring,
.loopin-public-profile-story-ring.is-seen {
  padding: 0;
  background: transparent;
}

.loopin-public-profile-name-block {
  flex: 1;
  min-width: 0;
}

.loopin-public-profile-display-name {
  margin: 0 0 .35rem;
  font-size: 1rem;
  line-height: 1.35;
}

.loopin-public-profile-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .85rem 1.25rem;
  min-width: 0;
}

.loopin-public-profile-stat-jump {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.loopin-public-profile-stat-jump:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.loopin-public-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  min-width: 0;
}

.loopin-public-profile-stat strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--loopin-text);
}

.loopin-public-profile-stat span {
  font-size: .75rem;
  color: var(--loopin-muted);
  line-height: 1.35;
}

.loopin-public-profile-bio {
  margin: 0 0 .55rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--loopin-text);
}

.loopin-public-profile-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--loopin-muted);
  line-height: 1.45;
}

.loopin-profile-location-icon {
  flex-shrink: 0;
  color: var(--loopin-red);
}

.loopin-public-profile-location-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  color: var(--loopin-text);
  text-decoration: none;
}

.loopin-profile-directions-icon {
  flex-shrink: 0;
  color: var(--loopin-red);
}

.loopin-public-profile-location-link:hover {
  color: var(--loopin-red);
}

.loopin-public-profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .65rem;
}

/* Follow + share only (no booking): keep share beside follow on one baseline. */
.loopin-public-profile-actions:not(.is-owner):not(.has-booking) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.loopin-public-profile-actions.is-owner,
.loopin-public-profile-actions.has-edit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.loopin-public-profile-actions.is-owner.has-booking:not(.has-edit) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.loopin-public-profile-action {
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: center;
}

.loopin-public-profile-follow-action .loopin-follow-control,
.loopin-public-profile-follow-action .loopin-follow-button,
.loopin-public-profile-booking-button,
.loopin-public-profile-dashboard-button,
.loopin-public-profile-edit-button {
  width: 100%;
}

.loopin-public-profile-dashboard-button,
.loopin-public-profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  text-align: center;
  font-weight: 700;
}

.loopin-public-profile-follow-action .loopin-follow-button,
.loopin-public-profile-follow-action .loopin-follow-button--guest {
  justify-content: center;
}

/* Instagram sky-blue Follow (beat theme/button resets) */
#loopin-social-wrap .loopin-follow-button:not(.is-following),
#loopin-social-wrap .loopin-follow-button--guest,
.loopin-public-profile-follow-action .loopin-follow-button:not(.is-following),
.loopin-public-profile-follow-action .loopin-follow-button--guest,
.loopin-single-post-follow .loopin-follow-button:not(.is-following),
.loopin-single-post-follow .loopin-follow-button--guest {
  background: #0095f6;
  background-color: #0095f6;
  border-color: transparent;
  color: #fff;
}

#loopin-social-wrap .loopin-follow-button:not(.is-following):hover,
#loopin-social-wrap .loopin-follow-button:not(.is-following):focus-visible,
#loopin-social-wrap .loopin-follow-button--guest:hover,
#loopin-social-wrap .loopin-follow-button--guest:focus-visible,
.loopin-public-profile-follow-action .loopin-follow-button:not(.is-following):hover,
.loopin-public-profile-follow-action .loopin-follow-button--guest:hover {
  background: #1877f2;
  background-color: #1877f2;
  color: #fff;
}

.loopin-public-profile-booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;
  text-align: center;
}

.loopin-profile-booking-icon {
  flex-shrink: 0;
}

.loopin-public-profile-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-sm, 8px);
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
  transition: background .15s ease, border-color .15s ease;
}

.loopin-public-profile-share-button:hover,
.loopin-public-profile-share-button:focus-visible {
  background: #e9e9e9;
  border-color: var(--loopin-text);
}

.loopin-public-profile-share-button svg,
.loopin-profile-share-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.loopin-public-profile-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: .35rem;
}

.loopin-public-profile-secondary .loopin-profile-social {
  margin-bottom: 0;
}

.loopin-profile-portfolios,
.loopin-profile-portfolio-shell {
  width: 100%;
}

.loopin-profile-portfolio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  padding: .35rem 0 .85rem;
  border-top: 1px solid var(--loopin-border);
  border-bottom: 1px solid var(--loopin-border);
  margin-bottom: .15rem;
}

.loopin-profile-media-tabs {
  display: none !important;
}

.loopin-profile-media-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .45rem .65rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--loopin-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.loopin-profile-media-tab.is-active,
.loopin-profile-media-tab[aria-pressed="true"] {
  color: var(--loopin-text);
  border-bottom-color: var(--loopin-text);
}

.loopin-profile-media-tab svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.loopin-profile-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
}

.loopin-profile-portfolio-filter-empty {
  margin: .5rem 0;
}

.loopin-profile-portfolio-filter-empty-msg[hidden] {
  display: none !important;
}

.loopin-profile-portfolio-grid[hidden],
.loopin-profile-portfolio-list[hidden] {
  display: none !important;
}

.loopin-profile-portfolios.is-grid-mode .loopin-profile-portfolio-list,
.loopin-profile-portfolio-shell.loopin-profile-grid-mode .loopin-profile-portfolio-list {
  display: none !important;
}

.loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-grid,
.loopin-profile-portfolio-shell.loopin-profile-large-mode .loopin-profile-portfolio-grid {
  display: none !important;
}

.loopin-profile-portfolios.is-grid-mode .loopin-profile-portfolio-grid,
.loopin-profile-portfolio-shell.loopin-profile-grid-mode .loopin-profile-portfolio-grid,
.loopin-profile-portfolio-views.is-showing-grid .loopin-profile-portfolio-grid {
  display: grid !important;
}

.loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-list,
.loopin-profile-portfolio-shell.loopin-profile-large-mode .loopin-profile-portfolio-list,
.loopin-profile-portfolio-views.is-showing-large .loopin-profile-portfolio-list {
  display: grid !important;
}

.loopin-profile-portfolio-views.is-showing-grid .loopin-profile-portfolio-list {
  display: none !important;
}

.loopin-profile-portfolio-views.is-showing-large .loopin-profile-portfolio-grid {
  display: none !important;
}

.loopin-profile-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .65rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--loopin-muted);
  font: inherit;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.loopin-profile-view-btn.is-active,
.loopin-profile-view-btn[aria-pressed="true"] {
  color: var(--loopin-text);
  border-bottom-color: var(--loopin-text);
}

.loopin-profile-view-icon,
.loopin-profile-view-icon-svg {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.loopin-profile-view-icon-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.loopin-profile-view-label {
  font-size: .75rem;
  font-weight: 600;
}

.loopin-profile-portfolio-tile[hidden],
.loopin-profile-portfolio-card[hidden],
[data-loopin-media-type][hidden] {
  display: none !important;
}

.loopin-profile-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 1200px) {
  .loopin-profile-portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .loopin-profile-portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.loopin-public-profile .loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-card .loopin-portfolio-img,
.loopin-public-profile .loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-card video,
.loopin-public-profile .loopin-profile-portfolio-views.is-showing-large .loopin-profile-portfolio-card .loopin-portfolio-img,
.loopin-public-profile .loopin-profile-portfolio-views.is-showing-large .loopin-profile-portfolio-card video {
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: cover;
}

.loopin-profile-portfolio-empty {
  grid-column: 1 / -1;
}

.loopin-profile-portfolio-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--loopin-bg-soft);
}

.loopin-profile-portfolio-tile-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.loopin-profile-portfolio-tile-media {
  position: absolute;
  inset: 0;
  display: block;
}

.loopin-profile-portfolio-tile-img,
.loopin-profile-portfolio-tile-media video,
.loopin-profile-portfolio-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.loopin-profile-portfolio-tile .loopin-pin-hover {
  z-index: 3;
  padding: 0 .35rem .55rem;
  gap: .7rem;
}

.loopin-profile-portfolio-tile:hover .loopin-pin-hover,
.loopin-profile-portfolio-tile:focus-within .loopin-pin-hover {
  opacity: 1;
}

.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-pin-action.loopin-like-btn::before,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-like-btn::before,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-share-btn::before,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-save-post-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-pin-action,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-like-btn,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-share-btn,
.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-save-post-control {
  width: 1.35rem;
  min-width: 1.35rem;
  max-width: 1.35rem;
}

.loopin-profile-portfolio-tile .loopin-pin-hover .loopin-like-count {
  max-width: 1.35rem;
  font-size: .625rem;
}

.loopin-profile-portfolio-tile-gallery {
  position: absolute;
  z-index: 4;
  top: .5rem;
  inset-inline-end: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-width: 1.85rem;
  min-height: 1.6rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(15, 15, 15, .78);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.loopin-profile-portfolio-tile-gallery::before {
  content: "";
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='7' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' fill='black' opacity='.28'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='7' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' fill='black' opacity='.28'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.loopin-profile-portfolio-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.loopin-profile-portfolio-list.loopin-masonry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 959px) {
  .loopin-profile-portfolio-list,
  .loopin-profile-portfolio-list.loopin-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .loopin-profile-portfolio-list,
  .loopin-profile-portfolio-list.loopin-masonry {
    grid-template-columns: 1fr;
  }
}

.loopin-profile-portfolio-card {
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.loopin-profile-portfolio-card .loopin-pin-meta {
  padding: .75rem .85rem .9rem;
}

.loopin-profile-portfolio-card .loopin-pin-media {
  border-radius: 0;
}

.loopin-profile-portfolio-list.loopin-masonry--related {
  margin-top: 0;
}

.loopin-public-profile .loopin-portfolio-swipe-wrap {
  display: none !important;
}

@media (min-width: 768px) {
  .loopin-public-profile-stats {
    gap: 1.25rem 1.75rem;
  }
}

@media (max-width: 479px) {
  .loopin-public-profile-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .loopin-public-profile-actions:not(.is-owner):not(.has-booking) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .loopin-public-profile-actions.is-owner,
  .loopin-public-profile-actions.has-edit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

@media (max-width: 479px) {
  .loopin-profile-view-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.loopin-profile-tabs,
.loopin-profile .loopin-tabpanels {
  width: 100%;
}

.loopin-profile .loopin-panel-shell--wide {
  padding: 0;
}

.loopin-profile .loopin-certs-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.loopin-profile-meta {
  list-style: none;
  margin: .25rem 0 .65rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem .65rem;
  font-size: .875rem;
  color: var(--loopin-muted);
}

@media (min-width: 768px) {
  .loopin-profile-meta { justify-content: flex-start; }
  .loopin-profile-bio { margin-left: 0; margin-right: 0; }
}

.loopin-profile-meta-item {
  display: inline-flex;
  align-items: center;
}

.loopin-profile-meta-item:not(:last-child)::after {
  content: '·';
  margin-left: .65rem;
  color: var(--loopin-border-strong);
}

.loopin-profile-meta-item strong {
  color: var(--loopin-text);
  font-weight: 700;
}

.loopin-profile-meta-reviews {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  padding: .15rem .45rem;
  margin: -.15rem -.45rem;
  border: none;
  border-radius: var(--loopin-radius-sm);
  background: transparent;
  font: inherit;
  font-size: .875rem;
  color: var(--loopin-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.loopin-profile-meta-reviews:hover {
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
}

.loopin-profile-meta-reviews strong {
  color: var(--loopin-text);
}

.loopin-stars--inline {
  font-size: .72rem;
  line-height: 1;
}

.loopin-profile-meta-reviews-label {
  font-size: .8125rem;
}

.loopin-profile-meta-reviews--empty {
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.loopin-profile-stat-location::before {
  content: '·';
  margin-right: .5rem;
  color: var(--loopin-border-strong);
}

.loopin-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
@media (min-width: 768px) { .loopin-chips { justify-content: flex-start; } }

.loopin-chip {
  padding: .35rem .75rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  font-size: .75rem;
  font-weight: 600;
  color: var(--loopin-text);
  border: none;
}

.loopin-chip--static {
  cursor: default;
  pointer-events: none;
}

.loopin-chip-count {
  opacity: .7;
  font-weight: 500;
}

.loopin-endorse-section {
  margin-top: .85rem;
}

.loopin-endorse-heading {
  font-family: var(--loopin-font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--loopin-muted);
  margin: 0 0 .5rem;
}

.loopin-endorse-lead {
  margin: 0 0 .55rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--loopin-muted);
}

.loopin-endorse-login-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: .55rem;
}

.loopin-endorse-login-lead {
  margin: 0;
  font-size: .8125rem;
  color: var(--loopin-muted);
}

.loopin-btn-sm {
  padding: .5rem .9rem;
  font-size: .8125rem;
}

.loopin-endorse-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}

.loopin-endorse-btn:hover {
  background: #E9E9E9;
}

.loopin-endorse-btn.is-endorsed {
  background: var(--loopin-text);
  color: #fff;
}

.loopin-endorse-btn.is-endorsed .loopin-chip-count {
  opacity: .85;
  color: #fff;
}

.loopin-endorse-btn.is-endorsed:hover {
  background: #333;
}

.loopin-endorse-btn.is-loading {
  opacity: .65;
  pointer-events: none;
}

.loopin-profile-ctas {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: .75rem 0 .5rem;
  justify-content: flex-start;
}

.loopin-book-btn {
  font-weight: 700;
}

.loopin-profile-filters {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  min-width: 0;
}

.loopin-profile-filters-label {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--loopin-muted);
}

.loopin-profile-filters .loopin-category-scroller {
  flex: 1;
  min-width: 0;
}

/* ── Tabs (Pinterest profile style) ───────────────────────── */
.loopin-tablist {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--loopin-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.loopin-tablist::-webkit-scrollbar { display: none; }

.loopin-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .85rem 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--loopin-muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.loopin-tab-icon-svg {
  display: block;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  opacity: .85;
  transition: opacity .15s ease;
}

.loopin-tab.is-active .loopin-tab-icon-svg {
  opacity: 1;
}

.loopin-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--loopin-text);
  transform: scaleX(0);
  transition: transform .2s var(--loopin-ease);
}

.loopin-tab.is-active {
  color: var(--loopin-red);
}

.loopin-tab.is-active::after {
  transform: scaleX(1);
  background: var(--loopin-red);
}

.loopin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  margin-left: .35rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--loopin-muted);
}

.loopin-tab.is-active .loopin-tab-badge {
  background: var(--loopin-red);
  color: #fff;
}

.loopin-tabpanel { display: none; }
.loopin-tabpanel.is-active { display: block; }

.loopin-tabpanel-lead {
  color: var(--loopin-muted);
  font-size: .875rem;
  margin: 0 0 1rem;
}

/* ── Unified panel shell (reviews, certs, etc.) ───────────── */
.loopin-panel-shell {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pin);
  overflow: hidden;
}

.loopin-panel-shell--wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem;
}

.loopin-panel-shell--wide .loopin-certs-grid {
  gap: .75rem;
}

.loopin-panel-shell--wide .loopin-cert-card {
  margin: 0;
}

.loopin-panel-divider {
  height: 1px;
  background: var(--loopin-border);
  margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.loopin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.15rem;
  border-radius: var(--loopin-radius-pill);
  border: none;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  gap: 0.5rem;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.loopin-btn .btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  animation: loopin-btn-spin 0.7s linear infinite;
  vertical-align: middle;
}

.loopin-btn .btn-spinner[hidden] {
  display: none !important;
}

.loopin-btn-outline .btn-spinner,
.loopin-btn-secondary .btn-spinner,
.loopin-btn-ghost .btn-spinner {
  border-color: rgba(27, 27, 27, 0.2);
  border-top-color: var(--loopin-red, #1B1B1B);
}

@keyframes loopin-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.loopin-btn-primary {
  background: var(--loopin-red);
  color: #fff;
}

.loopin-btn-primary:hover:not(:disabled),
.loopin-btn-primary:focus-visible:not(:disabled) {
  background: var(--loopin-red-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(27, 27, 27, 0.22);
}

.loopin-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(27, 27, 27, 0.18);
}

.loopin-btn-secondary {
  background: var(--loopin-bg-soft, #f1f5f9);
  color: var(--loopin-text);
  border: 1px solid var(--loopin-border);
}

.loopin-btn-secondary:hover:not(:disabled),
.loopin-btn-secondary:focus-visible:not(:disabled) {
  background: #e9ecef;
  border-color: var(--loopin-primary);
  color: var(--loopin-primary);
  transform: translateY(-1px);
}

.loopin-btn-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.loopin-btn-outline {
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
}

.loopin-btn-outline:hover {
  background: #E9E9E9;
}

.loopin-btn-ghost {
  background: transparent;
  color: var(--loopin-muted);
  padding: .7rem .85rem;
}

.loopin-btn-ghost:hover {
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
}

/* ── Legacy grids (certs, specialists) ────────────────────── */
.loopin-feed-grid,
.loopin-specialist-grid,
.loopin-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.loopin-specialist-card,
.loopin-cert-card {
  background: var(--loopin-surface);
  border-radius: var(--loopin-radius-pin);
  border: 1px solid var(--loopin-border);
  padding: 1.25rem;
  box-shadow: none;
}

.loopin-cert-card {
  text-align: center;
  padding: 1rem;
  overflow: visible;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.loopin-specialist-card .loopin-mini-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto .75rem;
}

.loopin-cert-card .loopin-cert-card-header {
  min-width: 0;
}

.loopin-cert-card .loopin-figure,
.loopin-cert-card .loopin-cert-thumb {
  margin: 0.75rem 0 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--loopin-bg-soft, #f8fafc);
  line-height: 0;
}

.loopin-cert-card .loopin-cert-thumb {
  aspect-ratio: 4 / 3;
}

.loopin-cert-card .loopin-figure img,
.loopin-cert-card .loopin-cert-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.loopin-cert-card .loopin-figure.loopin-qr {
  margin: 0;
  text-align: center;
}

.loopin-cert-card .loopin-figure.loopin-qr img,
.loopin-cert-card .loopin-qr-link img {
  display: block;
  width: 160px;
  height: 160px;
  max-width: 100%;
  margin: 0 auto;
  image-rendering: pixelated;
}

.loopin-cert-card .loopin-qr-link {
  display: inline-block;
  line-height: 0;
}

.loopin-cert-card .loopin-figure.loopin-qr figcaption {
  aspect-ratio: auto;
  width: min(160px, 100%);
  margin: 0.45rem auto 0;
  padding: 0 0.25rem;
  background: transparent;
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--loopin-muted, #64748b);
  overflow: visible;
}

.loopin-cert-card .loopin-figure.loopin-qr img {
  width: 160px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
  image-rendering: pixelated;
}

.loopin-cert-card .loopin-card-actions {
  margin-top: 0.35rem;
  justify-content: center;
}

.loopin-cert-card .loopin-cert-meta dd {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.loopin-cert-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .75rem;
  font-size: .875rem;
  margin: .75rem 0;
  min-width: 0;
}

.loopin-cert-meta dt { color: var(--loopin-muted); font-weight: 500; }
.loopin-cert-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Forms & filters ──────────────────────────────────────── */
.loopin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .75rem;
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-pin);
}

.loopin-filters input,
.loopin-filters select {
  flex: 1;
  min-width: 140px;
  padding: .65rem .85rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pill);
  background: #fff;
  font-family: inherit;
  font-size: .875rem;
}

.loopin-form {
  max-width: 560px;
  padding: 1.25rem;
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-pin);
}

.loopin-form-group { margin-bottom: 1rem; min-width: 0; max-width: 100%; box-sizing: border-box; }
.loopin-form-help {
  margin: .35rem 0 0;
  font-size: .8125rem;
  color: var(--loopin-muted);
  line-height: 1.4;
}
.loopin-admin-portal-bridge-card {
  margin-bottom: 1rem;
}
.loopin-admin-portal-bridge-card .loopin-btn {
  margin-top: 0.75rem;
}
.loopin-national-id-locked-help .loopin-btn-link,
.loopin-national-id-locked-help .loopin-national-id-change-request {
  display: inline;
  margin-inline-start: 0.35rem;
  padding: 0;
  vertical-align: baseline;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loopin-national-id-request-status {
  display: inline;
  margin-inline-start: 0.35rem;
  color: var(--loopin-muted, #64748b);
}
.loopin-form-group label,
.loopin-form-group legend {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
  font-size: .875rem;
}

.loopin-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.loopin-form textarea,
.loopin-form select {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-sm);
  font-family: inherit;
}

.loopin-review-form {
  margin: 0;
  padding: 1.25rem 1.35rem 1.35rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

.loopin-review-form-head {
  margin-bottom: 1.15rem;
}

.loopin-review-form-lead {
  margin: 0;
  font-size: .875rem;
  color: var(--loopin-muted);
  line-height: 1.5;
}

.loopin-review-form .loopin-form-group {
  margin-bottom: 1.1rem;
}

.loopin-review-form .loopin-form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--loopin-text);
  margin-bottom: .45rem;
}

/* Star picker */
.loopin-star-picker {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .15rem;
}

.loopin-star-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-star-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.65rem;
  line-height: 1;
  color: #D1D1D1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .12s ease, transform .12s ease, background .12s ease;
  user-select: none;
}

.loopin-star-pick:hover {
  background: var(--loopin-blush);
  transform: scale(1.08);
}

.loopin-star-picker .loopin-star-input:checked ~ .loopin-star-pick,
.loopin-star-pick:hover,
.loopin-star-pick:hover ~ .loopin-star-pick {
  color: var(--loopin-red);
}

.loopin-star-picker-hint {
  margin: .45rem 0 0;
  font-size: .8125rem;
  color: var(--loopin-muted);
  min-height: 1.25em;
}

.loopin-review-textarea {
  width: 100%;
  min-height: 120px;
  padding: .75rem .85rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-sm);
  background: var(--loopin-bg-soft);
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.55;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.loopin-review-textarea::placeholder {
  color: #A8A8A8;
}

.loopin-review-textarea:focus {
  outline: none;
  border-color: var(--loopin-red);
  background: #fff;
  box-shadow: 0 0 0 3px var(--loopin-primary-light);
}

.loopin-review-text-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--loopin-muted);
}

.loopin-char-count.is-valid { color: var(--loopin-success); }
.loopin-char-count.is-invalid { color: var(--loopin-danger); }

.loopin-review-form .loopin-form-errors {
  margin: 0 0 .85rem;
  padding: .55rem .75rem;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--loopin-radius-sm);
  color: var(--loopin-danger);
  font-size: .8125rem;
}

.loopin-review-form-actions {
  display: flex;
  justify-content: flex-end;
}

.loopin-review-form .loopin-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.loopin-review-form.is-loading .loopin-btn-primary {
  opacity: .7;
  pointer-events: none;
}

/* Reviews panel — inside unified shell */
.loopin-reviews-shell .loopin-reviews-summary {
  padding: 1.15rem 1.35rem;
  background: var(--loopin-bg-soft);
  border-bottom: 1px solid var(--loopin-border);
}

.loopin-reviews-shell .loopin-reviews-summary--empty {
  padding: 1rem 1.35rem;
}

.loopin-reviews-summary-empty {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--loopin-muted);
}

.loopin-reviews-score {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.loopin-reviews-score-value {
  font-family: var(--loopin-font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--loopin-text);
}

.loopin-reviews-score-meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.loopin-reviews-score-meta .loopin-stars {
  font-size: .95rem;
}

.loopin-reviews-count {
  font-size: .8125rem;
  color: var(--loopin-muted);
}

.loopin-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.loopin-reviews-zero {
  margin: 0;
  padding: 1.35rem 1.35rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--loopin-muted);
  line-height: 1.55;
}

.loopin-reviews-shell .loopin-review-card {
  padding: 1rem 1.35rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--loopin-border);
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.loopin-reviews-shell .loopin-review-card:last-child {
  border-bottom: none;
}

.loopin-reviews-shell .loopin-reviews-list:not(:has(.loopin-review-card)) .loopin-reviews-zero {
  padding-bottom: 1.35rem;
}

.loopin-review-compose {
  max-width: none;
}

.loopin-reviews-shell .loopin-review-login-prompt {
  padding: 1.25rem 1.35rem 1.35rem;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  max-width: none;
}

.loopin-reviews-shell .loopin-review-login-prompt .loopin-btn {
  margin-top: .25rem;
}

.loopin-form-errors { color: var(--loopin-danger); font-size: .875rem; }

/* ── Empty, reviews, misc ─────────────────────────────────── */
.loopin-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--loopin-muted);
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-pin);
  width: 100%;
}

.loopin-empty p { margin: 0; }

.loopin-review-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pin);
  margin-bottom: .65rem;
  background: #fff;
}

.loopin-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .5rem;
}

.loopin-review-author {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.loopin-review-author strong {
  font-size: .875rem;
  font-weight: 600;
}

.loopin-review-author time {
  font-size: .75rem;
  color: var(--loopin-muted);
  font-weight: 400;
}

.loopin-review-body {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--loopin-text);
}

.loopin-stars--sm { font-size: .875rem; }

.loopin-stars { letter-spacing: .05em; color: var(--loopin-border-strong); }
.loopin-star.is-filled { color: var(--loopin-red); }
.loopin-rating-summary { display: flex; align-items: center; gap: .4rem; margin: .5rem 0; }

.loopin-feed-header {
  text-align: center;
  padding: 2rem 1rem;
  margin-bottom: 1.5rem;
}

.loopin-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  color: var(--loopin-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.loopin-validation-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .loopin-validation-grid { grid-template-columns: 2fr 1fr; } }

/* ── Certificate verification page ─────────────────────────── */
#loopin-social-wrap .loopin-cert-view {
  width: 100%;
}

#loopin-social-wrap .loopin-cert-view-shell {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pin);
  padding: 1.35rem 1.4rem 1.5rem;
}

#loopin-social-wrap .loopin-cert-view-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--loopin-border);
}

@media (min-width: 768px) {
  #loopin-social-wrap .loopin-cert-view-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

#loopin-social-wrap .loopin-cert-view-intro {
  flex: 1;
  min-width: 0;
}

#loopin-social-wrap .loopin-cert-view-title {
  font-family: var(--loopin-font-sans);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: .45rem 0 .35rem;
  color: var(--loopin-text);
}

#loopin-social-wrap .loopin-cert-view-lead {
  margin: 0;
  font-size: .9375rem;
  color: var(--loopin-muted);
  line-height: 1.45;
  max-width: 42ch;
}

#loopin-social-wrap .loopin-cert-view-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
}

@media (min-width: 768px) {
  #loopin-social-wrap .loopin-cert-view-actions {
    width: auto;
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

#loopin-social-wrap .loopin-cert-view-actions .loopin-btn {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}

@media (min-width: 768px) {
  #loopin-social-wrap .loopin-cert-view-actions .loopin-btn {
    flex: 0 0 auto;
  }
}

#loopin-social-wrap .loopin-cert-view-holder {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}

#loopin-social-wrap .loopin-cert-view-holder:hover {
  background: #E9E9E9;
}

#loopin-social-wrap .loopin-cert-view-holder-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

#loopin-social-wrap .loopin-cert-view-holder-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--loopin-muted);
  margin-bottom: .15rem;
}

#loopin-social-wrap .loopin-cert-view-holder-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--loopin-text);
}

#loopin-social-wrap .loopin-cert-view-holder:hover .loopin-cert-view-holder-name {
  color: var(--loopin-red);
}

#loopin-social-wrap .loopin-cert-view-details {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  #loopin-social-wrap .loopin-cert-view-details {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.25rem;
  }
}

#loopin-social-wrap .loopin-cert-view-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

#loopin-social-wrap .loopin-cert-view-meta-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: .5rem 1rem;
  align-items: baseline;
}

#loopin-social-wrap .loopin-cert-view-meta-row--full {
  grid-template-columns: 1fr;
}

#loopin-social-wrap .loopin-cert-view-meta-row--full dt {
  margin-bottom: .15rem;
}

#loopin-social-wrap .loopin-cert-view-meta dt {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--loopin-muted);
}

#loopin-social-wrap .loopin-cert-view-meta dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--loopin-text);
  line-height: 1.4;
}

#loopin-social-wrap .loopin-cert-view-qr {
  text-align: center;
  padding: .85rem;
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-sm);
  flex-shrink: 0;
}

#loopin-social-wrap .loopin-cert-view-qr-link {
  display: inline-block;
  line-height: 0;
}

#loopin-social-wrap .loopin-cert-view-qr img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  image-rendering: pixelated;
}

#loopin-social-wrap .loopin-cert-view-qr p {
  margin: .5rem 0 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--loopin-muted);
}

#loopin-social-wrap .loopin-cert-view-image {
  margin: 0 0 1.25rem;
  border-radius: var(--loopin-radius-sm);
  overflow: hidden;
  border: 1px solid var(--loopin-border);
  background: var(--loopin-bg-soft);
}

#loopin-social-wrap .loopin-cert-view-image img {
  display: block;
  width: 100%;
  height: auto;
}

#loopin-social-wrap .loopin-cert-view-section-title {
  font-size: .9375rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--loopin-text);
}

#loopin-social-wrap .loopin-cert-view-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

@media (min-width: 640px) {
  #loopin-social-wrap .loopin-cert-view-portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#loopin-social-wrap .loopin-cert-view-portfolio-thumb {
  display: block;
  border-radius: var(--loopin-radius-sm);
  overflow: hidden;
  background: var(--loopin-bg-soft);
  line-height: 0;
}

#loopin-social-wrap .loopin-cert-view-portfolio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

#loopin-social-wrap .loopin-cert-view-portfolio-thumb:hover img {
  transform: scale(1.03);
}

#loopin-social-wrap .loopin-cert-card--grid {
  height: 100%;
  transform: none;
}

#loopin-social-wrap .loopin-cert-card--grid:hover {
  transform: none;
  border-color: var(--loopin-border);
}

#loopin-social-wrap .loopin-cert-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: .35rem 0 0;
  line-height: 1.3;
}

#loopin-social-wrap .loopin-badge-expired,
#loopin-social-wrap .loopin-badge-revoked {
  background: #FFF3E0;
  color: var(--loopin-warning);
}

#loopin-social-wrap .loopin-btn-outline {
  background: #fff;
  border: 1px solid var(--loopin-border-strong);
  color: var(--loopin-text);
}

#loopin-social-wrap .loopin-btn-outline:hover {
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
}

#loopin-toast.loopin-toast-region,
.loopin-toast-region {
  position: fixed !important;
  z-index: 100200;
  pointer-events: none;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
  transform: none !important;
}

/* Auth / explicit top placement: under the top safe area, still centered horizontally */
#loopin-toast.loopin-toast-region.is-top,
.loopin-toast-region.is-top,
body.loopin-auth-page #loopin-toast.loopin-toast-region,
body.loopin-auth-page .loopin-toast-region {
  align-items: flex-start !important;
  padding-top: max(1.25rem, calc(env(safe-area-inset-top, 0px) + 0.75rem)) !important;
}

@media (max-width: 767px) {
  body:has(.loopin-mobile-bottom-nav) #loopin-toast.loopin-toast-region:not(.is-top),
  body:has(.loopin-mobile-bottom-nav) .loopin-toast-region:not(.is-top) {
    /* Keep vertical center above the bottom nav so messages stay in view */
    padding-bottom: calc(
      var(--loopin-bottom-nav-height, 4.75rem) + 1rem + env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}

/* Shorts stays below toast (toast is viewport-centered on body, not inside LTR shorts chrome). */
html.loopin-portfolio-shorts-open #loopin-toast.loopin-toast-region,
html.loopin-portfolio-shorts-open .loopin-toast-region {
  z-index: 100250;
}

.loopin-portfolio-shorts-track-host {
  position: relative;
}

html.loopin-share-sheet-open .loopin-toast-region,
html.loopin-save-modal-open .loopin-toast-region,
html.loopin-shorts-comment-open .loopin-toast-region,
html.loopin-shorts-desc-open .loopin-toast-region {
  z-index: 100260;
}

html.loopin-share-sheet-open,
html.loopin-save-modal-open {
  overflow: hidden;
}

.loopin-share-sheet {
  position: fixed;
  inset: 0;
  z-index: 1001000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

html.loopin-portfolio-shorts-open .loopin-share-sheet,
html.loopin-share-sheet-open .loopin-share-sheet {
  z-index: 1001000;
}

html.loopin-share-sheet-open .loopin-portfolio-shorts {
  pointer-events: none;
}

html.loopin-share-sheet-open .loopin-share-sheet,
html.loopin-share-sheet-open .loopin-share-sheet * {
  pointer-events: auto;
}

@media (max-width: 767px) {
  html.loopin-portfolio-shorts-open .loopin-share-sheet,
  html.loopin-share-sheet-open .loopin-share-sheet {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 1001000;
  }
}

.loopin-share-sheet[hidden] {
  display: none !important;
}

.loopin-share-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}

.loopin-share-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 18px 16px 14px;
  border-radius: 24px 24px 20px 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
}

.loopin-share-sheet-title {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--loopin-text, #111);
}

.loopin-share-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  margin-bottom: 12px;
}

.loopin-share-sheet-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--loopin-text, #111);
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.loopin-share-sheet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #f3f4f6;
}

.loopin-share-sheet-icon--whatsapp {
  background: #dcf8c6;
  color: #128c7e;
}

.loopin-share-sheet-icon--telegram {
  background: #e3f2fd;
  color: #229ed9;
}

.loopin-share-sheet-icon--twitter {
  background: #ececec;
  color: #111;
}

.loopin-share-sheet-icon--copy {
  background: #f3f4f6;
  color: #374151;
}

.loopin-share-sheet-icon--bale {
  background: #e8f8ef;
  color: #00a884;
}

.loopin-share-sheet-icon--eitaa {
  background: #fff4e8;
  color: #f57c00;
}

.loopin-share-sheet-icon--rubika {
  background: #f3ecff;
  color: #7b2cbf;
}

.loopin-share-sheet-icon--instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 35%, #d62976 70%, #962fbf 100%);
  color: #fff;
}

.loopin-share-sheet-icon::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.loopin-share-sheet-icon--whatsapp::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--telegram::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.417 15.181l-.397 5.584c.568 0 .815-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.558 1.73.264 1.998-.931L23.93 3.821c.321-1.496-.541-2.08-1.527-1.716L1.24 9.838c-1.453.564-1.43 1.374-.247 1.741l5.573 1.74L18.61 6.23c.6-.394 1.146-.176.697.218'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.417 15.181l-.397 5.584c.568 0 .815-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.558 1.73.264 1.998-.931L23.93 3.821c.321-1.496-.541-2.08-1.527-1.716L1.24 9.838c-1.453.564-1.43 1.374-.247 1.741l5.573 1.74L18.61 6.23c.6-.394 1.146-.176.697.218'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--twitter::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--copy::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--bale::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--eitaa::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-4H7l6-7v4h4l-6 7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-4H7l6-7v4h4l-6 7z'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--rubika::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3c-4.97 0-9 3.58-9 8 0 2.43 1.17 4.62 3.05 6.09L5 21l3.74-1.87C9.77 19.64 10.86 20 12 20c4.97 0 9-3.58 9-8s-4.03-8-9-8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3c-4.97 0-9 3.58-9 8 0 2.43 1.17 4.62 3.05 6.09L5 21l3.74-1.87C9.77 19.64 10.86 20 12 20c4.97 0 9-3.58 9-8s-4.03-8-9-8z'/%3E%3C/svg%3E");
}

.loopin-share-sheet-icon--instagram::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.loopin-share-sheet-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.loopin-share-sheet-more,
.loopin-share-sheet-cancel {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.loopin-share-sheet-more {
  margin-bottom: 8px;
  background: #f3f4f6;
  color: var(--loopin-text, #111);
}

.loopin-share-sheet-cancel {
  background: transparent;
  color: var(--loopin-muted, #666);
}

@media (min-width: 641px) {
  .loopin-share-sheet {
    align-items: center;
    padding: 24px;
  }

  .loopin-share-sheet-panel {
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .loopin-share-sheet {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

#loopin-toast .loopin-toast,
.loopin-toast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(17, 17, 17, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  padding: 14px 22px;
  border-radius: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  width: max-content;
  max-width: min(22rem, 100%);
  pointer-events: auto;
  animation: loopin-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  unicode-bidi: isolate;
}

/* Keep Persian punctuation on the correct edge even if a parent forces LTR. */
body.loopin-rtl #loopin-toast.loopin-toast-region,
body.loopin-rtl .loopin-toast-region,
html[dir="rtl"] #loopin-toast.loopin-toast-region,
#loopin-toast.loopin-toast-region[dir="rtl"],
.loopin-toast-region[dir="rtl"] {
  direction: rtl !important;
}

body.loopin-rtl #loopin-toast .loopin-toast,
body.loopin-rtl .loopin-toast,
html[dir="rtl"] #loopin-toast .loopin-toast,
#loopin-toast .loopin-toast[dir="rtl"],
.loopin-toast[dir="rtl"] {
  direction: rtl !important;
  text-align: center;
  unicode-bidi: isolate;
}

body.loopin-ltr #loopin-toast.loopin-toast-region,
body.loopin-ltr .loopin-toast-region,
html[dir="ltr"] #loopin-toast.loopin-toast-region,
#loopin-toast.loopin-toast-region[dir="ltr"],
.loopin-toast-region[dir="ltr"] {
  direction: ltr !important;
}

body.loopin-ltr #loopin-toast .loopin-toast,
body.loopin-ltr .loopin-toast,
.loopin-toast[dir="ltr"] {
  direction: ltr !important;
}

.loopin-toast--membership {
  border-radius: 18px;
  padding: 1rem 1.15rem 1.05rem;
  max-width: min(360px, 100%);
  width: 100%;
  text-align: center;
  background: rgba(17, 17, 17, 0.96);
}

.loopin-toast--reminder {
  text-align: start;
}

.loopin-activity-reminder-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
}

.loopin-activity-reminder-body {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.6;
  opacity: 0.9;
}

.loopin-toast--otp {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.25rem 1rem;
  min-width: min(220px, 100%);
}

.loopin-toast-otp-label {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.82;
}

.loopin-toast-otp-code {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.2;
}

.loopin-toast-membership-lead {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 500;
}

.loopin-toast-membership-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.loopin-toast-membership-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.loopin-toast-membership-btn:hover,
.loopin-toast-membership-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.loopin-toast-membership-btn--primary {
  background: var(--loopin-red, #1B1B1B);
  border-color: var(--loopin-red, #1B1B1B);
  color: #fff;
}

.loopin-toast-membership-btn--primary:hover,
.loopin-toast-membership-btn--primary:focus-visible {
  background: #000000;
  border-color: #000000;
  color: #fff;
}

button.loopin-toast-membership-btn.loopin-activity-reminder-dismiss {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

@keyframes loopin-toast-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.loopin-portfolio-shorts-open .loopin-toast {
  width: auto;
  max-width: min(22rem, calc(100vw - 2.5rem));
  white-space: normal;
  text-align: center;
}

.loopin-skeleton {
  padding: 2rem;
  text-align: center;
  color: var(--loopin-muted);
  grid-column: 1 / -1;
}

.loopin-archive-pin .loopin-pin-media { margin-bottom: 0; }

.loopin-card-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

#loopin-social-wrap:has(.loopin-social-subheader) {
  padding-top: 0;
}

#loopin-social-wrap:has([data-loopin-megamenu].is-open) {
  overflow-x: visible;
}

/* Social nav & directory */
.loopin-social-subheader {
  width: 100%;
  border-bottom: 1px solid var(--loopin-border);
  background: #fff;
  margin-bottom: 1rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 60;
}

.loopin-social-subheader-inner {
  max-width: var(--loopin-content-max, 1320px);
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.loopin-social-subheader-inner--megabar {
  display: block;
  padding: .85rem 1rem 1rem;
}

@media (min-width: 768px) {
  .loopin-social-subheader-inner {
    justify-content: center;
  }

  .loopin-social-subheader-inner--megabar {
    padding-inline: clamp(1rem, 3vw, 2rem);
  }
}

.loopin-social-brand {
  font-family: var(--loopin-font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--loopin-text);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
}

.loopin-social-brand:hover,
.loopin-social-brand.is-active {
  color: var(--loopin-red);
}

/* Circular plugin brand logo (top menus) */
.loopin-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loopin-brand-logo:hover,
.loopin-brand-logo:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  outline: none;
}

.loopin-brand-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.loopin-mobile-nav-bar-brand {
  width: 36px;
  height: 36px;
}

.loopin-social-megabar-brand {
  width: 42px;
  height: 42px;
  margin-inline-end: 0.35rem;
}

.loopin-portal-top-nav-brand {
  width: 40px;
  height: 40px;
  margin-inline-end: 4px;
}

/* Keep logo on the visual right in LTR layouts too */
body.loopin-ltr .loopin-mobile-nav-bar-brand,
html[dir="ltr"] .loopin-mobile-nav-bar-brand {
  order: 20;
  margin-inline-start: auto;
}

body.loopin-ltr .loopin-social-megabar-brand,
html[dir="ltr"] .loopin-social-megabar-brand {
  order: 99;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

body.loopin-ltr .loopin-portal-top-nav-brand,
html[dir="ltr"] .loopin-portal-top-nav-brand {
  order: 99;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.loopin-social-megabar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.loopin-social-megabar-core {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  overflow: visible;
}

.loopin-social-megabar-primary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.loopin-social-megabar-primary .loopin-social-megamenu-anchor {
  flex: 0 0 auto;
}

.loopin-social-create-menu .loopin-social-account-menu-dropdown {
  min-width: 12rem;
}

.loopin-social-megabar-navrow {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
}

.loopin-social-megamenu-anchor {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  overflow: visible;
}

.loopin-social-megabar-pill {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
}

[data-loopin-megamenu].is-open::before {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: .65rem;
}

.loopin-social-megamenu-triggers {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .35rem;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
  flex-wrap: wrap;
  max-width: 100%;
}

.loopin-social-megamenu-toplinks {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  flex-wrap: wrap;
  min-width: 0;
}

.loopin-social-megamenu-toplink {
  display: inline-flex;
  align-items: center;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: var(--loopin-text);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.loopin-social-megamenu-toplink:hover,
.loopin-social-megamenu-toplink.is-active {
  background: var(--loopin-bg-soft);
  color: var(--loopin-red);
}

.loopin-social-megamenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--loopin-muted);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.loopin-social-megamenu-trigger:hover,
.loopin-social-megamenu-trigger.is-active,
[data-loopin-megamenu].is-open .loopin-social-megamenu-trigger.is-active {
  background: var(--loopin-bg-soft);
  color: var(--loopin-text);
}

.loopin-social-megamenu-chevron {
  width: .95rem;
  height: .95rem;
  transition: transform .18s ease;
}

[data-loopin-megamenu].is-open .loopin-social-megamenu-trigger.is-active .loopin-social-megamenu-chevron,
[data-loopin-megamenu].is-open .loopin-social-megamenu-trigger[aria-expanded="true"] .loopin-social-megamenu-chevron {
  transform: rotate(180deg);
}

.loopin-social-megamenu-panel {
  position: absolute;
  top: calc(100% + .65rem);
  inset-inline-start: 0;
  /* Single explore column (+ 2-col category grid) — no empty second half after Tailors removal. */
  width: min(36rem, calc(100vw - 2rem));
  max-width: none;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.12);
  overflow: hidden;
}

[data-loopin-megamenu]:not(.is-open) .loopin-social-megamenu-panel[hidden] {
  display: none;
}

.loopin-social-megamenu-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Grow only when multiple section columns are present (e.g. feed + specialists). */
.loopin-social-megamenu-panel-grid:has(> .loopin-social-megamenu-col:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loopin-social-megamenu-panel:has(.loopin-social-megamenu-col:nth-child(2)) {
  width: min(980px, calc(100vw - 2rem));
}

.loopin-social-megamenu-col {
  min-width: 0;
  padding: 1.1rem 1.15rem 1rem;
}

.loopin-social-megamenu-col + .loopin-social-megamenu-col {
  border-top: 1px solid var(--loopin-border);
}

@media (min-width: 760px) {
  .loopin-social-megamenu-col + .loopin-social-megamenu-col {
    border-top: 0;
    border-inline-start: 1px solid var(--loopin-border);
  }
}

.loopin-social-megamenu-col.is-accent {
  background: linear-gradient(180deg, #f5f8ff 0%, #f8f6ff 100%);
}

.loopin-social-megamenu-kicker {
  margin: 0 0 .85rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--loopin-muted);
}

.loopin-social-megamenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loopin-social-megamenu-list--rich {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: min(20rem, 52vh);
  overflow-y: auto;
  scrollbar-width: thin;
}

.loopin-social-megamenu-list--rich > .loopin-category-menu-grid-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Shared two-column category grid (desktop megamenu + mobile bottom sheet). */
.loopin-category-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.15rem 0.4rem !important;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.loopin-category-menu-grid > li {
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.loopin-category-menu-grid .loopin-megamenu-item {
  padding: .5rem .55rem;
  gap: .5rem;
}

.loopin-category-menu-grid .loopin-megamenu-item-icon,
.loopin-category-menu-grid .loopin-browse-category-icon {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
}

.loopin-category-menu-grid .loopin-megamenu-item-title,
.loopin-category-menu-grid .loopin-bottom-nav-submenu-link span {
  font-size: .8125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.loopin-category-menu-grid .loopin-megamenu-item-desc {
  display: none !important;
}

.loopin-megamenu-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem .7rem;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}

.loopin-megamenu-item:hover,
.loopin-megamenu-item.is-active {
  background: rgba(17, 17, 17, 0.04);
}

.loopin-megamenu-item-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.loopin-megamenu-item-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--loopin-text);
  line-height: 1.35;
}

.loopin-megamenu-item-desc {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--loopin-muted);
}

.loopin-megamenu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  flex: 0 0 auto;
}

.loopin-megamenu-item-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.loopin-megamenu-item-icon--blue { background: #edf4ff; color: #2563eb; }
.loopin-megamenu-item-icon--violet { background: #f3edff; color: #7c3aed; }
.loopin-megamenu-item-icon--amber { background: #fff7df; color: #d97706; }
.loopin-megamenu-item-icon--rose { background: #ffe9ef; color: #e11d48; }
.loopin-megamenu-item-icon--green { background: #ebf8ef; color: #059669; }
.loopin-megamenu-item-icon--indigo { background: #eef0ff; color: #000000; }
.loopin-megamenu-item-icon--sky { background: #ebf8ff; color: #0284c7; }
.loopin-megamenu-item-icon--orange { background: #fff1e8; color: #ea580c; }
.loopin-megamenu-item-icon--slate { background: #f1f5f9; color: #475569; }

.loopin-megamenu-more-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  color: #2563eb;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}

.loopin-megamenu-more-link svg {
  width: .95rem;
  height: .95rem;
}

.loopin-social-megamenu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--loopin-border);
  background: #fafafa;
}

.loopin-social-megamenu-footer-copy {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.loopin-social-megamenu-footer-copy p {
  margin: 0;
  font-size: .875rem;
  color: var(--loopin-text);
}

.loopin-social-megamenu-footer-badge {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  flex: 0 0 auto;
}

.loopin-social-megamenu-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid var(--loopin-border-strong);
  background: #fff;
  color: var(--loopin-text);
}

.loopin-social-megamenu-footer-btn:hover {
  background: var(--loopin-bg-soft);
}

.loopin-social-megabar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.loopin-social-megabar-navrow > .loopin-social-megabar-actions {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.loopin-social-megabar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.loopin-social-megabar-btn--ghost {
  border: 1.5px solid #1a1a1a;
  background: #111;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.loopin-social-megabar-btn--ghost:hover,
.loopin-social-megabar-btn--ghost:focus-visible {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #fff;
}

/* Desktop account / portal menu (visible on public pages after login) */
.loopin-social-account-menu {
  position: relative;
  z-index: 120;
}

.loopin-social-account-menu-trigger {
  gap: 0.35rem;
  cursor: pointer;
}

.loopin-social-account-menu-chevron {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.18s ease;
}

.loopin-social-account-menu.is-open .loopin-social-account-menu-chevron {
  transform: rotate(180deg);
}

.loopin-social-account-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-end: 0;
  min-width: 14rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--loopin-border, rgba(148, 163, 184, 0.28));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  z-index: 130;
}

.loopin-social-account-menu-dropdown[hidden] {
  display: none !important;
}

.loopin-social-account-menu-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: var(--loopin-text, #0f172a);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.loopin-social-account-menu-link:hover,
.loopin-social-account-menu-link:focus-visible {
  background: rgba(27, 27, 27, 0.08);
  outline: none;
}

.loopin-social-account-menu-link--dashboard {
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-social-account-menu-link--logout {
  margin-top: 0.25rem;
  color: #c62828;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0 0 10px 10px;
}

.loopin-social-account-menu-link--logout:hover,
.loopin-social-account-menu-link--logout:focus-visible {
  background: rgba(198, 40, 40, 0.08);
  color: #b71c1c;
}

.loopin-social-megabar-btn--primary {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.loopin-social-megabar-btn--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.loopin-social-megabar-btn--create {
  gap: .35rem;
  border: 1.5px solid #000000;
  background: #1B1B1B;
  color: #fff;
}

.loopin-social-megabar-btn--create:hover,
.loopin-social-megabar-btn--create:focus-visible {
  background: #000000;
  border-color: #000000;
  color: #fff;
}

.loopin-social-megabar-btn--create svg,
.loopin-social-megabar-btn--create .loopin-social-account-menu-chevron {
  flex: 0 0 auto;
  color: #fff;
}

a.loopin-social-megabar-btn--create,
a.loopin-social-megabar-btn--create:visited,
button.loopin-social-megabar-btn--create {
  color: #fff;
  text-decoration: none;
}

.loopin-social-megabar-actions .loopin-social-create-menu {
  position: relative;
}

.loopin-mobile-nav-bar-btn--create {
  gap: .3rem;
  border-color: #111;
  background: #111;
  color: #fff;
}

.loopin-mobile-nav-bar-btn--create svg {
  flex: 0 0 auto;
}

.loopin-mobile-nav-bar,
.loopin-mobile-nav-overlay,
.loopin-mobile-nav-drawer-head,
.loopin-mobile-nav-site-links,
.loopin-mobile-nav-drawer-auth,
.loopin-mobile-nav-accordion-trigger {
  display: none;
}

.loopin-megamenu-desktop-kicker {
  display: block;
}

@media (min-width: 760px) {
  .loopin-social-megamenu-panel .loopin-mobile-nav-accordion-panel,
  .loopin-mobile-nav-accordion.is-desktop-expanded .loopin-mobile-nav-accordion-panel,
  .loopin-mobile-nav-accordion-panel[hidden] {
    display: block !important;
  }
}

.loopin-mobile-nav-bar {
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3rem;
  padding: .15rem 0;
}

.loopin-mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--loopin-border);
  border-radius: 12px;
  background: #fff;
  color: var(--loopin-text);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease;
}

.loopin-mobile-nav-toggle:hover,
.loopin-mobile-nav-toggle.is-active {
  background: var(--loopin-bg-soft);
  border-color: var(--loopin-border-strong);
}

.loopin-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: .28rem;
  width: 1.1rem;
  height: 1.1rem;
}

.loopin-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

.loopin-mobile-nav-toggle.is-active .loopin-hamburger span:nth-child(1) {
  transform: translateY(.42rem) rotate(45deg);
}

.loopin-mobile-nav-toggle.is-active .loopin-hamburger span:nth-child(2) {
  opacity: 0;
}

.loopin-mobile-nav-toggle.is-active .loopin-hamburger span:nth-child(3) {
  transform: translateY(-.42rem) rotate(-45deg);
}

.loopin-mobile-nav-bar-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--loopin-text);
}

.loopin-mobile-nav-bar-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.loopin-nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--loopin-text);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s ease, color .15s ease;
}

.loopin-nav-search-btn svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.loopin-nav-search-btn:hover,
.loopin-nav-search-btn:focus-visible {
  background: var(--loopin-bg-soft, rgba(17, 17, 17, .06));
  color: var(--loopin-text);
  outline: none;
}

.loopin-social-megabar-actions .loopin-nav-search-btn {
  width: 2.35rem;
  height: 2.35rem;
}

.loopin-explore-search-shell:not(.is-open) {
  margin-bottom: 0;
}

.loopin-mobile-nav-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: .45rem .9rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.loopin-mobile-nav-bar-btn:hover,
.loopin-mobile-nav-bar-btn:focus-visible {
  background: #2a2a2a;
  color: #fff;
}

@media (max-width: 759px) {
  .loopin-social-megabar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .loopin-mobile-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .loopin-social-megabar-desktop {
    display: none;
  }

  /* Hamburger drawer retired — mobile uses bottom nav. */
  .loopin-mobile-nav-toggle,
  .loopin-mobile-nav-bar-title,
  .loopin-mobile-nav-overlay,
  .loopin-mobile-nav-drawer-head,
  .loopin-mobile-nav-site-links,
  .loopin-mobile-nav-drawer-auth,
  .loopin-mobile-nav-accordion-trigger,
  .loopin-social-megamenu-panel,
  .loopin-social-megamenu-footer {
    display: none !important;
  }

  body.loopin-mobile-nav-open {
    overflow: visible;
  }
}

.loopin-social-nav-scroll {
  display: flex;
  align-items: center;
  gap: .2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 .15rem;
}

.loopin-social-nav-scroll::-webkit-scrollbar {
  display: none;
}

.loopin-social-nav-link {
  flex: 0 0 auto;
  text-align: center;
  padding: .55rem 1rem;
  border-radius: var(--loopin-radius-pill);
  font-size: .875rem;
  font-weight: 600;
  color: var(--loopin-muted);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}

.loopin-social-nav-link.loopin-social-nav-cat {
  padding: .45rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
}

.loopin-social-nav-tab {
  flex-shrink: 0;
}

.loopin-social-nav-link.is-active,
.loopin-social-nav-link:hover {
  background: #fff;
  color: var(--loopin-text);
  box-shadow: var(--loopin-shadow-xs);
}

.loopin-directory-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 1.25rem;
  align-items: center;
}

.loopin-directory-search {
  flex: 1;
  min-width: 200px;
  padding: .7rem 1rem;
  border: none;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  font-family: inherit;
  font-size: .9375rem;
}

.loopin-directory-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--loopin-red);
  background: #fff;
}

.loopin-directory-sort,
.loopin-directory-level {
  padding: .65rem 2rem .65rem .85rem;
  border: none;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  cursor: pointer;
}

.loopin-directory-level {
  min-width: 11rem;
}

[dir="rtl"] .loopin-directory-sort,
[dir="rtl"] .loopin-directory-level {
  padding: .65rem .85rem .65rem 2rem;
  background-position: left .75rem center;
}

.loopin-load-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 0.5rem;
  padding: 1.25rem 1rem 0.25rem;
  position: relative;
}

.loopin-load-more-wrap::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--loopin-border, #e5e7eb) 20%,
    var(--loopin-border, #e5e7eb) 80%,
    transparent 100%
  );
}

.loopin-load-more-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  min-width: min(100%, 220px);
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #fff;
  color: var(--loopin-text, #111);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.loopin-load-more-btn:hover:not(:disabled),
.loopin-load-more-btn:focus-visible:not(:disabled) {
  background: var(--loopin-bg-soft, #f8fafc);
  border-color: rgba(27, 27, 27, 0.35);
  color: var(--loopin-red, #1B1B1B);
  box-shadow: 0 8px 22px rgba(27, 27, 27, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.loopin-load-more-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.08);
}

.loopin-load-more-btn:disabled,
.loopin-load-more-btn.is-loading {
  cursor: wait;
  opacity: 0.85;
  transform: none;
  pointer-events: none;
}

.loopin-load-more-btn-label {
  display: inline-block;
}

.loopin-load-more-btn-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(27, 27, 27, 0.2);
  border-top-color: var(--loopin-red, #1B1B1B);
  border-radius: 50%;
  flex-shrink: 0;
  animation: loopin-load-more-spin 0.7s linear infinite;
}

.loopin-load-more-btn.is-loading .loopin-load-more-btn-spinner {
  display: inline-block;
}

.loopin-load-more-btn[hidden] {
  display: none !important;
}

.loopin-load-more-wrap:has(.loopin-load-more-btn[hidden]),
.loopin-load-more-wrap:not(:has(.loopin-load-more-btn)) {
  display: none;
}

@keyframes loopin-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 639px) {
  .loopin-load-more-wrap {
    margin-top: 1.5rem;
    padding-inline: 0.75rem;
  }

  .loopin-load-more-btn {
    width: 100%;
    max-width: 320px;
    min-height: 3rem;
  }
}

.loopin-artist-grid,
.loopin-specialist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.15rem;
  width: 100%;
}

@media (max-width: 639px) {
  .loopin-artist-grid,
  .loopin-specialist-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Specialist listing (compact) ─────────────────────────── */
.loopin-directory--specialists {
  --loopin-specialist-accent: #c75b7a;
  --loopin-specialist-accent-dark: #a94461;
  --loopin-specialist-accent-border: rgba(199, 91, 122, .22);
  --loopin-specialist-accent-border-soft: rgba(199, 91, 122, .14);
  --loopin-specialist-accent-bg: rgba(199, 91, 122, .05);
  --loopin-specialist-accent-bg-strong: rgba(199, 91, 122, .08);
  --loopin-specialist-accent-shadow: rgba(199, 91, 122, .12);
  --loopin-specialist-warm-muted: #9b7878;
  --loopin-specialist-warm-line: #f0e4e6;
  --loopin-specialist-card-bg: #fff;
  --loopin-specialist-gold: #e8b86d;
  --loopin-specialist-lilac: #c993b8;
  --loopin-specialist-fantasy-gradient: linear-gradient(120deg, #c75b7a 0%, #e8879b 45%, #e8b86d 100%);
  width: 100%;
  box-sizing: border-box;
}

.loopin-directory--specialists .loopin-specialists-hero {
  margin-block: 16px 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.loopin-specialists-title {
  margin: 0 0 .3rem;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.22;
  color: #3d2c2e;
}

.loopin-specialists-title-main {
  color: #3d2c2e;
}

.loopin-specialists-title-accent {
  background: var(--loopin-specialist-fantasy-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.loopin-specialists-lead {
  margin: 0;
  max-width: 100%;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--loopin-specialist-warm-muted);
}

.loopin-specialists-seo-links {
  margin-top: .45rem;
}

.loopin-directory--specialists .loopin-seo-crosslink {
  color: var(--loopin-specialist-accent);
}

.loopin-directory--specialists .loopin-seo-crosslink:hover {
  color: var(--loopin-specialist-accent-dark);
}

.loopin-specialists-advanced-search {
  margin-bottom: .65rem;
}

.loopin-specialists-search-shell:not(.is-open) {
  margin-bottom: 0;
}

.loopin-specialists-advanced-search-toggle.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.loopin-specialists-advanced-search-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  width: 100%;
  min-height: 2.65rem;
  padding: .6rem .95rem;
  border: 1px solid var(--loopin-specialist-accent-border);
  border-radius: 14px;
  background: #fff;
  color: #3d2c2e;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(61, 44, 46, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.loopin-specialists-advanced-search-toggle:hover,
.loopin-specialists-advanced-search-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--loopin-specialist-accent);
  box-shadow: 0 6px 18px rgba(199, 91, 122, .1);
}

.loopin-specialists-advanced-search-toggle[aria-expanded="true"] {
  border-color: var(--loopin-specialist-accent);
  box-shadow: 0 4px 16px var(--loopin-specialist-accent-shadow);
}

.loopin-specialists-advanced-search-label {
  flex: 1 1 auto;
  text-align: start;
}

.loopin-specialists-advanced-search-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--loopin-specialist-accent);
  transition: transform .2s ease;
}

.loopin-specialists-advanced-search-icon svg {
  width: 100%;
  height: 100%;
}

.loopin-specialists-advanced-search-toggle[aria-expanded="true"] .loopin-specialists-advanced-search-icon {
  transform: rotate(180deg);
}

.loopin-specialists-advanced-panel {
  margin-top: .55rem;
  padding: .85rem;
  border: 1px solid var(--loopin-specialist-accent-border-soft);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(61, 44, 46, .04);
}

.loopin-specialists-advanced-panel[hidden] {
  display: none !important;
}

.loopin-specialists-advanced-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem .55rem;
}

.loopin-specialists-advanced-field {
  min-width: 0;
}

.loopin-specialists-advanced-field--full {
  grid-column: 1 / -1;
}

.loopin-specialists-advanced-label {
  display: block;
  margin-bottom: .28rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--loopin-specialist-warm-muted);
}

.loopin-specialists-filter-row {
  margin-bottom: 0;
}

.loopin-specialists-filter-box--city {
  display: none;
}

.loopin-specialists-filter-control,
.loopin-specialists-advanced-panel .loopin-browse-select,
.loopin-specialists-advanced-panel .loopin-directory-sort,
.loopin-specialists-advanced-panel .loopin-directory-search,
.loopin-specialists-advanced-panel .loopin-directory-level {
  width: 100%;
  min-height: 2.35rem;
  padding: .5rem .7rem;
  border: 1px solid var(--loopin-specialist-accent-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: #3d2c2e;
  appearance: none;
  box-shadow: none;
  line-height: 1.3;
}

.loopin-specialists-advanced-panel .loopin-browse-field {
  min-width: 0;
  margin: 0;
}

.loopin-specialists-results {
  width: 100%;
}

.loopin-directory--specialists .loopin-specialist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 0;
}

.loopin-directory--specialists .loopin-specialist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  min-width: 0;
  padding: 1.05rem 1.1rem 1.1rem;
  overflow: hidden;
  border: 1px solid var(--loopin-specialist-accent-border-soft);
  border-radius: 18px;
  background: var(--loopin-specialist-card-bg);
  box-shadow:
    0 1px 2px rgba(61, 44, 46, .04),
    0 8px 24px rgba(199, 91, 122, .07);
  text-align: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.loopin-directory--specialists .loopin-specialist-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: var(--loopin-specialist-fantasy-gradient);
  opacity: .85;
  pointer-events: none;
}

.loopin-directory--specialists .loopin-specialist-card:hover {
  transform: translateY(-2px);
  border-color: var(--loopin-specialist-accent-border);
  box-shadow:
    0 2px 4px rgba(61, 44, 46, .04),
    0 14px 32px rgba(199, 91, 122, .12);
}

.loopin-specialist-card-header {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.loopin-directory--specialists .loopin-specialist-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(199, 91, 122, .18),
    0 4px 14px rgba(199, 91, 122, .14);
}

.loopin-specialist-main {
  min-width: 0;
  flex: 1 1 auto;
}

.loopin-specialist-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .35rem;
  margin: 0 0 .15rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.loopin-specialist-name a {
  color: #3d2c2e;
  text-decoration: none;
}

.loopin-specialist-name a:hover {
  color: var(--loopin-specialist-accent-dark);
}

.loopin-specialist-location,
.loopin-specialist-portfolio-count {
  margin: 0;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--loopin-specialist-warm-muted);
}

.loopin-specialist-portfolio-count {
  margin-top: .1rem;
}

.loopin-specialist-row-meta {
  display: none;
  margin: 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--loopin-specialist-warm-muted);
}

.loopin-specialist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.loopin-specialist-tag {
  display: inline-flex;
  align-items: center;
  padding: .24rem .55rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
}

.loopin-directory--specialists .loopin-specialist-tag {
  border: 1px solid transparent;
  transition: background .15s ease;
}

.loopin-directory--specialists .loopin-specialist-tag:nth-child(3n+1) {
  background: #fdf2f6;
  border-color: rgba(199, 91, 122, .12);
  color: #9b3d5c;
}

.loopin-directory--specialists .loopin-specialist-tag:nth-child(3n+2) {
  background: #fff6f0;
  border-color: rgba(192, 104, 64, .12);
  color: #c06840;
}

.loopin-directory--specialists .loopin-specialist-tag:nth-child(3n+3),
.loopin-directory--specialists .loopin-specialist-tag--more {
  background: #f9f0f5;
  border-color: rgba(135, 74, 114, .12);
  color: #874a72;
}

.loopin-specialist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: .15rem;
}

.loopin-specialist-profile-button,
.loopin-specialist-booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.loopin-directory--specialists .loopin-specialist-profile-button {
  flex: 1 1 auto;
  border: 1px solid var(--loopin-specialist-accent-border);
  background: #fff;
  color: var(--loopin-specialist-accent);
  box-shadow: none;
}

.loopin-directory--specialists .loopin-specialist-profile-button:hover {
  transform: translateY(-1px);
  background: var(--loopin-specialist-accent-bg);
  border-color: var(--loopin-specialist-accent);
  box-shadow: none;
}

.loopin-directory--specialists .loopin-specialist-booking-button {
  border: 0;
  background: var(--loopin-specialist-fantasy-gradient);
  color: #fff;
  box-shadow: 0 4px 14px rgba(199, 91, 122, .22);
}

.loopin-directory--specialists .loopin-specialist-booking-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(199, 91, 122, .28);
  color: #fff;
}

.loopin-specialist-profile-button {
  flex: 1 1 auto;
  border: 1px solid var(--loopin-specialist-accent);
  background: #fff;
  color: var(--loopin-specialist-accent);
}

.loopin-specialist-profile-button:hover {
  background: var(--loopin-specialist-accent-bg-strong);
}

.loopin-specialist-booking-button {
  border: 0;
  background: var(--loopin-specialist-accent);
  color: #fff;
}

.loopin-specialist-booking-button:hover {
  background: var(--loopin-specialist-accent-dark);
  color: #fff;
}

.loopin-specialist-message-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border: 1px solid var(--loopin-specialist-accent-border);
  border-radius: 999px;
  background: #fff;
  color: var(--loopin-specialist-accent);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.loopin-directory--specialists .loopin-specialist-message-button:hover {
  transform: translateY(-1px);
  background: var(--loopin-specialist-accent-bg);
  border-color: var(--loopin-specialist-accent);
}

.loopin-specialist-message-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

.loopin-specialists-pagination {
  margin-top: 14px;
}

.loopin-specialists-pagination[hidden] {
  display: none !important;
}

.loopin-specialists-infinite {
  min-height: 1px;
  margin-top: 8px;
}

.loopin-specialists-infinite[hidden] {
  display: none !important;
}

.loopin-specialists-infinite-sentinel {
  width: 100%;
  height: 1px;
}

.loopin-specialists-infinite-status {
  margin: 12px 0 0;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: #6b5a5c;
}

.loopin-specialists-infinite.is-loading .loopin-specialists-infinite-status {
  display: block;
}

.loopin-specialists-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.loopin-specialists-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: .35rem .65rem;
  border: 1px solid var(--loopin-specialist-accent-border);
  border-radius: 10px;
  background: #fff;
  color: #3d2c2e;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

a.loopin-specialists-page-button:hover {
  text-decoration: none;
}

.loopin-specialists-page-button:hover:not(:disabled) {
  border-color: var(--loopin-specialist-accent);
  color: var(--loopin-specialist-accent);
}

.loopin-specialists-page-button.is-active {
  background: var(--loopin-specialist-fantasy-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(199, 91, 122, .22);
}

@media (prefers-reduced-motion: reduce) {
  .loopin-directory--specialists .loopin-specialist-card,
  .loopin-directory--specialists .loopin-specialist-profile-button,
  .loopin-directory--specialists .loopin-specialist-booking-button,
  .loopin-directory--specialists .loopin-specialist-message-button,
  .loopin-specialists-advanced-search-toggle {
    transition: none !important;
  }

  .loopin-directory--specialists .loopin-specialist-card:hover,
  .loopin-directory--specialists .loopin-specialist-profile-button:hover,
  .loopin-directory--specialists .loopin-specialist-booking-button:hover {
    transform: none;
  }
}

.loopin-specialists-page-button:disabled,
.loopin-specialists-page-button[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.loopin-specialists-pagination-summary {
  font-size: .78rem;
  font-weight: 700;
  color: var(--loopin-specialist-warm-muted);
  white-space: nowrap;
}

.loopin-directory--specialists .loopin-verified-tick svg circle {
  fill: var(--loopin-specialist-accent);
}

.loopin-specialists-pagination-numbers {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.loopin-specialists-empty {
  padding: 1rem 0;
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .loopin-directory--specialists .loopin-specialist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .loopin-specialists-pagination-summary {
    display: none;
  }

  .loopin-specialists-pagination-numbers {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .loopin-directory--specialists .loopin-specialist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .loopin-specialists-hero {
    text-align: center;
    padding-inline: .85rem;
  }

  .loopin-specialists-title {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
  }

  .loopin-specialists-advanced-fields {
    grid-template-columns: 1fr;
  }

  .loopin-specialists-advanced-field--full {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .loopin-directory--specialists .loopin-specialists-pagination {
    padding-inline: .85rem;
  }

  .loopin-specialists-search-shell .loopin-specialists-advanced-panel {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 121;
    margin: 0;
    padding: 0;
    max-height: min(88vh, 720px);
    border: 0;
    border-radius: 1rem 1rem 0 0;
    background: #fff;
    box-shadow: 0 -8px 32px rgba(17, 17, 17, .12);
    transform: translateY(100%);
    transition: transform .22s ease;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  .loopin-specialists-search-shell.is-open .loopin-specialists-advanced-panel {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .loopin-specialists-search-shell .loopin-specialists-advanced-panel[hidden] {
    display: flex !important;
  }

  .loopin-specialists-search-sheet-handle {
    width: 2.5rem;
    height: .25rem;
    margin: .65rem auto .35rem;
    border-radius: 999px;
    background: #d9d9de;
  }

  .loopin-specialists-search-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 1rem .75rem;
    border-bottom: 1px solid var(--loopin-border);
  }

  .loopin-specialists-search-sheet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #111;
  }

  .loopin-specialists-search-sheet-close {
    border: 0;
    background: transparent;
    color: var(--loopin-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    padding: .35rem .5rem;
  }

  .loopin-specialists-search-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1rem .5rem;
    max-height: calc(min(88vh, 720px) - 9.5rem);
  }

  .loopin-specialists-search-sheet-body .loopin-specialists-advanced-panel,
  .loopin-specialists-search-sheet-body .loopin-specialists-filter-row {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .loopin-specialists-search-sheet-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--loopin-border);
    background: #fff;
  }

  .loopin-specialists-search-sheet-reset,
  .loopin-specialists-search-sheet-apply {
    min-height: 2.75rem;
    border-radius: 999px;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
  }

  .loopin-specialists-search-sheet-reset {
    border: 1px solid var(--loopin-specialist-accent-border);
    background: #fff;
    color: var(--loopin-specialist-accent);
  }

  .loopin-specialists-search-sheet-apply {
    border: 0;
    background: var(--loopin-specialist-accent);
    color: #fff;
  }

  .loopin-directory--specialists .loopin-specialist-grid {
    gap: 0;
    background: var(--loopin-specialist-card-bg);
    border-block: 1px solid var(--loopin-specialist-warm-line);
    border-inline: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .loopin-directory--specialists .loopin-specialist-card {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--loopin-specialist-warm-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .loopin-directory--specialists .loopin-specialist-card::before {
    display: none;
  }

  .loopin-directory--specialists .loopin-specialist-card:hover {
    transform: none;
    box-shadow: none;
  }

  .loopin-directory--specialists .loopin-specialist-card:last-child {
    border-bottom: 0;
  }

  .loopin-specialist-card-header {
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }

  .loopin-specialist-avatar {
    width: 48px;
    height: 48px;
    box-shadow:
      0 0 0 1px rgba(199, 91, 122, .16),
      0 3px 10px rgba(199, 91, 122, .1);
  }

  .loopin-specialist-name {
    font-size: .92rem;
    margin-bottom: .1rem;
  }

  .loopin-specialist-location,
  .loopin-specialist-portfolio-count,
  .loopin-specialist-tags {
    display: none !important;
  }

  .loopin-specialist-row-meta {
    display: block;
    margin: 0;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--loopin-specialist-warm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loopin-specialist-actions {
    flex: 0 0 auto;
    margin: 0;
    gap: 0;
  }

  .loopin-specialist-booking-button,
  .loopin-specialist-message-button {
    display: none !important;
  }

  .loopin-specialist-profile-button {
    flex: none;
    min-height: 2rem;
    min-width: 5.5rem;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid var(--loopin-specialist-accent);
    background: #fff;
    color: var(--loopin-specialist-accent);
    font-size: .78rem;
    font-weight: 700;
  }

  #loopin-social-wrap:has(.loopin-directory--specialists) .loopin-social-main {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .loopin-directory--specialists {
    padding-inline: 0;
  }

  .loopin-directory--specialists .loopin-specialists-hero,
  .loopin-directory--specialists .loopin-specialists-advanced-search {
    padding-inline: 0;
  }
}

@media (min-width: 768px) {
  .loopin-specialists-search-sheet-handle,
  .loopin-specialists-search-sheet-head,
  .loopin-specialists-search-sheet-footer,
  .loopin-specialists-search-backdrop {
    display: none !important;
  }

  .loopin-specialist-row-meta {
    display: none !important;
  }
}

/* ── Portfolio pin — Pinterest close match ───────────────── */
.loopin-pin-page .lx-section > .lx-container > .lx-single-layout,
.loopin-pin-page .lx-single-head,
.loopin-pin-page .lx-single-meta,
.loopin-pin-page .lx-article-content,
.loopin-pin-page .lx-comments-wrap,
.loopin-pin-page .lx-single-sidebar {
  display: none !important;
}

.loopin-pin-page #loopin-social-wrap {
  padding-top: .5rem;
  padding-bottom: 2rem;
  background: #fff;
}

.loopin-pin-page .loopin-social-subheader {
  margin-bottom: 0;
  border-bottom-color: #efefef;
}

/* Instagram-like single portfolio post */
.loopin-single-post {
  width: 100%;
  max-width: 935px;
  margin: 0 auto;
}

.loopin-single-post-card {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
}

.loopin-single-post-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.loopin-single-post-media-col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.loopin-single-post-media-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .85rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  color: #fff;
  pointer-events: none;
}

.loopin-single-post-media-header a,
.loopin-single-post-media-header button,
.loopin-single-post-media-header .loopin-follow-control {
  pointer-events: auto;
}

.loopin-single-post-author-mini {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.loopin-single-post-author-avatar {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.loopin-single-post-author-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .85);
}

.loopin-single-post-author-meta {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.loopin-single-post-author-name {
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loopin-single-post-author-name:hover {
  text-decoration: underline;
}

.loopin-single-post-date {
  font-size: .78rem;
  opacity: .85;
  color: #fff;
}

.loopin-single-post-media-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}

.loopin-single-post-follow .loopin-follow-button,
.loopin-single-post-follow .loopin-follow-button--guest {
  min-height: 2rem;
  min-width: 7rem;
  padding: .35rem .75rem;
  font-size: .78rem;
  justify-content: center;
  white-space: nowrap;
}

.loopin-single-post-media-header .loopin-follow-control {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  position: relative;
}

.loopin-single-post-media-header .loopin-follow-feedback {
  display: none !important;
}

.loopin-single-post-media-header .loopin-single-post-more {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}

.loopin-single-post-media-header .loopin-pin-more-menu {
  color: #111;
  top: calc(100% + .35rem);
  inset-inline-start: auto;
  inset-inline-end: 0;
  left: auto;
  right: auto;
}

@media (max-width: 768px) {
  .loopin-portfolio-zoomable {
    overflow: hidden;
    touch-action: pan-y;
  }

  .loopin-portfolio-zoomable img[data-loopin-zoom-media="image"],
  .loopin-portfolio-zoomable img.loopin-portfolio-img:not(.loopin-pin-video-thumb),
  .loopin-portfolio-zoomable img.loopin-pin-view-image,
  .loopin-portfolio-zoomable img.loopin-portfolio-lightbox-image {
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.18s ease;
    cursor: default;
  }

  .loopin-portfolio-zoomable.is-pinching,
  .loopin-portfolio-zoomable.is-zoomed,
  .loopin-portfolio-zoomable.is-zooming,
  .loopin-portfolio-zoomable .loopin-pin-view-slide.is-pinching,
  .loopin-portfolio-zoomable .loopin-post-slide.is-pinching {
    overflow: hidden;
    touch-action: none;
  }

  .loopin-portfolio-zoomable.is-zoomed img,
  .loopin-portfolio-zoomable img.is-zoomed {
    transition: none;
    cursor: grab;
    position: relative;
    z-index: 3;
  }

  .loopin-portfolio-zoomable .loopin-pin-gallery-open {
    cursor: default;
  }

  .loopin-single-post-media.loopin-pin-lightbox-zone {
    cursor: default;
  }

  .loopin-single-post-media.loopin-pin-view-media--gallery {
    touch-action: auto;
  }
}

.loopin-single-post-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 1rem 1rem;
}

.loopin-single-post-details.loopin-pin-view-panel {
  border-inline-start: none;
  max-height: none;
}

.loopin-single-post-actions {
  flex-shrink: 0;
  padding-top: .65rem;
}

.loopin-single-post-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .35rem;
}

.loopin-single-post-action {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.loopin-single-post-action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-single-post-caption {
  padding: .35rem 0 .75rem;
  text-align: start;
}

.loopin-single-post-caption-text,
.loopin-single-post-caption-empty {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: #111;
}

.loopin-single-post-caption-author {
  font-weight: 700;
  margin-inline-end: .35rem;
}

.loopin-single-post-caption-body {
  display: inline;
}

.loopin-single-post-caption-body p {
  display: inline;
  margin: 0;
}

.loopin-single-post-caption-body p + p {
  display: block;
  margin-top: .65rem;
}

.loopin-single-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}

.loopin-single-post-tags a {
  display: inline-flex;
  padding: .2rem .55rem;
  border-radius: var(--loopin-radius-pill);
  background: rgba(0, 0, 0, .05);
  color: rgba(17, 17, 17, .78);
  font-size: .75rem;
  text-decoration: none;
}

.loopin-single-post-comments {
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding-top: .75rem;
}

.loopin-single-post-comments-empty {
  margin: 0;
  padding: .5rem 0;
  color: rgba(17, 17, 17, .55);
  font-size: .85rem;
}

.loopin-single-post-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .75rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.loopin-single-post-footer-link {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(17, 17, 17, .72);
  text-decoration: none;
}

.loopin-single-post-footer-link:hover {
  color: #111;
  text-decoration: underline;
}

@media (min-width: 960px) {
  .loopin-single-post-media-col {
    padding: 0;
    max-width: none;
    width: 100%;
  }

  .loopin-single-post-details.loopin-pin-view-panel {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    padding-inline: 1.15rem 1.15rem;
    border-left: none;
    border-top: 1px solid #efefef;
    max-height: none;
  }
}

@media (max-width: 959px) {
  .loopin-single-post {
    max-width: none;
  }

  .loopin-single-post-card {
    border-radius: 0;
    border-inline: none;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
  }

  .loopin-single-post-details {
    padding-inline: 1rem;
  }
}

.loopin-single-post.loopin-pin-view {
  max-width: 935px;
}

.loopin-single-post .loopin-pin-view-stage {
  flex-direction: column;
  min-height: 0;
  max-height: none;
}

@media (min-width: 960px) {
  .loopin-single-post .loopin-pin-view-stage {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-height: none;
  }
}

.loopin-pin-view {
  width: 100%;
  max-width: 1056px;
  margin: 0 auto;
}

.loopin-pin-view-stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .loopin-pin-view-stage {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-height: calc(100vh - 140px);
    max-height: calc(100vh - 100px);
  }
}

.loopin-pin-view-media-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  padding: .5rem 0 1rem;
}

@media (max-width: 959px) {
  .loopin-pin-view-media-col {
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .loopin-pin-view-media {
    border-radius: 0;
    min-height: 0;
    max-width: none;
  }

  .loopin-pin-view-image,
  .loopin-pin-view-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
  }

  .loopin-pin-view-back {
    top: .65rem;
    inset-inline-start: .65rem;
  }

  .loopin-pin-view {
    max-width: none;
  }

  .loopin-pin-view-panel,
  .loopin-pin-view-below {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  /* Full-bleed media; text/actions keep page pad */
  .loopin-pin-page #loopin-social-wrap {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .loopin-pin-page .loopin-social-main {
    padding-inline: 0;
  }

  .loopin-pin-page .loopin-social-subheader {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}


@media (min-width: 960px) {
  .loopin-pin-view-media-col {
    padding: 1rem 1.25rem 1rem 0;
    max-width: calc(100% - 508px);
  }

  .loopin-single-post .loopin-pin-view-media-col,
  .loopin-single-post .loopin-single-post-media-col {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}

.loopin-pin-view-back {
  position: absolute;
  top: 1rem;
  left: .25rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

@media (min-width: 960px) {
  .loopin-pin-view-back { left: 0; }
}

.loopin-pin-view-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d0d;
}

.loopin-pin-view-media--video {
  background: #000;
}

.loopin-pin-view-slide {
  display: none;
  width: 100%;
}

.loopin-pin-view-slide.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.loopin-pin-view-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(78vh, 860px);
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
  cursor: zoom-in;
}

.loopin-pin-view-video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(88vh, 920px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #000;
}

.loopin-pin-view-media--gallery {
  touch-action: pan-y pinch-zoom;
}

.loopin-pin-view-counter {
  position: absolute;
  top: .85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: .25rem .65rem;
  border-radius: var(--loopin-radius-pill);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
}

.loopin-pin-view-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #111;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}

.loopin-pin-view-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}

.loopin-pin-view-prev { left: .75rem; }
.loopin-pin-view-next { right: .75rem; }

.loopin-pin-view-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .85rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
  z-index: 2;
}

.loopin-pin-view-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.loopin-pin-view-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.loopin-pin-lightbox-zone {
  cursor: zoom-in;
}

.loopin-pin-lightbox-zone .loopin-pin-view-video {
  cursor: default;
}

.loopin-pin-view-expand {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #111;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.loopin-pin-view-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 0 auto;
  background: #fff;
}

@media (min-width: 960px) {
  .loopin-pin-view-panel {
    width: 508px;
    max-width: 508px;
    flex-shrink: 0;
    border-left: 1px solid #efefef;
    max-height: calc(100vh - 100px);
  }
}

.loopin-pin-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 1rem;
  flex-shrink: 0;
  border-bottom: 1px solid #efefef;
}

.loopin-pin-view-toolbar-left {
  display: flex;
  align-items: center;
  gap: .15rem;
  position: relative;
}

.loopin-pin-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-width: 48px;
  height: 48px;
  padding: 0 .65rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #111;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}

.loopin-pin-icon-btn:hover {
  background: #efefef;
}

.loopin-pin-icon-heart {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.loopin-pin-icon-heart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.loopin-pin-icon-btn.is-liked,
.loopin-pin-icon-btn.is-liked .loopin-pin-icon-heart {
  color: #1B1B1B;
}

.loopin-pin-icon-btn.is-liked .loopin-pin-icon-heart path {
  fill: #1B1B1B;
  stroke: none;
}

.loopin-pin-icon-btn.is-liked .loopin-pin-icon-heart {
  transform: scale(1.08);
  transform-origin: center;
}

.loopin-pin-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.15rem;
  border-radius: 24px;
  background: #1B1B1B;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease;
}

.loopin-pin-save:hover {
  background: #000000;
  color: #fff;
}

.loopin-pin-more-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 10;
  min-width: 160px;
  padding: .35rem 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.loopin-pin-more-menu a,
.loopin-pin-more-menu button {
  display: block;
  width: 100%;
  padding: .65rem 1rem;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  text-decoration: none;
}

.loopin-pin-more-menu a:hover,
.loopin-pin-more-menu button:hover {
  background: #efefef;
}

.loopin-pin-view-panel-scroll {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.loopin-pin-view-creator {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
  text-decoration: none;
  color: #111;
}

.loopin-pin-view-creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.loopin-pin-view-creator-name {
  font-size: .9375rem;
  font-weight: 700;
}

.loopin-pin-verified {
  flex-shrink: 0;
}

.loopin-pin-view-title {
  margin: 0 0 .85rem;
  font-family: var(--loopin-font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111;
}

.loopin-pin-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  border-radius: 24px;
  background: #efefef;
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .12s ease;
}

.loopin-pin-cta:hover {
  background: #e2e2e2;
  color: #111;
}

.loopin-pin-view-description-heading {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
}

.loopin-pin-view-caption {
  font-size: 1rem;
  line-height: 1.5;
  color: #111;
}

.loopin-pin-view-caption.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loopin-pin-view-caption p:first-child { margin-top: 0; }
.loopin-pin-view-caption p:last-child { margin-bottom: 0; }

.loopin-pin-view-caption-empty {
  margin: 0;
  font-size: .9375rem;
  color: #767676;
}

.loopin-pin-view-see-more {
  margin-top: .25rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
}

.loopin-pin-view-see-more:hover {
  text-decoration: underline;
}

/* Pin comments */
.loopin-pin-view-comments {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #efefef;
  scroll-margin-top: 5rem;
  transition: background-color .35s ease;
}

.loopin-pin-view-comments.is-highlighted {
  background-color: rgba(15, 23, 42, 0.04);
  border-radius: 12px;
}

.loopin-pin-comments-heading:not(.screen-reader-text) {
  margin: 0 0 .85rem;
  font-size: .95rem;
  font-weight: 700;
  color: #111;
}

.loopin-pin-comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.loopin-pin-comment {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
}

.loopin-pin-comment-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.loopin-pin-comment-body {
  min-width: 0;
  flex: 1 1 auto;
}

.loopin-pin-comment-meta {
  margin: 0 0 .15rem;
  font-size: .875rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  direction: rtl;
  unicode-bidi: isolate;
}

.loopin-pin-comment-author,
a.loopin-pin-comment-author-link {
  font-weight: 700;
  color: #111;
  text-decoration: none;
}

a.loopin-pin-comment-author-link:hover {
  text-decoration: underline;
}

.loopin-pin-comment-avatar-link {
  flex-shrink: 0;
  line-height: 0;
}

.loopin-pin-comment-time {
  margin: 0;
  color: #767676;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  direction: rtl;
  unicode-bidi: isolate;
}

.loopin-pin-comment-text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: #111;
  word-break: break-word;
}

.loopin-pin-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}

.loopin-pin-comment-reply {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #737373;
  cursor: pointer;
}

.loopin-pin-comment-reply:hover,
.loopin-pin-comment-reply:focus-visible {
  color: #111;
}

.loopin-pin-comment-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0f766e;
  background: #ecfdf5;
}

.loopin-pin-comment-replies {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.75rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid #efefef;
}

.loopin-pin-comment--reply .loopin-pin-comment-avatar {
  width: 28px;
  height: 28px;
}

.loopin-pin-comment-reply-hint {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.15rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: #f7f7f7;
  font-size: 0.8125rem;
  color: #525252;
}

.loopin-pin-comment-reply-hint[hidden] {
  display: none !important;
}

.loopin-pin-comment-reply-cancel {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f766e;
  cursor: pointer;
  white-space: nowrap;
}

.loopin-pin-comments-empty {
  margin: 0;
  font-size: .9375rem;
  color: #767676;
}

.loopin-pin-view-composer {
  flex-shrink: 0;
  padding: .75rem 1rem 1rem;
  border-top: 1px solid #efefef;
  background: #fff;
}

.loopin-pin-comment-form {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  direction: rtl;
}

.loopin-pin-comment-input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 48px;
  max-height: 120px;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #efefef;
  color: #111;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  transition: background .12s ease, border-color .12s ease;
}

.loopin-pin-comment-submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.loopin-pin-comment-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.loopin-pin-comment-input::placeholder {
  color: #767676;
}

.loopin-pin-comment-input:focus {
  background: #fff;
  border-color: #cdcdcd;
  outline: none;
}

.loopin-pin-comment-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: none;
  border-radius: 24px;
  background: #efefef;
  color: #111;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}

.loopin-pin-comment-login:hover {
  background: #e2e2e2;
}

.loopin-pin-comment-count {
  font-size: .875rem;
  font-weight: 600;
}

.loopin-pin-view-below {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem 0;
}

.loopin-pin-view-related {
  margin-top: 0;
  margin-bottom: 2rem;
  padding-top: 0;
  border-top: none;
}

.loopin-pin-view-related + .loopin-pin-view-related {
  margin-top: 1.5rem;
}

/* ── Mobile bottom tab bar (internal pages) ───────────────── */
.loopin-mobile-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .loopin-social-page #loopin-social-wrap {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  body.loopin-social-page,
  body.loopin-user-portal-page {
    --loopin-bottom-nav-height: 4.75rem;
  }

  .loopin-mobile-bottom-nav {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    --loopin-bottom-nav-height: 4.75rem;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -4px 24px rgba(17, 17, 17, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .loopin-mobile-bottom-nav-list {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: .35rem .25rem .45rem;
  }

  .loopin-mobile-bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .loopin-mobile-bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 3.25rem;
    padding: .2rem .15rem;
    color: #4a4a4a;
    text-decoration: none;
    text-align: center;
    transition: color .15s ease;
  }

  .loopin-mobile-bottom-nav-link:hover {
    color: #111;
  }

  .loopin-mobile-bottom-nav-link.is-active,
  .loopin-mobile-bottom-nav-link[aria-current="page"],
  .loopin-mobile-bottom-nav-link[aria-current="true"] {
    color: #111;
    font-weight: 700;
  }

  .loopin-mobile-bottom-nav-link.is-active .loopin-mobile-bottom-nav-icon,
  .loopin-mobile-bottom-nav-link[aria-current="page"] .loopin-mobile-bottom-nav-icon,
  .loopin-mobile-bottom-nav-link[aria-current="true"] .loopin-mobile-bottom-nav-icon {
    color: #111;
    background: rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    width: 2.15rem;
    height: 2.15rem;
  }

  .loopin-mobile-bottom-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: background .15s ease, color .15s ease, width .15s ease, height .15s ease;
  }

  .loopin-mobile-bottom-nav-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .loopin-mobile-bottom-nav-link.is-active .loopin-mobile-bottom-nav-icon svg path,
  .loopin-mobile-bottom-nav-link.is-active .loopin-mobile-bottom-nav-icon svg circle,
  .loopin-mobile-bottom-nav-link.is-active .loopin-mobile-bottom-nav-icon svg rect,
  .loopin-mobile-bottom-nav-link[aria-current="page"] .loopin-mobile-bottom-nav-icon svg path,
  .loopin-mobile-bottom-nav-link[aria-current="page"] .loopin-mobile-bottom-nav-icon svg circle,
  .loopin-mobile-bottom-nav-link[aria-current="page"] .loopin-mobile-bottom-nav-icon svg rect,
  .loopin-mobile-bottom-nav-link[aria-current="true"] .loopin-mobile-bottom-nav-icon svg path,
  .loopin-mobile-bottom-nav-link[aria-current="true"] .loopin-mobile-bottom-nav-icon svg circle,
  .loopin-mobile-bottom-nav-link[aria-current="true"] .loopin-mobile-bottom-nav-icon svg rect {
    stroke-width: 2.1;
  }

  .loopin-mobile-bottom-nav-link.is-active .loopin-mobile-bottom-nav-label,
  .loopin-mobile-bottom-nav-link[aria-current="page"] .loopin-mobile-bottom-nav-label,
  .loopin-mobile-bottom-nav-link[aria-current="true"] .loopin-mobile-bottom-nav-label {
    color: #111;
    font-weight: 700;
  }

  .loopin-mobile-bottom-nav-badge {
    position: absolute;
    top: -0.2rem;
    inset-inline-end: -0.45rem;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--loopin-primary, #1B1B1B);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 0.95rem;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 1.5px #fff;
  }

  .loopin-mobile-bottom-nav-label {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .loopin-mobile-bottom-nav-link--action {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    cursor: pointer;
    font: inherit;
  }

  .loopin-mobile-bottom-nav--portal .loopin-mobile-bottom-nav-label {
    font-size: .65rem;
  }

  .loopin-mobile-bottom-nav--portal .loopin-mobile-bottom-nav-link {
    gap: .15rem;
    padding-inline: .1rem;
  }

  .loopin-mobile-bottom-nav--portal .loopin-mobile-bottom-nav-list {
    align-items: flex-end;
  }

  .loopin-mobile-bottom-nav-item--center {
    flex: 0 0 auto;
    min-width: 4.5rem;
  }

  .loopin-mobile-bottom-nav-link--center {
    min-height: auto;
    margin-top: -.85rem;
    padding-top: 0;
    color: #111;
  }

  .loopin-mobile-bottom-nav-link--center .loopin-mobile-bottom-nav-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 999px;
    background: #111;
    color: #fff;
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.22);
  }

  .loopin-mobile-bottom-nav-link--center.is-active .loopin-mobile-bottom-nav-icon {
    background: #111;
    color: #fff;
  }

  .loopin-mobile-bottom-nav-link--center .loopin-mobile-bottom-nav-icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .loopin-mobile-bottom-nav-link--center .loopin-mobile-bottom-nav-icon svg path {
    stroke: currentColor;
  }

  .loopin-mobile-bottom-nav-link--center .loopin-mobile-bottom-nav-label {
    margin-top: .15rem;
    font-size: .58rem;
    font-weight: 700;
  }

  body.loopin-user-portal-page #loopin-user-portal {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + 1.25rem);
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-portal-form-actions-sticky {
    position: sticky;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + 0.5rem);
    z-index: 25;
    margin-top: 1.25rem;
    padding: 0.85rem 0 0.35rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 28%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-portal-form-actions-sticky .loopin-btn {
    width: 100%;
  }
}

/* ── Bottom nav categories submenu ────────────────────────── */
.loopin-bottom-nav-submenu {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--loopin-mobile-bottom-nav-height, 68px) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 9998;
  max-height: 45vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(17, 17, 17, .14);
}

.loopin-bottom-nav-submenu[hidden] {
  display: none !important;
}

.loopin-bottom-nav-submenu-inner {
  display: flex;
  flex-direction: column;
  padding: .35rem 0;
}

.loopin-bottom-nav-submenu--categories .loopin-bottom-nav-submenu-inner {
  padding: .45rem .4rem .55rem;
  gap: .2rem;
}

.loopin-bottom-nav-submenu--categories .loopin-bottom-nav-submenu-link--all {
  margin-bottom: .15rem;
}

.loopin-bottom-nav-submenu--categories .loopin-category-menu-grid .loopin-bottom-nav-submenu-link {
  padding: .55rem .5rem;
  font-size: .8rem;
  gap: .4rem;
  min-width: 0;
}

.loopin-bottom-nav-submenu--create,
.loopin-bottom-nav-submenu--profile {
  inset-inline: 16px;
  bottom: calc(var(--loopin-bottom-nav-height, 4.75rem) + env(safe-area-inset-bottom, 0px) + 12px);
}

.loopin-bottom-nav-submenu--profile {
  max-height: min(62vh, 420px);
}

.loopin-bottom-nav-submenu-title {
  margin: 0;
  padding: .85rem 1rem .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}

.loopin-bottom-nav-submenu-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  color: #111;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .15s ease;
}

.loopin-bottom-nav-submenu-link:hover,
.loopin-bottom-nav-submenu-link.is-active {
  background: #f5f5f7;
}

.loopin-bottom-nav-submenu-link .loopin-browse-category-icon {
  flex-shrink: 0;
}

.loopin-bottom-nav-submenu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  color: #111;
}

@media (min-width: 768px) {
  .loopin-bottom-nav-submenu {
    display: none !important;
  }
}

.loopin-masonry--related {
  margin-top: .85rem;
}

.loopin-profile-more-ideas {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--loopin-border);
}

.loopin-pin-video-badge,
.loopin-pin-gallery-badge {
  position: absolute;
  z-index: 4;
  padding: .2rem .45rem;
  border-radius: var(--loopin-radius-pill);
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}

.loopin-pin-video-badge {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, .55);
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.loopin-pin-video-badge-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: 0.15rem;
  display: block;
}

.loopin-pin:hover .loopin-pin-video-badge,
.loopin-profile-portfolio-tile:hover .loopin-pin-video-badge,
.loopin-swipe-card:hover .loopin-pin-video-badge {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(15, 15, 15, .68);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}

.loopin-pin-gallery-badge {
  top: .5rem;
  inset-inline-end: .5rem;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-width: 1.85rem;
  min-height: 1.6rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(15, 15, 15, .78);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.loopin-pin-gallery-badge::before {
  content: "";
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='7' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' fill='black' opacity='.28'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='7' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' fill='black' opacity='.28'/%3E%3Crect x='9' y='3' width='12' height='14' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.loopin-pin-media,
.loopin-profile-portfolio-tile,
.loopin-swipe-card-media-slot {
  position: relative;
}

.loopin-pin-video-thumb {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

video.loopin-pin-view-video::-webkit-media-controls-download-button,
video.loopin-portfolio-lightbox-video::-webkit-media-controls-download-button,
video.loopin-portfolio-video::-webkit-media-controls-download-button,
.loopin-portfolio-shorts-media-item video::-webkit-media-controls-download-button {
  display: none !important;
}

.loopin-layout-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.loopin-layout-option {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-bg-soft);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

.loopin-layout-option:has(input:checked) {
  background: var(--loopin-text);
  color: #fff;
}

.loopin-submit-steps {
  margin: .65rem 0 0;
  padding-left: 1.15rem;
  color: var(--loopin-muted);
  font-size: .875rem;
  line-height: 1.55;
}

.loopin-submit-steps li + li {
  margin-top: .25rem;
}

.loopin-gallery-cover-badge {
  display: inline-block;
  margin-left: .25rem;
  padding: .05rem .35rem;
  border-radius: var(--loopin-radius-pill);
  background: var(--loopin-text);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.loopin-manage-header,
.loopin-edit-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Glass overlay must stay behind manage content (same fix as portfolio submit). */
.loopin-manage.loopin-glass-surface > *,
.loopin-manage.loopin-dashboard-v2 > * {
  position: relative;
  z-index: 1;
}

.loopin-manage.loopin-glass-surface::before,
.loopin-manage.loopin-dashboard-v2.loopin-glass-surface::before {
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
}

.loopin-manage .loopin-h1,
.loopin-manage .loopin-portal-section-title,
.loopin-manage .loopin-manage-item-title,
.loopin-manage .loopin-manage-item-title a {
  color: var(--loopin-text, #0f172a);
}

.loopin-manage .loopin-lead,
.loopin-manage .loopin-manage-item-meta {
  color: var(--loopin-text-muted, #475569);
}

.loopin-manage-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.loopin-manage-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-pin);
  color: var(--loopin-text, #0f172a);
}

.loopin-manage-item-thumb {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f3f3;
}

.loopin-manage-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loopin-manage-item-count {
  position: absolute;
  z-index: 2;
  inset-inline-end: .45rem;
  bottom: .45rem;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  min-height: 1.4rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(15, 15, 15, .78);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  pointer-events: none;
}

.loopin-manage-item-body {
  flex: 1;
  min-width: 0;
}

.loopin-manage-item-title {
  margin: 0 0 .25rem;
  font-size: 1rem;
}

.loopin-manage-item-title a {
  color: inherit;
  text-decoration: none;
}

.loopin-manage-item-meta {
  margin: 0 0 .65rem;
  font-size: .8125rem;
  color: var(--loopin-muted);
}

.loopin-manage-item-status--pending {
  color: #b45309;
}

.loopin-manage-item-status--loopin_rejected {
  color: #b91c1c;
  font-weight: 600;
}

.loopin-manage-rejected {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--loopin-muted, #94a3b8) 35%, transparent);
}

.loopin-manage-rejected-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}

.loopin-manage-rejected-lead {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--loopin-muted);
}

.loopin-manage-item-reject-reason {
  margin: 0 0 .65rem;
  padding: .55rem .7rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: #7f1d1d;
  background: color-mix(in srgb, #fecaca 55%, transparent);
  border-radius: .5rem;
}

.loopin-manage-item--rejected {
  opacity: .98;
}

.loopin-manage-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.loopin-btn-sm {
  padding: .35rem .75rem;
  font-size: .8125rem;
}

.loopin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.loopin-portfolio-delete {
  color: var(--loopin-red);
}

.loopin-gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: .65rem 0;
}

.loopin-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  color: var(--loopin-muted);
}

.loopin-gallery-remove {
  border: none;
  background: none;
  color: var(--loopin-red);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

/* Focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--loopin-red);
  outline-offset: 2px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .loopin-pin-hover,
  .loopin-tab::after,
  .loopin-btn,
  .loopin-cat-pill,
  .loopin-swipe-card,
  .loopin-swipe-card-media-slot,
  .loopin-swipe-card-media-el,
  .loopin-portfolio-img,
  .loopin-pin-media img {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Profile portfolio swipe deck (mobile, Tinder-style) ─────── */
.loopin-portfolio-views {
  position: relative;
}

.loopin-portfolio-swipe-wrap {
  display: none;
}

.loopin-portfolio-grid-view {
  display: grid;
}

.loopin-swipe-deck-shell {
  position: relative;
  padding: 0;
  display: block;
}

.loopin-swipe-deck {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  height: min(72dvh, 620px);
  min-height: 420px;
  touch-action: none;
}

.loopin-swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: #111;
  transition: transform 0.28s var(--loopin-ease, ease), opacity 0.28s ease;
  will-change: transform;
  user-select: none;
  touch-action: none;
}

.loopin-swipe-card.is-top {
  cursor: grab;
  z-index: 3;
}

.loopin-swipe-card.is-top.is-dragging {
  cursor: grabbing;
  transition: none;
}

.loopin-swipe-card.is-flying {
  transition: transform 0.28s var(--loopin-ease, ease);
  pointer-events: none;
}

.loopin-swipe-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.loopin-swipe-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.loopin-swipe-card-media-slot {
  width: 100%;
  height: 100%;
}

.loopin-swipe-card-media-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.loopin-swipe-card-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.loopin-swipe-card-dots {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  pointer-events: none;
}

.loopin-swipe-card-dot {
  flex: 1;
  max-width: 28px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.loopin-swipe-card-dot.is-active {
  background: #fff;
  transform: scaleY(1.35);
}

.loopin-swipe-card-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.88;
  transition: opacity 0.3s var(--loopin-swipe-ease), background 0.3s var(--loopin-swipe-ease), transform 0.3s var(--loopin-swipe-ease);
}

.loopin-swipe-card-nav:not(:disabled):active {
  transform: translateY(-50%) scale(0.94);
}

.loopin-swipe-card-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.loopin-swipe-card-nav--prev {
  left: 10px;
}

.loopin-swipe-card-nav--next {
  right: 10px;
}

.loopin-swipe-card-tap {
  position: absolute;
  top: 0;
  bottom: 88px;
  z-index: 2;
  width: 38%;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.loopin-swipe-card-tap--prev {
  left: 0;
}

.loopin-swipe-card-tap--next {
  right: 0;
}

.loopin-swipe-deck-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--loopin-text, #222);
  font-size: 1.45rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s var(--loopin-swipe-ease), opacity 0.3s ease;
}

.loopin-swipe-deck-arrow:not(:disabled):active {
  transform: translateY(-50%) scale(0.94);
}

.loopin-swipe-deck-arrow--prev {
  left: 10px;
}

.loopin-swipe-deck-arrow--next {
  right: 10px;
}

.loopin-swipe-deck-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.loopin-swipe-deck-arrow[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.loopin-swipe-counter {
  text-align: center;
  margin: .65rem 0 0;
  font-size: .8125rem;
  color: var(--loopin-muted);
}

.loopin-swipe-card-media .loopin-pin-hover--swipe {
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  background: transparent;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: auto;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.1rem;
  padding: 0 .5rem 5.75rem;
}

.loopin-swipe-card-media .loopin-pin-hover--swipe .loopin-pin-action,
.loopin-swipe-card-media .loopin-pin-hover--swipe .loopin-like-btn,
.loopin-swipe-card-media .loopin-pin-hover--swipe .loopin-share-btn,
.loopin-swipe-card-media .loopin-pin-hover--swipe .loopin-save-post-control,
.loopin-swipe-card-media .loopin-pin-hover--swipe .loopin-save-post-button {
  pointer-events: auto;
}

.loopin-swipe-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.25rem 1.1rem 1.35rem;
  color: #fff;
  text-align: start;
  pointer-events: none;
}

.loopin-swipe-card-author {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  pointer-events: auto;
}

.loopin-swipe-card-cat {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: .75rem;
  font-weight: 600;
}

.loopin-swipe-card-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.loopin-swipe-card-excerpt {
  margin: .45rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  opacity: .92;
}

.loopin-swipe-card-likes {
  display: inline-block;
  margin-top: .5rem;
  font-size: .8125rem;
  font-weight: 600;
}

.loopin-swipe-card-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.loopin-swipe-empty {
  text-align: center;
  padding: 2rem 1rem;
}

.loopin-swipe-restart {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .loopin-social-main {
    overflow-x: clip;
  }

  .loopin-profile-page .loopin-portfolio-swipe-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .loopin-public-profile .loopin-portfolio-swipe-wrap {
    display: none !important;
  }

  .loopin-profile-page:not(.loopin-public-profile) .loopin-portfolio-grid-view {
    display: none !important;
  }

  .loopin-public-profile .loopin-profile-portfolio-grid[hidden],
  .loopin-public-profile .loopin-profile-portfolio-list[hidden] {
    display: none !important;
  }

  .loopin-profile-portfolios.is-grid-mode .loopin-profile-portfolio-grid,
  .loopin-profile-portfolio-shell.loopin-profile-grid-mode .loopin-profile-portfolio-grid {
    display: grid !important;
  }

  .loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-list,
  .loopin-profile-portfolio-shell.loopin-profile-large-mode .loopin-profile-portfolio-list {
    display: grid !important;
  }

  .loopin-profile-portfolios.is-large-mode .loopin-profile-portfolio-grid,
  .loopin-profile-portfolio-shell.loopin-profile-large-mode .loopin-profile-portfolio-grid {
    display: none !important;
  }

  .loopin-profile-portfolios.is-grid-mode .loopin-profile-portfolio-list,
  .loopin-profile-portfolio-shell.loopin-profile-grid-mode .loopin-profile-portfolio-list {
    display: none !important;
  }

  .loopin-feed--ideas .loopin-ideas-hero {
    margin-bottom: .75rem;
  }

  .loopin-feed--ideas .loopin-feed-swipe-wrap {
    display: none !important;
  }

  .loopin-feed--ideas .loopin-feed-grid-view.loopin-masonry {
    display: block !important;
    column-count: 2;
    column-gap: 10px;
    width: 100%;
  }

  .loopin-feed--ideas .loopin-feed-grid-view .loopin-pin,
  .loopin-feed--ideas .loopin-feed-grid-view .loopin-portfolio-card {
    margin-bottom: 10px;
  }

  .loopin-feed--ideas .loopin-pin-hover {
    display: none;
  }

  .loopin-feed--ideas .loopin-pin-meta {
    padding: .4rem .05rem .15rem;
  }

  .loopin-feed--ideas .loopin-pin-title {
    font-size: .8125rem;
  }

  .loopin-feed--ideas .loopin-pin-author {
    font-size: .75rem;
    margin-top: .25rem;
  }

  .loopin-feed--ideas .loopin-load-more-wrap {
    display: flex;
  }
}

/* ── Guest membership prompt (portfolio preview limit) ─────── */
.loopin-guest-membership-prompt {
  margin: 1.5rem auto 0;
  max-width: 520px;
  padding: 1.5rem 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #fff 0%, var(--loopin-bg-soft, #fafafa) 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.loopin-guest-membership-title {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--loopin-text);
}

.loopin-guest-membership-lead {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--loopin-muted);
}

.loopin-guest-membership-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
}

.loopin-guest-membership-empty {
  margin-top: .5rem;
  padding: 1.25rem 1rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, var(--loopin-bg-soft, #fafafa) 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.loopin-guest-membership-prompt--profile {
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .loopin-guest-membership-prompt--feed-grid {
    display: block;
  }
}
/* ── Membership & Onboarding ─────────────────────────────────── */
.loopin-onboarding {
  max-width: 1080px;
  margin: 0 auto;
}

.loopin-onboarding-hero {
  text-align: center;
  margin-bottom: 2.25rem;
}

.loopin-onboarding-lead {
  color: var(--loopin-muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0.5rem auto 0;
  line-height: 1.7;
}

.loopin-onboarding-lead--portal {
  text-align: center;
  margin-bottom: 1.75rem;
}

.loopin-form-narrow {
  max-width: 420px;
  margin: 0 auto;
}

.loopin-form-center {
  text-align: center;
}

.loopin-required {
  color: var(--loopin-red);
}

.loopin-btn-block {
  width: 100%;
}

.loopin-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.loopin-plan-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
}

.loopin-plan-card-top {
  padding: 1.6rem 1.5rem 1.15rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.loopin-plan-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  color: #475569;
  background: rgba(15, 23, 42, 0.05);
}

.loopin-plan-card-icon svg {
  width: 22px;
  height: 22px;
}

.loopin-plan-card.is-featured {
  border-color: rgba(27, 27, 27, 0.35);
  box-shadow: 0 18px 42px rgba(27, 27, 27, 0.14);
  transform: translateY(-4px);
  z-index: 1;
}

.loopin-plan-card.is-featured .loopin-plan-card-top {
  background: linear-gradient(160deg, rgba(27, 27, 27, 0.08) 0%, rgba(255, 255, 255, 0.98) 52%);
}

.loopin-plan-card.is-featured .loopin-plan-card-icon {
  color: var(--loopin-red);
  background: rgba(27, 27, 27, 0.1);
}

.loopin-plan-card--premium .loopin-plan-card-icon {
  color: #9a6700;
  background: rgba(245, 158, 11, 0.14);
}

.loopin-plan-card--professional .loopin-plan-card-icon {
  color: #007a6b;
  background: rgba(0, 122, 107, 0.1);
}

.loopin-plan-badge {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: var(--loopin-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(27, 27, 27, 0.25);
}

.loopin-plan-badge--current {
  background: #0f766e;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.22);
}

.loopin-plan-card.is-current {
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.12);
}

.loopin-dash-plan-dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.loopin-dash-plan-name {
  font-weight: 600;
}

.loopin-dash-plan-change {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(27, 27, 27, 0.35);
  background: #fff;
  color: var(--loopin-red, #1B1B1B);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.loopin-dash-plan-change:hover,
.loopin-dash-plan-change:focus-visible {
  background: rgba(27, 27, 27, 0.06);
  border-color: var(--loopin-red, #1B1B1B);
  color: var(--loopin-red, #1B1B1B);
}

.loopin-plan-tier {
  font-family: var(--loopin-font-sans);
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0;
  color: var(--loopin-text);
  letter-spacing: 0;
}

.loopin-plan-tagline {
  margin: 0.35rem 0 0;
  color: var(--loopin-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  min-height: 2.75em;
}

.loopin-plan-price-block {
  margin-top: 1rem;
}

.loopin-plan-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}

.loopin-plan-price {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  margin: 0;
  color: var(--loopin-text);
  letter-spacing: -0.02em;
}

.loopin-plan-price-coins {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.loopin-plan-price-coins-sep {
  color: var(--loopin-muted, #64748b);
  font-weight: 500;
}

.loopin-plans-coin-balance {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f766e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.loopin-membership-coupon {
  margin: 1rem 0 0;
  max-width: 28rem;
}

.loopin-membership-coupon label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--loopin-ink, #0f172a);
}

.loopin-membership-coupon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.loopin-membership-coupon input[type="text"] {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 0.55rem;
  background: #fff;
  font-size: 0.95rem;
}

.loopin-membership-coupon-msg {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
}

.loopin-membership-coupon-msg.is-ok {
  color: #0f766e;
}

.loopin-membership-coupon-msg.is-error {
  color: #b91c1c;
}

.loopin-plan-price.is-discounted {
  color: #0f766e;
}

.loopin-plans-coin-balance--portal {
  margin: 0 0 1rem;
}

.loopin-coin-help-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--loopin-red, #c2410c);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.loopin-coin-help-link:hover,
.loopin-coin-help-link:focus-visible {
  opacity: 0.85;
}

.loopin-plan-coin-hint {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--loopin-muted, #64748b);
  text-align: center;
}

.loopin-plan-coin-hint-links {
  display: block;
  margin-top: 0.35rem;
}

.loopin-plan-coin-hint-links a {
  color: var(--loopin-red, #c2410c);
  font-weight: 600;
  text-decoration: none;
}

.loopin-plan-coin-hint-links a:hover,
.loopin-plan-coin-hint-links a:focus-visible {
  text-decoration: underline;
}

/* Coin guide + shop */
.loopin-coin-guide,
.loopin-coin-shop {
  font-family: var(--loopin-font-sans);
  max-width: 1080px;
  margin: 0 auto;
}

.loopin-coin-guide {
  padding: 1.35rem 1.4rem 1.55rem;
  border-radius: 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  font-family: var(--loopin-font-sans);
  max-width: 1080px;
  margin: 0 auto;
  color: var(--loopin-text, #111111);
}

.loopin-coin-guide-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.loopin-coin-guide-hero--portal {
  margin-bottom: 1.15rem;
}

.loopin-coin-guide-lead {
  margin: 0;
  color: #1e293b;
  line-height: 1.8;
  max-width: 40rem;
  font-size: 0.95rem;
  font-weight: 400;
}

.loopin-coin-guide-hero .loopin-coin-shop-meta {
  margin: 0;
}

.loopin-coin-guide-hero .loopin-plans-coin-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #0f766e;
  font-weight: 700;
}

.loopin-coin-guide-daily-cap {
  margin: 0;
  color: #0f766e;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.7;
}

.loopin-coin-guide-daily-cap-hint {
  margin: 0.35rem 0 0;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.65;
}

.loopin-coin-guide-daily-cap-hint a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.loopin-coin-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.loopin-coin-guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 1rem;
  background: #ffffff;
  color: var(--loopin-text, #111111);
}

.loopin-coin-guide-card-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: rgba(0, 122, 107, 0.12);
  color: #007a6b;
}

.loopin-coin-guide-card--buy .loopin-coin-guide-card-icon {
  background: rgba(27, 27, 27, 0.1);
  color: var(--loopin-red, #1B1B1B);
}

.loopin-coin-guide-card-title {
  margin: 0;
  font-family: var(--loopin-font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--loopin-text, #111111);
}

.loopin-coin-guide-card-text,
.loopin-coin-guide-card-muted {
  margin: 0;
  color: #334155;
  line-height: 1.8;
  font-size: 0.92rem;
  flex: 1 1 auto;
}

.loopin-coin-guide-card .loopin-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.loopin-coin-guide-tips {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.loopin-coin-guide-tips-title {
  margin: 0 0 0.55rem;
  font-family: var(--loopin-font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--loopin-text, #111111);
}

.loopin-coin-guide-tips-list {
  margin: 0;
  padding-inline-start: 1.15rem;
  color: #1e293b;
  line-height: 1.85;
  font-size: 0.92rem;
}

.loopin-coin-guide-tips-list li + li {
  margin-top: 0.35rem;
}

@media (max-width: 720px) {
  .loopin-coin-guide-grid {
    grid-template-columns: 1fr;
  }
}

.loopin-coin-shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 1.5rem;
  text-align: center;
  clear: both;
}

.loopin-coin-shop-header--portal {
  margin-bottom: 1.25rem;
}

.loopin-coin-shop-lead {
  display: block;
  float: none;
  margin: 0;
  max-width: 36rem;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
}

.loopin-coin-shop-unit {
  display: block;
  float: none;
  margin: 0.15rem 0 0;
  max-width: 36rem;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
}

.loopin-coin-shop-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem 1rem;
  width: 100%;
  float: none;
}

.loopin-coin-shop-meta .loopin-plans-coin-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  float: none;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f766e;
}

.loopin-coin-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ca8a04;
  line-height: 0;
}

.loopin-coin-icon .loopin-coin-icon-svg,
.loopin-coin-package-icon .loopin-coin-icon-svg,
.loopin-btn-coin-icon .loopin-coin-icon-svg {
  display: block;
}

.loopin-coin-package-icon {
  color: #ca8a04;
  background: rgba(234, 179, 8, 0.14);
}

.loopin-coin-package-card.is-featured .loopin-coin-package-icon {
  color: #a16207;
  background: rgba(234, 179, 8, 0.22);
}

.loopin-coin-package-coins {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.loopin-coin-package-coins-unit {
  font-size: 0.95rem;
  font-weight: 700;
}

.loopin-coin-shop-meta .loopin-coin-help-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--loopin-red, #1B1B1B);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  line-height: 1.4;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-coin-shop-header,
body.loopin-user-portal-page #loopin-user-portal .loopin-plans > .loopin-coin-shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Portal chrome already shows the section title — hide in-content duplicates. */
body.loopin-user-portal-page #loopin-portal-section-root .loopin-dashboard-content-wrap > :not(.loopin-user-portal-section-header) .loopin-portal-section-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap > :not(.loopin-user-portal-section-header) .loopin-portal-section-title {
  display: none !important;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-coin-shop-lead {
  display: block;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  color: #334155;
}

.loopin-insights {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 1.5rem;
  font-family: var(--loopin-font-sans);
}

.loopin-insights .loopin-coin-shop-header {
  margin-bottom: 1.75rem;
}

.loopin-insights-section-title {
  margin: 0 0 0.95rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
}

.loopin-insights-lifetime {
  margin-bottom: 1.75rem;
}

.loopin-insights-lifetime-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.loopin-insights-stat-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  min-width: 0;
}

.loopin-insights-stat-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem 1.15rem 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.loopin-insights-stat-label {
  color: var(--loopin-muted, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.loopin-insights-stat-value {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--loopin-text, #0f172a);
  line-height: 1.15;
}

.loopin-insights-stat-card--teal .loopin-insights-stat-value {
  color: #0f766e;
}

.loopin-insights-stat-card--teal {
  border-color: rgba(15, 118, 110, 0.18);
}

.loopin-insights-stat-card--teal .loopin-insights-stat-card-top {
  background: linear-gradient(160deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.98) 55%);
}

.loopin-insights-stat-card--red .loopin-insights-stat-value {
  color: var(--loopin-red, #1B1B1B);
}

.loopin-insights-stat-card--red {
  border-color: rgba(27, 27, 27, 0.2);
}

.loopin-insights-stat-card--red .loopin-insights-stat-card-top {
  background: linear-gradient(160deg, rgba(27, 27, 27, 0.07) 0%, rgba(255, 255, 255, 0.98) 55%);
}

.loopin-insights-stat-card--amber .loopin-insights-stat-value {
  color: #9a6700;
}

.loopin-insights-stat-card--amber {
  border-color: rgba(245, 158, 11, 0.28);
}

.loopin-insights-stat-card--amber .loopin-insights-stat-card-top {
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.12) 0%, rgba(255, 255, 255, 0.98) 55%);
}

.loopin-insights-stat-card--slate .loopin-insights-stat-value {
  color: #334155;
}

.loopin-insights-periods {
  margin-bottom: 1.75rem;
}

.loopin-insights-period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.loopin-insights-period-card,
.loopin-insights-people-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 100%;
}

.loopin-insights-period-card.is-featured {
  border-color: rgba(27, 27, 27, 0.3);
  box-shadow: 0 16px 36px rgba(27, 27, 27, 0.12);
}

.loopin-insights-period-card.is-featured .loopin-insights-card-top {
  background: linear-gradient(160deg, rgba(27, 27, 27, 0.08) 0%, rgba(255, 255, 255, 0.98) 52%);
}

.loopin-insights-period-card.is-current {
  border-color: rgba(15, 118, 110, 0.32);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.12);
}

.loopin-insights-period-card.is-current .loopin-insights-card-top {
  background: linear-gradient(160deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.98) 52%);
}

.loopin-insights-card-top {
  padding: 1.25rem 1.3rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.loopin-insights-card-body {
  padding: 1rem 1.3rem 1.25rem;
  flex: 1 1 auto;
}

.loopin-insights-period-title {
  margin: 0;
  font-family: var(--loopin-font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
  letter-spacing: 0;
}

.loopin-insights-period-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.loopin-insights-period-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.loopin-insights-period-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.loopin-insights-period-metric {
  color: var(--loopin-muted, #64748b);
  font-weight: 500;
}

.loopin-insights-period-value {
  font-weight: 800;
  color: var(--loopin-text, #0f172a);
  font-variant-numeric: tabular-nums;
}

.loopin-insights-note {
  margin: 1.35rem 0 0;
  color: var(--loopin-muted, #64748b);
  font-size: 0.88rem;
  line-height: 1.75;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.loopin-insights-people {
  margin-top: 0.25rem;
}

.loopin-insights-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.loopin-insights-people-card--likes {
  border-color: rgba(27, 27, 27, 0.22);
}

.loopin-insights-people-card--likes .loopin-insights-card-top {
  background: linear-gradient(160deg, rgba(27, 27, 27, 0.07) 0%, rgba(255, 255, 255, 0.98) 52%);
}

.loopin-insights-people-card--views {
  border-color: rgba(15, 118, 110, 0.22);
}

.loopin-insights-people-card--views .loopin-insights-card-top {
  background: linear-gradient(160deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.98) 52%);
}

.loopin-insights-people-card .loopin-insights-section-title {
  margin: 0;
  font-size: 1.15rem;
}

.loopin-insights-people-empty {
  margin: 0;
  color: var(--loopin-muted, #64748b);
  font-size: 0.92rem;
  line-height: 1.75;
}

.loopin-insights-people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: 22rem;
  overflow-y: auto;
}

.loopin-insights-person {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.loopin-insights-person-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  background: #e2e8f0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.loopin-insights-person-avatar--empty {
  display: inline-block;
}

.loopin-insights-person-body {
  min-width: 0;
  flex: 1 1 auto;
}

.loopin-insights-person-name {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
  text-decoration: none;
  line-height: 1.35;
}

a.loopin-insights-person-name:hover {
  color: var(--loopin-red, #1B1B1B);
  text-decoration: underline;
}

.loopin-insights-person-meta {
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #475569;
}

.loopin-insights-person-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-weight: 700;
}

.loopin-insights-people-card--likes .loopin-insights-person-context {
  background: rgba(27, 27, 27, 0.1);
  color: var(--loopin-red, #1B1B1B);
}

.loopin-insights-person-time {
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-weight: 600;
}

@media (max-width: 960px) {
  .loopin-insights-lifetime-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .loopin-insights-lifetime-grid,
  .loopin-insights-period-grid,
  .loopin-insights-people-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Vision / roadmap timeline ───────────────────────────────── */
.loopin-vision {
  max-width: 720px;
}

.loopin-vision-timeline {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  position: relative;
}

.loopin-vision-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.7rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04));
  border-radius: 999px;
}

.loopin-vision-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0 0 1.15rem;
}

.loopin-vision-item:last-child {
  padding-bottom: 0;
}

.loopin-vision-item-marker {
  position: relative;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.loopin-vision-item--planned .loopin-vision-item-marker {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

.loopin-vision-item--imminent .loopin-vision-item-marker {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.16);
}

.loopin-vision-item--launched .loopin-vision-item-marker {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.16);
}

.loopin-vision-card {
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.loopin-vision-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.45rem;
}

.loopin-vision-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.loopin-vision-date-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--loopin-text-muted, #64748b);
}

.loopin-vision-date {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
}

.loopin-vision-date--tba {
  font-weight: 600;
  color: var(--loopin-text-muted, #475569);
}

.loopin-vision-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.loopin-vision-item--planned .loopin-vision-status {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.loopin-vision-item--imminent .loopin-vision-status {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.loopin-vision-item--launched .loopin-vision-status {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.loopin-vision-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--loopin-text, #0f172a);
}

.loopin-vision-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--loopin-muted, #64748b);
}

.loopin-vision-empty {
  padding: 1.5rem 1rem;
  text-align: center;
}

/* ── Credentials / documents upload ──────────────────────────── */
.loopin-credentials {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.loopin-credentials-header {
  margin-bottom: 0;
}

.loopin-credentials-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.loopin-credentials-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  color: #0f172a;
  opacity: 0.7;
}

.loopin-credentials-meta-icon svg {
  width: 100%;
  height: 100%;
}

.loopin-credentials-meta-text {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.loopin-credentials-tabs {
  margin: 0 0 1.25rem;
}

.loopin-credentials-tablist {
  margin-bottom: 1rem;
}

.loopin-credentials-tabpanels {
  min-width: 0;
}

.loopin-credentials-tabpanels > .loopin-tabpanel {
  display: none;
}

.loopin-credentials-tabpanels > .loopin-tabpanel.is-active {
  display: flex;
}

.loopin-credentials-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(224, 242, 254, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.loopin-credentials-card--request {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(232, 255, 246, 0.7) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.loopin-credentials-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.loopin-credentials-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  border-radius: 0.9rem;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.loopin-credentials-card-icon--brand {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.18);
  color: #047857;
}

.loopin-credentials-card-head-text {
  min-width: 0;
}

.loopin-credentials-card-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--loopin-muted, #64748b);
}

.loopin-credentials-card-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-card-lead,
.loopin-credentials-card-warn {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--loopin-muted, #64748b);
}

.loopin-credentials-card-warn {
  margin-top: auto;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: #b45309;
}

.loopin-credentials-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.loopin-credentials-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  min-width: 0;
  width: 100%;
}

.loopin-credentials-form-grid .loopin-form-group--full {
  grid-column: 1 / -1;
}

.loopin-credentials-form .loopin-form-group {
  margin-bottom: 0;
  min-width: 0;
  max-width: 100%;
}

.loopin-credentials-form .loopin-form-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-credentials-file-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-file {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.loopin-credentials-file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.15rem 1rem 1.05rem;
  border: 1.5px dashed rgba(15, 23, 42, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.loopin-credentials-file-dropzone:hover,
.loopin-credentials-file-dropzone:focus-visible,
.loopin-credentials-file:focus-within .loopin-credentials-file-dropzone {
  border-color: rgba(15, 23, 42, 0.32);
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  outline: none;
}

.loopin-credentials-file.has-file .loopin-credentials-file-dropzone {
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(236, 253, 245, 0.65);
}

.loopin-credentials-file.is-uploading .loopin-credentials-file-dropzone {
  pointer-events: none;
  opacity: 0.72;
}

.loopin-credentials-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.loopin-credentials-upload-progress[hidden] {
  display: none !important;
}

.loopin-credentials-upload-progress-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}

.loopin-credentials-upload-progress-bar {
  --loopin-upload-progress: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--loopin-red, #1B1B1B), #ff4d6d);
  transform: scaleX(var(--loopin-upload-progress));
  transform-origin: left center;
  transition: transform 0.1s linear;
  will-change: transform;
}

[dir="rtl"] .loopin-credentials-upload-progress-bar,
body.loopin-rtl .loopin-credentials-upload-progress-bar {
  transform-origin: right center;
}

.loopin-credentials-upload-progress-text {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--loopin-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.loopin-credentials-file-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #0f172a;
  opacity: 0.72;
}

.loopin-credentials-file-title {
  display: block;
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-file-name {
  display: block;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--loopin-muted, #64748b);
  word-break: break-word;
}

.loopin-credentials-file-name.has-file {
  color: #047857;
  font-weight: 600;
}

.loopin-credentials-file-browse {
  margin-top: 0.35rem;
  max-width: 100%;
}

.loopin-credentials-form-actions {
  margin-top: auto;
  padding-top: 1.1rem;
}

.loopin-credentials-form-actions .loopin-btn {
  width: 100%;
  min-height: 2.75rem;
}

.loopin-credentials-list {
  margin: 0;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.55);
}

.loopin-credentials-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}

.loopin-credentials-list-head .loopin-insights-section-title {
  margin: 0;
}

.loopin-credentials-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.08);
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
  text-align: center;
  border-radius: 1rem;
  border: 1.5px dashed rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
}

.loopin-credentials-empty-icon {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: #64748b;
  opacity: 0.85;
}

.loopin-credentials-empty p {
  margin: 0;
  font-weight: 600;
  color: var(--loopin-text, #0f172a);
}

.loopin-credentials-empty-hint {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--loopin-muted, #64748b) !important;
}

@media (max-width: 767px) {
  .loopin-credentials-forms {
    grid-template-columns: 1fr;
  }

  .loopin-credentials-form-grid {
    grid-template-columns: 1fr;
  }
}

.loopin-coin-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: none;
  margin-inline: 0;
}

.loopin-coin-package-card {
  min-height: 0;
}

.loopin-coin-package-card .loopin-plan-card-top {
  padding: 1.35rem 1.2rem 1rem;
  flex: 1 1 auto;
}

.loopin-coin-package-card .loopin-plan-tier {
  font-family: var(--loopin-font-sans);
  font-size: 1.15rem;
  letter-spacing: 0;
  line-height: 1.35;
}

.loopin-coin-package-card .loopin-plan-tagline {
  min-height: 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

.loopin-coin-package-card .loopin-plan-price,
.loopin-coin-package-coins {
  font-family: var(--loopin-font-sans);
  font-size: 1.25rem;
  letter-spacing: 0;
  color: #0f766e;
}

.loopin-coin-package-card .loopin-plan-price-period {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--loopin-text);
}

.loopin-coin-package-card .loopin-plan-card-footer {
  padding: 0.95rem 1.2rem 1.15rem;
}

.loopin-coin-shop-alt {
  margin: 1.35rem 0 0;
  text-align: center;
  color: var(--loopin-muted, #64748b);
  font-size: 0.9rem;
  line-height: 1.7;
}

.loopin-coin-shop-alt a {
  color: var(--loopin-red, #c2410c);
  font-weight: 600;
  text-decoration: none;
}

.loopin-coin-shop-alt a:hover,
.loopin-coin-shop-alt a:focus-visible {
  text-decoration: underline;
}

.loopin-plan-badge--bonus {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .loopin-coin-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .loopin-coin-guide-grid,
  .loopin-coin-package-grid {
    grid-template-columns: 1fr;
  }

  .loopin-coin-package-grid {
    max-width: 420px;
    margin-inline: auto;
  }
}

.loopin-plan-card.is-featured .loopin-plan-price {
  color: var(--loopin-red);
}

.loopin-coin-package-card.loopin-plan-card.is-featured .loopin-plan-price,
.loopin-coin-package-card .loopin-coin-package-coins {
  color: #0f766e;
}

.loopin-coin-package-card.is-featured .loopin-plan-price-period {
  color: var(--loopin-red);
  font-weight: 700;
}

.loopin-plan-price-period,
.loopin-plan-duration {
  margin: 0.2rem 0 0;
  color: var(--loopin-muted);
  font-size: 0.86rem;
}

.loopin-plan-features {
  list-style: none;
  margin: 0;
  padding: 1.15rem 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  flex: 1 1 auto;
}

.loopin-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--loopin-text);
}

.loopin-plan-feature-icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  color: #007a6b;
  background: rgba(0, 122, 107, 0.1);
}

.loopin-plan-feature-icon svg {
  width: 0.8rem;
  height: 0.8rem;
}

.loopin-plan-card.is-featured .loopin-plan-feature-icon {
  color: var(--loopin-red);
  background: rgba(27, 27, 27, 0.1);
}

.loopin-plan-card--premium .loopin-plan-feature-icon {
  color: #9a6700;
  background: rgba(245, 158, 11, 0.14);
}

.loopin-plan-feature-text {
  flex: 1 1 auto;
}

.loopin-plan-card-footer {
  padding: 0 1.35rem 1.35rem;
  margin-top: auto;
}

.loopin-plan-card .loopin-btn {
  margin-top: 0;
  border-radius: 999px;
  min-height: 46px;
  font-weight: 700;
}

.loopin-plan-card .loopin-btn[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

@media (max-width: 960px) {
  .loopin-plan-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .loopin-plan-card.is-featured {
    transform: none;
  }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .loopin-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .loopin-plan-tagline {
    min-height: 3.1em;
  }
}

/* Coin shop: keep multi-column layout over membership plan breakpoints. */
.loopin-coin-package-grid.loopin-plan-grid {
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 961px) {
  .loopin-coin-package-grid.loopin-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .loopin-coin-package-grid.loopin-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 720px) {
  .loopin-coin-package-grid.loopin-plan-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

.loopin-member-dashboard .loopin-dash-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.loopin-dash-notice {
  border-radius: var(--loopin-radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--loopin-border);
  background: var(--loopin-bg-soft);
}

.loopin-dash-notice p {
  margin: 0 0 0.5rem;
}

.loopin-dash-notice p:last-child {
  margin-bottom: 0;
}

.loopin-dash-notice-warning {
  border-color: #dba617;
  background: #fff8e5;
}

.loopin-dash-notice-info {
  border-color: var(--loopin-border);
}

.loopin-dash-notice-success {
  border-color: #46b450;
  background: #f0fff1;
}

/* ── Dashboard v2 layout ─────────────────────────────────────────────────── */
body.loopin-dashboard-page #loopin-social-wrap {
  background: var(--loopin-bg-gradient, linear-gradient(145deg, #f8fafc 0%, #F5F5F5 38%, #fdf4ff 72%, #f0fdfa 100%));
}

.loopin-dashboard-v2 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 2.5rem;
  position: relative;
}

.loopin-dashboard-v2.loopin-glass-surface::before {
  border-radius: var(--loopin-radius-xl);
}

.loopin-dashboard-v2 .loopin-dash-card,
.loopin-dashboard-v2 .loopin-glass-card {
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(255, 255, 255, 0.85));
  border-radius: var(--loopin-radius-lg, 22px);
  box-shadow: var(--loopin-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
  backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  padding: 1.25rem 1.35rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loopin-dashboard-v2 .loopin-dash-card:hover,
.loopin-dashboard-v2 .loopin-glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--loopin-shadow-lg, 0 18px 48px rgba(15, 23, 42, 0.12));
}

.loopin-dash-hero,
.loopin-dashboard-v2 .loopin-glass-hero {
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 100%);
  border-radius: var(--loopin-radius-xl, 28px);
  box-shadow: var(--loopin-shadow-lg);
}

.loopin-dash-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.loopin-dash-hero-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--loopin-muted);
  font-weight: 600;
}

.loopin-dash-hero-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
}

.loopin-dash-hero-status {
  margin: 0;
  color: var(--loopin-muted);
  max-width: 52ch;
  line-height: 1.7;
}

.loopin-dash-hero--is-warning {
  border-color: #dba617;
  background: linear-gradient(135deg, #fffdf5 0%, #fff8e5 100%);
}

.loopin-dash-hero--is-info {
  border-color: var(--loopin-border);
}

.loopin-dash-hero-actions .loopin-btn {
  white-space: nowrap;
}

.loopin-dashboard-panel {
  position: relative;
}

.loopin-portal-top-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.loopin-portal-top-nav-actions .loopin-portal-top-nav-create {
  position: relative;
  flex: 0 0 auto;
}

.loopin-portal-top-nav-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid #000000;
  background: #1B1B1B;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.loopin-portal-top-nav-create-btn:hover,
.loopin-portal-top-nav-create-btn:focus-visible {
  background: #000000;
  border-color: #000000;
  color: #fff !important;
  outline: none;
}

.loopin-portal-top-nav-create-btn .loopin-portal-nav-icon,
.loopin-portal-top-nav-create-btn .loopin-portal-top-nav-label {
  color: inherit;
}

.loopin-portal-top-nav-create.is-active .loopin-portal-top-nav-create-btn,
.loopin-portal-top-nav-create.loopin-user-portal-active .loopin-portal-top-nav-create-btn {
  box-shadow: 0 0 0 2px rgba(27, 27, 27, 0.28);
}

.loopin-portal-top-nav-actions .loopin-portal-top-nav-group--create .loopin-portal-top-nav-dropdown {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.loopin-portal-top-nav-actions .loopin-dash-bell,
.loopin-portal-top-nav-actions .loopin-portal-top-nav-bell {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: #dc2626;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.loopin-portal-top-nav-actions .loopin-dash-bell:hover,
.loopin-portal-top-nav-actions .loopin-dash-bell:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  box-shadow: 0 12px 26px rgba(239, 68, 68, 0.12);
  outline: none;
}

.loopin-portal-top-nav-actions .loopin-dash-bell.has-unread {
  animation: loopin-dash-bell-pulse 2.4s ease-in-out infinite;
}

.loopin-dash-bell {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: #dc2626;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.loopin-dash-bell:hover,
.loopin-dash-bell:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  box-shadow: 0 12px 26px rgba(239, 68, 68, 0.12);
  outline: none;
}

.loopin-dash-bell.has-unread {
  animation: loopin-dash-bell-pulse 2.4s ease-in-out infinite;
}

.loopin-dash-bell .loopin-portal-top-nav-bell-count {
  background: #ef4444;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}

@keyframes loopin-dash-bell-pulse {
  0%,
  100% {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  }

  50% {
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.16);
  }
}

.loopin-notifications-nudge {
  margin: 0 0 1.15rem;
}

.loopin-notifications-nudge-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--loopin-radius-lg, 16px);
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(255, 255, 255, 0.92) 55%, rgba(255, 247, 237, 0.9) 100%);
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.08);
}

.loopin-notifications-nudge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.loopin-notifications-nudge-body {
  flex: 1 1 12rem;
  min-width: 0;
}

.loopin-notifications-nudge-title {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--loopin-text, #0f172a);
}

.loopin-notifications-nudge-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--loopin-muted, #64748b);
}

.loopin-notifications-nudge-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .loopin-notifications-nudge-cta {
    width: 100%;
    justify-content: center;
  }
}

.loopin-dash-summary {
  margin-bottom: 1.5rem;
}

.loopin-dash-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.85rem;
}

.loopin-dash-summary-card {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

a.loopin-dash-summary-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.loopin-dash-summary-card--link:hover,
a.loopin-dash-summary-card--link:focus-visible {
  transform: translateY(-2px);
}

a.loopin-dash-summary-card--link:focus-visible {
  outline: 2px solid var(--loopin-text, #111);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.loopin-dash-summary-card--link {
    transition: none;
  }

  a.loopin-dash-summary-card--link:hover,
  a.loopin-dash-summary-card--link:focus-visible {
    transform: none;
  }
}

.loopin-dash-summary-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.loopin-dash-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary, #1B1B1B);
  flex-shrink: 0;
}

.loopin-dash-summary-icon .loopin-portal-icon-svg {
  display: block;
}

.loopin-stat-card--coins .loopin-dash-summary-icon {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

.loopin-stat-card--missions .loopin-dash-summary-icon {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.loopin-stat-card--achievements .loopin-dash-summary-icon {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
}

.loopin-stat-card--credentials .loopin-dash-summary-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

.loopin-stat-card--referrals .loopin-dash-summary-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.loopin-stat-card--rewards .loopin-dash-summary-icon {
  background: rgba(236, 72, 153, 0.12);
  color: #db2777;
}

.loopin-stat-card--notifications .loopin-dash-summary-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.loopin-dash-summary-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--loopin-muted);
  font-weight: 600;
}

.loopin-dash-summary-value {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.loopin-dash-summary-suffix {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--loopin-muted);
}

.loopin-dash-summary-muted {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--loopin-muted);
  line-height: 1.55;
}

.loopin-dash-summary-card.is-disabled {
  opacity: 0.88;
  background: var(--loopin-bg-soft);
}

.loopin-account-switch-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(184, 146, 74, 0.28);
  background: linear-gradient(135deg, rgba(255, 248, 230, 0.95), rgba(255, 255, 255, 0.88));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.loopin-account-switch-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.loopin-account-switch-banner-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--loopin-text, #0f172a);
}

.loopin-account-switch-card .loopin-account-switch-input {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
}

.loopin-account-switch-card .loopin-account-switch-input:focus {
  outline: none;
  border-color: var(--loopin-primary, #1B1B1B);
  box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.12);
}

.loopin-account-switch-hint {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-account-switch-results {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.loopin-account-switch-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.72);
}

.loopin-account-switch-result-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.loopin-account-switch-result-meta strong {
  font-size: 0.9rem;
  color: var(--loopin-text, #0f172a);
}

.loopin-account-switch-result-meta span {
  font-size: 0.78rem;
  color: var(--loopin-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loopin-account-switch-result-btn {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

.loopin-dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(min(100%, 280px), 1fr);
  gap: 1.25rem;
  align-items: start;
}

.loopin-dash-main,
.loopin-dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.loopin-dash-module > section,
.loopin-dash-module > .loopin-missions-panel,
.loopin-dash-module > .loopin-achievements-panel,
.loopin-dash-module > .loopin-referrals-panel,
.loopin-dash-module > .loopin-rewards-panel,
.loopin-dash-module > .loopin-notifications-panel {
  margin-bottom: 0;
}

.loopin-dashboard-v2 .loopin-dash-section {
  margin-bottom: 0;
  padding-top: 0;
  border-top: 0;
}

.loopin-dashboard-v2 .loopin-dash-module .loopin-dash-card,
.loopin-dashboard-v2 .loopin-dash-module .loopin-notifications-hero,
.loopin-dashboard-v2 .loopin-dash-module .loopin-rewards-hero,
.loopin-dashboard-v2 .loopin-dash-module .loopin-referrals-hero {
  border: 1px solid var(--loopin-border);
  box-shadow: none;
}

.loopin-dashboard-v2 .loopin-missions-header,
.loopin-dashboard-v2 .loopin-achievements-header,
.loopin-dashboard-v2 .loopin-notifications-hero-top,
.loopin-dashboard-v2 .loopin-referrals-header,
.loopin-dashboard-v2 .loopin-rewards-hero {
  margin-bottom: 0.75rem;
}

.loopin-dashboard-v2 .loopin-missions-grid,
.loopin-dashboard-v2 .loopin-missions-completed-grid,
.loopin-dashboard-v2 .loopin-rewards-grid,
.loopin-dashboard-v2 .loopin-achievements-grid {
  gap: 0.85rem;
}

.loopin-dash-module--compact .loopin-achievements-section + .loopin-achievements-section,
.loopin-dash-module--compact .loopin-referrals-cards {
  margin-top: 0.75rem;
}

.loopin-dash-sidebar-text {
  margin: 0 0 0.85rem;
  color: var(--loopin-muted);
}

.loopin-dash-dl-compact div {
  padding: 0.3rem 0;
}

.loopin-dash-quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.loopin-dash-quick-list a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--loopin-radius-sm);
  background: var(--loopin-bg-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.loopin-dash-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--loopin-primary, #1B1B1B);
  flex-shrink: 0;
}

.loopin-dash-quick-icon .loopin-portal-icon-svg {
  display: block;
}

.loopin-dash-quick-label {
  min-width: 0;
}

.loopin-dash-quick-list a:hover {
  background: var(--loopin-border);
}

.loopin-btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.loopin-dash-profile-section {
  margin-top: 1.5rem;
}

.loopin-dash-profile-header {
  margin-bottom: 1rem;
}

.loopin-dash-profile-intro {
  margin: 0.35rem 0 0;
  color: var(--loopin-muted);
  line-height: 1.65;
}

.loopin-profile-avatar-field {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--loopin-border);
}

.loopin-profile-avatar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.loopin-profile-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--loopin-bg-soft);
  border: 1px solid var(--loopin-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loopin-profile-avatar-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.loopin-profile-avatar-preview-placeholder {
  font-size: 2rem;
  font-weight: 700;
  color: var(--loopin-muted);
  line-height: 1;
}

.loopin-profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Instagram-style circular avatar crop */
body.loopin-avatar-crop-open {
  overflow: hidden;
}

.loopin-avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.loopin-avatar-crop-modal[hidden] {
  display: none !important;
}

.loopin-avatar-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.loopin-avatar-crop-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  background: #111;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}

.loopin-avatar-crop-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.loopin-avatar-crop-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.loopin-avatar-crop-cancel,
.loopin-avatar-crop-done {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.15rem;
  line-height: 1.2;
}

.loopin-avatar-crop-cancel {
  justify-self: start;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.loopin-avatar-crop-done {
  justify-self: end;
  color: #0095f6;
}

.loopin-avatar-crop-done:disabled {
  opacity: 0.45;
  cursor: wait;
}

.loopin-avatar-crop-stage {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 1rem auto 0.5rem;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  background: #000;
  border-radius: 0;
}

.loopin-avatar-crop-stage:active {
  cursor: grabbing;
}

.loopin-avatar-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Single circular crop window (Instagram-style) */
.loopin-avatar-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side at center,
    transparent 0,
    transparent 98.5%,
    rgba(255, 255, 255, 0.9) 98.5%,
    rgba(255, 255, 255, 0.9) 99.4%,
    rgba(0, 0, 0, 0.62) 99.5%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.loopin-avatar-crop-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 1.25rem 0.25rem;
}

.loopin-avatar-crop-zoom-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}

.loopin-avatar-crop-zoom {
  width: 100%;
  accent-color: #0095f6;
  cursor: pointer;
}

.loopin-avatar-crop-hint {
  margin: 0;
  padding: 0.5rem 1.25rem 1.15rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

@media (max-width: 480px) {
  .loopin-avatar-crop-modal {
    padding: 0;
    align-items: stretch;
  }

  .loopin-avatar-crop-sheet {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    justify-content: flex-start;
  }

  .loopin-avatar-crop-stage {
    width: min(100vw - 2rem, 360px);
  }
}

.loopin-dash-form-section {
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-radius-sm);
  margin-bottom: 0.85rem;
  background: var(--loopin-bg-soft);
  overflow: clip;
  max-width: 100%;
  min-width: 0;
}

.loopin-dash-form-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 700;
  background: #fff;
  border-bottom: 1px solid transparent;
}

.loopin-dash-form-section[open] > summary {
  border-bottom-color: var(--loopin-border);
}

.loopin-dash-form-section > summary::-webkit-details-marker {
  display: none;
}

.loopin-dash-form-section > summary::before {
  content: "◂";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.15s ease;
}

.loopin-dash-form-section[open] > summary::before {
  transform: rotate(-90deg);
}

.loopin-dash-form-section > .loopin-dash-form-grid,
.loopin-dash-form-section > .loopin-form-group {
  padding: 1rem;
}

.loopin-dash-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.loopin-dash-form-grid > .loopin-form-group,
.loopin-dash-form-grid > .loopin-form-field {
  min-width: 0;
  max-width: 100%;
}

.loopin-form-group--full {
  grid-column: 1 / -1;
}

.loopin-account-type-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.loopin-account-type-legend {
  display: block;
  font-weight: 600;
  color: var(--loopin-text, #0f172a);
}

.loopin-account-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.loopin-account-type-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  margin: 0;
  padding: 0.75rem 1.1rem;
  border: 1.5px solid var(--loopin-border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  color: var(--loopin-text, #111111);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.loopin-account-type-option:hover {
  border-color: var(--loopin-border-strong, #CDCDCD);
}

.loopin-account-type-option:has(input:checked) {
  border-color: var(--loopin-primary, #1B1B1B);
  background: var(--loopin-primary-light, #FFE0E6);
  color: var(--loopin-primary, #1B1B1B);
  box-shadow: 0 0 0 1px var(--loopin-primary, #1B1B1B);
}

.loopin-account-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.loopin-account-type-option-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.loopin-account-type-notice {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.9rem;
  line-height: 1.7;
}

.loopin-account-type-notice[hidden] {
  display: none !important;
}

.loopin-account-type-notice p {
  margin: 0 0 0.45rem;
}

.loopin-account-type-notice p:last-child {
  margin-bottom: 0;
}

.loopin-account-type-deadline {
  font-weight: 700;
}

.loopin-dash-skills-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.loopin-dash-skills-help {
  margin: 0 0 0.85rem;
  color: var(--loopin-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.65;
}

.loopin-dash-skills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  direction: rtl;
}

.loopin-dash-skill-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.loopin-dash-skill-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-dash-skill-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.35));
  background: rgba(255, 255, 255, 0.92);
  color: var(--loopin-text, #0f172a);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.loopin-dash-skill-chip-label::before {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.45;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.loopin-dash-skill-chip input[type="checkbox"]:focus-visible + .loopin-dash-skill-chip-label {
  outline: 2px solid var(--loopin-primary, #1B1B1B);
  outline-offset: 2px;
}

.loopin-dash-skill-chip input[type="checkbox"]:checked + .loopin-dash-skill-chip-label {
  border-color: var(--loopin-primary, #1B1B1B);
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary, #1B1B1B);
  box-shadow: 0 4px 14px rgba(27, 27, 27, 0.12);
}

.loopin-dash-skill-chip input[type="checkbox"]:checked + .loopin-dash-skill-chip-label::before {
  opacity: 1;
  background: currentColor;
  border-color: currentColor;
  box-shadow: inset 0 0 0 2px #fff;
}

.loopin-dash-skill-chip:hover .loopin-dash-skill-chip-label {
  border-color: var(--loopin-primary, #1B1B1B);
  transform: translateY(-1px);
}

.loopin-dash-form-actions {
  padding-top: 0.5rem;
}

.loopin-dashboard-page .loopin-social-main {
  padding-top: 0.5rem;
}

@media (max-width: 1024px) {
  .loopin-dash-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loopin-dash-layout {
    grid-template-columns: 1fr;
  }

  .loopin-dash-sidebar {
    order: -1;
  }
}

@media (max-width: 640px) {
  .loopin-dash-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loopin-dash-form-grid {
    grid-template-columns: 1fr;
  }

  .loopin-dash-hero-actions,
  .loopin-dash-hero-actions .loopin-btn {
    width: 100%;
  }

  .loopin-dash-hero-actions .loopin-btn {
    text-align: center;
  }

  .loopin-referrals-input,
  .loopin-referrals-code-display {
    word-break: break-all;
  }
}

.loopin-dash-card {
  background: var(--loopin-bg-soft);
  border-radius: var(--loopin-radius-sm);
  padding: 1.25rem;
}

.loopin-dash-card-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--loopin-muted);
  margin: 0 0 0.75rem;
}

.loopin-dash-dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--loopin-border);
}

.loopin-dash-dl dt {
  color: var(--loopin-muted);
  font-weight: 500;
}

.loopin-dash-dl dd {
  margin: 0;
  font-weight: 600;
}

.loopin-dash-stat {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

.loopin-progress-wrap {
  height: 8px;
  background: var(--loopin-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.loopin-progress-bar {
  height: 100%;
  background: var(--loopin-red);
  border-radius: 999px;
}

.loopin-dash-section {
  margin-bottom: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--loopin-border);
}

.loopin-dash-section-muted {
  opacity: 0.95;
}

.loopin-missions-panel {
  margin-bottom: 2.5rem;
}

.loopin-missions-panel--polished {
  margin-bottom: 0;
}

.loopin-missions-shell.loopin-dashboard-v2 {
  border-radius: var(--loopin-radius-lg, 22px);
  padding: clamp(0.85rem, 2vw, 1.2rem);
}

.loopin-missions-hero {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, rgba(37, 99, 255, 0.08), rgba(6, 182, 212, 0.06));
  border: 1px solid rgba(37, 99, 255, 0.12);
}

.loopin-missions-intro {
  margin: 0.35rem 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--loopin-muted, #64748b);
}

.loopin-missions-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.65rem;
}

.loopin-missions-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.loopin-missions-summary-item--coins {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.08));
  border-color: rgba(245, 158, 11, 0.22);
}

.loopin-missions-summary-label {
  font-size: 0.78rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-missions-summary-value {
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--loopin-text, #0f172a);
}

.loopin-missions-summary-unit {
  font-size: 0.78rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-missions-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.loopin-missions-balance {
  margin: 0;
  font-size: 0.95rem;
}

.loopin-missions-section {
  margin-bottom: 1.5rem;
  overflow: visible;
}

.loopin-missions-section--completed {
  margin-bottom: 0;
}

.loopin-missions-section-title,
.loopin-missions-section .loopin-h3 {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
}

.loopin-missions-empty {
  padding: 1rem 1.1rem;
}

.loopin-missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
  overflow: visible;
}

.loopin-mission-card {
  --loopin-mission-accent: #2563eb;
  --loopin-mission-accent-soft: rgba(37, 99, 235, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 0;
  /* overflow visible so tooltips can escape; clip only the accent bar */
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, z-index 0s;
  z-index: 1;
}

.loopin-mission-card:hover,
.loopin-mission-card:focus-within,
.loopin-mission-card.is-tip-open,
.loopin-mission-card:has(.loopin-mission-tip-wrap.is-open),
.loopin-mission-card:has(.loopin-mission-tip-wrap:hover) {
  z-index: 12;
}

.loopin-mission-tip-wrap.is-open,
.loopin-mission-tip-wrap:hover,
.loopin-mission-tip-wrap:focus-within {
  z-index: 31;
  position: relative;
}

.loopin-mission-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 16px 36px rgba(37, 99, 235, 0.1);
}

.loopin-mission-card-accent {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(
    180deg,
    var(--loopin-mission-accent) 0%,
    color-mix(in srgb, var(--loopin-mission-accent) 55%, #06b6d4) 100%
  );
  pointer-events: none;
  overflow: hidden;
}

.loopin-mission-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.05rem 1.1rem 1.05rem 1.15rem;
  flex: 1;
  min-height: 0;
}

.loopin-mission-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.loopin-mission-card-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.loopin-mission-campaign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.loopin-mission-campaign--footer {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--loopin-muted, #64748b);
  flex-shrink: 0;
  width: 100%;
}

.loopin-mission-campaign--footer .loopin-mission-campaign-name {
  font-weight: 600;
  color: var(--loopin-muted, #64748b);
  white-space: normal;
}

.loopin-mission-campaign-label {
  display: none;
}

.loopin-mission-campaign-name {
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.loopin-mission-campaign--compact .loopin-mission-campaign-name {
  white-space: normal;
}

.loopin-mission-icon {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--loopin-mission-accent-soft);
  color: var(--loopin-mission-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.loopin-mission-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.loopin-mission-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.loopin-mission-badge--type {
  background: rgba(15, 23, 42, 0.05);
  color: var(--loopin-muted, #64748b);
  font-weight: 600;
}

.loopin-mission-badge--reward {
  background: rgba(184, 146, 74, 0.16);
  color: #8a4b00;
  border: 1px solid rgba(184, 146, 74, 0.22);
}

.loopin-mission-card--daily {
  --loopin-mission-accent: #2563eb;
  --loopin-mission-accent-soft: rgba(37, 99, 235, 0.12);
}

.loopin-mission-card--weekly {
  --loopin-mission-accent: #7c3aed;
  --loopin-mission-accent-soft: rgba(124, 58, 237, 0.12);
}

.loopin-mission-card--monthly {
  --loopin-mission-accent: #d97706;
  --loopin-mission-accent-soft: rgba(217, 119, 6, 0.14);
}

.loopin-mission-card--lifetime {
  --loopin-mission-accent: #059669;
  --loopin-mission-accent-soft: rgba(5, 150, 105, 0.12);
}

.loopin-mission-card--daily .loopin-mission-icon,
.loopin-mission-card--weekly .loopin-mission-icon,
.loopin-mission-card--monthly .loopin-mission-icon,
.loopin-mission-card--lifetime .loopin-mission-icon {
  background: var(--loopin-mission-accent-soft);
  color: var(--loopin-mission-accent);
}

.loopin-mission-card--in-campaign {
  border-color: color-mix(in srgb, var(--loopin-mission-accent) 22%, rgba(148, 163, 184, 0.2));
}

.loopin-mission-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-mission-type {
  font-weight: 600;
}

.loopin-mission-reward {
  color: var(--loopin-text, inherit);
}

.loopin-mission-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
  letter-spacing: -0.01em;
}

.loopin-mission-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.loopin-mission-title-row .loopin-mission-title {
  flex: 1;
  min-width: 0;
}

.loopin-mission-tip-wrap {
  position: relative;
  flex-shrink: 0;
}

.loopin-mission-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--loopin-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.loopin-mission-tooltip {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(16rem, 70vw);
  max-width: min(16rem, calc(100vw - 2rem));
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.loopin-mission-tip-wrap:hover .loopin-mission-tooltip,
.loopin-mission-tip-wrap:focus-within .loopin-mission-tooltip,
.loopin-mission-tip-wrap.is-open .loopin-mission-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.loopin-mission-desc {
  display: none;
}

.loopin-missions-section--missed {
  margin-top: 1.25rem;
}

.loopin-missions-section-hint {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-mission-card--missed {
  opacity: 0.58;
  filter: grayscale(0.85);
  pointer-events: none;
  user-select: none;
}

.loopin-mission-card--missed .loopin-mission-tip-wrap {
  pointer-events: auto;
}

.loopin-mission-badge--missed {
  background: rgba(100, 116, 139, 0.18);
  color: #64748b;
}

.loopin-mission-missed-note {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-mission-video-actions {
  margin-top: 0.35rem;
}

.loopin-mission-cta-actions {
  margin-top: 0.35rem;
}

.loopin-mission-watch-btn,
.loopin-mission-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.loopin-mission-cta-btn:hover,
.loopin-mission-cta-btn:focus {
  color: #fff;
  opacity: 0.92;
}

.loopin-mission-watch-btn.is-done,
.loopin-mission-watch-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.loopin-mission-video-modal[hidden] {
  display: none !important;
}

.loopin-mission-video-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.loopin-mission-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
}

.loopin-mission-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.loopin-mission-video-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.loopin-mission-video-modal__title {
  margin: 0;
  font-size: 1rem;
}

.loopin-mission-video-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

.loopin-mission-video-modal__body {
  padding: 0.85rem 1rem 1rem;
}

.loopin-mission-video-player {
  display: block;
  width: 100%;
  max-height: 60vh;
  background: #000;
  border-radius: 10px;
}

.loopin-mission-video-hint,
.loopin-mission-video-status {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  color: #64748b;
}

.loopin-mission-video-status.is-error {
  color: #b91c1c;
}

html.loopin-mission-video-open,
html.loopin-mission-video-open body {
  overflow: hidden;
}

.loopin-mission-progress-block {
  margin-top: 0.1rem;
  padding-top: 0.15rem;
}

.loopin-mission-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
}

.loopin-mission-progress-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-mission-progress-count {
  color: var(--loopin-text, #0f172a);
  font-weight: 700;
}

.loopin-mission-progress-pct {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--loopin-mission-accent, #2563eb);
}

.loopin-mission-progress-wrap {
  height: 7px;
  margin-bottom: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.loopin-mission-progress-bar {
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--loopin-mission-accent, #2563eb) 0%,
    color-mix(in srgb, var(--loopin-mission-accent, #2563eb) 45%, #06b6d4) 100%
  );
  transition: width 0.35s ease;
}

.loopin-mission-progress-meta {
  font-size: 0.9rem;
}

.loopin-mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: auto 0 0;
  padding: 0.55rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.loopin-mission-meta li {
  margin: 0;
}

.loopin-mission-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.35;
  background: rgba(15, 23, 42, 0.04);
  color: var(--loopin-muted, #64748b);
}

.loopin-mission-meta-chip--muted {
  color: var(--loopin-muted, #64748b);
}

.loopin-missions-completed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.75rem;
}

.loopin-mission-completed-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.loopin-mission-completed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.loopin-mission-completed-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.loopin-mission-completed-title {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--loopin-text, #0f172a);
}

.loopin-mission-completed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-mission-completed-reward {
  color: #b45309;
  font-weight: 700;
}

.loopin-empty-text {
  margin: 0;
  color: var(--loopin-muted, #666);
}

.loopin-empty-hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.loopin-missions-admin-notice {
  margin: 0.5rem 0 0;
  color: var(--loopin-muted, #666);
}

.loopin-mission-completed-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 999px;
  white-space: nowrap;
}

.loopin-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-achievements-panel {
  margin-bottom: 2.5rem;
}

.loopin-achievements-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.loopin-achievements-summary-meta {
  font-size: 0.95rem;
}

.loopin-achievements-summary-count,
.loopin-achievements-balance {
  margin: 0.15rem 0;
}

.loopin-achievements-latest {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-size: 0.9rem;
}

.loopin-achievements-latest-label {
  color: var(--loopin-muted, #666);
  margin-inline-end: 0.35rem;
}

.loopin-achievements-latest-date {
  display: inline-block;
  margin-inline-start: 0.5rem;
  color: var(--loopin-muted, #666);
  font-size: 0.85rem;
}

.loopin-achievements-section {
  margin-bottom: 1.75rem;
}

.loopin-achievements-section .loopin-h3 {
  margin-bottom: 0.75rem;
}

.loopin-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}

.loopin-achievement-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.loopin-achievement-card--locked {
  opacity: 0.92;
}

.loopin-achievement-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

.loopin-achievement-icon--locked img {
  filter: grayscale(0.35);
  opacity: 0.85;
}

.loopin-achievement-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-achievement-type {
  font-weight: 600;
}

.loopin-achievement-status {
  color: var(--loopin-text, inherit);
  font-weight: 600;
}

.loopin-achievement-reward {
  color: var(--loopin-text, inherit);
}

.loopin-achievement-title {
  margin: 0;
  font-size: 1.05rem;
}

.loopin-achievement-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-achievement-progress-meta {
  font-size: 0.9rem;
}

.loopin-achievement-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
  font-style: italic;
}

.loopin-achievement-meta {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--loopin-muted, #666);
}

.loopin-achievement-meta li + li {
  margin-top: 0.25rem;
}

.loopin-achievement-hidden-tag {
  font-size: 0.75rem;
  font-weight: 600;
}

.loopin-achievement-badge-rare .loopin-achievement-type {
  color: #2563eb;
}

.loopin-achievement-badge-epic .loopin-achievement-type {
  color: #7c3aed;
}

.loopin-achievement-badge-legendary .loopin-achievement-type {
  color: #b45309;
}

.loopin-achievement-badge-secret .loopin-achievement-type {
  color: #64748b;
}

/* ── Referral panel (Phase 4C) ─────────────────────────────────────────── */

.loopin-referrals-panel {
  margin-bottom: 2.5rem;
}

.loopin-referrals-panel--message {
  margin-bottom: 1.5rem;
}

.loopin-referrals-hero {
  margin-bottom: 1.25rem;
}

.loopin-referrals-header .loopin-h2 {
  margin: 0 0 0.5rem;
}

.loopin-referrals-intro,
.loopin-referrals-reward-hint {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--loopin-muted, #666);
  line-height: 1.6;
}

.loopin-referrals-reward-hint--coin {
  color: var(--loopin-text, inherit);
}

.loopin-referrals-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.loopin-referrals-card-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.loopin-referrals-code-display {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-bottom: 0.75rem;
  word-break: break-all;
}

.loopin-referrals-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--loopin-border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--loopin-surface, #fafafa);
  direction: ltr;
  text-align: left;
}

.loopin-referrals-input--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-referrals-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.loopin-referrals-copy-code.is-copied,
.loopin-referrals-copy-link.is-copied {
  border-color: #16a34a;
  color: #16a34a;
}

.loopin-referrals-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.loopin-referrals-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
}

.loopin-referrals-stat-label {
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-referrals-stat-value {
  font-size: 1.5rem;
  line-height: 1.2;
}

.loopin-referrals-referred,
.loopin-referrals-howto {
  margin-bottom: 1.25rem;
}

.loopin-referrals-referred-head {
  margin-bottom: 1rem;
}

.loopin-referrals-referred-summary {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-referrals-group {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--loopin-border, #eee);
}

.loopin-referrals-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.loopin-referrals-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.loopin-referrals-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--loopin-surface, #f3f4f6);
  color: var(--loopin-muted, #555);
}

.loopin-referrals-group--pending .loopin-referrals-group-count {
  background: #e0f2fe;
  color: #075985;
}

.loopin-referrals-group--completed .loopin-referrals-group-count {
  background: #dcfce7;
  color: #166534;
}

.loopin-referrals-group-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-referrals-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.loopin-referrals-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--loopin-border, #eee);
}

.loopin-referrals-list-item:last-child {
  border-bottom: none;
}

.loopin-referrals-list-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.loopin-referrals-name {
  font-weight: 600;
}

.loopin-referrals-date {
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-referrals-status {
  font-size: 0.82rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--loopin-surface, #f3f4f6);
  white-space: nowrap;
}

.loopin-referrals-status.is-converted {
  background: #dcfce7;
  color: #166534;
}

.loopin-referrals-status.is-registered {
  background: #fef3c7;
  color: #92400e;
}

.loopin-referrals-steps {
  margin: 0 0 0.75rem;
  padding-inline-start: 1.25rem;
  line-height: 1.7;
}

.loopin-referrals-howto-extra {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

@media (max-width: 768px) {
  .loopin-referrals-cards {
    grid-template-columns: 1fr;
  }

  .loopin-referrals-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loopin-referrals-code-display {
    font-size: 1.45rem;
  }
}

/* ── Leaderboard panel (Phase 5B) ────────────────────────────────────────── */

.loopin-leaderboard-panel {
  margin-bottom: 2.5rem;
}

.loopin-leaderboard-panel--message,
.loopin-leaderboard-panel--empty {
  margin-bottom: 1.5rem;
}

.loopin-leaderboard-header {
  margin-bottom: 1rem;
}

.loopin-leaderboard-header .loopin-h2 {
  margin: 0 0 0.5rem;
}

.loopin-leaderboard-description {
  margin: 0 0 0.75rem;
  color: var(--loopin-muted, #666);
  line-height: 1.6;
}

.loopin-leaderboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-leaderboard-meta-label {
  margin-inline-end: 0.25rem;
}

.loopin-leaderboard-current-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--loopin-surface, #f8fafc);
  border: 1px solid var(--loopin-border, #e5e7eb);
  border-radius: 10px;
}

.loopin-leaderboard-current-label {
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-leaderboard-current-value {
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-leaderboard-table-wrap {
  overflow-x: auto;
}

.loopin-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.loopin-leaderboard-table th,
.loopin-leaderboard-table td {
  padding: 0.75rem 0.65rem;
  text-align: right;
  border-bottom: 1px solid var(--loopin-border, #eee);
}

.loopin-leaderboard-table th {
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
  font-weight: 600;
}

.loopin-leaderboard-row.is-current-user {
  background: rgba(59, 130, 246, 0.06);
}

.loopin-leaderboard-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  font-weight: 700;
}

.loopin-leaderboard-user-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.loopin-leaderboard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.loopin-leaderboard-name {
  font-weight: 600;
}

.loopin-leaderboard-you-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  white-space: nowrap;
}

.loopin-leaderboard-cards {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loopin-leaderboard-card {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--loopin-border, #eee);
}

.loopin-leaderboard-card:last-child {
  border-bottom: none;
}

.loopin-leaderboard-card.is-current-user {
  background: rgba(59, 130, 246, 0.06);
  margin: 0 -0.75rem;
  padding-inline: 0.75rem;
  border-radius: 8px;
}

.loopin-leaderboard-card-rank,
.loopin-leaderboard-card-user,
.loopin-leaderboard-card-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.loopin-leaderboard-card-user {
  justify-content: flex-start;
}

.loopin-leaderboard-rank-label {
  font-size: 0.82rem;
  color: var(--loopin-muted, #666);
}

@media (max-width: 640px) {
  .loopin-leaderboard-table {
    display: none;
  }

  .loopin-leaderboard-cards {
    display: block;
  }
}

.loopin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .loopin-form-row {
    grid-template-columns: 1fr;
  }
  .loopin-plan-card.is-featured {
    transform: none;
  }
}

.loopin-status {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── Reward store panel (aligned with membership / coin shop cards) ───── */

.loopin-rewards-panel {
  margin-bottom: 2.5rem;
}

.loopin-reward-shop.loopin-plans {
  max-width: none;
  margin-inline: 0;
  font-family: var(--loopin-font-sans);
}

.loopin-rewards-panel--message {
  margin-bottom: 1.5rem;
}

.loopin-rewards-notice {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
}

.loopin-rewards-notice--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.loopin-rewards-notice--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Keep reward cards in a horizontal row (not stacked like membership plans). */
.loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin-bottom: 1.5rem;
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

.loopin-reward-shop .loopin-rewards-card.loopin-plan-card {
  gap: 0;
}

.loopin-reward-shop .loopin-rewards-card-title.loopin-plan-tier {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 0.85rem;
  padding-inline-end: 4.5rem;
}

.loopin-reward-shop .loopin-coin-package-coins {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.loopin-reward-shop .loopin-reward-card-icon {
  color: #007a6b;
  background: rgba(0, 122, 107, 0.1);
}

.loopin-reward-shop .loopin-reward-card-accent-1 .loopin-reward-card-icon {
  color: #9a6700;
  background: rgba(245, 158, 11, 0.14);
}

.loopin-reward-shop .loopin-reward-card-accent-2 .loopin-reward-card-icon {
  color: var(--loopin-red, #1B1B1B);
  background: rgba(27, 27, 27, 0.1);
}

.loopin-reward-shop .loopin-reward-card-accent-3 .loopin-reward-card-icon {
  color: #475569;
  background: rgba(15, 23, 42, 0.06);
}

.loopin-reward-shop .loopin-plan-badge.loopin-rewards-badge--unavailable {
  background: #64748b;
  box-shadow: 0 6px 16px rgba(100, 116, 139, 0.22);
}

.loopin-reward-shop .loopin-rewards-features {
  flex: 1 1 auto;
}

.loopin-reward-shop .loopin-rewards-redeem-form {
  margin: 0;
  width: 100%;
}

.loopin-reward-shop .loopin-rewards-card-actions {
  display: block;
}

.loopin-reward-shop .loopin-plan-coin-hint {
  margin-top: 0.75rem;
}

.loopin-rewards-redemptions {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.loopin-rewards-redemptions .loopin-h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.loopin-rewards-redemptions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.loopin-rewards-redemptions-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.loopin-rewards-redemptions-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.loopin-rewards-redemptions-cost {
  font-size: 0.9rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-rewards-redemptions-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--loopin-muted, #64748b);
}

.loopin-rewards-status,
.loopin-rewards-fulfillment {
  display: inline-block;
}

.loopin-reward-notice,
.loopin-rewards-live-notice {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.92rem;
}

.loopin-reward-notice.loopin-rewards-notice--success,
.loopin-rewards-live-notice.loopin-rewards-notice--success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.loopin-reward-notice.loopin-rewards-notice--error,
.loopin-rewards-live-notice.loopin-rewards-notice--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.loopin-reward-redeem-button.is-loading {
  opacity: 0.7;
  cursor: wait;
}

.loopin-rewards-earn-guide {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 1100px) {
  .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 640px) {
  .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Portal / dashboard: keep plan-card look (override glass-card module styles). */
.loopin-dashboard-v2 .loopin-dash-module .loopin-reward-shop.loopin-rewards-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-reward-shop.loopin-rewards-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.loopin-dashboard-v2 .loopin-reward-shop .loopin-rewards-card.loopin-plan-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-card.loopin-plan-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 0;
  overflow: hidden;
}

.loopin-dashboard-v2 .loopin-reward-shop .loopin-rewards-card.loopin-plan-card.is-featured,
body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-card.loopin-plan-card.is-featured {
  border-color: rgba(27, 27, 27, 0.35);
  box-shadow: 0 18px 42px rgba(27, 27, 27, 0.14);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-card-title.loopin-plan-tier {
  font-size: 1.05rem;
}

@media (max-width: 1100px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Notification center (Phase 7B) ─────────────────────────────────────── */

.loopin-notifications-panel {
  margin-bottom: 2.5rem;
}

.loopin-notifications-panel--message {
  margin-bottom: 1.5rem;
}

.loopin-notifications-summary {
  margin-bottom: 1rem;
}

.loopin-notifications-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.35rem;
}

.loopin-notifications-summary-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.loopin-notifications-summary-view-all {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--loopin-primary, #1B1B1B);
  text-decoration: none;
  white-space: nowrap;
}

.loopin-notifications-summary-view-all:hover {
  text-decoration: underline;
}

.loopin-notifications-summary-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.loopin-notifications-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  flex-shrink: 0;
}

.loopin-notifications-bell .loopin-portal-icon-svg {
  display: block;
}

.loopin-notifications-summary-text strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
}

.loopin-notifications-summary-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--loopin-muted, #666);
}

.loopin-notifications-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.loopin-notifications-unread-badge--hero {
  vertical-align: middle;
}

.loopin-notifications-hero {
  margin-bottom: 1.25rem;
}

.loopin-notifications-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.loopin-notifications-hero .loopin-h2 {
  margin: 0;
}

.loopin-notifications-intro,
.loopin-notifications-unread-hint {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--loopin-muted, #666);
  line-height: 1.6;
}

.loopin-notifications-mark-all-form {
  margin-top: 0.85rem;
}

.loopin-notifications-notice {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.loopin-notifications-notice--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.loopin-notifications-notice--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.loopin-notifications-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.loopin-notifications-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loopin-notifications-item.is-unread {
  border-right: 3px solid var(--loopin-primary, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}

.loopin-notifications-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.loopin-notifications-item-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.loopin-notifications-item-message {
  margin: 0;
  font-size: 0.92rem;
  color: var(--loopin-muted, #666);
  line-height: 1.6;
}

.loopin-notifications-type-badge,
.loopin-notifications-status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.loopin-notifications-type-badge {
  background: #f1f5f9;
  color: #334155;
}

.loopin-notifications-type-badge--mission { background: #ede9fe; color: #5b21b6; }
.loopin-notifications-type-badge--achievement { background: #fef3c7; color: #92400e; }
.loopin-notifications-type-badge--reward { background: #ecfdf5; color: #047857; }
.loopin-notifications-type-badge--referral { background: #e0f2fe; color: #0369a1; }
.loopin-notifications-type-badge--coin { background: #fff7ed; color: #c2410c; }

.loopin-notifications-status-badge--unread {
  background: #dbeafe;
  color: #1d4ed8;
}

.loopin-notifications-status-badge--read {
  background: #f1f5f9;
  color: #64748b;
}

.loopin-notifications-status-badge--archived {
  background: #f8fafc;
  color: #94a3b8;
}

.loopin-notifications-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.85rem;
  color: var(--loopin-muted, #666);
}

.loopin-notifications-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.loopin-notifications-action-form {
  margin: 0;
}

.loopin-notifications-live-notice {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.92rem;
}

.loopin-notifications-live-notice.loopin-notifications-notice--success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.loopin-notifications-live-notice.loopin-notifications-notice--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.loopin-notifications-item.is-archiving,
.loopin-notifications-item.is-removing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.loopin-notification-action button.is-loading,
.loopin-notifications-mark-all-btn.is-loading {
  opacity: 0.7;
  cursor: wait;
}

.loopin-notification-action button:disabled {
  cursor: not-allowed;
}

.loopin-notifications-item.is-read .loopin-notifications-mark-read-btn {
  display: none;
}

@media (max-width: 600px) {
  .loopin-notifications-item-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .loopin-notifications-item-actions .loopin-btn {
    width: 100%;
  }
}

/* ── Glass UI — Frontend dashboard modules ─────────────────────────────────── */
.loopin-dashboard-v2 .loopin-dash-summary-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--loopin-text, #0f172a);
  letter-spacing: -0.02em;
}

.loopin-dashboard-v2 .loopin-dash-summary-label {
  font-weight: 700;
  color: var(--loopin-text-muted, #64748b);
}

.loopin-dashboard-v2 .loopin-btn-primary,
.loopin-dashboard-v2 .loopin-btn.loopin-btn-primary {
  background: linear-gradient(135deg, var(--loopin-accent-blue, #2563ff), var(--loopin-accent-violet, #7c3aed));
  border: none;
  box-shadow: var(--loopin-shadow-glow-blue, 0 0 0 1px rgba(37, 99, 255, 0.15), 0 8px 32px rgba(37, 99, 255, 0.12));
  color: #fff;
}

.loopin-dashboard-v2 .loopin-btn-primary:hover:not(:disabled),
.loopin-dashboard-v2 .loopin-btn-primary:focus-visible:not(:disabled),
.loopin-dashboard-v2 .loopin-btn.loopin-btn-primary:hover:not(:disabled),
.loopin-dashboard-v2 .loopin-btn.loopin-btn-primary:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8, #6d28d9);
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(37, 99, 255, 0.28);
}

.loopin-dashboard-v2 .loopin-dash-module .loopin-missions-panel,
.loopin-dashboard-v2 .loopin-dash-module .loopin-achievements-panel,
.loopin-dashboard-v2 .loopin-dash-module .loopin-referrals-panel,
.loopin-dashboard-v2 .loopin-dash-module .loopin-rewards-panel,
.loopin-dashboard-v2 .loopin-dash-module .loopin-notifications-panel {
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  border-radius: var(--loopin-radius-lg, 22px);
  box-shadow: var(--loopin-shadow-md);
  backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  padding: 1.1rem 1.2rem;
}

.loopin-dashboard-v2 .loopin-dash-section {
  margin-bottom: 0;
  padding-top: 0;
  border-top: 0;
}

.loopin-dashboard-v2 .loopin-mission-card,
.loopin-dashboard-v2 .loopin-missions-hero,
.loopin-dashboard-v2 .loopin-missions-empty,
.loopin-dashboard-v2 .loopin-mission-completed-card,
.loopin-dashboard-v2 .loopin-achievement-card,
.loopin-dashboard-v2 .loopin-rewards-card,
.loopin-dashboard-v2 .loopin-referrals-card,
.loopin-dashboard-v2 .loopin-notifications-item {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  border-radius: var(--loopin-radius-md, 16px);
  box-shadow: var(--loopin-shadow-sm);
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent {
  padding: 1.05rem 1.15rem 1.15rem;
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-head .loopin-dash-card-title {
  margin: 0;
}

.loopin-dash-notifications-recent-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-all {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--loopin-text, #0f172a);
}

.loopin-ui-card-dismiss {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--loopin-text-muted, #64748b);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.loopin-ui-card-dismiss:hover,
.loopin-ui-card-dismiss:focus-visible {
  background: rgba(15, 23, 42, 0.12);
  color: var(--loopin-text, #0f172a);
  outline: none;
}

.loopin-campaign-promo-strip {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.loopin-campaign-promo-strip--in-grid {
  margin: 0;
  gap: 0;
}

.loopin-feed--ideas .loopin-feed-grid-view .loopin-campaign-promo-strip--in-grid {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--loopin-pin-gap, 16px);
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.loopin-campaign-promo-card {
  --loopin-campaign-accent: var(--loopin-primary, #1B1B1B);
  --loopin-campaign-accent-soft: var(--loopin-primary-light, #FFE0E6);
  --loopin-campaign-blush: var(--loopin-blush, #FFF0F3);
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 240, 243, 0.72) 100%);
  border: 1px solid rgba(27, 27, 27, 0.12);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(27, 27, 27, 0.06);
  transition: transform 0.2s var(--loopin-ease, ease), box-shadow 0.2s var(--loopin-ease, ease);
}

.loopin-campaign-promo-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 16px 36px rgba(27, 27, 27, 0.1);
}

.loopin-campaign-promo-card__accent {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--loopin-campaign-accent) 0%,
    #ff6b81 55%,
    var(--loopin-warning, #B8924A) 100%
  );
  border-radius: inherit 0 0 inherit;
  pointer-events: none;
}

.loopin-campaign-promo-card .loopin-ui-card-dismiss {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.55rem;
  z-index: 2;
}

.loopin-campaign-promo-card__body {
  position: relative;
  z-index: 1;
  padding: 0.7rem 0.95rem 0.75rem;
  padding-inline-end: 2.1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.loopin-campaign-promo-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.loopin-campaign-promo-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.65rem;
}

.loopin-campaign-promo-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--loopin-campaign-accent);
  background: var(--loopin-campaign-accent-soft);
}

.loopin-campaign-promo-card__badge::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--loopin-campaign-accent);
  box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.18);
  animation: loopin-campaign-pulse 1.8s ease-in-out infinite;
}

@keyframes loopin-campaign-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .loopin-campaign-promo-card__badge::before {
    animation: none;
  }
}

.loopin-campaign-promo-card__pct-chip {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--loopin-text, #111);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

.loopin-campaign-promo-card__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--loopin-text, #111);
  letter-spacing: -0.01em;
}

.loopin-campaign-promo-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.loopin-campaign-promo-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--loopin-muted, #767676);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.loopin-campaign-promo-card__chip--reward {
  color: #8a4b00;
  background: rgba(184, 146, 74, 0.14);
  border-color: rgba(184, 146, 74, 0.22);
  font-weight: 700;
}

.loopin-campaign-promo-card__progress {
  margin-top: 0;
}

.loopin-campaign-promo-card__track {
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.loopin-campaign-promo-card__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--loopin-campaign-accent) 0%,
    #ff6b81 70%,
    var(--loopin-warning, #B8924A) 100%
  );
  min-width: 0;
  transition: width 0.35s var(--loopin-ease, ease);
}

.loopin-campaign-promo-card__cta {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 0;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  width: auto;
  max-width: 11rem;
  white-space: nowrap;
  border-radius: var(--loopin-radius-pill, 24px);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--loopin-campaign-accent);
  border: 1px solid transparent;
  box-shadow: 0 6px 16px rgba(27, 27, 27, 0.22);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.loopin-campaign-promo-card__cta:hover,
.loopin-campaign-promo-card__cta:focus-visible {
  background: var(--loopin-primary-dark, #000000);
  color: #fff;
  outline: none;
  box-shadow: 0 8px 20px rgba(173, 8, 27, 0.28);
}

.loopin-campaign-promo-card__cta:active {
  transform: translateY(1px);
}

.loopin-campaign-promo-card--in-grid {
  min-height: 0;
  height: auto;
  align-self: start;
  border-radius: var(--loopin-radius-pin, 16px);
  /* Override shared .loopin-dash-card padding so promo cards stay compact. */
  padding: 0;
}

.loopin-campaign-promo-card--in-grid .loopin-campaign-promo-card__body {
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem 0.75rem;
  padding-inline-end: 2rem;
}

.loopin-campaign-promo-card--in-grid .loopin-campaign-promo-card__cta {
  margin-inline-start: 0;
  margin-top: 0.15rem;
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

.loopin-campaign-promo-card--in-grid .loopin-campaign-promo-card__title {
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Specialists grid: unwrap the strip so each campaign is a normal grid cell
   (avoids one tall stacked cell stretching the whole row in RTL layouts). */
.loopin-directory--specialists .loopin-campaign-promo-strip--in-grid {
  display: contents;
}

@media (max-width: 560px) {
  .loopin-campaign-promo-card__body {
    flex-direction: column;
    align-items: stretch;
  }

  .loopin-campaign-promo-card__cta {
    margin-inline-start: 0;
    width: 100%;
    max-width: none;
  }
}

.loopin-directory--specialists .loopin-campaign-promo-card {
  --loopin-campaign-accent: var(--loopin-specialist-accent, #c75b7a);
  --loopin-campaign-accent-soft: var(--loopin-specialist-accent-bg-strong, rgba(199, 91, 122, 0.08));
  border-color: var(--loopin-specialist-accent-border, rgba(199, 91, 122, 0.22));
  background:
    linear-gradient(145deg, #fff 0%, var(--loopin-specialist-accent-bg, rgba(199, 91, 122, 0.05)) 100%);
  box-shadow: 0 8px 24px var(--loopin-specialist-accent-shadow, rgba(199, 91, 122, 0.12));
}

.loopin-directory--specialists .loopin-campaign-promo-card__accent {
  background: var(--loopin-specialist-fantasy-gradient, linear-gradient(120deg, #c75b7a, #e8b86d));
}

.loopin-directory--specialists .loopin-campaign-promo-card__fill {
  background: var(--loopin-specialist-fantasy-gradient, linear-gradient(120deg, #c75b7a, #e8b86d));
}

.loopin-directory--specialists .loopin-campaign-promo-card__cta {
  background: var(--loopin-specialist-accent, #c75b7a);
  box-shadow: 0 6px 16px var(--loopin-specialist-accent-shadow, rgba(199, 91, 122, 0.22));
}

.loopin-directory--specialists .loopin-campaign-promo-card__cta:hover,
.loopin-directory--specialists .loopin-campaign-promo-card__cta:focus-visible {
  background: var(--loopin-specialist-accent-dark, #a94461);
}

.loopin-campaign-promo-card.is-dismissing,
.loopin-dash-notifications-recent.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

@media (min-width: 720px) {
  .loopin-campaign-promo-strip:not(.loopin-campaign-promo-strip--in-grid) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .loopin-campaign-promo-strip:not(.loopin-campaign-promo-strip--in-grid) .loopin-campaign-promo-card {
    flex: 1 1 calc(50% - 0.4rem);
    min-width: 260px;
  }
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-list .loopin-notifications-item {
  padding: 0.85rem 0.95rem;
}

.loopin-dashboard-v2 .loopin-dash-notifications-recent-list .loopin-notifications-item-actions {
  display: none;
}

.loopin-dashboard-v2 .loopin-progress-bar {
  background: linear-gradient(90deg, var(--loopin-accent-blue, #2563ff), var(--loopin-accent-cyan, #06b6d4));
}

.loopin-dashboard-v2 .loopin-empty-text {
  padding: 0.85rem 1rem;
  border-radius: var(--loopin-radius-md, 16px);
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  color: var(--loopin-text-muted, #64748b);
}

.loopin-dashboard-v2 .loopin-dash-profile-section {
  background: var(--loopin-glass-bg-strong, rgba(255, 255, 255, 0.88));
  border: 1px solid var(--loopin-glass-border);
  border-radius: var(--loopin-radius-xl, 28px);
  box-shadow: var(--loopin-shadow-lg);
  backdrop-filter: blur(var(--loopin-glass-blur, 18px));
}

.loopin-dashboard-v2 .loopin-dash-form-section {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--loopin-glass-border-soft);
  backdrop-filter: blur(10px);
}

.loopin-dashboard-v2 .loopin-dash-form-section > summary {
  background: rgba(255, 255, 255, 0.82);
  color: var(--loopin-text, #0f172a);
  font-weight: 800;
}

.loopin-dashboard-v2 .loopin-form-group input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.loopin-dashboard-v2 .loopin-form-group textarea,
.loopin-dashboard-v2 .loopin-form-group select {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--loopin-glass-border-soft);
  border-radius: var(--loopin-radius-sm, 12px);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.loopin-dashboard-v2 .loopin-form-group input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
.loopin-dashboard-v2 .loopin-form-group textarea:focus,
.loopin-dashboard-v2 .loopin-form-group select:focus {
  border-color: var(--loopin-accent-blue, #2563ff);
  box-shadow: 0 0 0 3px var(--loopin-accent-blue-soft, rgba(37, 99, 255, 0.12));
  outline: none;
}

.loopin-dashboard-v2 .loopin-dash-quick-list a {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--loopin-glass-border-soft);
  backdrop-filter: blur(8px);
}

.loopin-dashboard-v2 .loopin-dash-quick-list a:hover {
  border-color: var(--loopin-accent-blue, #2563ff);
  color: var(--loopin-accent-blue, #2563ff);
}

.loopin-dashboard-v2 .loopin-referrals-code-display {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--loopin-glass-border-soft);
  border-radius: var(--loopin-radius-sm);
  padding: 0.65rem 0.85rem;
}

.loopin-dashboard-v2 .loopin-notifications-unread-badge,
.loopin-dashboard-v2 .loopin-rewards-badge--available {
  background: var(--loopin-accent-blue-soft, rgba(37, 99, 255, 0.12));
  color: var(--loopin-accent-blue, #2563ff);
  border-radius: 999px;
  font-weight: 700;
}

/* Jalali date display & inputs (frontend dashboard) */
.loopin-wrap .loopin-jalali-date,
.loopin-dashboard-v2 .loopin-jalali-date,
.loopin-dash-section time {
  font-variant-numeric: tabular-nums;
}

.loopin-wrap .loopin-date-input,
.loopin-dashboard-v2 .loopin-date-input {
  direction: rtl;
  text-align: right;
  width: 100%;
  border-radius: var(--loopin-radius-sm, 10px);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.35));
  background: rgba(255, 255, 255, 0.78);
  padding: 0.65rem 0.85rem;
}

.loopin-wrap .loopin-date-input:focus,
.loopin-dashboard-v2 .loopin-date-input:focus {
  border-color: var(--loopin-accent-blue, #2563ff);
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.12);
  outline: none;
}

.loopin-wrap .loopin-date-help,
.loopin-dashboard-v2 .loopin-date-help {
  margin-top: 0.35rem;
  color: var(--loopin-text-muted, #64748b);
  font-size: 0.875rem;
}

.loopin-wrap .loopin-date-chip,
.loopin-dashboard-v2 .loopin-date-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.25));
}

/* User portal page template */
.loopin-user-portal {
  max-width: var(--loopin-portal-max-width, 1320px);
  margin: 0 auto;
  padding: 0 clamp(0.85rem, 2.5vw, 1.25rem);
}

.loopin-user-portal-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 18px);
}

/* Shared dashboard layout shell (portal navbar + breadcrumb + content) */
body.loopin-user-portal-page #loopin-user-portal {
  --loopin-dashboard-container: 1280px;
  --loopin-dashboard-gutter: 16px;
}

.loopin-dashboard-shell {
  gap: 0;
}

.loopin-dashboard-container {
  width: calc(100% - (var(--loopin-dashboard-gutter) * 2));
  max-width: var(--loopin-dashboard-container);
  margin-inline: auto;
  box-sizing: border-box;
}

.loopin-dashboard-navbar-wrap {
  margin-top: 16px;
}

.loopin-dashboard-navbar-wrap .loopin-portal-top-nav,
.loopin-dashboard-navbar-wrap .loopin-user-portal-nav {
  width: 100%;
}

.loopin-dashboard-navbar-wrap .loopin-portal-top-nav-inner {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

.loopin-dashboard-navbar-wrap .loopin-portal-top-nav-list {
  flex: 1 1 auto;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.loopin-dashboard-stories-wrap {
  margin-top: 12px;
}

.loopin-dashboard-content-wrap {
  margin-top: 24px;
}

.loopin-dashboard-breadcrumb-wrap {
  margin: 0 0 16px;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--loopin-text-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs-link {
  color: #64748b;
  text-decoration: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs-link:hover,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs-link:focus-visible {
  color: var(--loopin-primary, #1B1B1B);
  text-decoration: underline;
  outline: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs-current {
  color: var(--loopin-text, #0f172a);
  font-weight: 600;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section {
  gap: 0.85rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section-header .loopin-user-portal-section-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section-header .loopin-h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.96), rgba(255, 244, 214, 0.92));
  box-shadow: 0 6px 16px rgba(120, 90, 40, 0.08);
  color: #6b4e00;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard:hover,
body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard:focus-visible {
  background: linear-gradient(180deg, #fff8e8, #ffe9b8);
  border-color: rgba(201, 168, 76, 0.65);
  color: #5a4100;
  box-shadow: 0 10px 22px rgba(120, 90, 40, 0.12);
  outline: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  order: -1;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.18);
  color: inherit;
  transform: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-icon-wrap svg,
body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Keep chevron on the physical left of the label (← text), including RTL. */
html[dir="rtl"] body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard,
[dir="rtl"] body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard,
body.loopin-user-portal-page #loopin-user-portal[dir="rtl"] .loopin-portal-back-to-dashboard {
  flex-direction: row-reverse;
}

html[dir="rtl"] body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-icon-wrap,
[dir="rtl"] body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-icon-wrap,
body.loopin-user-portal-page #loopin-user-portal[dir="rtl"] .loopin-portal-back-to-dashboard-icon-wrap {
  transform: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portal-back-to-dashboard-label {
  white-space: nowrap;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap > :last-child {
  margin-bottom: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap > .loopin-dashboard-v2:first-child,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap > .loopin-member-dashboard:first-child,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap > .loopin-user-profile-panel:first-child {
  margin-top: 0;
}

.loopin-user-portal-intro {
  padding: 1rem 1.15rem;
  border-radius: var(--loopin-radius-lg, 16px);
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  box-shadow: var(--loopin-glass-shadow, 0 8px 32px rgba(15, 23, 42, 0.08));
}

.loopin-user-portal-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.3;
}

.loopin-user-portal-lead {
  margin: 0;
  color: var(--loopin-text-muted, #64748b);
  font-size: var(--loopin-portal-text-size, 0.92rem);
  line-height: 1.55;
}

.loopin-user-portal-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.6rem;
  border-radius: var(--loopin-radius-lg, 16px);
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
}

.loopin-user-portal-nav-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--loopin-text, #0f172a);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  font-size: var(--loopin-portal-nav-size, 0.85rem);
  line-height: 1.35;
}

.loopin-user-portal-nav-item.loopin-user-portal-active a {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
  font-weight: 600;
}

.loopin-portal-top-nav {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

.loopin-portal-top-nav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loopin-breadcrumbs {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--loopin-text-muted, #64748b);
}

.loopin-user-portal-section > .loopin-breadcrumbs {
  margin: 0 0 12px;
  padding: 0 0.25rem;
}

.loopin-public-profile > .loopin-breadcrumbs,
.loopin-directory > .loopin-breadcrumbs,
.loopin-feed > .loopin-breadcrumbs,
.loopin-cert-view > .loopin-breadcrumbs,
.loopin-story-single-main > .loopin-breadcrumbs {
  margin: 0 0 10px;
}

.loopin-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.loopin-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.loopin-breadcrumbs-item:not(:last-child)::after {
  content: "/";
  margin-inline-start: 6px;
  opacity: 0.55;
  pointer-events: none;
}

.loopin-breadcrumbs-link {
  color: inherit;
  text-decoration: none;
}

.loopin-breadcrumbs-link:hover,
.loopin-breadcrumbs-link:focus-visible {
  color: var(--loopin-primary, #1B1B1B);
  text-decoration: underline;
  outline: none;
}

.loopin-breadcrumbs-current {
  color: var(--loopin-text, #0f172a);
  font-weight: 600;
  word-break: break-word;
}

.loopin-portal-top-nav-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--loopin-radius-lg, 16px);
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
}

.loopin-portal-top-nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  color: var(--loopin-text, #0f172a);
  text-decoration: none;
  flex: 0 0 auto;
}

.loopin-portal-top-nav-icon:hover,
.loopin-portal-top-nav-icon:focus-visible {
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
  outline: none;
}

.loopin-portal-top-nav-icon.is-active {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-cart.is-soft-active {
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-cart-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
}

.loopin-portal-top-nav-cart-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loopin-portal-top-nav-cart-count {
  position: absolute;
  top: -0.2rem;
  inset-inline-start: -0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--loopin-primary, #1B1B1B);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.loopin-portal-top-nav-cart-count[hidden] {
  display: none;
}

.loopin-portal-top-nav-bell-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
}

.loopin-portal-top-nav-bell-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loopin-portal-top-nav-bell-count {
  position: absolute;
  top: -0.15rem;
  inset-inline-end: -0.1rem;
  inset-inline-start: auto;
  min-width: 0.85rem;
  max-width: 1.35rem;
  height: 0.85rem;
  padding: 0 0.15rem;
  border-radius: 999px;
  background: var(--loopin-primary, #1B1B1B);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 0.85rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
}

.loopin-portal-top-nav-group--categories {
  flex: 0 0 auto;
}

.loopin-portal-top-nav-label--categories {
  display: inline;
  white-space: nowrap;
}

.loopin-portal-top-nav-chevron {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.loopin-portal-top-nav-link--category {
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
}

.loopin-portal-top-nav-link--category .loopin-megamenu-item-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.loopin-portal-top-nav-link--category .loopin-megamenu-item-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.loopin-portal-top-nav-link-text {
  min-width: 0;
  line-height: 1.35;
}

.loopin-portal-top-nav-item--category.is-active .loopin-portal-top-nav-link--category,
.loopin-portal-top-nav-item--category.loopin-user-portal-active .loopin-portal-top-nav-link--category {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-item--direct {
  flex: 0 0 auto;
}

.loopin-portal-top-nav-link--direct {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--loopin-text, #0f172a);
  font-size: var(--loopin-portal-nav-size, 0.85rem);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
}

.loopin-portal-top-nav-item--direct.is-active .loopin-portal-top-nav-link--direct,
.loopin-portal-top-nav-item--direct.loopin-user-portal-active .loopin-portal-top-nav-link--direct {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-group {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

.loopin-portal-top-nav-group.is-open,
.loopin-portal-top-nav-group:focus-within {
  z-index: 110;
}

.loopin-portal-top-nav-trigger {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--loopin-text, #0f172a);
  font: inherit;
  font-size: var(--loopin-portal-nav-size, 0.85rem);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}

.loopin-portal-top-nav-trigger::after {
  content: '▾';
  font-size: 0.68rem;
  opacity: 0.7;
}

.loopin-portal-top-nav-group.is-active .loopin-portal-top-nav-trigger {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-group.is-open .loopin-portal-top-nav-trigger {
  border-color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-top-nav-label--short {
  display: none;
}

.loopin-portal-top-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 11.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.loopin-portal-top-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
}

.loopin-entitlement-upgrade-notice {
  max-width: 36rem;
  margin: 1rem auto;
  padding: 1.25rem 1.35rem;
  text-align: center;
}

.loopin-entitlement-upgrade-message {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--loopin-text, #0f172a);
}

.loopin-entitlement-upgrade-actions {
  margin: 0;
}

.loopin-portal-top-nav-dropdown--categories {
  min-width: min(28rem, calc(100vw - 1.5rem));
  max-width: min(32rem, calc(100vw - 1.5rem));
  max-height: min(56vh, 26rem);
  padding: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.loopin-portal-top-nav-item--category-grid {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
}

.loopin-portal-top-nav-item--category-heading {
  list-style: none;
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.35rem;
}

.loopin-portal-top-nav-item--category-heading:first-child {
  margin-top: 0.1rem;
}

.loopin-portal-top-nav-category-heading {
  display: block;
  color: var(--loopin-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.loopin-portal-top-nav-item--category-overview + .loopin-portal-top-nav-item--category {
  margin-top: 0.05rem;
}

.loopin-bottom-nav-submenu-heading {
  margin: 0.55rem 0 0.2rem;
  padding: 0 0.35rem;
  color: var(--loopin-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.loopin-bottom-nav-submenu-heading:first-child {
  margin-top: 0.1rem;
}

.loopin-portal-top-nav-group--categories.is-open .loopin-portal-top-nav-dropdown--categories,
.loopin-portal-top-nav-dropdown--categories.is-open {
  display: block;
}

.loopin-portal-top-nav-group.is-open .loopin-portal-top-nav-dropdown,
.loopin-portal-top-nav-dropdown.is-open {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.loopin-portal-top-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  z-index: 101;
  pointer-events: auto;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--loopin-text, #0f172a);
  font-size: var(--loopin-portal-nav-size, 0.85rem);
  line-height: 1.4;
  white-space: nowrap;
}

.loopin-portal-top-nav-link:hover,
.loopin-portal-top-nav-link:focus-visible {
  background: rgba(27, 27, 27, 0.08);
  outline: none;
}

.loopin-portal-top-nav-item.is-active .loopin-portal-top-nav-link,
.loopin-portal-top-nav-item.loopin-user-portal-active .loopin-portal-top-nav-link {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary, #1B1B1B);
  font-weight: 600;
}

.loopin-portal-nav-item.is-active a,
.loopin-portal-nav-item.loopin-user-portal-active a {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
  font-weight: 600;
}

.loopin-portal-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--loopin-text, #0f172a);
  flex-shrink: 0;
}

.loopin-portal-top-nav-item.is-active .loopin-portal-nav-icon,
.loopin-portal-top-nav-item.loopin-user-portal-active .loopin-portal-nav-icon,
.loopin-user-portal-nav-item.loopin-user-portal-active .loopin-portal-nav-icon {
  background: rgba(255, 255, 255, 0.9);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-nav-icon .loopin-portal-icon-svg {
  display: block;
}

.loopin-portal-nav-label {
  min-width: 0;
}

.loopin-portal-section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}

.loopin-portal-section-title-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary, #1B1B1B);
  flex-shrink: 0;
}

.loopin-portal-section-title-icon-wrap .loopin-portal-icon-svg {
  display: block;
}

.loopin-portal-section-title-text {
  min-width: 0;
}

.loopin-dash-notifications-link {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.loopin-dash-notifications-link a {
  color: var(--loopin-primary, #1B1B1B);
  text-decoration: none;
}

.loopin-dash-notifications-link a:hover {
  text-decoration: underline;
}

body.loopin-user-portal-page .loopin-portal-top-nav {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

body.loopin-user-portal-page .loopin-portal-top-nav-group {
  position: relative;
}

body.loopin-user-portal-page .loopin-portal-top-nav-dropdown {
  z-index: 9999;
  pointer-events: none;
}

body.loopin-user-portal-page .loopin-portal-top-nav-group.is-open .loopin-portal-top-nav-dropdown,
body.loopin-user-portal-page .loopin-portal-top-nav-dropdown.is-open {
  pointer-events: auto;
}

body.loopin-user-portal-page .loopin-portal-top-nav-dropdown a,
body.loopin-user-portal-page .loopin-portal-top-nav-link {
  pointer-events: auto;
  position: relative;
  z-index: 10001;
}

body.loopin-user-portal-page .loopin-user-portal-shell,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-shell {
  overflow: visible;
}

@media (max-width: 768px) {
  body.loopin-user-portal-page #loopin-user-portal {
    --loopin-dashboard-gutter: 16px;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + clamp(1.25rem, 2.5vw, 2rem));
  }

  body.loopin-user-portal-page .loopin-dashboard-navbar-wrap {
    display: none;
  }

  .loopin-dashboard-navbar-wrap {
    margin-top: 12px;
  }

  .loopin-dashboard-content-wrap {
    margin-top: 16px;
  }

  .loopin-dashboard-breadcrumb-wrap {
    margin-bottom: 12px;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap .loopin-breadcrumbs {
    font-size: 0.75rem;
  }

  .loopin-portal-top-nav-label--full {
    display: none;
  }

  .loopin-portal-top-nav-label--short {
    display: inline;
  }

  .loopin-portal-top-nav-label--categories {
    display: inline;
  }

  .loopin-portal-top-nav-list {
    flex-wrap: nowrap;
  }

  .loopin-portal-top-nav-dropdown {
    min-width: 10rem;
    max-width: min(16rem, calc(100vw - 2rem));
  }
}

.loopin-user-portal-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  position: relative;
  transition: opacity 0.18s ease;
}

#loopin-portal-section-root.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

#loopin-portal-section-root.is-loading::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--loopin-red, #1B1B1B) 35%,
    var(--loopin-red, #1B1B1B) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: loopin-portal-pjax-bar 0.9s linear infinite;
}

@keyframes loopin-portal-pjax-bar {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loopin-portal-section-root.is-loading::before {
    animation: none !important;
    background-position: 50% 0;
  }
}

/*
 * Stabilization Slice 2 Accessibility: focus ring for keyboard / :focus-visible only.
 * PJAX programmatically focuses the section root or heading after every nav click;
 * using :focus (red) made a visible red box on every mouse navigation.
 */
#loopin-portal-section-root:focus:not(:focus-visible),
#loopin-portal-section-root :is(h1, h2, .loopin-portal-section-title):focus:not(:focus-visible) {
  outline: none;
}

#loopin-portal-section-root:focus-visible,
#loopin-portal-section-root :is(h1, h2, .loopin-portal-section-title):focus-visible {
  outline: 2px solid var(--loopin-primary, #1B1B1B);
  outline-offset: 3px;
}

.loopin-portal-pjax-error {
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(198, 40, 40, 0.28);
  background: rgba(198, 40, 40, 0.06);
  color: #b71c1c;
}

.loopin-portal-pjax-error[hidden] {
  display: none !important;
}

.loopin-portal-pjax-error-text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}

.loopin-portal-pjax-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-loopin-portal-section-link][aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.65;
}

.loopin-user-portal-section-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
  margin: 0;
}

.loopin-portal-back-to-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

html[dir="rtl"] .loopin-portal-back-to-dashboard,
[dir="rtl"] .loopin-portal-back-to-dashboard,
#loopin-user-portal[dir="rtl"] .loopin-portal-back-to-dashboard {
  flex-direction: row-reverse;
}

html[dir="rtl"] .loopin-portal-back-to-dashboard-icon-wrap,
[dir="rtl"] .loopin-portal-back-to-dashboard-icon-wrap,
#loopin-user-portal[dir="rtl"] .loopin-portal-back-to-dashboard-icon-wrap {
  transform: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section-title {
  margin: 0;
}

.loopin-user-portal-guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.loopin-social.loopin-social--portal-embed .loopin-social-main {
  padding-top: 0;
}

/* Iran-only location fields */
.loopin-iran-location-fields .loopin-iran-country-value {
  margin: 0;
  font-weight: 600;
  color: var(--loopin-text, #0f172a);
}

.loopin-location-invalid-notice {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.loopin-iran-location-fields select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.loopin-iran-location-fields .loopin-dash-form-grid,
.loopin-profile-complete-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (max-width: 640px) {
  .loopin-iran-location-fields .loopin-dash-form-grid,
  .loopin-profile-complete-location-grid {
    grid-template-columns: 1fr;
  }
}

/* Portal page: inherit social design tokens outside #loopin-social-wrap */
body.loopin-user-portal-page {
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  --loopin-portal-page-gradient: linear-gradient(145deg, #f8fafc 0%, #F5F5F5 38%, #fdf4ff 72%, #f0fdfa 100%);
  background: var(--loopin-portal-page-gradient);
  min-height: 100vh;
  min-height: 100dvh;
}

body.loopin-user-portal-page .lx-main,
body.loopin-user-portal-page .lx-section,
body.loopin-user-portal-page .lx-article,
body.loopin-user-portal-page .lx-article-content,
body.loopin-user-portal-page main.wp-block-group {
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}

body.loopin-locale-en.loopin-user-portal-page,
body.loopin-locale-en #loopin-user-portal,
body.loopin-locale-en #loopin-social-wrap,
body.loopin-locale-en .loopin-social {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.loopin-locale-en #loopin-user-portal,
body.loopin-locale-en #loopin-user-portal .loopin-social--portal-embed {
  --loopin-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --loopin-font-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#loopin-user-portal,
#loopin-user-portal .loopin-social--portal-embed {
  --loopin-font-sans: 'Vazirmatn', Tahoma, Arial, sans-serif;
  --loopin-font-serif: 'Vazirmatn', Tahoma, Arial, sans-serif;
  --loopin-portal-max-width: 1320px;
  --loopin-portal-font-size: 14px;
  --loopin-portal-text-size: 0.92rem;
  --loopin-portal-meta-size: 0.8rem;
  --loopin-portal-section-gap: clamp(16px, 2vw, 28px);
  --loopin-portal-card-gap: 18px;
  --loopin-portal-card-padding: 18px;
  --loopin-portal-grid-gap: 18px;
  --loopin-portal-nav-size: 0.85rem;
  --loopin-red: #1B1B1B;
  --loopin-red-hover: #000000;
  --loopin-bg: #FFFFFF;
  --loopin-bg-soft: #F1F1F1;
  --loopin-surface: #FFFFFF;
  --loopin-text: #111111;
  --loopin-muted: #767676;
  --loopin-border: #E9E9E9;
  --loopin-primary: #1B1B1B;
  --loopin-primary-dark: #000000;
  --loopin-primary-soft: rgba(27, 27, 27, 0.12);
  --loopin-glass-bg: rgba(255, 255, 255, 0.72);
  --loopin-glass-border: rgba(148, 163, 184, 0.28);
  --loopin-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --loopin-radius-lg: 16px;
  --loopin-radius-xl: 28px;
  --loopin-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --loopin-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --loopin-bg-gradient: linear-gradient(145deg, #f8fafc 0%, #F5F5F5 38%, #fdf4ff 72%, #f0fdfa 100%);
  color: var(--loopin-text);
  font-family: var(--loopin-font-sans);
  font-size: var(--loopin-portal-font-size, 14px);
  line-height: 1.5;
}

body.loopin-user-portal-page #loopin-user-portal {
  background: var(--loopin-bg-gradient);
  border-radius: var(--loopin-radius-xl);
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: 0;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Keep clearance for the fixed mobile bottom nav (must stay after the base rule above). */
@media (max-width: 767px) {
  body.loopin-user-portal-page #loopin-user-portal {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + 1.25rem);
  }

  body.loopin-auth-page #loopin-user-portal {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-content-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-social--portal-embed {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-guest {
  display: contents;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-social--portal-embed .loopin-social-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* Portal density: typography, width, spacing (scoped to user portal only) */
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2,
body.loopin-user-portal-page #loopin-user-portal .loopin-member-dashboard {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-h1,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-title {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-h2 {
  font-size: 1.05rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-h3 {
  font-size: 0.95rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-lead,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-status,
body.loopin-user-portal-page #loopin-user-portal p {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-kicker,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-label,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-card-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-suffix,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-muted {
  font-size: var(--loopin-portal-meta-size, 0.8rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-value {
  font-size: 1.2rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-glass-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-glass-card {
  padding: var(--loopin-portal-card-padding, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-layout {
  gap: var(--loopin-portal-grid-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-main,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-sidebar {
  gap: var(--loopin-portal-card-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-member-dashboard .loopin-dash-widgets {
  gap: var(--loopin-portal-grid-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-glass-hero {
  margin-bottom: var(--loopin-portal-card-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary {
  margin-bottom: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-notice {
  padding: 0.85rem 1rem;
  margin-bottom: var(--loopin-portal-card-gap, 18px);
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-iran-location-fields .loopin-dash-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-profile-complete-location-grid {
  gap: 0.85rem var(--loopin-portal-grid-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-location-invalid-notice {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-plan-tier,
body.loopin-user-portal-page #loopin-user-portal .loopin-plan-name {
  font-size: 1.35rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-plan-price {
  font-size: 1.2rem;
}

/* Persian portal UI: Vazir for every section (override serif/theme leftovers). */
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal :where(
	p, span, a, li, label, strong, em, small, h1, h2, h3, h4, h5, h6,
	button, input, select, textarea, .loopin-btn, .loopin-plan-tier,
	.loopin-plan-price, .loopin-plan-tagline, .loopin-plan-price-period,
	.loopin-plan-duration, .loopin-plan-badge, .loopin-portal-section-title,
	.loopin-portal-section-title-text, .loopin-coin-guide, .loopin-coin-shop,
	.loopin-coin-guide-card-title, .loopin-coin-guide-tips-title,
	.loopin-onboarding-lead, .loopin-plans-coin-balance
) {
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}

body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-plan-tier,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-plan-price,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-h1,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-h2,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-portal-section-title,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-portal-section-title-text,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-coin-guide-card-title,
body.loopin-user-portal-page:not(.loopin-locale-en) #loopin-user-portal .loopin-coin-guide-tips-title {
  letter-spacing: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-stat {
  font-size: 0.95rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-btn,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-primary,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-gold,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-secondary {
  font-size: var(--loopin-portal-text-size, 0.92rem);
  padding: 0.5rem 0.95rem;
}

body.loopin-user-portal-page .loopin-user-portal-section .loopin-dash-card,
body.loopin-user-portal-page .loopin-user-portal-section .loopin-glass-card,
body.loopin-user-portal-page .loopin-user-portal-section .loopin-form {
  background: var(--loopin-glass-bg);
  border: 1px solid var(--loopin-glass-border);
  border-radius: var(--loopin-radius-lg);
  box-shadow: var(--loopin-glass-shadow);
}

.loopin-user-portal #loopin-wrap.loopin-login-section,
.loopin-user-portal #loopin-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--loopin-portal-card-padding, 18px);
  background: var(--loopin-glass-bg);
  border: 1px solid var(--loopin-glass-border);
  border-radius: var(--loopin-radius-lg);
  box-shadow: var(--loopin-glass-shadow);
}

.loopin-user-portal .loopin-login-title {
  color: var(--loopin-text);
  font-size: 1.2rem;
  margin: 0.35rem 0;
}

.loopin-user-portal .loopin-login-sub {
  color: var(--loopin-muted);
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

.loopin-user-portal .loopin-login-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

.loopin-user-portal .loopin-login-form input[type="text"],
.loopin-user-portal .loopin-login-form input[type="password"],
.loopin-user-portal .loopin-login-form input[type="email"],
.loopin-user-portal .loopin-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.loopin-user-portal .loopin-form select,
.loopin-user-portal .loopin-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--loopin-border);
  border-radius: 10px;
  background: #fff;
  font-size: var(--loopin-portal-text-size, 0.92rem);
  line-height: 1.4;
}

.loopin-user-portal .loopin-form label,
.loopin-user-portal .loopin-dash-form label {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

.loopin-user-portal .loopin-btn,
.loopin-user-portal .loopin-btn-primary,
.loopin-user-portal .loopin-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

.loopin-user-portal .loopin-btn-primary,
.loopin-user-portal .loopin-btn-gold {
  background: var(--loopin-primary);
  color: #fff;
}

.loopin-user-portal .loopin-btn-primary:hover:not(:disabled),
.loopin-user-portal .loopin-btn-primary:focus-visible:not(:disabled),
.loopin-user-portal .loopin-btn-gold:hover:not(:disabled),
.loopin-user-portal .loopin-btn-gold:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-primary:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-primary:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-gold:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-gold:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-btn-primary:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-btn-primary:focus-visible:not(:disabled) {
  background: var(--loopin-primary-dark, #000000);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(27, 27, 27, 0.28);
  opacity: 1;
}

.loopin-user-portal .loopin-btn-outline,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-outline {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.35));
  color: var(--loopin-text, #111111);
}

.loopin-user-portal .loopin-btn-outline:hover:not(:disabled),
.loopin-user-portal .loopin-btn-outline:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-outline:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-outline:focus-visible:not(:disabled) {
  background: var(--loopin-bg-soft, #f1f5f9);
  border-color: var(--loopin-primary, #1B1B1B);
  color: var(--loopin-primary, #1B1B1B);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.loopin-user-portal .loopin-btn-secondary,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--loopin-text);
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.35));
}

.loopin-user-portal .loopin-btn-secondary:hover:not(:disabled),
.loopin-user-portal .loopin-btn-secondary:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-secondary:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-secondary:focus-visible:not(:disabled) {
  background: var(--loopin-bg-soft, #f8fafc);
  border-color: var(--loopin-primary);
  color: var(--loopin-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.loopin-user-portal .loopin-member-dashboard,
.loopin-user-portal .loopin-dashboard-v2,
.loopin-user-portal .loopin-user-profile-panel {
  width: 100%;
}

@media (max-width: 900px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal {
    --loopin-portal-font-size: 14px;
    --loopin-portal-section-gap: 14px;
    --loopin-portal-card-gap: 14px;
    --loopin-portal-grid-gap: 14px;
    --loopin-portal-card-padding: 16px;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-nav-list {
    padding: 0.5rem;
    gap: 0.35rem;
  }
}

/* Nested portal module typography — final polish (portal-scoped only) */
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-affiliate-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-panel {
  margin-bottom: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-completed-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-orders-list,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-courses-list,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-cards,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-stats-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-list {
  gap: var(--loopin-portal-grid-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-missions-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-achievements-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-referrals-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-rewards-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-module .loopin-notifications-panel {
  padding: var(--loopin-portal-card-padding, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-header .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-header .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-header .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-hero .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-hero .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-header .loopin-h2,
body.loopin-user-portal-page #loopin-user-portal .loopin-mission-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-mission-completed-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-empty {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  box-shadow: var(--loopin-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.05));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-hero {
  background: linear-gradient(135deg, rgba(37, 99, 255, 0.1), rgba(6, 182, 212, 0.08));
  border: 1px solid rgba(37, 99, 255, 0.14);
  box-shadow: var(--loopin-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.05));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-section-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-section .loopin-h3,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-section .loopin-h3,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-redemptions .loopin-h3 {
  font-size: 1rem;
  line-height: 1.35;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-mission-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievement-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-card-title {
  font-size: 0.95rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-mission-desc,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievement-desc,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-desc,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-message,
body.loopin-user-portal-page #loopin-user-portal .loopin-mission-progress-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievement-progress-meta {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-mission-card-head,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievement-card-head,
body.loopin-user-portal-page #loopin-user-portal .loopin-mission-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievement-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-current-label,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-rank-label {
  font-size: var(--loopin-portal-meta-size, 0.8rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-balance,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-summary-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-intro,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-reward-hint,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-intro,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-zero-hint,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-intro,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-unread-hint,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-description,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel-lead,
body.loopin-user-portal-page #loopin-user-portal .loopin-onboarding-lead {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-summary-value {
  font-size: 1.2rem;
  font-weight: 700;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-summary-value {
  font-size: 1.35rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-stat-value {
  font-size: 1.2rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-code-display,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-referrals-code-display {
  font-size: 1.3rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-bell {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(239, 68, 68, 0.2);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-bell {
  font-size: 1.15rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-summary-text strong {
  font-size: 0.95rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-table th,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-table td {
  font-size: var(--loopin-portal-text-size, 0.92rem);
  padding: 0.55rem 0.5rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-avatar {
  width: 34px;
  height: 34px;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-dash-form-section > summary {
  font-size: 0.95rem;
  font-weight: 700;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-form-group input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-form-group textarea,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-form-group select,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-date-input,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-input,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group select,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group textarea {
  font-size: var(--loopin-portal-text-size, 0.92rem);
  padding: 0.5rem 0.75rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-date-help,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group label,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group .loopin-date-help {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal h4 {
  font-size: 0.92rem;
  line-height: 1.35;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-type-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-status-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-mission-completed-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-you-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-status {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-summary-value {
    font-size: 1.2rem;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-code-display,
  body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2 .loopin-referrals-code-display {
    font-size: 1.1rem;
  }
}

/* Portal profile — change password card */
body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-card {
  margin-top: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-lead {
  margin: 0.35rem 0 0;
  color: var(--loopin-muted, #64748b);
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-form .loopin-form-group {
  margin-bottom: 0.85rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-notice--success {
  border-color: #46b450;
  background: #f0fff1;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-notice--error {
  border-color: #dba617;
  background: #fff8e5;
}

/* Portal portfolio submit */
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-panel {
  display: grid;
  gap: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-header {
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-lead {
  margin: 0.35rem 0 0;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-form-body {
  padding: 0;
  position: relative;
  z-index: 1;
}

.loopin-portfolio-submit-panel.loopin-glass-surface .loopin-portfolio-form-body,
.loopin-portfolio-submit-panel.loopin-glass-surface .loopin-portfolio-submit-header,
.loopin-portfolio-submit-panel.loopin-glass-surface .loopin-portfolio-submit-success {
  position: relative;
  z-index: 1;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-group {
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-help {
  margin: 0 0 0.65rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-empty {
  margin: 0;
  color: var(--loopin-muted, #64748b);
}

.loopin-portfolio-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  direction: rtl;
}

.loopin-portfolio-category-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.loopin-portfolio-category-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loopin-portfolio-category-chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.35));
  background: rgba(255, 255, 255, 0.92);
  color: var(--loopin-text, #0f172a);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.loopin-portfolio-category-chip input[type="checkbox"]:focus-visible + .loopin-portfolio-category-chip-label {
  outline: 2px solid var(--loopin-primary, #1B1B1B);
  outline-offset: 2px;
}

.loopin-portfolio-category-chip input[type="checkbox"]:checked + .loopin-portfolio-category-chip-label {
  border-color: var(--loopin-primary, #1B1B1B);
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.1));
  color: var(--loopin-primary, #1B1B1B);
  box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.12);
}

.loopin-portfolio-category-chip:hover .loopin-portfolio-category-chip-label {
  border-color: var(--loopin-primary, #1B1B1B);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-upload-error:not(:empty) {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid #dba617;
  background: #fff8e5;
  color: #6b4e00;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-guidance,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-guest-prompt,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-guest-welcome,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-logged-in-notice,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-notice,
body.loopin-user-portal-page #loopin-user-portal .loopin-social--portal-embed .loopin-empty {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-guidance {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-actions {
  margin: 1rem 0 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-social--portal-embed .loopin-empty {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  text-align: start;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-success {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(70, 180, 80, 0.35);
  background: rgba(240, 255, 241, 0.72);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-success-message {
  margin: 0.5rem 0 0;
  font-weight: 600;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-success-lead {
  margin: 0.35rem 0 0;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

/* Publish status lightbox (loading → success) */
.loopin-publish-status-modal {
  position: fixed;
  inset: 0;
  z-index: 100120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.loopin-publish-status-modal[hidden] {
  display: none !important;
}

.loopin-publish-status-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.loopin-publish-status-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  box-sizing: border-box;
  text-align: center;
}

.loopin-publish-status-close {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--loopin-text, #0f172a);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.loopin-publish-status-close:hover,
.loopin-publish-status-close:focus-visible {
  background: rgba(15, 23, 42, 0.12);
  outline: none;
}

.loopin-publish-status-modal.is-loading .loopin-publish-status-close {
  display: none;
}

.loopin-publish-status-icon {
  width: 4rem;
  height: 4rem;
  margin: 0.25rem auto 1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loopin-publish-status-modal.is-loading .loopin-publish-status-icon {
  background: rgba(27, 27, 27, 0.08);
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-publish-status-modal.is-success .loopin-publish-status-icon {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.loopin-publish-status-spinner,
.loopin-publish-status-check {
  display: none;
}

.loopin-publish-status-modal.is-loading .loopin-publish-status-spinner {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  border: 2.5px solid rgba(27, 27, 27, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: loopin-publish-spin 0.7s linear infinite;
}

.loopin-publish-status-modal.is-success .loopin-publish-status-check {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.2 16.2 4.8 11.8l1.4-1.4 2.999 3 6.6-6.6 1.4 1.4-8 8z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.2 16.2 4.8 11.8l1.4-1.4 2.999 3 6.6-6.6 1.4 1.4-8 8z' fill='black'/%3E%3C/svg%3E");
  animation: loopin-publish-check-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.loopin-publish-status-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--loopin-text, #111);
}

.loopin-publish-status-lead {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--loopin-muted, #64748b);
}

.loopin-publish-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.loopin-publish-status-actions .loopin-btn {
  min-width: 7.5rem;
}

@keyframes loopin-publish-spin {
  to { transform: rotate(360deg); }
}

@keyframes loopin-publish-check-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html.loopin-publish-modal-open,
body.loopin-publish-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .loopin-publish-status-modal.is-loading .loopin-publish-status-spinner,
  .loopin-publish-status-modal.is-success .loopin-publish-status-check {
    animation: none;
  }
}

/* Portal stories */
body.loopin-user-portal-page #loopin-user-portal .loopin-portal-stories {
  display: grid;
  gap: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-submit {
  display: grid;
  gap: 1rem;
  padding: var(--loopin-portal-card-padding, clamp(1rem, 2vw, 1.35rem));
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(255, 255, 255, 0.85));
  border-radius: var(--loopin-radius-lg, 22px);
  box-shadow: var(--loopin-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
  backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--loopin-glass-blur, 18px));
}

.loopin-story-submit.loopin-glass-surface .loopin-story-submit-lead,
.loopin-story-submit.loopin-glass-surface .loopin-story-submit-header,
.loopin-story-submit.loopin-glass-surface .loopin-story-form,
.loopin-story-submit.loopin-glass-surface .loopin-story-submit-success {
  position: relative;
  z-index: 1;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-submit-lead {
  margin: 0;
  max-width: none;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-section {
  margin-top: 0;
  display: grid;
  gap: 0.85rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-section .loopin-portal-section-title {
  color: var(--loopin-text, #0f172a);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  box-shadow: var(--loopin-shadow-sm);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-item--expired {
  background: var(--loopin-bg-soft, #f8fafc);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-caption {
  color: var(--loopin-text, #0f172a);
  font-weight: 500;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-meta {
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-muted,
body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-caption.loopin-muted {
  color: var(--loopin-muted, #64748b);
  font-weight: 400;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-thumb {
  background: var(--loopin-bg-soft, #f1f5f9);
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-list-section .loopin-empty {
  margin: 0;
  padding: 0.35rem 0;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-submit-success {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(70, 180, 80, 0.35);
  background: rgba(240, 255, 241, 0.85);
  color: var(--loopin-text, #0f172a);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-submit-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-story-media-preview {
  margin-top: 0.65rem;
}

/* Portal commerce / shop */
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-panel {
  display: grid;
  gap: var(--loopin-portal-section-gap, clamp(16px, 2vw, 28px));
  margin: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-orders-list,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-courses-list {
  gap: var(--loopin-portal-grid-gap, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-row,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-course-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-account-step,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-guide,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-hero,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-empty,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-section,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-hero,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-buy-card {
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  border-radius: var(--loopin-radius-lg, 16px);
  box-shadow: var(--loopin-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
  backdrop-filter: blur(var(--loopin-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--loopin-glass-blur, 18px));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-row,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-course-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-account-step,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-guide {
  padding: var(--loopin-portal-card-padding, 18px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card {
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-detail {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-section-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-course-card h3,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout h3,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout h4,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-guide-title {
  color: var(--loopin-text, #0f172a);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-lead,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-empty-hint,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-summary,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-summary,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-type-note,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-totals,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-item,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-items li,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-row,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-item,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-content,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-panel .loopin-empty-text {
  font-size: var(--loopin-portal-text-size, 0.92rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-sale-badge,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shop-kicker,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-buy-kicker,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-course-meta,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price-label,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-guide-note,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-gateway-desc,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-gift-note,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-highlights li,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-buy-notes {
  font-size: var(--loopin-portal-meta-size, 0.8rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-detail {
  padding: var(--loopin-portal-card-padding, 18px);
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  border-radius: var(--loopin-radius-lg, 16px);
  box-shadow: var(--loopin-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-back a {
  color: var(--loopin-primary, #1B1B1B);
  text-decoration: none;
  font-weight: 600;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-detail-back a:hover {
  text-decoration: underline;
}

/* Portal shop — product cards (bundled here so layout works even if commerce.css is cached) */
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-grid--shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card--digital_course {
  --loopin-commerce-accent: #2563ff;
  --loopin-commerce-accent-soft: rgba(37, 99, 255, 0.12);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card--digital_file {
  --loopin-commerce-accent: #0891b2;
  --loopin-commerce-accent-soft: rgba(8, 145, 178, 0.12);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card--mixed {
  --loopin-commerce-accent: #7c3aed;
  --loopin-commerce-accent-soft: rgba(124, 58, 237, 0.12);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(145deg, var(--loopin-commerce-accent-soft, rgba(27, 27, 27, 0.12)), rgba(255, 255, 255, 0.5));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media {
  display: block;
  position: relative;
  min-height: 148px;
  max-height: 190px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  text-decoration: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 148px;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  color: var(--loopin-commerce-accent, #1B1B1B);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-media-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-sale-badge--floating {
  position: absolute;
  top: 0.65rem;
  inset-inline-start: 0.65rem;
  z-index: 2;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #e11d48;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem 1.05rem;
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--loopin-commerce-accent, #1B1B1B);
  background: var(--loopin-commerce-accent-soft, rgba(27, 27, 27, 0.12));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-title a {
  color: var(--loopin-text, #0f172a);
  text-decoration: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-title a:hover {
  color: var(--loopin-primary, #1B1B1B);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-summary {
  margin: 0;
  color: var(--loopin-muted, #64748b);
  font-size: 0.84rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price-block {
  margin-top: auto;
  padding-top: 0.25rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price {
  margin: 0;
  display: grid;
  gap: 0.1rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price strong {
  font-size: 1.02rem;
  color: var(--loopin-text, #0f172a);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-price del {
  font-size: 0.82rem;
  color: var(--loopin-muted, #64748b);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-actions .loopin-btn-block {
  width: 100%;
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-form label,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-coupon label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--loopin-text, #0f172a);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-form input,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-form select,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-form textarea,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-coupon input[type="text"] {
  width: 100%;
  min-height: var(--loopin-form-field-height, 44px);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.35));
  border-radius: var(--loopin-form-radius, 14px);
  background: rgba(255, 255, 255, 0.95);
  color: var(--loopin-text, #0f172a);
  font-size: var(--loopin-form-input-size, 0.92rem);
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-qty-stepper .loopin-commerce-qty {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Portal cart */
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(min(100%, 320px), 0.95fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: start;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-head,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-item,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-summary,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-empty {
  background: var(--loopin-glass-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
  border-radius: var(--loopin-radius-lg, 16px);
  box-shadow: var(--loopin-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-item {
  padding: clamp(0.85rem, 1.8vw, 1rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-summary {
  position: sticky;
  top: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-summary-actions .loopin-btn-block {
  width: 100%;
  margin: 0;
}

@media (max-width: 960px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-layout {
    grid-template-columns: 1fr;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-cart-summary {
    position: static;
  }
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-form p {
  margin: 0 0 0.85rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-access-box,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-shipping-box,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-access-preview,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-gateway-option {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-btn-link {
  background: transparent;
  border: 0;
  color: var(--loopin-primary, #1B1B1B);
  box-shadow: none;
  padding: 0.35rem 0.55rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-btn-link:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-link:focus-visible:not(:disabled) {
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
  color: var(--loopin-primary-dark, #000000);
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   User Portal — Form UX System
   ========================================================================== */

body.loopin-user-portal-page #loopin-user-portal {
  --loopin-form-max-width: 100%;
  --loopin-form-field-height: 44px;
  --loopin-form-radius: 14px;
  --loopin-form-gap: 16px;
  --loopin-form-label-size: 0.86rem;
  --loopin-form-input-size: 0.92rem;
  --loopin-form-help-size: 0.8rem;
}

/* Auth panels stay narrow; other portal content uses full width */
body.loopin-user-portal-page #loopin-user-portal #loopin-wrap {
  max-width: none;
  width: 100%;
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section--login #loopin-wrap,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section--register #loopin-wrap,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section--forgot_password .loopin-auth-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section--reset_password .loopin-auth-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-portal-form--auth {
  max-width: min(100%, 440px);
  margin-inline: auto;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form,
body.loopin-user-portal-page #loopin-user-portal form.loopin-portal-form {
  width: 100%;
  max-width: var(--loopin-form-max-width);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-narrow:not(.loopin-portal-form--auth) {
  max-width: none;
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-profile-complete-location-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-iran-location-fields .loopin-dash-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--loopin-form-gap);
  width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-field--full,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group--full {
  grid-column: 1 / -1;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-field,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0;
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-group label:not(.loopin-checkbox-label),
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group legend,
body.loopin-user-portal-page #loopin-user-portal .loopin-login-form label:not(.loopin-checkbox-label),
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form label:not(.loopin-checkbox-label) {
  display: block;
  text-align: right;
  font-size: var(--loopin-form-label-size);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  color: var(--loopin-text);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-group--checkbox {
  align-items: flex-start;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--loopin-muted);
  cursor: pointer;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-label input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-help,
body.loopin-user-portal-page #loopin-user-portal .loopin-date-help {
  margin: 0.15rem 0 0;
  font-size: var(--loopin-form-help-size);
  line-height: 1.5;
  color: var(--loopin-muted);
}

body.loopin-user-portal-page #loopin-user-portal input[type="text"],
body.loopin-user-portal-page #loopin-user-portal input[type="email"],
body.loopin-user-portal-page #loopin-user-portal input[type="password"],
body.loopin-user-portal-page #loopin-user-portal input[type="tel"],
body.loopin-user-portal-page #loopin-user-portal input[type="url"],
body.loopin-user-portal-page #loopin-user-portal input[type="number"],
body.loopin-user-portal-page #loopin-user-portal input[type="search"],
body.loopin-user-portal-page #loopin-user-portal select,
body.loopin-user-portal-page #loopin-user-portal textarea,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-input,
body.loopin-user-portal-page #loopin-user-portal .loopin-date-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  min-height: var(--loopin-form-field-height);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-form-radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--loopin-text);
  font-family: inherit;
  font-size: var(--loopin-form-input-size);
  line-height: 1.4;
  text-align: right;
  direction: rtl;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.loopin-user-portal-page #loopin-user-portal input.loopin-input-ltr {
  direction: ltr;
  text-align: right;
}

body.loopin-user-portal-page #loopin-user-portal input.loopin-input-ltr::placeholder,
body.loopin-user-portal-page #loopin-user-portal input.loopin-input-ltr::-webkit-input-placeholder {
  direction: ltr;
  text-align: right;
  opacity: 0.55;
}

.loopin-input-ltr {
  direction: ltr;
  text-align: right;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-trigger-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--loopin-form-field-height);
  padding-inline: 0.5rem 0.75rem;
  border: 1px solid var(--loopin-border);
  border-radius: var(--loopin-form-radius);
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-trigger-wrap:focus-within {
  border-color: var(--loopin-accent-blue, #2563ff);
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.12);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-trigger-wrap .loopin-persian-date-input {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0.65rem 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-trigger-wrap .loopin-persian-date-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-trigger-wrap .loopin-persian-date-open {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
}

body.loopin-user-portal-page #loopin-user-portal textarea {
  min-height: 120px;
  max-width: 100%;
  resize: vertical;
  overflow-x: hidden;
}

body.loopin-user-portal-page #loopin-user-portal input:focus,
body.loopin-user-portal-page #loopin-user-portal select:focus,
body.loopin-user-portal-page #loopin-user-portal textarea:focus {
  outline: none;
  border-color: var(--loopin-primary);
  box-shadow: 0 0 0 3px var(--loopin-primary-soft);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-error,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-errors,
body.loopin-user-portal-page #loopin-user-portal .loopin-field-error,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-upload-error:not(:empty) {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(219, 166, 23, 0.45);
  background: rgba(255, 248, 229, 0.92);
  color: #6b4e00;
  font-size: var(--loopin-form-help-size);
  line-height: 1.5;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-success,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-notice--success,
body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-notice--success {
  border-color: rgba(70, 180, 80, 0.45);
  background: rgba(240, 255, 241, 0.92);
  color: #1f6b2d;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-submit-success-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-profile-form,
body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-form,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-form-body,
body.loopin-user-portal-page #loopin-user-portal #loopin-profile-complete-form {
  display: flex;
  flex-direction: column;
  gap: var(--loopin-form-gap);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section {
  border: 1px solid var(--loopin-glass-border);
  border-radius: var(--loopin-form-radius);
  background: rgba(255, 255, 255, 0.45);
  overflow: clip;
  max-width: 100%;
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section > summary {
  padding: 0.85rem 1rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section > .loopin-dash-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section > .loopin-form-group,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section > .loopin-iran-location-fields {
  padding: 1rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-media-uploader,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-media-preview {
  width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-input {
  margin-top: 0.35rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-login-wrap {
  width: 100%;
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-form-grid,
  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-grid,
  body.loopin-user-portal-page #loopin-user-portal .loopin-profile-complete-location-grid,
  body.loopin-user-portal-page #loopin-user-portal .loopin-iran-location-fields .loopin-dash-form-grid {
    grid-template-columns: 1fr;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-form-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-change-password-actions .loopin-btn {
    width: 100%;
  }
}

/* Portfolio submit — category checkbox RTL alignment */
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-list,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-list {
  display: grid;
  gap: 10px;
  direction: rtl;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-skills-chips {
  gap: 0.6rem;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-skill-chip-label {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--loopin-glass-border, rgba(148, 163, 184, 0.28));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-skill-chip input[type="checkbox"]:checked + .loopin-dash-skill-chip-label {
  border-color: var(--loopin-primary, #1B1B1B);
  background: var(--loopin-primary-soft, rgba(27, 27, 27, 0.14));
  color: var(--loopin-primary, #1B1B1B);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px;
  direction: rtl;
  text-align: right;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 500;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-option span {
  line-height: 1.7;
  word-break: break-word;
}

/* ── Auth pages (login, register, lost password) ─────────────── */
body.loopin-auth-page {
  overflow-x: clip;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(27, 27, 27, 0.07), transparent 58%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(80, 100, 140, 0.05), transparent 50%),
    linear-gradient(168deg, #f3f5f9 0%, #eef1f6 42%, #f8f9fb 100%);
}

body.loopin-auth-page .loopin-mobile-bottom-nav,
body.loopin-auth-page .loopin-bottom-nav-submenu,
body.loopin-user-portal-page:not(.logged-in) .loopin-mobile-bottom-nav,
body.loopin-user-portal-page:not(.logged-in) .loopin-bottom-nav-submenu,
.loopin-user-portal--auth ~ .loopin-mobile-bottom-nav,
.loopin-user-portal--auth .loopin-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 767px) {
  body.loopin-auth-page.loopin-user-portal-page #loopin-user-portal,
  body.loopin-user-portal-page:not(.logged-in) #loopin-user-portal {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
}

body.loopin-auth-page .lx-main,
body.loopin-auth-page .lx-section,
body.loopin-auth-page .lx-container {
  overflow-x: clip;
  max-width: 100%;
}

body.loopin-auth-page #loopin-social-wrap,
body.loopin-auth-page #loopin-user-portal {
  overflow-x: clip;
  max-width: 100%;
}

body.loopin-auth-page #loopin-user-portal {
  --loopin-primary: #1B1B1B;
  --loopin-primary-soft: rgba(27, 27, 27, 0.1);
  --loopin-glass-bg: #ffffff;
  --loopin-glass-border: #e9e9e9;
  --loopin-glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: transparent;
  min-height: 100vh;
  min-height: 100dvh;
}

body.loopin-auth-page #loopin-user-portal .loopin-user-portal-shell {
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  padding-block: clamp(1.25rem, 4vh, 2.5rem);
}

body.loopin-auth-page #loopin-user-portal .loopin-user-portal-nav-item.loopin-user-portal-active a {
  background: var(--loopin-primary-soft);
  border-color: var(--loopin-primary);
  color: var(--loopin-primary);
}

body.loopin-auth-page #loopin-user-portal .loopin-user-portal-section--login,
body.loopin-auth-page #loopin-user-portal .loopin-user-portal-section--register,
body.loopin-auth-page #loopin-user-portal .loopin-user-portal-section--forgot_password,
body.loopin-auth-page #loopin-user-portal .loopin-user-portal-section--reset_password {
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
}

body.loopin-auth-page #loopin-user-portal .loopin-dashboard-content-wrap {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-inline: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}

body.loopin-auth-page #loopin-user-portal .loopin-dashboard-breadcrumb-wrap {
  display: none !important;
}

body.loopin-auth-page #loopin-user-portal .loopin-user-portal-guest--auth .loopin-user-portal-nav-list {
  justify-content: center;
}

.loopin-auth-card {
  width: 100%;
  max-width: min(400px, 100%);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 1.75rem) 1.35rem;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(220, 224, 232, 0.95);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 36px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

.loopin-auth-card-header {
  text-align: center;
  margin-bottom: 1.45rem;
}

.loopin-auth-brand {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 4.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--loopin-text, #111);
}

.loopin-auth-card-title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--loopin-text, #171717);
}

.loopin-auth-card-title.loopin-portal-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  justify-content: center;
}

.loopin-auth-card-title.loopin-portal-section-title .loopin-portal-section-title-icon-wrap {
  margin: 0;
}

.loopin-auth-card-lead {
  margin: 0 auto;
  max-width: 22rem;
  color: #667085;
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 450;
}

.loopin-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.loopin-auth-form .loopin-form-group {
  margin: 0;
  min-width: 0;
}

.loopin-auth-form label:not(.loopin-checkbox-label) {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: #344054;
}

.loopin-auth-form input[type="text"],
.loopin-auth-form input[type="password"],
.loopin-auth-form input[type="email"],
.loopin-auth-form input[type="tel"],
.loopin-auth-form .loopin-auth-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: #101828;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: right;
  direction: rtl;
}

.loopin-auth-form input.loopin-auth-input--phone,
.loopin-auth-form input[type="tel"] {
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.loopin-auth-form input.loopin-auth-input--otp,
#loopin-portal-otp {
  direction: ltr;
  text-align: center;
  letter-spacing: 0.42em;
  font-weight: 700;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.loopin-portal-otp-autofill-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #667085;
}

.loopin-auth-form input::placeholder {
  color: #98a2b3;
  letter-spacing: normal;
  font-weight: 450;
}

.loopin-auth-form input:hover {
  border-color: #b8bec9;
}

.loopin-auth-form input:focus {
  outline: none;
  border-color: var(--loopin-primary, #1B1B1B);
  background: #fff;
  box-shadow: 0 0 0 3px var(--loopin-primary-soft, rgba(27, 27, 27, 0.12));
}

.loopin-auth-form .loopin-form-group--checkbox {
  align-items: flex-start;
}

.loopin-auth-form .loopin-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--loopin-muted, #767676);
  cursor: pointer;
}

.loopin-auth-form .loopin-checkbox-label input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
}

.loopin-auth-form .loopin-btn-primary,
.loopin-auth-form .loopin-auth-submit {
  min-height: 3rem;
  margin-top: 0.15rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(27, 27, 27, 0.18);
}

.loopin-auth-form .loopin-btn-primary:hover,
.loopin-auth-form .loopin-auth-submit:hover {
  filter: brightness(0.96);
}

.loopin-portal-otp-phone-summary {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eaecf0;
  color: #475467;
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

.loopin-portal-otp-phone-summary strong {
  color: #101828;
  font-weight: 700;
  margin-inline: 0.2rem;
}

.loopin-auth-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0.15rem 0 0;
  text-align: center;
}

.loopin-auth-card-footer-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d0d5dd;
}

.loopin-auth-card-link {
  color: #475467;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.loopin-auth-card-link:hover,
.loopin-auth-card-link:focus-visible {
  color: var(--loopin-primary, #1B1B1B);
}

.loopin-portal-otp-resend.is-cooling,
.loopin-portal-otp-resend:disabled {
  color: #98a2b3;
  cursor: not-allowed;
  pointer-events: none;
}

.loopin-portal-otp-resend.is-cooling .loopin-portal-otp-resend-label {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.loopin-auth-card-switch {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #eaecf0;
  text-align: center;
  font-size: 0.84rem;
  color: #667085;
}

.loopin-auth-card-switch a {
  color: #344054;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.loopin-auth-card-switch a:hover,
.loopin-auth-card-switch a:focus-visible {
  color: var(--loopin-primary, #1B1B1B);
  border-bottom-color: currentColor;
}

.loopin-alert-success {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(0, 122, 107, 0.1);
  border: 1px solid rgba(0, 122, 107, 0.25);
  color: #007a6b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.loopin-alert-error {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.2);
  color: #c62828;
  font-size: 0.9rem;
  line-height: 1.5;
}

.loopin-portal-otp-phone-summary {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  color: var(--loopin-text-muted, #5f6368);
  line-height: 1.6;
}

.loopin-otp-test-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  order: -1;
  margin: 0 0 0.35rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 14px;
  background: #e8f7f4;
  border: 2px solid #0d9488;
  color: #0f766e;
  text-align: center;
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.12);
}

.loopin-otp-test-banner[hidden] {
  display: none !important;
}

.loopin-otp-test-banner-label {
  font-size: 0.82rem;
  font-weight: 700;
}

.loopin-otp-test-code {
  font-size: clamp(1.75rem, 7vw, 2.15rem);
  font-weight: 800;
  letter-spacing: 0.32em;
  line-height: 1.15;
  padding-inline-start: 0.32em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #115e59;
}

@media (max-width: 767px) {
  .loopin-otp-test-banner {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    margin-bottom: 0.75rem;
  }

  .loopin-otp-test-code {
    font-size: 2rem;
  }
}

.loopin-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 0.95rem;
  color: var(--loopin-muted, #767676);
  font-size: 0.85rem;
}

.loopin-auth-divider::before,
.loopin-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--loopin-border, #e9e9e9);
}

.loopin-auth-social-login {
  display: grid;
  gap: 0.65rem;
}

.loopin-auth-social-hint,
.loopin-auth-eitaa-hint {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--loopin-text-muted, #5f6368);
  text-align: center;
}

.loopin-portal-auth-debug {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed rgba(201, 168, 76, 0.45);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.78rem;
}

.loopin-portal-auth-debug summary {
  cursor: pointer;
  color: var(--loopin-text-muted, #5f6368);
  font-weight: 600;
}

.loopin-portal-auth-debug pre {
  margin: 0.65rem 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #333;
}

.loopin-btn-bale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #e8f8ef;
  border: 1px solid rgba(0, 168, 132, 0.35);
  color: #007a6b;
  font-weight: 600;
}

.loopin-btn-bale:hover,
.loopin-btn-bale:focus-visible {
  background: #d9f3ea;
  border-color: rgba(0, 168, 132, 0.55);
  color: #00695c;
}

.loopin-btn-bale .btn-spinner {
  border-color: rgba(0, 122, 107, 0.25);
  border-top-color: #00a884;
}

.loopin-btn-bale-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.loopin-btn-eitaa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #fff4e8;
  border: 1px solid rgba(245, 124, 0, 0.35);
  color: #e65100;
  font-weight: 600;
}

.loopin-btn-eitaa:hover,
.loopin-btn-eitaa:focus-visible {
  background: #ffe8cc;
  border-color: rgba(245, 124, 0, 0.55);
  color: #bf360c;
}

.loopin-btn-eitaa .btn-spinner {
  border-color: rgba(230, 81, 0, 0.25);
  border-top-color: #f57c00;
}

.loopin-btn-eitaa-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-4H7l6-7v4h4l-6 7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-4H7l6-7v4h4l-6 7z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ── Logout (destructive) — top-level left, dropdown, profile footer, mobile submenu ── */
.loopin-portal-top-nav-item--logout {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.loopin-portal-top-nav-item--logout .loopin-portal-top-nav-link--direct {
  color: #c62828;
}

.loopin-portal-top-nav-item--logout .loopin-portal-nav-icon {
  color: #c62828;
  background: rgba(198, 40, 40, 0.08);
}

.loopin-portal-top-nav-item--logout .loopin-portal-top-nav-link--direct:hover,
.loopin-portal-top-nav-item--logout .loopin-portal-top-nav-link--direct:focus-visible {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.1);
  outline: none;
}

.loopin-portal-top-nav-item--logout .loopin-portal-top-nav-link--direct:hover .loopin-portal-nav-icon,
.loopin-portal-top-nav-item--logout .loopin-portal-top-nav-link--direct:focus-visible .loopin-portal-nav-icon {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.14);
}

.loopin-portal-nav-item--logout:not(.loopin-portal-top-nav-item--logout) {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.loopin-portal-nav-item--logout .loopin-portal-top-nav-link,
.loopin-portal-nav-item--logout .loopin-portal-nav-label {
  color: #c62828;
}

.loopin-portal-nav-item--logout .loopin-portal-nav-icon {
  color: #c62828;
  background: rgba(198, 40, 40, 0.08);
}

.loopin-portal-nav-item--logout .loopin-portal-top-nav-link:hover,
.loopin-portal-nav-item--logout .loopin-portal-top-nav-link:focus-visible {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.1);
  outline: none;
}

.loopin-portal-nav-item--logout .loopin-portal-top-nav-link:hover .loopin-portal-nav-icon,
.loopin-portal-nav-item--logout .loopin-portal-top-nav-link:focus-visible .loopin-portal-nav-icon {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.14);
}

.loopin-user-profile-panel-footer {
  position: relative;
  z-index: 1;
  margin-top: 1.35rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--loopin-radius-lg, 22px);
  background: var(--loopin-glass-bg-strong, rgba(255, 255, 255, 0.92));
  border: 1px solid var(--loopin-glass-border-soft, rgba(148, 163, 184, 0.28));
  box-shadow: var(--loopin-shadow-sm, 0 8px 24px rgba(15, 23, 42, 0.05));
  box-sizing: border-box;
}

.loopin-btn-logout,
.loopin-user-portal .loopin-btn-logout,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-logout,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-logout,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel-footer .loopin-btn.loopin-btn-logout,
.loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout,
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.75rem 1.25rem !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: var(--loopin-portal-text-size, 0.95rem);
  line-height: 1.3;
  text-decoration: none !important;
  text-align: center;
  color: #b71c1c !important;
  background: #fff !important;
  border: 1.5px solid rgba(183, 28, 28, 0.45) !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box;
  cursor: pointer;
}

.loopin-btn-logout:hover,
.loopin-btn-logout:focus-visible,
.loopin-user-portal .loopin-btn-logout:hover:not(:disabled),
.loopin-user-portal .loopin-btn-logout:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-logout:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn-logout:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-logout:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-logout:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel-footer .loopin-btn.loopin-btn-logout:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel-footer .loopin-btn.loopin-btn-logout:focus-visible:not(:disabled),
.loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout:hover:not(:disabled),
.loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout:focus-visible:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout:hover:not(:disabled),
body.loopin-user-portal-page #loopin-user-portal .loopin-btn.loopin-btn-outline.loopin-btn-logout:focus-visible:not(:disabled) {
  color: #fff !important;
  background: #c62828 !important;
  border-color: #c62828 !important;
  box-shadow: 0 8px 20px rgba(198, 40, 40, 0.22) !important;
  transform: translateY(-1px) !important;
  outline: none;
}

.loopin-btn-logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: inherit !important;
}

.loopin-btn-logout-icon .loopin-portal-icon-svg,
.loopin-btn-logout-icon svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  color: inherit !important;
  stroke: currentColor;
  fill: none;
}

.loopin-btn-logout-icon .loopin-portal-icon-svg path,
.loopin-btn-logout-icon svg path {
  stroke: currentColor;
}

.loopin-bottom-nav-submenu-link--logout {
  margin-top: 0.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  color: #c62828;
}

.loopin-bottom-nav-submenu-link--logout .loopin-bottom-nav-submenu-icon {
  color: #c62828;
}

.loopin-bottom-nav-submenu-link--logout:hover,
.loopin-bottom-nav-submenu-link--logout:focus-visible,
.loopin-bottom-nav-submenu-link--logout.is-active {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.08);
}

.loopin-bottom-nav-submenu-link--logout:hover .loopin-bottom-nav-submenu-icon,
.loopin-bottom-nav-submenu-link--logout:focus-visible .loopin-bottom-nav-submenu-icon {
  color: #b71c1c;
}

@media (max-width: 767px) {
  .loopin-user-profile-panel-footer {
    padding: 1rem;
  }

  .loopin-user-profile-panel-footer .loopin-btn-logout,
  body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel-footer .loopin-btn.loopin-btn-logout {
    width: 100%;
    min-height: 3rem;
    font-size: 0.95rem;
  }
}

.loopin-portal-login-step[hidden] {
  display: none !important;
}

.loopin-auth-card-footer .loopin-auth-card-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

body.loopin-auth-page #loopin-social-wrap .loopin-auth-card {
  margin-top: 0;
}

body.loopin-auth-page #loopin-social-wrap {
  --loopin-primary: #1B1B1B;
  --loopin-primary-soft: rgba(27, 27, 27, 0.1);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

@media (max-width: 640px) {
  .loopin-auth-card {
    padding: 1.35rem 1.1rem 1.2rem;
    border-radius: 16px;
  }

  .loopin-auth-brand {
    font-size: 1.5rem;
  }
}

/* Block theme + Lexpoint shell overrides — keep last in file */
body.loopin-social-page,
body.loopin-user-portal-page,
body.loopin-pin-page {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: min(100%, 1320px);
}

body.loopin-social-page .wp-site-blocks,
body.loopin-social-page main,
body.loopin-social-page .entry-content,
body.loopin-social-page .wp-block-post-content,
body.loopin-social-page .is-layout-constrained,
body.loopin-social-page .has-global-padding,
body.loopin-pin-page .wp-site-blocks,
body.loopin-pin-page main,
body.loopin-pin-page .entry-content,
body.loopin-pin-page .wp-block-post-content,
body.loopin-pin-page .is-layout-constrained,
body.loopin-pin-page .has-global-padding {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body.loopin-social-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.loopin-pin-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-inline: 0 !important;
}

body.loopin-social-page .lx-container.lx-article,
body.loopin-user-portal-page .lx-container.lx-article,
body.loopin-social-page .lx-section > .lx-container,
body.loopin-user-portal-page .lx-section > .lx-container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body.loopin-social-page .lx-single-layout,
body.loopin-pin-page .lx-single-layout {
  display: block !important;
}

body.loopin-social-page .lx-single-sidebar,
body.loopin-pin-page .lx-single-sidebar {
  display: none !important;
}

body.loopin-social-page .loopin-social-subheader-inner,
body.loopin-social-page .loopin-social-subheader-inner--megabar,
body.loopin-pin-page .loopin-social-subheader-inner,
body.loopin-pin-page .loopin-social-subheader-inner--megabar {
  width: 100%;
  max-width: var(--loopin-content-max, 1320px);
  margin-inline: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.loopin-social-page .loopin-stories-bar-inner,
  body.loopin-pin-page .loopin-stories-bar-inner {
    max-width: var(--loopin-content-max, 1320px);
    margin-inline: auto;
  }
}

/* ── User portal: horizontal overflow prevention (scoped) ─────────────────── */
body.loopin-user-portal-page {
  overflow-x: hidden;
}

body.loopin-user-portal-page #loopin-user-portal,
body.loopin-user-portal-page .loopin-user-portal,
body.loopin-user-portal-page .loopin-user-portal-shell,
body.loopin-user-portal-page .loopin-user-portal-section {
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-shell,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-section,
body.loopin-user-portal-page #loopin-user-portal .loopin-dashboard-v2,
body.loopin-user-portal-page #loopin-user-portal .loopin-member-dashboard,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-profile-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-layout,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-main,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-sidebar,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-glass-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-posts-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-panel,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-panel {
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-layout {
  grid-template-columns: minmax(0, 2fr) minmax(min(100%, 280px), 1fr);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-missions-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-missions-completed-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-achievements-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-product-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-posts-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

@media (max-width: 1100px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-reward-shop .loopin-rewards-grid.loopin-plan-grid {
    grid-template-columns: 1fr;
  }
}

body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-cards,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-stats-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-grid,
body.loopin-user-portal-page #loopin-user-portal .loopin-member-dashboard .loopin-dash-widgets {
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-grid > .loopin-form-group {
  min-width: 0;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-actions .loopin-btn {
  white-space: normal;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-guest-actions,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-nav-list {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-actions > *,
body.loopin-user-portal-page #loopin-user-portal .loopin-user-portal-nav-item a {
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-message,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-desc,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-title,
body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-excerpt,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-code-display,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-row,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-order-item,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-course-card,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-access-box,
body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-checkout-items li,
body.loopin-user-portal-page #loopin-user-portal code,
body.loopin-user-portal-page #loopin-user-portal a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-group input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group select,
body.loopin-user-portal-page #loopin-user-portal .loopin-form-group textarea,
body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-input,
body.loopin-user-portal-page #loopin-user-portal .loopin-login-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.loopin-user-portal-page #loopin-user-portal .loopin-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.loopin-user-portal-page #loopin-user-portal .loopin-form select,
body.loopin-user-portal-page #loopin-user-portal .loopin-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  align-self: stretch;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-table-wrap,
body.loopin-user-portal-page #loopin-user-portal .loopin-responsive-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-table,
body.loopin-user-portal-page #loopin-user-portal .loopin-responsive-table table {
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-leaderboard-card.is-current-user {
  margin-inline: 0;
  padding-inline: 0.75rem;
}

@media (max-width: 992px) {
  body.loopin-user-portal-page #loopin-user-portal {
    --loopin-dashboard-gutter: 16px;
  }
}

@media (max-width: 900px) {
  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-layout {
    grid-template-columns: 1fr;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.loopin-user-portal-page #loopin-user-portal {
    --loopin-dashboard-gutter: 16px;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions,
  body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-actions,
  body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-actions,
  body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-actions,
  body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-actions,
  body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-commerce-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-referrals-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-notifications-item-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-rewards-card-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-saved-post-card-actions .loopin-btn,
  body.loopin-user-portal-page #loopin-user-portal .loopin-dash-hero-actions .loopin-btn {
    width: 100%;
  }
}

/* ── Portal form system: overflow-safe, unified controls ─────────────────── */
body.loopin-user-portal-page #loopin-user-portal {
  --loopin-dashboard-form-radius: var(--loopin-form-radius, 12px);
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-form,
  .loopin-portal-form,
  .loopin-dash-profile-form,
  .loopin-change-password-form,
  .loopin-portfolio-form-body,
  #loopin-profile-complete-form,
  .loopin-affiliate-payout-profile-form,
  .loopin-affiliate-payout-request-form,
  .loopin-login-form
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-form-row,
  .loopin-dashboard-form-col,
  .loopin-dash-form-grid,
  .loopin-form-grid,
  .loopin-profile-complete-location-grid,
  .loopin-iran-location-fields .loopin-dash-form-grid,
  .loopin-affiliate-form-grid
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-form-row,
  .loopin-dash-form-grid,
  .loopin-form-grid,
  .loopin-profile-complete-location-grid,
  .loopin-iran-location-fields .loopin-dash-form-grid
) > * {
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-form-field,
  .loopin-dashboard-form-col,
  .loopin-form-group,
  .loopin-form-field
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-input-wrap,
  .loopin-dashboard-input-icon,
  .loopin-form-control-wrap,
  .loopin-input-wrap,
  .loopin-persian-date-field
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-form-group > :is(
  input,
  select,
  textarea,
  .loopin-persian-date-field,
  .loopin-form-control-wrap,
  .loopin-input-wrap,
  .loopin-dashboard-input-wrap
) {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dashboard-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea,
  .loopin-date-input,
  .loopin-referrals-input
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

body.loopin-user-portal-page #loopin-user-portal select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.loopin-user-portal-page #loopin-user-portal :is(
  .loopin-dash-card,
  .loopin-glass-card,
  .loopin-dash-profile-section,
  .loopin-user-profile-panel,
  .loopin-affiliate-panel-card
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-form-section > :is(
  .loopin-dash-form-grid,
  .loopin-form-group,
  .loopin-iran-location-fields
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-dash-skill-list,
body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-category-chips,
body.loopin-user-portal-page #loopin-user-portal .loopin-checkbox-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-persian-date-field .loopin-persian-date-trigger-wrap {
  width: 100%;
  max-width: 100%;
}

body.loopin-user-portal-page #loopin-user-portal input.loopin-input-ltr {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

@media (max-width: 768px) {
  body.loopin-user-portal-page #loopin-user-portal :is(
    .loopin-dash-form-grid,
    .loopin-form-grid,
    .loopin-profile-complete-location-grid,
    .loopin-iran-location-fields .loopin-dash-form-grid
  ) {
    grid-template-columns: 1fr;
  }
}

/* Loopin custom media uploader (no WordPress media modal) */

/* Never show native Choose File chrome inside Loopin forms/uploaders. */
#loopin-social-wrap input[type="file"],
#loopin-user-portal input[type="file"],
.loopin-form input[type="file"],
.loopin-form-group input[type="file"],
.loopin-media-uploader-input,
.loopin-profile-avatar-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fallback if a raw file input ever remains visible outside custom pickers. */
#loopin-social-wrap input[type="file"]::file-selector-button,
#loopin-user-portal input[type="file"]::file-selector-button,
#loopin-social-wrap input[type="file"]::-webkit-file-upload-button,
#loopin-user-portal input[type="file"]::-webkit-file-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.65rem 0 0;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(27, 27, 27, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff5f6 100%);
  color: var(--loopin-red, #1B1B1B);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.loopin-file-pick-btn,
.loopin-media-uploader-browse,
#loopin-profile-avatar-choose.loopin-file-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.62rem 1.15rem;
  border: 1px solid rgba(27, 27, 27, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
  color: var(--loopin-red, #1B1B1B);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(27, 27, 27, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.loopin-file-pick-btn:hover,
.loopin-file-pick-btn:focus-visible,
.loopin-media-uploader-browse:hover,
.loopin-media-uploader-browse:focus-visible,
#loopin-profile-avatar-choose.loopin-file-pick-btn:hover,
#loopin-profile-avatar-choose.loopin-file-pick-btn:focus-visible {
  background: linear-gradient(180deg, #fff 0%, #ffe8ec 100%);
  border-color: rgba(27, 27, 27, 0.35);
  color: var(--loopin-red-hover, #c4001d);
  box-shadow: 0 10px 22px rgba(27, 27, 27, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  outline: none;
}

.loopin-file-pick-btn:active,
.loopin-media-uploader-browse:active,
#loopin-profile-avatar-choose.loopin-file-pick-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(27, 27, 27, 0.1);
}

.loopin-file-pick-btn-icon,
.loopin-media-uploader-browse-icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.loopin-file-pick-btn-icon svg,
.loopin-media-uploader-browse-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loopin-media-uploader {
  width: 100%;
  position: relative;
}

.loopin-media-uploader-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed rgba(27, 27, 27, 0.28);
  border-radius: var(--loopin-radius-md, 14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 247, 248, 0.88) 100%);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.loopin-media-uploader-dropzone:hover,
.loopin-media-uploader-dropzone:focus-visible,
.loopin-media-uploader.is-dragover .loopin-media-uploader-dropzone {
  border-color: var(--loopin-red, #1B1B1B);
  background: rgba(27, 27, 27, 0.04);
  box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.08);
  outline: none;
}

.loopin-media-uploader.is-uploading .loopin-media-uploader-dropzone {
  pointer-events: none;
  opacity: 0.72;
}

.loopin-media-uploader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(27, 27, 27, 0.1);
  color: var(--loopin-red, #1B1B1B);
}

.loopin-media-uploader-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--loopin-text, #111827);
}

.loopin-media-uploader-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--loopin-text-muted, #64748b);
  line-height: 1.5;
}

.loopin-media-uploader-browse {
  margin-top: 0.45rem;
}

.loopin-media-uploader-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.loopin-media-uploader-progress[hidden] {
  display: none !important;
}

.loopin-media-uploader-progress-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}

.loopin-media-uploader-progress-bar {
  --loopin-upload-progress: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--loopin-red, #1B1B1B), #ff4d6d);
  transform: scaleX(var(--loopin-upload-progress));
  transform-origin: left center;
  transition: transform 0.1s linear;
  will-change: transform;
}

[dir="rtl"] .loopin-media-uploader-progress-bar,
body.loopin-rtl .loopin-media-uploader-progress-bar {
  transform-origin: right center;
}

.loopin-media-uploader-progress-text {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--loopin-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.loopin-user-portal-page #loopin-user-portal .loopin-media-uploader-dropzone {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 247, 248, 0.9) 100%);
  border-color: rgba(27, 27, 27, 0.22);
}

body.loopin-user-portal-page #loopin-user-portal .loopin-portfolio-media-uploader .loopin-submit-steps {
  margin-top: 0.65rem;
}


/* Content abuse report */
.loopin-report-content-btn {
  cursor: pointer;
}
.loopin-pin-comment-report {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}
.loopin-pin-comment-actions .loopin-pin-comment-report {
  margin-top: 0;
}
.loopin-pin-comment-report:hover,
.loopin-pin-comment-report:focus-visible {
  opacity: 0.9;
}
.loopin-report-sheet {
  /* Sheet is mounted on body (outside #loopin-social-wrap); redeclare tokens here. */
  --loopin-red: #1B1B1B;
  --loopin-red-hover: #000000;
  --loopin-bg-soft: #F1F1F1;
  --loopin-surface: #FFFFFF;
  --loopin-text: #111111;
  --loopin-muted: #767676;
  --loopin-radius-pill: 24px;
  position: fixed;
  inset: 0;
  z-index: 1001000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
}
.loopin-report-sheet[hidden] {
  display: none !important;
}
.loopin-report-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.loopin-report-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  margin: 0;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1rem 1rem 0 0;
  background: var(--loopin-surface, #fff);
  color: var(--loopin-text, #111);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  direction: rtl;
  text-align: start;
}
.loopin-report-sheet-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}
.loopin-report-sheet-label {
  display: block;
  margin: 0.65rem 0 0.35rem;
  font-size: 0.85rem;
}
.loopin-report-sheet-select,
.loopin-report-sheet-note {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
.loopin-report-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.loopin-report-sheet-actions .loopin-btn-primary {
  background: var(--loopin-red, #1B1B1B);
  color: #fff;
}
.loopin-report-sheet-actions .loopin-btn-primary:hover:not(:disabled),
.loopin-report-sheet-actions .loopin-btn-primary:focus-visible:not(:disabled) {
  background: var(--loopin-red-hover, #000000);
  color: #fff;
}
.loopin-report-sheet-actions .loopin-btn-ghost {
  background: transparent;
  color: var(--loopin-muted, #767676);
}
.loopin-report-sheet-actions .loopin-btn-ghost:hover {
  background: var(--loopin-bg-soft, #F1F1F1);
  color: var(--loopin-text, #111);
}
html.loopin-report-sheet-open,
html.loopin-report-sheet-open body {
  overflow: hidden;
}

/* Sit above Shorts / overlays (same stack tier as share sheet). */
html.loopin-portfolio-shorts-open .loopin-report-sheet,
html.loopin-report-sheet-open .loopin-report-sheet {
  z-index: 1001000;
}

html.loopin-report-sheet-open .loopin-portfolio-shorts {
  pointer-events: none;
}

html.loopin-report-sheet-open .loopin-report-sheet,
html.loopin-report-sheet-open .loopin-report-sheet * {
  pointer-events: auto;
}

@media (max-width: 767px) {
  html.loopin-portfolio-shorts-open .loopin-report-sheet,
  html.loopin-report-sheet-open .loopin-report-sheet {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    z-index: 1001000;
  }

  .loopin-report-sheet-panel {
    width: 100%;
    max-width: none;
    border-radius: 1rem 1rem 0 0;
  }
}

/* Crawlable province/city navigation below browse results. */
#loopin-social-wrap .loopin-location-navigation {
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.15rem, 2.8vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--loopin-primary, #ef476f) 18%, #fff);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--loopin-primary, #ef476f) 5%, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

#loopin-social-wrap .loopin-location-navigation-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: var(--loopin-text, #111827);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.65;
}

#loopin-social-wrap .loopin-location-navigation-title-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--loopin-primary, #ef476f) 9%, #fff);
  color: var(--loopin-primary, #ef476f);
}

#loopin-social-wrap .loopin-location-navigation-title-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

#loopin-social-wrap .loopin-location-navigation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#loopin-social-wrap .loopin-location-navigation-item {
  min-width: 0;
}

#loopin-social-wrap .loopin-location-navigation-link {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  padding: .72rem 1rem;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .88);
  color: var(--loopin-text, #111827);
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .025);
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#loopin-social-wrap a.loopin-location-navigation-link::after {
  content: "‹";
  flex: 0 0 auto;
  color: var(--loopin-primary, #ef476f);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

#loopin-social-wrap a.loopin-location-navigation-link:hover,
#loopin-social-wrap a.loopin-location-navigation-link:focus-visible {
  border-color: var(--loopin-primary, #7c3aed);
  color: var(--loopin-primary, #7c3aed);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

#loopin-social-wrap .loopin-location-navigation-item.is-current .loopin-location-navigation-link {
  background: var(--loopin-bg-soft, #f3f4f6);
  color: var(--loopin-muted, #64748b);
}

#loopin-social-wrap .loopin-location-navigation-cross {
  margin: 1.15rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(15, 23, 42, .08);
  text-align: left;
}

#loopin-social-wrap .loopin-location-navigation-cross a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--loopin-primary, #7c3aed);
  font-weight: 700;
  text-decoration: none;
}

#loopin-social-wrap .loopin-location-navigation-cross a::after {
  content: "←";
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 980px) {
  #loopin-social-wrap .loopin-location-navigation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #loopin-social-wrap .loopin-location-navigation {
    border-radius: 1rem;
  }

  #loopin-social-wrap .loopin-location-navigation-list {
    grid-template-columns: 1fr;
  }
}