@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(--moonarrow-radius-card, 4px);
  overflow-wrap: anywhere;
}
.order-owner-notice-danger {
  color: var(--moonarrow-color-danger);
  background: var(--moonarrow-color-notice-danger-surface);
}
.order-owner-notice-warning {
  color: var(--moonarrow-color-notice-warning-ink);
  background: var(--moonarrow-color-notice-warning-surface);
}
.order-owner-notice-info {
  color: var(--moonarrow-color-content-blue-dark);
  background: var(--moonarrow-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(--moonarrow-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(--moonarrow-button-height);
  padding: 0.75rem 1.25rem;
  border-radius: var(--moonarrow-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(--moonarrow-color-brand-blue);
  color: #fff;
  background: var(--moonarrow-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(--moonarrow-color-brand-blue-dark);
  color: #fff;
  background: var(--moonarrow-color-brand-blue-dark);
  box-shadow: var(--moonarrow-focus-ring);
}

:is(.storefront-surface, .admin-surface) :is(.btn-secondary, .btn-light) {
  border: 1px solid var(--moonarrow-control-border);
  color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-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(--moonarrow-control-border-hover);
  color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-color-storefront-soft);
  box-shadow: var(--moonarrow-focus-ring);
}

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

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

/* Storefront taps never flash the mobile browser's default highlight; :focus-visible styles mark keyboard focus. */
.storefront-surface :is(a, button, label, summary, [role="button"], input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

/* Outlined latin display type (storefront decoration, always aria-hidden): a hairline stroke with no fill.
   Consumers set only size and placement; --ink switches the stroke from gold to navy. */
.storefront-surface .outline-display {
  color: transparent;
  -webkit-text-stroke: 1px var(--moonarrow-color-outline-stroke);
  font-family: var(--moonarrow-font-latin);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.storefront-surface .outline-display--ink {
  -webkit-text-stroke-color: var(--moonarrow-color-outline-stroke-ink);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Storefront performance buttons: a square edge, a tracked label and a fill that sweeps in from the left
   (gold over navy for primary, navy over paper for outline). The sweep timing lives in moonarrow-motion.css. */
.storefront-surface :is(.btn-primary, .btn-outline-primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  font-weight: 800;
  letter-spacing: var(--moonarrow-tracking-action);
}

.storefront-surface :is(.btn-primary, .btn-outline-primary)::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}

.storefront-surface .btn-primary {
  border-color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-color-brand-ink);
}

.storefront-surface .btn-primary::before {
  background: var(--moonarrow-color-gold-text);
}

.storefront-surface .btn-outline-primary {
  border-color: var(--moonarrow-color-brand-ink);
  color: var(--moonarrow-color-brand-ink);
}

.storefront-surface .btn-outline-primary::before {
  background: var(--moonarrow-color-brand-ink);
}

.storefront-surface .btn-primary:not(:disabled, .disabled):is(:hover, :focus-visible) {
  border-color: var(--moonarrow-color-gold-text);
  background: var(--moonarrow-color-brand-ink);
}

.storefront-surface .btn-outline-primary:not(:disabled, .disabled):is(:hover, :focus-visible) {
  border-color: var(--moonarrow-color-brand-ink);
  color: #fff;
  background: transparent;
}

.storefront-surface :is(.btn-primary, .btn-outline-primary):not(:disabled, .disabled):is(:hover, :focus-visible)::before {
  transform: scaleX(1);
  transform-origin: left center;
}

:is(.storefront-surface, .admin-surface) .btn-danger {
  border-color: var(--moonarrow-color-danger);
  color: #fff;
  background: var(--moonarrow-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(--moonarrow-field-height);
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--moonarrow-control-border);
  border-radius: var(--moonarrow-control-radius);
  color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-color-paper);
  font: inherit;
  font-size: max(0.9375rem, 15px);
  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(--moonarrow-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(--moonarrow-color-admin-muted);
  background: var(--moonarrow-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(--moonarrow-color-brand-blue);
  outline: 0;
  box-shadow: var(--moonarrow-focus-ring);
}

/* Underlined field variant: a storefront container opts in with .field-line (inline toolbars, tablet up).
   Height, type and placeholder stay shared; only the frame becomes one ink underline. */
@media (min-width: 768px) {
  .storefront-surface .field-line :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) {
    padding-inline: 0;
    border-width: 0 0 1px;
    border-color: var(--moonarrow-color-ink-control-line);
    border-radius: 0;
    background-color: transparent;
    font-weight: 700;
  }

  .storefront-surface .field-line :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select):focus {
    border-color: var(--moonarrow-color-brand-ink);
    box-shadow: 0 1px 0 var(--moonarrow-color-brand-ink);
  }
}

:is(.storefront-surface, .admin-surface) :is(input, select, textarea).input-validation-error {
  border-color: var(--moonarrow-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(--moonarrow-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(--moonarrow-control-radius) - 1px);
  color: var(--moonarrow-color-brand-ink);
  background: var(--moonarrow-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(--moonarrow-color-danger) !important;
  font-size: max(0.875rem, 14px);
}

:is(.storefront-surface, .admin-surface) .validation-summary-valid {
  display: none;
}

/* Inline "go further" link: one underline drawn by text-decoration only (no border, no pseudo-element). */
.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  color: var(--moonarrow-color-brand-ink);
  font-size: var(--moonarrow-type-control);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: var(--moonarrow-color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--moonarrow-color-brand-blue-dark);
  text-decoration-color: currentColor;
}

.text-link:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: 3px;
}

/* 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(--moonarrow-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(--moonarrow-color-storefront-muted);
  font-size: var(--moonarrow-type-metadata);
  line-height: 1.5;
}

.horizontal-scroll-hint-icon {
  background: linear-gradient(currentColor, currentColor) center / 1.15rem 2px no-repeat;
  color: var(--moonarrow-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(--moonarrow-space-2);
    margin-top: var(--moonarrow-space-2);
  }
}

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