/* Salon booking demo: service tiles, days row, time slots. Builds on industry.css. */
.dphone[data-salon] .prob { min-height: 52px; }
.dphone[data-salon] .prob[aria-pressed="true"] { background: var(--ink); color: var(--silk); border-color: var(--ink); }

.days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.days button, .slots button {
  min-width: 0; min-height: 44px; padding: 4px 0; border-radius: 12px; cursor: pointer;
  font: 500 .875rem/1.15 var(--f-text); color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.days button small { display: block; font-weight: 400; font-size: .75rem; opacity: .75; }
.days button:hover, .slots button:hover:not(:disabled) { border-color: currentColor; }
.days button[aria-pressed="true"] { background: var(--ink); color: var(--silk); border-color: var(--ink); }
.slots button[aria-pressed="true"] { background: var(--madder); color: #fff; border-color: var(--madder); }
.slots button:disabled { cursor: not-allowed; border-color: transparent; background: rgba(13, 15, 20, .08); color: rgba(13, 15, 20, .5); text-decoration: line-through; }

/* legend in industry.css is tuned for the dark hotel screen; this screen is light */
.dphone[data-salon] .legend2 i { background: rgba(13, 15, 20, .12); }
.dphone[data-salon] .legend2 i.pick { background: var(--madder); }