/*
 * Baggy experience layer
 * ----------------------
 * Loaded after page styles to keep every surface in the same visual language.
 * Page CSS owns layout; this file owns the final typography, surfaces and states.
 */

body {
  letter-spacing: -0.006em;
}

main,
.page,
.auth-page,
.verify-page {
  isolation: isolate;
}

:where(
  .page-title,
  .home-hero-title,
  .search-hero-title,
  .chat-hero-title,
  .create-product-title,
  .checkout-hero-title,
  .profile-hero-title,
  .product-page-title,
  .product-detail-title,
  .legal-hero-copy .page-title,
  .legal-doc-hero .page-title,
  .report-hero h1,
  .dsa-hero h1
) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

:where(
  .page-subtitle,
  .home-hero-subtitle,
  .search-hero-text,
  .chat-hero-text,
  .create-product-subtitle,
  .checkout-hero-text,
  .profile-hero-summary,
  .legal-hub-lead,
  .report-hero p,
  .dsa-hero p
) {
  color: var(--muted);
  line-height: 1.68;
  text-wrap: pretty;
}

:where(.card-title, .card-title-sm, .profile-panel-title, .search-surface-title) {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

:where(
  .home-hero-kicker,
  .search-hero-kicker,
  .chat-hero-kicker,
  .create-product-kicker,
  .checkout-hero-kicker,
  .checkout-payment-kicker,
  .report-kicker,
  .legal-kicker
) {
  color: var(--brand-blue-strong);
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* Consistent page introductions. The bespoke home and legal hub heroes stay unique. */
:where(
  .search-hero,
  .chat-hero,
  .create-product-hero,
  .checkout-hero,
  .profile-hero,
  .legal-doc-hero,
  .report-hero,
  .dsa-hero,
  .admin-header
) {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 92% 8%, rgba(49, 94, 251, 0.14), transparent 30%),
    var(--hero-surface);
  box-shadow: var(--shadow-card);
}

:where(
  .search-hero,
  .chat-hero,
  .create-product-hero,
  .checkout-hero,
  .profile-hero,
  .legal-doc-hero,
  .report-hero,
  .dsa-hero,
  .admin-header
)::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: clamp(120px, 18vw, 240px);
  aspect-ratio: 1;
  top: -48%;
  right: -3%;
  border: clamp(18px, 3vw, 42px) solid rgba(49, 94, 251, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.search-hero,
.chat-hero,
.create-product-hero,
.checkout-hero,
.profile-hero,
.report-hero,
.admin-header {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* One shared glass surface for functional content. */
:where(
  .card,
  .auth-card,
  .verify-card,
  .search-filters-card,
  .chat-sidebar-card,
  .chat-main-card,
  .create-product-card,
  .create-product-side-card,
  .checkout-summary-card,
  .checkout-payment-card,
  .profile-content,
  .profile-main-card,
  .seller-layout > .card,
  .report-card,
  .report-side-card,
  .legal-doc-card,
  .legal-article-card,
  .legal-toc-card,
  .dsa-panel,
  .admin-section-card,
  .success-card,
  .offer-modal,
  .confirm-modal,
  .toast
) {
  border-color: var(--surface-border);
  background: var(--surface-panel);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px) saturate(1.08);
}

:where(
  .card,
  .auth-card,
  .verify-card,
  .search-filters-card,
  .chat-sidebar-card,
  .chat-main-card,
  .create-product-card,
  .create-product-side-card,
  .checkout-summary-card,
  .checkout-payment-card,
  .profile-content,
  .seller-layout > .card,
  .report-card,
  .report-side-card,
  .legal-doc-card,
  .legal-article-card,
  .legal-toc-card,
  .dsa-panel,
  .admin-section-card,
  .success-card
) {
  border-radius: var(--radius-lg);
}

/* Actions look and behave the same everywhere. */
.btn {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-weight: 750;
  letter-spacing: -0.018em;
}

.btn-dark,
.btn-accent {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #0b1b3f 0%, #2048d8 100%);
  box-shadow:
    0 12px 26px rgba(32, 72, 216, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-dark:hover,
.btn-accent:hover {
  color: #fff;
  background: linear-gradient(135deg, #102858 0%, #315efb 100%);
  box-shadow:
    0 16px 34px rgba(32, 72, 216, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-light {
  color: var(--brand-navy);
  border: 1px solid var(--surface-border);
  background: var(--surface-highlight);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-light:hover {
  border-color: rgba(49, 94, 251, 0.26);
  background: var(--brand-blue-pale);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

/* Forms share one calm, high-contrast control treatment. */
:where(input, textarea, select):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']) {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

:where(input, textarea, select):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):hover {
  border-color: rgba(49, 94, 251, 0.22);
}

:where(input, textarea, select):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus {
  border-color: rgba(49, 94, 251, 0.62);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 4px rgba(49, 94, 251, 0.12);
}

:where(label, legend) {
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* Repeated compact surfaces and navigation states. */
:where(
  .profile-tab-btn,
  .search-category-option,
  .create-product-provider-card,
  .create-product-parcel-preset-card,
  .checkout-provider-card,
  .legal-action-card,
  .seller-stat,
  .product-meta-card
) {
  border-color: var(--surface-border);
  background: var(--surface-highlight);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

:where(
  .profile-tab-btn,
  .search-category-option,
  .create-product-provider-card,
  .create-product-parcel-preset-card,
  .checkout-provider-card,
  .legal-action-card
):hover {
  border-color: rgba(49, 94, 251, 0.26);
  background: var(--brand-blue-pale);
  transform: translateY(-1px);
}

:where(.profile-tab-btn.active, .profile-tab-btn.is-active) {
  color: var(--brand-blue-strong);
  border-color: rgba(49, 94, 251, 0.22);
  background: var(--brand-blue-soft);
}

:where(.badge, [class*='-chip'], [class*='-pill']) {
  letter-spacing: -0.008em;
}

/* Product cards retain their compact layout but receive the same material. */
:where(.product-card, .seller-product-card, .search-product-card) {
  border-color: var(--surface-border);
  background: var(--surface-panel);
  box-shadow: var(--shadow-card);
}

:where(.product-card, .seller-product-card, .search-product-card):hover {
  border-color: rgba(49, 94, 251, 0.24);
  box-shadow: var(--shadow-card-hover);
}

:where(.product-title, .seller-product-card .product-title) {
  font-weight: 750;
  letter-spacing: -0.025em;
}

:where(.price, .product-detail-price, .checkout-price, .success-order-total) {
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Overlays use a shared floating-sheet shape and predictable mobile spacing. */
:where(.offer-modal, .confirm-modal) {
  width: min(620px, calc(100vw - 24px));
  max-height: min(88vh, 860px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
}

:where(.offer-modal-overlay, .confirm-overlay) {
  padding: 12px;
  background: color-mix(in srgb, var(--overlay) 90%, transparent);
  backdrop-filter: blur(12px);
}

:where(.profile-modal-title, .confirm-title, .toast-title) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* Tables and status areas remain readable at high data density. */
.table th {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.065em;
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--brand-blue-pale);
}

:where(.empty-box, .loading-box, .seller-empty-note) {
  border-color: rgba(49, 94, 251, 0.18);
  background:
    radial-gradient(circle at top, rgba(49, 94, 251, 0.08), transparent 48%),
    var(--surface-panel);
}

/* Authentication is intentionally distraction-free, but visibly Baggy. */
.auth-page,
.verify-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(49, 94, 251, 0.14), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(111, 152, 255, 0.12), transparent 28%),
    var(--bg);
}

.auth-page::before,
.verify-page::before {
  content: 'Baggy';
  position: absolute;
  top: clamp(18px, 4vw, 34px);
  left: clamp(18px, 4vw, 42px);
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth-card,
.verify-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
}

.auth-card h1 {
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.05em;
}

/* Use a real arrow glyph instead of the old text fallback. */
.legal-action-card strong::after {
  content: ' →';
}

body.dark :where(.btn-light, button.btn-light, a.btn-light) {
  color: #f8fafc !important;
  border-color: var(--surface-border) !important;
  background: var(--surface-highlight) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark :where(.btn-light, button.btn-light, a.btn-light):hover {
  color: #fff !important;
  border-color: rgba(139, 183, 255, 0.34) !important;
  background: var(--brand-blue-soft) !important;
}

body.dark :where(.price, .product-detail-price, .checkout-price, .success-order-total),
body.dark .auth-card h1,
body.dark .auth-page::before,
body.dark .verify-page::before {
  color: var(--text);
}

body.dark :where(input, textarea, select):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']) {
  border-color: var(--surface-border);
  background: var(--surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark :where(
  .profile-tab-btn,
  .search-category-option,
  .create-product-provider-card,
  .create-product-parcel-preset-card,
  .checkout-provider-card,
  .legal-action-card,
  .seller-stat,
  .product-meta-card
) {
  border-color: var(--surface-border);
  background: var(--surface-highlight);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Dense operational cards must stay inside the dark material system. */
body.dark .admin-ops-health-card {
  color: var(--text);
  border-color: var(--surface-border);
  background:
    radial-gradient(circle at 10% 0%, rgba(96, 165, 250, 0.12), transparent 34%),
    var(--surface-panel);
  box-shadow: var(--shadow-card);
}

body.dark .admin-ops-health-pill,
body.dark .admin-ops-payment-card {
  border-color: var(--surface-border);
  background: var(--surface-highlight);
}

body.dark .admin-ops-health-pill.is-ok,
body.dark .admin-ops-payment-card.is-ok {
  border-color: rgba(139, 183, 255, 0.22);
  background: rgba(96, 165, 250, 0.1);
}

body.dark .admin-ops-health-pill.is-warn,
body.dark .admin-ops-payment-card.is-warn {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.08);
}

body.dark .admin-ops-health-pill.is-danger,
body.dark .admin-ops-payment-card.is-danger {
  border-color: rgba(251, 113, 133, 0.24);
  background: rgba(251, 113, 133, 0.08);
}

body.dark .admin-ops-health-copy strong,
body.dark .admin-ops-health-pill strong,
body.dark .admin-ops-payment-card strong {
  color: var(--text);
}

body.dark .admin-ops-health-copy span,
body.dark .admin-ops-health-copy p,
body.dark .admin-ops-health-pill span,
body.dark .admin-ops-health-pill small,
body.dark .admin-ops-payment-card span,
body.dark .admin-ops-payment-card p,
body.dark .admin-ops-payment-card small {
  color: var(--muted);
}

@media (max-width: 700px) {
  :where(
    .search-hero,
    .chat-hero,
    .create-product-hero,
    .checkout-hero,
    .profile-hero,
    .legal-doc-hero,
    .report-hero,
    .dsa-hero,
    .admin-header
  ) {
    padding: 20px;
    border-radius: var(--radius-lg);
  }

  :where(.offer-modal, .confirm-modal) {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - 16px - var(--mobile-nav-height));
    border-radius: var(--radius-lg);
  }

  .auth-page::before,
  .verify-page::before {
    top: 14px;
    left: 18px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(.btn, .profile-tab-btn, .create-product-provider-card, .legal-action-card, .product-card) {
    transition:
      transform var(--transition-standard),
      border-color var(--transition-fast),
      background var(--transition-fast),
      box-shadow var(--transition-standard);
  }
}

@media (forced-colors: active) {
  :where(.card, .auth-card, .verify-card, .offer-modal, .confirm-modal),
  :where(.btn, input, textarea, select) {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}