/**
 * Decto Primitives — canonical UI components
 * Load AFTER decto-tokens, BEFORE decto-ui.
 * Aliases: .btn → .bn-btn, .form-control → .bn-input
 */
/* ==========================================================================
   Button
   ========================================================================== */
.bn-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bn-space-2);
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--bn-radius-pill);
  border: 1px solid transparent;
  font-family: var(--bn-font-body);
  font-size: var(--bn-text-button-size);
  font-weight: var(--bn-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--bn-duration) var(--bn-ease),
    color var(--bn-duration) ease,
    border-color var(--bn-duration) ease,
    box-shadow var(--bn-duration) ease,
    transform var(--bn-duration-fast) ease,
    opacity var(--bn-duration) ease;
}
.bn-btn:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}
.bn-btn:active:not(:disabled):not([disabled]),
.btn:active:not(:disabled):not([disabled]) {
  transform: scale(0.98);
}
.bn-btn:disabled,
.bn-btn[disabled],
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.bn-btn--sm,
.btn-sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
}
.bn-btn--lg,
.btn-lg {
  min-height: 52px;
  padding: 12px 22px;
}
.bn-btn--block,
.btn-block {
  width: 100%;
}
.bn-btn--primary,
.btn-primary,
body.app-shell .btn-primary {
  background: var(--bn-color-primary);
  color: var(--bn-color-text-on-primary);
  border-color: var(--bn-color-primary);
}
.bn-btn--primary:hover,
.btn-primary:hover {
  background: var(--bn-color-primary-hover);
  border-color: var(--bn-color-primary-hover);
}
.bn-btn--primary:active,
.btn-primary:active {
  background: var(--bn-color-primary-active);
}
.bn-btn--secondary {
  background: var(--bn-color-secondary);
  color: var(--bn-green-deep);
  border-color: transparent;
}
.bn-btn--secondary:hover {
  background: var(--bn-color-secondary-hover);
}
.bn-btn--outline,
.btn-outline,
body.app-shell .btn-outline {
  background: transparent;
  color: var(--bn-color-primary);
  border-color: var(--bn-color-border);
}
.bn-btn--outline:hover,
.btn-outline:hover {
  background: var(--bn-mist);
}
.bn-btn--ghost,
.btn-ghost,
.btn-link {
  background: transparent;
  color: var(--bn-color-primary);
  border-color: transparent;
  min-height: auto;
  padding: 6px 8px;
}
.bn-btn--ghost:hover,
.btn-ghost:hover,
.btn-link:hover {
  background: var(--bn-mist);
}
.bn-btn--danger {
  background: var(--bn-color-danger);
  color: #fff;
  border-color: transparent;
}

/* Landing CTA aliases → same primitive API */
.bl-btn-champagne,
.bl-btn-hero-cta {
  background: var(--bn-color-primary);
  color: var(--bn-color-text-on-primary);
  border-color: var(--bn-color-primary);
}
.bl-btn-champagne:hover,
.bl-btn-hero-cta:hover {
  background: var(--bn-color-primary-hover);
}
.bl-btn-register,
.bl-btn-hero-secondary {
  background: transparent;
  color: var(--bn-color-primary);
  border-color: var(--bn-color-border);
}
.bl-btn-register:hover,
.bl-btn-hero-secondary:hover {
  background: var(--bn-mist);
}

.bn-btn.is-loading,
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.bn-btn.is-loading::after,
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--bn-color-text-on-primary);
  animation: bn-spin var(--bn-duration-slow) linear infinite;
}
.bn-btn--outline.is-loading::after,
.bn-btn--ghost.is-loading::after {
  color: var(--bn-color-primary);
}

.bn-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bn-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bn-color-text);
  transition: background var(--bn-duration) ease, color var(--bn-duration) ease;
}
.bn-icon-btn:hover { background: var(--bn-mist); }
.bn-icon-btn:focus-visible { outline: none; box-shadow: var(--bn-focus-ring); }
.bn-icon-btn.liked,
.bn-icon-btn.saved { color: var(--bn-color-danger); }

/* ==========================================================================
   Input / Form
   ========================================================================== */
