@charset "UTF-8";

/* Owner handling results share one semantic notice style on order surfaces. */
.order-owner-notice {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid currentColor;
  border-inline-start-width: 5px;
  border-radius: var(--bgvp-radius-card, 4px);
  overflow-wrap: anywhere;
}
.order-owner-notice-danger {
  color: var(--bgvp-color-danger);
  background: var(--bgvp-color-notice-danger-surface);
}
.order-owner-notice-warning {
  color: var(--bgvp-color-notice-warning-ink);
  background: var(--bgvp-color-notice-warning-surface);
}
.order-owner-notice-info {
  color: var(--bgvp-color-content-blue-dark);
  background: var(--bgvp-color-notice-info-surface);
}
.order-owner-notice h2,
.order-owner-notice h3,
.order-owner-notice p {
  color: inherit;
}
.order-owner-notice > :last-child {
  margin-bottom: 0;
}
.order-funds-summary {
  margin-top: 1rem;
  padding: 1rem;
}
.order-handling-badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: var(--bgvp-radius-card, 4px);
  font-weight: 700;
}

/* Shared controls for every storefront and administration page. */
:is(.storefront-surface, .admin-surface) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--bgvp-button-height);
  padding: 0.75rem 1.25rem;
  border-radius: var(--bgvp-control-radius);
  font-size: max(0.9375rem, 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

:is(.storefront-surface, .admin-surface) .btn:hover {
  transform: none;
}

:is(.storefront-surface, .admin-surface) .btn-primary {
  border-color: var(--bgvp-color-brand-blue);
  color: #fff;
  background: var(--bgvp-color-brand-blue);
  box-shadow: none;
}

:is(.storefront-surface, .admin-surface) .btn-primary:hover,
:is(.storefront-surface, .admin-surface) .btn-primary:focus-visible {
  border-color: var(--bgvp-color-brand-blue-dark);
  color: #fff;
  background: var(--bgvp-color-brand-blue-dark);
  box-shadow: var(--bgvp-focus-ring);
}

:is(.storefront-surface, .admin-surface) :is(.btn-secondary, .btn-light) {
  border: 1px solid var(--bgvp-control-border);
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-paper);
  box-shadow: none;
}

:is(.storefront-surface, .admin-surface) :is(.btn-secondary, .btn-light):hover,
:is(.storefront-surface, .admin-surface) :is(.btn-secondary, .btn-light):focus-visible {
  border-color: var(--bgvp-control-border-hover);
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-storefront-soft);
  box-shadow: var(--bgvp-focus-ring);
}

:is(.storefront-surface, .admin-surface) .btn-outline-primary {
  border: 1px solid var(--bgvp-color-brand-blue);
  color: var(--bgvp-color-brand-blue);
  background: var(--bgvp-color-paper);
}

:is(.storefront-surface, .admin-surface) .btn-outline-primary:hover,
:is(.storefront-surface, .admin-surface) .btn-outline-primary:focus-visible {
  border-color: var(--bgvp-color-brand-blue);
  color: #fff;
  background: var(--bgvp-color-brand-blue);
  box-shadow: var(--bgvp-focus-ring);
}

:is(.storefront-surface, .admin-surface) .btn-danger {
  border-color: var(--bgvp-color-danger);
  color: #fff;
  background: var(--bgvp-color-danger);
  box-shadow: none;
}

:is(.storefront-surface, .admin-surface) .btn-danger:hover,
:is(.storefront-surface, .admin-surface) .btn-danger:focus-visible {
  border-color: #7d2630;
  color: #fff;
  background: #7d2630;
  box-shadow: 0 0 0 3px rgba(151, 49, 59, 0.14);
}

:is(.storefront-surface, .admin-surface) .btn:disabled,
:is(.storefront-surface, .admin-surface) .btn.disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

/* Quantity steppers own their inner field: it sits flush between the two buttons, never as a second framed box. */
:is(.storefront-surface, .admin-surface)
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([data-quantity-stepper] *),
:is(.storefront-surface, .admin-surface) select,
:is(.storefront-surface, .admin-surface) textarea,
:is(.storefront-surface, .admin-surface) .form-control,
:is(.storefront-surface, .admin-surface) .form-select {
  width: 100%;
  min-height: var(--bgvp-field-height);
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--bgvp-control-border);
  border-radius: var(--bgvp-control-radius);
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-paper);
  font: inherit;
  /* 16px keeps iOS from zooming the page when a field gains focus. */
  font-size: max(1rem, 16px);
  line-height: 1.5;
  box-shadow: none;
}

