/**
 * Decto unify v8 — profiles, explore, before/after, auth.
 * Last-loaded overlay. Matches Next.js AppShell + PostCard.
 */

/* header plus lives in the dock for providers */
body.app-shell .app-header-icon--create-plus {
  display: none !important;
}

/* ------------------------------------------------------------------ before / after */

.ba-slider,
.ba-slider.ba-slider-premium,
.ba-slider.ba-slider--ds,
.explore-ba-mount .ba-slider,
.feed-post-media .ba-slider,
.bn-feed-card__media .ba-slider,
.bn-post-detail-media .ba-slider,
.explore-modal-media .ba-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.3) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  cursor: default !important;
  /* Allow vertical page scroll; only the rail/handle steal horizontal drags */
  touch-action: pan-y !important;
}
.ba-slider.is-dragging {
  touch-action: none !important;
  cursor: ew-resize !important;
}
.ba-slider img,
.ba-slider .ba-before,
.ba-slider .ba-after {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
  max-width: none !important;
}
.ba-slider-line,
.ba-slider-premium .ba-slider-line {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1.5px !important;
  background: rgba(255, 252, 248, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(23, 56, 47, 0.1) !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.ba-slider-rail {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44px !important;
  transform: translateX(-50%) !important;
  z-index: 7 !important;
  touch-action: none !important;
  cursor: ew-resize !important;
  background: transparent !important;
  pointer-events: auto !important;
}
.ba-slider-handle,
.ba-slider-premium .ba-slider-handle {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44px !important;
  height: auto !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  cursor: ew-resize !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  touch-action: none !important;
  pointer-events: auto !important;
}
.ba-handle-grip,
.ba-slider-handle .ba-handle-grip,
.feed-post-media .ba-handle-grip,
.explore-card-media .ba-handle-grip,
.explore-modal-media .ba-handle-grip,
.bn-post-detail-media .ba-handle-grip,
.ba-handle-grip--chevrons {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 56, 47, 0.12) !important;
  box-shadow: 0 4px 14px rgba(16, 37, 29, 0.16) !important;
  transform: translate(-50%, -50%) !important;
  color: #17382F !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  pointer-events: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.ba-handle-grip::before,
.ba-handle-grip::after {
  display: none !important;
  content: none !important;
}
.ba-handle-grip i,
.ba-handle-grip .fa {
  display: none !important;
}
.ba-handle-grip .ba-chevron,
.ba-handle-grip--chevrons .ba-chevron {
  display: block !important;
  width: 12px !important;
  height: 16px !important;
  color: #17382F !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
}
.ba-handle-grip .ba-chevron path {
  stroke: #17382F !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Feed: media flush to actions — no black/cream strip */
.bn-feed-card__media,
.feed-post-media-wrap {
  aspect-ratio: 4 / 5 !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.3) !important;
  line-height: 0 !important;
}
.bn-feed-card__media .feed-post-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.3) !important;
}
.bn-feed-card__body.feed-post-body {
  margin: 0 !important;
  padding: 6px 12px 12px !important;
  gap: 4px !important;
  background: rgba(255,255,255,0.3) !important;
  border-top: 0 !important;
}
.bn-feed-card__caption,
.feed-post-caption,
.feed-post-compact-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.ba-slider.ba-slider-premium::after,
.ba-nav,
.ba-nav--prev,
.ba-nav--next {
  display: none !important;
  content: none !important;
}
.ba-slider-bar,
.ba-slider-bar--minimal {
  position: absolute !important;
  inset: auto 10px 10px 10px !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.ba-label,
.ba-label--before,
.ba-label--after {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(20, 40, 36, 0.72) !important;
  color: #FAF9F5 !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* ------------------------------------------------------------------ explore */

body .bn-explore-page::before,
body .bn-explore-page .bn-page-hero,
.bn-lux-head__line,
.bn-lux-head__eyebrow { display: none !important; }
.bn-explore-page {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 12px 12px 24px !important;
  gap: 14px !important;
  background: transparent !important;
}
.bn-lux-head,
.bn-lux-head--page {
  padding: 8px 4px 4px !important;
  background: none !important;
  box-shadow: none !important;
}
.bn-lux-head__title {
  font-family: "Peyda", "Vazirmatn", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #17382F !important;
  letter-spacing: -0.02em !important;
}
.explore-provider-rail {
  background: rgba(255,255,255,0.3) !important;
  border: 1px solid rgba(23, 56, 47, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(23, 56, 47, 0.04) !important;
  padding: 12px !important;
}
.explore-provider-rail__tab.is-active {
  background: #17382F !important;
  color: #FAF9F5 !important;
}
.explore-app-grid,
.explore-app-grid.iconic-bento,
#exploreMasonry {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  grid-auto-flow: dense !important;
  width: 100% !important;
  max-width: none !important;
}
/* Mobile: fill ~4 rows of viewport */
@media (max-width: 767px) {
  .bn-explore-page--grid .explore-app-grid--grid12 .bn-explore-card,
  .bn-explore-page--grid .explore-app-grid--grid12 .explore-app-card {
    height: calc((100dvh - var(--bn-nav-h, 56px) - var(--bn-bottom-dock-h, 72px) - 52px - env(safe-area-inset-bottom, 0px)) / 4) !important;
    min-height: 112px !important;
    border-radius: 10px !important;
  }
  .bn-explore-page--grid .explore-card-media {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}
/* Desktop: square tiles in a centered feed — not stretched phone rows */
@media (min-width: 768px) {
  .bn-explore-page--grid {
    max-width: min(1080px, 100%) !important;
    margin-inline: auto !important;
    padding: 16px 20px 40px !important;
  }
  .bn-explore-page--grid .explore-app-grid,
  .bn-explore-page--grid .explore-app-grid.iconic-bento,
  .bn-explore-page--grid .explore-app-grid--grid12,
  .bn-explore-page--grid #exploreMasonry {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .bn-explore-page--grid .explore-app-grid--grid12 .bn-explore-card,
  .bn-explore-page--grid .explore-app-grid--grid12 .explore-app-card,
  .bn-explore-page--grid .explore-app-card,
  .bn-explore-page--grid .bn-explore-card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }
  .bn-explore-page--grid .explore-card-media {
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .bn-explore-page--grid .explore-app-grid,
  .bn-explore-page--grid .explore-app-grid.iconic-bento,
  .bn-explore-page--grid .explore-app-grid--grid12,
  .bn-explore-page--grid #exploreMasonry {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.bn-explore-card,
.explore-app-card,
.explore-card,
.decto-explore-card,
.explore-app-card--wide,
.explore-app-card--tall {
  grid-column: auto !important;
  grid-row: auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.3) !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.explore-card-media,
.decto-explore-card .explore-card-media {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  background: rgba(255,255,255,0.3) !important;
}
.explore-card-media img,
.explore-card-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.decto-explore-missing {
  width: 100%;
  height: 100%;
  background: #E7EFEA;
}
.explore-modal.iconic-modal,
.explore-modal-dialog,
.explore-modal-panel {
  background: rgba(255,255,255,0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(23, 56, 47, 0.08) !important;
}

/* ------------------------------------------------------------------ profiles */

.bn-profile-gold-frame,
body.bn-profile--gold-frame .bn-profile-gold-frame,
.bn-profile-cover-mesh,
.bn-settings-lux-glow,
.bn-settings-lux-ring,
.bn-settings-lux-spark,
.patient-ai-lux-banner__aurora,
.dp-owner-hero__lux-banner,
.doctor-editorial-profile,
#doctorPublisherDock,
.dp-publisher-dock,
.dp-owner-photo-toggle,
.dp-owner-hero-btn__glow {
  display: none !important;
}

body.doctor-profile .bn-profile-page,
body.clinic-profile .bn-profile-page,
body.patient-profile .bn-profile-page,
.bn-profile-page {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 12px 12px 28px !important;
  gap: 14px !important;
}

.dp-owner-hero,
.dp-owner-home,
.cp-owner-home,
.bn-profile-hero,
.iconic-profile-hero,
.bn-profile-card,
.iconic-surface {
  background: rgba(255,255,255,0.3) !important;
  border: 1px solid rgba(23, 56, 47, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(23, 56, 47, 0.04), 0 8px 24px rgba(23, 56, 47, 0.05) !important;
  overflow: hidden !important;
}

.bn-profile-cover {
  height: 92px !important;
  background: #E7EFEA !important;
}
.bn-profile-nav-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.3) !important;
  border: 0 !important;
  color: #17382F !important;
  box-shadow: none !important;
}

.bn-profile-avatar,
.dp-owner-hero__avatar,
.dp-avatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}
.bn-profile-avatar-ring,
.dp-avatar-ring {
  padding: 0 !important;
  background: #E7EFEA !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.bn-profile-name,
.dp-owner-hero__name {
  font-family: "Peyda", "Vazirmatn", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #17382F !important;
  letter-spacing: -0.02em !important;
}

.bn-visitor-info-chip,
.dp-owner-hero-btn,
.bn-profile-stat {
  background: rgba(255,255,255,0.3) !important;
  border: 1px solid rgba(23, 56, 47, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #17382F !important;
}
.dp-owner-hero-btn--post,
.bn-btn--primary,
.patient-appts-cta,
.dp-book-btn-lux {
  background: #17382F !important;
  color: #FAF9F5 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.bn-profile-stats,
.iconic-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  background: none !important;
  box-shadow: none !important;
}

.patient-ai-lux-banner,
.patient-ai-lux-banner__inner {
  background: rgba(255,255,255,0.3) !important;
  border: 1px solid rgba(23, 56, 47, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(23, 56, 47, 0.04) !important;
  color: #17382F !important;
}

.dp-sticky-book {
  background: rgba(255,255,255,0.3) !important;
  border-top: 1px solid rgba(23, 56, 47, 0.06) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------ auth */

body.auth-page .auth-card,
body.auth-page .auth-notebook-sheet {
  background: rgba(255,255,255,0.3) !important;
  border: 1px solid rgba(23, 56, 47, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(23, 56, 47, 0.04), 0 8px 24px rgba(23, 56, 47, 0.05) !important;
}
body.auth-page,
body.auth-page .auth-container {
  background: rgba(255,255,255,0.3) !important;
  background-image: none !important;
}
body.auth-page h1 {
  font-family: "Peyda", "Vazirmatn", sans-serif !important;
  color: #17382F !important;
}
body.auth-page .btn-primary,
body.auth-page button[type="submit"] {
  background: #17382F !important;
  color: #FAF9F5 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
body.auth-page .bn-wordmark__text::after {
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 10px !important;
  margin: 6px auto 0 !important;
  background: url("../images/decto-wave.svg") center / contain no-repeat !important;
}

/* Post detail: BA stays inside media box — panel (caption/actions) stays visible */
#postDetailModal .bn-post-detail-media,
.bn-post-detail-modal .bn-post-detail-media {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#postDetailModal .bn-post-detail-media .ba-slider {
  position: absolute !important;
  inset: 0 !important;
  max-height: 100% !important;
  z-index: 1 !important;
}
#postDetailModal .bn-post-detail-panel,
.bn-post-detail-modal .bn-post-detail-panel {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.3) !important;
}