.bn-input,
.form-control,
body.app-shell input[type='text'],
body.app-shell input[type='email'],
body.app-shell input[type='password'],
body.app-shell input[type='tel'],
body.app-shell input[type='number'],
body.app-shell input[type='search'],
body.app-shell input[type='url'],
body.app-shell textarea,
body.app-shell select,
body.auth-page input,
body.auth-page textarea,
body.auth-page select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--bn-color-border);
  border-radius: var(--bn-radius-md);
  background: var(--bn-color-surface);
  color: var(--bn-color-text);
  font-family: var(--bn-font-body);
  font-size: var(--bn-text-body-size);
  line-height: 1.45;
  transition: border-color var(--bn-duration) ease, box-shadow var(--bn-duration) ease;
}
.bn-input:focus,
.form-control:focus,
body.app-shell input:focus,
body.app-shell textarea:focus,
body.app-shell select:focus,
body.auth-page input:focus {
  outline: none;
  border-color: var(--bn-green-mid);
  box-shadow: var(--bn-focus-ring);
}
.bn-input:disabled,
.form-control:disabled,
body.app-shell input:disabled,
body.app-shell textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bn-color-bg-subtle);
}
.bn-input.is-invalid,
.form-control.is-invalid,
.bn-input[aria-invalid='true'] {
  border-color: var(--bn-color-danger);
}
.bn-input--textarea,
textarea.bn-input,
textarea.form-control {
  min-height: 96px;
  resize: vertical;
}
.form-group { margin-bottom: var(--bn-space-4); }
.form-group label,
.bn-label {
  display: block;
  margin-bottom: var(--bn-space-2);
  font-size: var(--bn-text-label-size);
  font-weight: var(--bn-font-weight-semibold);
  color: var(--bn-color-text-secondary);
}
.form-hint,
.form-text,
.bn-form-hint {
  margin-top: var(--bn-space-1);
  font-size: var(--bn-text-caption-size);
  color: var(--bn-color-text-muted);
}
.form-error,
.invalid-feedback,
.bn-form-error {
  margin-top: var(--bn-space-1);
  font-size: var(--bn-text-caption-size);
  color: var(--bn-color-danger);
}

/* Toggle */
.bn-toggle,
.settings-toggle,
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.bn-toggle input,
.settings-toggle input,
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.bn-toggle__track,
.settings-toggle .slider,
.toggle-switch .slider,
.bn-toggle .slider {
  position: absolute;
  inset: 0;
  border-radius: var(--bn-radius-pill);
  background: var(--bn-color-border-strong);
  cursor: pointer;
  transition: background var(--bn-duration) ease;
}
.bn-toggle__track::before,
.settings-toggle .slider::before,
.toggle-switch .slider::before,
.bn-toggle .slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  inset-inline-start: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--bn-duration) var(--bn-ease);
}
.bn-toggle input:checked + .bn-toggle__track,
.bn-toggle input:checked + .slider,
.settings-toggle input:checked + .slider,
.toggle-switch input:checked + .slider {
  background: var(--bn-color-primary);
}
.bn-toggle input:checked + .bn-toggle__track::before,
.bn-toggle input:checked + .slider::before,
.settings-toggle input:checked + .slider::before,
.toggle-switch input:checked + .slider::before {
  transform: translateX(-18px);
}
html[dir='ltr'] .bn-toggle input:checked + .bn-toggle__track::before,
html[dir='ltr'] .bn-toggle input:checked + .slider::before,
html[dir='ltr'] .settings-toggle input:checked + .slider::before {
  transform: translateX(18px);
}
.bn-toggle input:focus-visible + .bn-toggle__track,
.bn-toggle input:focus-visible + .slider,
.settings-toggle input:focus-visible + .slider {
  box-shadow: var(--bn-focus-ring);
}

/* ==========================================================================
   Card
   ========================================================================== */
.bn-card,
.card {
  background: var(--bn-color-surface);
  border: 1px solid var(--bn-color-border);
  border-radius: var(--bn-radius);
  box-shadow: var(--bn-shadow-xs);
}
.bn-card--elevated {
  box-shadow: var(--bn-shadow);
  border-color: var(--bn-border-soft);
}
.bn-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--bn-duration) ease, transform var(--bn-duration-fast) ease;
}
.bn-card--interactive:hover {
  box-shadow: var(--bn-shadow-sm);
}
.bn-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}
.bn-card__body { padding: var(--bn-space-4); }
.bn-card__header {
  padding: var(--bn-space-4);
  border-bottom: 1px solid var(--bn-border-soft);
}

/* ==========================================================================
   Modal
   ========================================================================== */
