/*
 * V1838 user-facing commerce/business UX polish.
 * Scoped adoption layer for commerce and operational pages.
 * It intentionally preserves behavior, form names, data hooks and backend semantics.
 */

.commerce-ux-polish,
.diamonds-commerce-polish {
  --ar-commerce-bg: var(--ar-page-bg, var(--ar-page-bg-commerce, #f6f9fd));
  --ar-commerce-surface: var(--ar-ds-color-surface, #ffffff);
  --ar-commerce-soft: var(--ar-ds-color-surface-soft, #f7faff);
  --ar-commerce-border: var(--ar-ds-color-border, #dbe5f2);
  --ar-commerce-brand: var(--ar-ds-color-brand, #003986);
  --ar-commerce-brand-strong: var(--ar-ds-color-brand-strong, #002056);
  --ar-commerce-muted: var(--ar-ds-color-muted, #66778f);
  --ar-commerce-shadow: var(--ar-ds-shadow-card, 0 18px 42px rgba(18, 51, 88, 0.08));
  --ar-commerce-radius-lg: var(--ar-ds-radius-lg, 18px);
  --ar-commerce-radius-md: var(--ar-ds-radius-md, 12px);
  color: var(--ar-ds-color-ink, #102033);
  font-family: var(--ar-ds-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.commerce-ux-polish.product-listing-page,
.commerce-ux-polish.single-product-page,
.commerce-ux-polish.cart-workspace-body,
.commerce-ux-polish.order-dashboard-page,
.commerce-ux-polish.my-orders-workspace,
.commerce-ux-polish.order-detail-workspace,
.commerce-ux-polish.service-requests-body {
  background: var(--ar-commerce-bg);
}

/* Product listing/detail */
.commerce-ux-polish .filter-main-box,
.commerce-ux-polish .product-filter .filter-left-box,
.commerce-ux-polish .single-product-page-panel,
.commerce-ux-polish .product-detail-summary,
.commerce-ux-polish .quantity-box,
.commerce-ux-polish .similar-products a,
.commerce-ux-polish .swiper-container.big-item-swiper,
.commerce-ux-polish .left-swiper-shell {
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-lg);
}

.commerce-ux-polish .filter-main-box,
.commerce-ux-polish .swiper-container.big-item-swiper,
.commerce-ux-polish .left-swiper-shell,
.commerce-ux-polish .quantity-box {
  background: var(--ar-commerce-surface);
  box-shadow: var(--ar-commerce-shadow);
}

.commerce-ux-polish .grid-title,
.commerce-ux-polish .product-detail-title,
.commerce-ux-polish .cart-page-title,
.commerce-ux-polish .order-dashboard-title,
.commerce-ux-polish .service-requests-page-title {
  color: var(--ar-ds-color-ink, #102033);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.commerce-ux-polish .gray-box,
.commerce-ux-polish .filter-box .h-40,
.commerce-ux-polish .variant-selected,
.commerce-ux-polish .similar-products a,
.diamonds-commerce-polish .shape-tile,
.diamonds-commerce-polish .search-filter-chip {
  border-radius: var(--ar-ds-radius-pill, 999px);
}

.commerce-ux-polish .btn-white,
.commerce-ux-polish .custom-btn,
.commerce-ux-polish .pay-btn,
.commerce-ux-polish .cart-action-link,
.commerce-ux-polish .cart-summary-action,
.commerce-ux-polish .order-detail-action,
.commerce-ux-polish .service-request-primary-button,
.commerce-ux-polish .service-my-requests-dashboard-button {
  align-items: center;
  border-radius: var(--ar-ds-radius-pill, 999px);
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.commerce-ux-polish .btn-white:focus-visible,
.commerce-ux-polish .custom-btn:focus-visible,
.commerce-ux-polish .pay-btn:focus-visible,
.commerce-ux-polish .cart-action-link:focus-visible,
.commerce-ux-polish .cart-summary-action:focus-visible,
.commerce-ux-polish .order-detail-action:focus-visible,
.commerce-ux-polish .service-request-primary-button:focus-visible,
.commerce-ux-polish .service-my-requests-dashboard-button:focus-visible,
.diamonds-commerce-polish a:focus-visible,
.diamonds-commerce-polish button:focus-visible {
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

/* Diamond search/detail */
.diamonds-commerce-polish .filter-grid,
.diamonds-commerce-polish .search-builder-panel,
.diamonds-commerce-polish .diamond-results-toolbar,
.diamonds-commerce-polish .diamond-results-table-shell,
.diamonds-commerce-polish .diamond-mobile-card,
.diamonds-detail-page .diamond-storefront-card,
.diamonds-detail-page .detail-content-panel,
.diamonds-detail-page .detail-summary-panel {
  background: var(--ar-commerce-surface);
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-lg);
  box-shadow: var(--ar-commerce-shadow);
}

.diamonds-commerce-polish .table-responsive,
.commerce-ux-polish .table-responsive,
.commerce-ux-polish .service-my-requests-table-shell {
  border: 1px solid var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.diamonds-commerce-polish table,
.commerce-ux-polish .table,
.commerce-ux-polish .service-my-requests-table {
  color: var(--ar-ds-color-ink, #102033);
}

.diamonds-commerce-polish th,
.commerce-ux-polish .table th,
.commerce-ux-polish .service-my-requests-table th {
  background: var(--ar-commerce-soft);
  color: #334760;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Cart and checkout */
.commerce-ux-polish .cart-workspace-shell,
.commerce-ux-polish .cart-surface-card,
.commerce-ux-polish .cart-summary-card,
.commerce-ux-polish .cart-form-card,
.commerce-ux-polish .cart-line-item,
.commerce-ux-polish .cart-recommendation-card,
.commerce-ux-polish .cart-empty-state {
  background: var(--ar-commerce-surface);
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-lg);
  box-shadow: var(--ar-commerce-shadow);
}

.commerce-ux-polish .cart-inline-choice,
.commerce-ux-polish .shipping-address-card,
.commerce-ux-polish .shipping-status-card,
.commerce-ux-polish .cart-total-row,
.commerce-ux-polish .cart-summary-inline-note {
  border-radius: var(--ar-commerce-radius-md);
}

.commerce-ux-polish .cart-form-card input,
.commerce-ux-polish .cart-form-card select,
.commerce-ux-polish .cart-form-card textarea,
.commerce-ux-polish .service-request-control {
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-ds-radius-sm, 8px);
}

.commerce-ux-polish .cart-form-card input:focus,
.commerce-ux-polish .cart-form-card select:focus,
.commerce-ux-polish .cart-form-card textarea:focus,
.commerce-ux-polish .service-request-control:focus {
  border-color: var(--ar-commerce-brand);
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

/* Orders, notifications and service requests */
.commerce-ux-polish .order-dashboard-card,
.commerce-ux-polish .order-detail-card,
.commerce-ux-polish .service-request-panel,
.commerce-ux-polish .service-my-requests-detail-card,
.commerce-ux-polish .service-my-requests-details-panel,
.commerce-ux-polish .service-my-requests-preview-card {
  background: var(--ar-commerce-surface);
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-lg);
  box-shadow: var(--ar-commerce-shadow);
}

.commerce-ux-polish .order-status-pill__label,
.commerce-ux-polish .service-desk-badge,
.commerce-ux-polish .service-my-requests-chip,
.commerce-ux-polish .service-my-requests-status-pill {
  border-radius: var(--ar-ds-radius-pill, 999px);
}

.commerce-ux-polish .service-my-requests-tabs,
.commerce-ux-polish .service-my-requests-search__field {
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-md);
}

.commerce-ux-polish .service-request-empty-state,
.commerce-ux-polish .cart-empty-state {
  background: var(--ar-commerce-soft);
  border: 1px dashed var(--ar-ds-color-border-strong, #c6d7ec);
  border-radius: var(--ar-commerce-radius-lg);
}

@media (max-width: 991.98px) {
  .commerce-ux-polish.product-listing-page .product-filter,
  .diamonds-commerce-polish .filter-grid {
    margin-bottom: var(--ar-ds-space-5, 20px);
  }

  .commerce-ux-polish .cart-page-header__inner,
  .commerce-ux-polish .service-my-requests-hero {
    gap: var(--ar-ds-space-4, 16px);
  }
}

@media (max-width: 640px) {
  .commerce-ux-polish .cart-surface-card,
  .commerce-ux-polish .cart-summary-card,
  .commerce-ux-polish .cart-form-card,
  .commerce-ux-polish .order-dashboard-card,
  .commerce-ux-polish .service-request-panel,
  .diamonds-commerce-polish .filter-grid,
  .diamonds-commerce-polish .diamond-mobile-card {
    border-radius: var(--ar-ds-radius-md, 12px);
  }

  .commerce-ux-polish .pay-btn,
  .commerce-ux-polish .custom-btn,
  .commerce-ux-polish .service-request-primary-button {
    width: 100%;
  }
}