/* Shared soft surface helper.
   This replaces the last live rule from /public/css/refactor_protect.css. */
.section-soft {
  background: var(--bs-white, #fff);
}

.h-display {
  font-family: var(--font-display, "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.text-gradient {
  color: var(--ink);
  -webkit-background-clip: initial;
  background-clip: initial;
}

html {
  background-color: var(--bg, #F7F5F2);
}

body {
  background-color: transparent;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/patterns/pattern-white.png');
  background-repeat: repeat;
  background-size: var(--app-pattern-size);
  opacity: var(--pattern-opacity, 0.07);
  pointer-events: none;
  z-index: -1;
}

#app-wrapper {
  position: relative;
}

.alert-ok {
  background: color-mix(in srgb, var(--ok), white 92%);
  border: 1px solid color-mix(in srgb, var(--ok), white 70%);
  color: color-mix(in srgb, var(--ok), black 22%);
  border-radius: var(--fx-radius);
}

.alert-warn {
  background: color-mix(in srgb, var(--warn), white 94%);
  border: 1px solid color-mix(in srgb, var(--warn), white 74%);
  color: color-mix(in srgb, var(--warn), black 26%);
  border-radius: var(--fx-radius);
}

.alert-err {
  background: color-mix(in srgb, var(--err), white 94%);
  border: 1px solid color-mix(in srgb, var(--err), white 74%);
  color: color-mix(in srgb, var(--err), black 24%);
  border-radius: var(--fx-radius);
}

.sk-layout-wrapper {
  display: flex;
  min-height: var(--app-full-height);
}

.sk-layout-main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout-wrapper {
  display: flex;
  min-height: var(--app-full-height);
}

.admin-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#toastStackTR,
.app-toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: auto;
  top: auto;
  z-index: 1040;
  width: min(360px, calc(100vw - 48px));
  pointer-events: none;
}

#toastStackTR .toast,
.app-toast-container .toast {
  width: 100%;
  max-width: 360px;
  pointer-events: auto;
}

@media (max-width: 575.98px) {
  #toastStackTR,
  .app-toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
  }

  #toastStackTR .toast,
  .app-toast-container .toast {
    max-width: none;
  }
}

#toastContainer {
  z-index: 9999;
}

.toast-root {
  z-index: 1080;
}

.order-form span.status-danger {
  color: var(--err);
}

.order-form span.status-ok {
  color: var(--ok);
}

a {
  color: var(--bs-primary);
}

.invalid-feedback {
  font-size: var(--app-feedback-font-size);
}

.tooltip .tooltip-inner {
  font-size: var(--app-tooltip-font-size);
  padding: var(--app-tooltip-padding-y) var(--app-tooltip-padding-x);
  max-width: var(--app-tooltip-max-width);
  text-align: left;
}

.popover {
  --bs-popover-max-width: var(--app-popover-max-width);
}

:target {
  animation: anchor-hi 1.2s ease-in-out 1;
}

@keyframes anchor-hi {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.00); }
  30% { box-shadow: 0 0 0 .35rem rgba(37,99,235,.20); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,.00); }
}

.fav-bounce {
  animation: fav-bounce 420ms cubic-bezier(.28,.84,.42,1.1) 1;
}

@keyframes fav-bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}