/**
 * Surface shadows — Facebook-style soft elevation on feed blocks.
 * Overlay only; does not change layout or logic.
 */

:root {
  --ng-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

body.night-mode {
  --ng-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Primary surfaces */
.card,
.publisher:not(.mini),
.post,
.blog-container,
.content-tabs,
.forum-thread,
.live-stream-wrapper,
.profile-tabs-wrapper {
  box-shadow: var(--ng-surface-shadow);
}

/* Nested cards stay flat (e.g. wallet stat boxes inside a card) */
.card .card {
  box-shadow: none;
}

/* Modals keep their own elevation */
.modal .card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

body.night-mode .modal .card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Wider modal for the product create/edit form so all fields display comfortably */
#modal .modal-dialog:has(.product-modal-form) {
  max-width: 720px;
}

@media (min-width: 768px) {
  #modal .modal-dialog:has(.product-modal-form) {
    margin-left: auto;
    margin-right: auto;
  }
}