/* ==================================================
   INESS Beauty — shared states
   ================================================== */

.iness-state {
  padding: 24px 18px;
  text-align: center;
}

.iness-state__icon {
  width: 58px;
  height: 58px;

  margin: 0 auto 14px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--iness-soft);
  color: var(--iness-text);

  font-size: 24px;
}

.iness-state__title {
  margin: 0;

  font-family: var(--iness-font-display);
  font-size: 24px;
  font-weight: 400;
}

.iness-state__copy {
  margin: 8px auto 0;
  max-width: 420px;

  color: var(--iness-muted);

  font-size: 14px;
  line-height: 1.5;
}

.iness-state--success .iness-state__icon {
  background: var(--iness-dark);
  color: #fff;
}

.iness-state--error .iness-state__icon {
  background: #f3e5e1;
  color: #6f3d34;
}

.iness-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.iness-spinner {
  width: 17px;
  height: 17px;

  border: 2px solid rgba(127,117,108,.28);
  border-top-color: currentColor;
  border-radius: 50%;

  animation: inessSpin .7s linear infinite;
}

@keyframes inessSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================================================
   Notice / passive loading
   ================================================== */

.iness-notice {
  padding: 16px 18px;

  border: 1px solid var(--iness-line);
  border-radius: var(--iness-radius-md);

  background: var(--iness-paper);
  color: var(--iness-muted);

  font-size: 14px;
  line-height: 1.5;
}

.iness-loading-block {
  padding: 28px 16px;

  text-align: center;
  color: var(--iness-muted);

  font-size: 14px;
  line-height: 1.5;
}


/* INESS ASYNC STATES 20260916 */

.iness-async-state {
  width: 100%;
}

.iness-async-state[aria-busy="true"] {
  cursor: progress;
}

.iness-skeleton {
  position: relative;
  overflow: hidden;
  display: block;
  background:
    linear-gradient(
      110deg,
      rgba(31, 25, 23, .055) 8%,
      rgba(31, 25, 23, .095) 18%,
      rgba(31, 25, 23, .055) 33%
    );
  background-size: 220% 100%;
  animation:
    iness-skeleton-shimmer
    1.35s
    linear
    infinite;
}

.iness-skeleton--line {
  height: 12px;
  border-radius: 999px;
}

.iness-skeleton--line-sm {
  width: 42%;
}

.iness-skeleton--line-md {
  width: 68%;
}

.iness-skeleton--line-lg {
  width: 88%;
}

.iness-skeleton-stack {
  display: grid;
  gap: 10px;
  width: 100%;
}

.iness-skeleton-card {
  display: grid;
  gap: 12px;
  min-height: 112px;
  padding: 18px;
  border-radius: 22px;
}

.iness-skeleton-card--compact {
  min-height: 82px;
}

.iness-skeleton-featured {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 132px;
  padding: 14px;
  border-radius: 24px;
}

.iness-skeleton-featured__media {
  width: 92px;
  height: 104px;
  border-radius: 18px;
}

.iness-skeleton-featured__copy {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.iness-skeleton-booking {
  min-height: 156px;
  padding: 18px;
  border-radius: 24px;
}

.iness-skeleton-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iness-skeleton-chip {
  width: 72px;
  height: 38px;
  border-radius: 999px;
}

@keyframes iness-skeleton-shimmer {
  to {
    background-position-x: -220%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iness-skeleton {
    animation: none;
    background:
      rgba(31, 25, 23, .065);
  }
}

/* INESS ASYNC GEOMETRY 20260916 */

.iness-async-region {
  position: relative;
  min-width: 0;
}

.iness-async-region--featured {
  min-height: 132px;
}

.iness-async-region--history {
  min-height: 174px;
}

.iness-async-region--booking {
  min-height: 156px;
}

.iness-async-region--slots {
  min-height: 38px;
}

.iness-async-fade {
  animation: iness-async-enter .18s ease-out both;
}

@keyframes iness-async-enter {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iness-async-fade {
    animation: none;
  }
}