.bn-modal,
.modal,
.composer-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bn-z-modal);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: var(--bn-space-4);
  background: rgba(16, 26, 23, 0.45);
  backdrop-filter: blur(4px);
}
.bn-modal.is-open,
.bn-modal.open,
.bn-modal.active,
.modal.is-open,
.modal.open,
.modal.active,
.composer-modal.is-open,
.composer-modal.open,
.composer-modal.active,
.composer-modal[aria-hidden='false']:not(#postDetailModal),
#explorePostModal.open,
.explore-modal.open,
#explorePostModal[aria-hidden='false'].open {
  display: flex !important;
  pointer-events: auto !important;
}
.bn-modal__dialog,
.modal-dialog,
.composer-sheet,
.composer-pro-sheet,
.modal-content {
  width: min(100%, 520px);
  max-height: min(92dvh, 900px);
  overflow: auto;
  background: var(--bn-color-surface);
  border-radius: var(--bn-radius-lg) var(--bn-radius-lg) 0 0;
  box-shadow: var(--bn-shadow-lg);
  border: 1px solid var(--bn-border-soft);
}
@media (min-width: 768px) {
  .bn-modal,
  .modal,
  .composer-modal {
    align-items: center;
  }
  .bn-modal__dialog,
  .modal-dialog,
  .composer-sheet,
  .composer-pro-sheet,
  .modal-content {
    border-radius: var(--bn-radius-lg);
  }
}
.modal-header,
.bn-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bn-space-3);
  padding: var(--bn-space-4);
  border-bottom: 1px solid var(--bn-border-soft);
}
.modal-body,
.bn-modal__body { padding: var(--bn-space-4); }
.modal-close,
.bn-modal__close {
  width: 36px;
  height: 36px;
  border-radius: var(--bn-radius-pill);
  display: inline-grid;
  place-items: center;
}
.modal-close:hover,
.bn-modal__close:hover { background: var(--bn-mist); }
.modal-close:focus-visible,
.bn-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}

/* ==========================================================================
   Tabs / Pills
   ========================================================================== */
.bn-tabs,
.bn-profile-tabs,
.dp-tabs {
  display: flex;
  gap: var(--bn-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bn-border-soft);
}
.bn-tabs::-webkit-scrollbar { display: none; }
.bn-tab,
.bn-profile-tab,
.tab-btn,
.dp-tab,
.profile-tab,
.appt-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--bn-space-2);
  min-height: 44px;
  padding: var(--bn-space-2) var(--bn-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--bn-color-text-secondary);
  font-size: var(--bn-text-label-size);
  font-weight: var(--bn-font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.bn-tab:hover,
.bn-profile-tab:hover,
.tab-btn:hover,
.dp-tab:hover { color: var(--bn-color-text); }
.bn-tab:focus-visible,
.bn-profile-tab:focus-visible,
.tab-btn:focus-visible,
.dp-tab:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
  border-radius: var(--bn-radius-sm);
}
.bn-tab.active,
.bn-tab[aria-selected='true'],
.bn-profile-tab.active,
.tab-btn.active,
.dp-tab.active,
.profile-tab.active,
.appt-tab.active {
  color: var(--bn-color-primary);
  border-bottom-color: var(--bn-color-primary);
}
.bn-pill,
.filter-chip,
.bn-settings-nav__btn,
.settings-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bn-space-1);
  min-height: 34px;
  padding: 6px 12px;
  border-radius: var(--bn-radius-pill);
  border: 1px solid var(--bn-color-border);
  background: var(--bn-color-surface);
  color: var(--bn-color-text-secondary);
  font-size: var(--bn-text-caption-size);
  font-weight: var(--bn-font-weight-semibold);
  cursor: pointer;
}
.bn-pill:hover,
.filter-chip:hover { background: var(--bn-mist); }
.bn-pill.active,
.filter-chip.active,
.bn-settings-nav__btn.active,
.settings-nav-btn.active {
  background: var(--bn-green-soft);
  color: var(--bn-color-primary);
  border-color: transparent;
}
.bn-pill:focus-visible,
.filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}

/* ==========================================================================
   Badge / Avatar / Alert
   ========================================================================== */
.bn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--bn-radius-pill);
  font-size: var(--bn-text-caption-size);
  font-weight: var(--bn-font-weight-semibold);
  background: var(--bn-mist);
  color: var(--bn-color-text);
}
.bn-badge--gold {
  background: var(--bn-gold-soft);
  color: var(--bn-green-deep);
}
.bn-badge--danger {
  background: rgba(180, 90, 82, 0.12);
  color: var(--bn-color-danger);
}
.bn-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bn-mist);
  border: 1px solid var(--bn-border-soft);
}
.bn-avatar--sm { width: 32px; height: 32px; }
.bn-avatar--lg { width: 72px; height: 72px; }
.bn-avatar--xl { width: 112px; height: 112px; }

