/* ==================================================
   INESS Beauty — shared components
   ================================================== */

.iness-card {
  background: var(--iness-paper);
  border: 1px solid var(--iness-line);
  border-radius: var(--iness-radius-lg);
  box-shadow: var(--iness-shadow-card);
}

.iness-button {
  min-height: 52px;
  border: 0;
  border-radius: var(--iness-radius-md);
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    transform .13s ease,
    opacity .15s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.iness-button:active:not(:disabled) {
  transform: scale(.97);
}

.iness-button:disabled {
  opacity: .6;
  cursor: default;
}

.iness-button--primary {
  background: var(--iness-dark);
  color: #fff;
}

.iness-button--secondary {
  background: var(--iness-soft);
  color: var(--iness-text);
}

.iness-button--ghost {
  background: transparent;
  color: var(--iness-text);
  border: 1px solid var(--iness-line);
}

.iness-field {
  width: 100%;
  min-height: 50px;

  border: 1px solid var(--iness-line);
  border-radius: var(--iness-radius-sm);
  outline: none;

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

  padding: 0 14px;
  font: inherit;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

textarea.iness-field {
  min-height: 88px;
  padding-top: 13px;
  padding-bottom: 13px;
  resize: vertical;
}

.iness-field:focus {
  border-color: #cfbba6;
  box-shadow: 0 0 0 3px rgba(161,122,82,.08);
}

.iness-chip {
  min-height: 36px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

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

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

  font-size: 13px;
  font-weight: 650;
}

.iness-chip.is-active,
.iness-chip[aria-selected="true"] {
  background: var(--iness-dark);
  color: #fff;
  border-color: var(--iness-dark);
}

.iness-sheet {
  background: var(--iness-bg);
  border-radius: var(--iness-radius-xl) var(--iness-radius-xl) 0 0;
  box-shadow: var(--iness-shadow-sheet);
}

.iness-sheet-handle {
  width: 44px;
  height: 4px;
  margin: 4px auto 18px;

  border-radius: var(--iness-radius-pill);
  background: #ded7cf;
}

.iness-heading {
  font-family: var(--iness-font-display);
  font-weight: 400;
  letter-spacing: -.02em;
}

.iness-muted {
  color: var(--iness-muted);
}

/* ==================================================
   Composite field
   Prefix / suffix + editable control
   ================================================== */

.iness-field-group {
  width: 100%;
  min-height: 50px;

  display: flex;
  align-items: center;

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

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

  overflow: hidden;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

.iness-field-group:focus-within {
  border-color: #cfbba6;
  box-shadow: 0 0 0 3px rgba(161,122,82,.08);
}

.iness-field-group__prefix,
.iness-field-group__suffix {
  flex: 0 0 auto;
  white-space: nowrap;
}

.iness-field-group__control {
  flex: 1;
  min-width: 0;

  border: 0;
  outline: none;

  background: transparent;
  color: inherit;

  font: inherit;
}

/* ==================================================
   Selectable choice
   Dates / times / option tiles
   ================================================== */

.iness-choice {
  width: 100%;

  border: 1px solid var(--iness-line);
  outline: none;

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

  font: inherit;
  cursor: pointer;

  transition:
    transform .13s ease,
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.iness-choice:active {
  transform: scale(.98);
}

.iness-choice.is-selected,
.iness-choice.selected,
.iness-choice[aria-selected="true"] {
  border-color: var(--iness-dark);
  background: var(--iness-dark);
  color: #fff;
}