:is(.storefront-surface, .admin-surface) textarea,
:is(.storefront-surface, .admin-surface) textarea.form-control {
  min-height: 120px;
  line-height: 1.6;
  resize: vertical;
}

:is(.storefront-surface, .admin-surface) input::placeholder,
:is(.storefront-surface, .admin-surface) textarea::placeholder {
  color: var(--bgvp-control-placeholder);
  opacity: 1;
}

:is(.storefront-surface, .admin-surface) input[readonly],
:is(.storefront-surface, .admin-surface) textarea[readonly],
:is(.storefront-surface, .admin-surface) select:disabled {
  color: var(--bgvp-color-admin-muted);
  background: var(--bgvp-control-readonly);
}

:is(.storefront-surface, .admin-surface) input:focus,
:is(.storefront-surface, .admin-surface) select:focus,
:is(.storefront-surface, .admin-surface) textarea:focus,
:is(.storefront-surface, .admin-surface) .form-control:focus,
:is(.storefront-surface, .admin-surface) .form-select:focus {
  border-color: var(--bgvp-color-brand-blue);
  outline: 0;
  box-shadow: var(--bgvp-focus-ring);
}

:is(.storefront-surface, .admin-surface) :is(input, select, textarea).input-validation-error {
  border-color: var(--bgvp-color-danger) !important;
  background: #fff8f7 !important;
  box-shadow: 0 0 0 2px rgba(151, 49, 59, 0.12) !important;
}

:is(.storefront-surface, .admin-surface) :is(input[type="checkbox"], input[type="radio"], .form-check-input) {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  padding: 0;
  accent-color: var(--bgvp-color-brand-blue);
}

:is(.storefront-surface, .admin-surface) input[type="file"] {
  padding: 0.36rem;
}

:is(.storefront-surface, .admin-surface) input[type="file"]::file-selector-button {
  min-height: 36px;
  margin: -0.2rem 0.7rem -0.2rem -0.2rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: calc(var(--bgvp-control-radius) - 1px);
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-storefront-soft);
  cursor: pointer;
  font-size: max(0.875rem, 14px);
}

:is(.storefront-surface, .admin-surface) label:not(.form-check-label):not(.btn) {
  margin-bottom: 0.42rem;
  color: #26364c;
  font-size: max(0.875rem, 14px);
  font-weight: 700;
}

:is(.storefront-surface, .admin-surface) :is(.text-danger, .field-validation-error) {
  display: block;
  margin-top: 0.35rem;
  color: var(--bgvp-color-danger) !important;
  font-size: max(0.875rem, 14px);
}

/* Compact operational controls keep a 44px touch target without changing primary action sizing. */
:is(.storefront-surface, .admin-surface)
  :is(.btn-sm, .table-action-link, .table-action-button, .product-quantity-button, .cart-quantity-button, .nav-button) {
  font-size: max(0.875rem, 14px);
  min-height: var(--bgvp-compact-control-height);
  padding: 0.5rem 0.75rem;
}

/* Table links need to outrank the legacy generic data-table anchor typography. */
.admin-surface :is(.data-table, .admin-card-table) :is(.table-action-link, .table-action-button) {
  font-size: max(0.875rem, 14px);
  min-height: 44px;
}

.horizontal-scroll-hint {
  display: none;
  margin: 0;
  color: var(--bgvp-color-storefront-muted);
  font-size: var(--bgvp-type-metadata);
  line-height: 1.5;
}

.horizontal-scroll-hint-icon {
  background: linear-gradient(currentColor, currentColor) center / 1.15rem 2px no-repeat;
  color: var(--bgvp-color-brand-blue);
  display: inline-block;
  flex: 0 0 1.65rem;
  height: 1rem;
  position: relative;
  width: 1.65rem;
}

.horizontal-scroll-hint-icon::before,
.horizontal-scroll-hint-icon::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
  height: 0.45rem;
  position: absolute;
  top: 50%;
  width: 0.45rem;
}

.horizontal-scroll-hint-icon::before {
  left: 0.05rem;
  transform: translateY(-50%) rotate(-135deg);
}

.horizontal-scroll-hint-icon::after {
  right: 0.05rem;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 767.98px) {
  .horizontal-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--bgvp-space-2);
    margin-top: var(--bgvp-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizontal-scroll-hint-icon {
    animation: none;
  }
}