.bn-alert {
  display: flex;
  gap: var(--bn-space-3);
  padding: var(--bn-space-3) var(--bn-space-4);
  border-radius: var(--bn-radius-md);
  border: 1px solid var(--bn-color-border);
  background: var(--bn-color-surface);
  font-size: var(--bn-text-body-sm-size);
}
.bn-alert--success {
  border-color: rgba(79, 138, 106, 0.3);
  background: rgba(79, 138, 106, 0.08);
}
.bn-alert--error {
  border-color: rgba(180, 90, 82, 0.3);
  background: rgba(180, 90, 82, 0.08);
}
.bn-alert--warning {
  border-color: rgba(184, 137, 61, 0.35);
  background: rgba(184, 137, 61, 0.1);
}

/* ==========================================================================
   Empty / Loading / Skeleton
   ========================================================================== */
.bn-empty,
.bn-profile-empty,
.explore-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bn-space-3);
  padding: var(--bn-space-8) var(--bn-space-4);
  text-align: center;
  color: var(--bn-color-text-secondary);
}
.bn-empty i,
.bn-empty__icon,
.bn-profile-empty i {
  font-size: 1.75rem;
  color: var(--bn-color-text-muted);
}
.bn-empty__title,
.bn-empty h3 {
  margin: 0;
  font-size: var(--bn-text-h3-size, 1.1rem);
  font-weight: var(--bn-font-weight-bold);
  color: var(--bn-color-text);
}
.bn-empty__text,
.bn-empty p {
  margin: 0;
  max-width: 28rem;
  font-size: var(--bn-text-body-sm-size, 0.92rem);
  line-height: 1.55;
  color: var(--bn-color-text-secondary);
}

/* Before/After slider focus */
.ba-slider-handle:focus-visible,
.ba-nav:focus-visible,
.ba-slider--pro .ba-slider-handle:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}
.bn-skeleton {
  display: block;
  border-radius: var(--bn-radius-sm);
  background: linear-gradient(
    90deg,
    var(--bn-cream-2) 0%,
    var(--bn-mist) 50%,
    var(--bn-cream-2) 100%
  );
  background-size: 200% 100%;
  animation: bn-shimmer 1.2s ease-in-out infinite;
}
@keyframes bn-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes bn-spin {
  to { transform: rotate(360deg); }
}
.bn-spinner,
.loading-overlay__spinner,
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--bn-mist);
  border-top-color: var(--bn-color-primary);
  border-radius: 50%;
  animation: bn-spin 0.7s linear infinite;
}

/* ==========================================================================
   Toast / Loading overlay
   ========================================================================== */
.toast,
#toast,
.bn-toast {
  position: fixed;
  inset-inline: var(--bn-space-4);
  bottom: calc(var(--bn-dock-h) + var(--bn-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--bn-z-toast);
  display: none;
  align-items: center;
  gap: var(--bn-space-3);
  max-width: 420px;
  margin-inline: auto;
  padding: 12px 16px;
  border-radius: var(--bn-radius-md);
  background: var(--bn-green-deep);
  color: var(--bn-cream);
  box-shadow: var(--bn-shadow-md);
}
.toast.show,
#toast.show,
.bn-toast.show,
.bn-toast--top.show {
  display: flex;
}
.bn-toast--top,
.toast.bn-toast--top {
  top: calc(var(--bn-header-h) + var(--bn-space-3));
  bottom: auto;
}
.toast-success { background: var(--bn-color-success); }
.toast-error { background: var(--bn-color-danger); }
.toast-info { background: var(--bn-color-info); }

.loading-overlay,
#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--bn-z-overlay);
  display: none;
  place-items: center;
  background: rgba(250, 249, 245, 0.72);
  backdrop-filter: blur(2px);
}
.loading-overlay.active,
.loading-overlay.show,
#loadingOverlay.active,
#loadingOverlay.show,
body.loading .loading-overlay {
  display: grid;
}

/* ==========================================================================
   Page header (shared)
   ========================================================================== */
.bn-page-header,
.bn-lux-head,
.bn-lux-head--page {
  display: flex;
  flex-direction: column;
  gap: var(--bn-space-1);
  padding: var(--bn-space-3) var(--bn-space-1) var(--bn-space-2);
  background: none;
  box-shadow: none;
  border: 0;
}
.bn-page-header__title,
.bn-lux-head h1,
.bn-lux-head__title {
  margin: 0;
  font-size: var(--bn-text-h2-size);
  font-weight: var(--bn-font-weight-bold);
  color: var(--bn-color-text);
}
.bn-page-header__sub,
.bn-lux-head p,
.bn-lux-head__sub {
  margin: 0;
  font-size: var(--bn-text-body-sm-size);
  color: var(--bn-color-text-secondary);
}
.bn-lux-head__eyebrow,
.bn-lux-head__line {
  display: none !important;
}