/* Matches the site theme tokens (--et-*) with fallbacks so the picker still looks right without them */
.etc { --c-ink: var(--et-ink, #0a0f1e); --c-accent: var(--et-accent, #4f46e5); --c-line: var(--et-line, rgb(10 15 30 / 0.1)); --c-muted: var(--et-muted, #64748b);
  background: #fff; border-radius: 24px; padding: 26px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--c-line); margin-top: 28px; }
.etc-muted { color: var(--c-muted); margin: 0; }
.etc-error { color: #b42318; margin: 10px 0 0; font-size: 15px; }
.etc-error:empty { display: none; }
.etc-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.etc-day { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 8px; border: 0; border-radius: 16px; cursor: pointer;
  background: #f8fafc; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); font: inherit; transition: background 0.2s, color 0.2s; }
.etc-day small { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.etc-day b { font-size: 22px; font-weight: 500; line-height: 1.1; }
.etc-day.is-active { background: var(--c-ink); color: #fff; box-shadow: none; }
.etc-day.is-active small { color: rgb(255 255 255 / 0.7); }
.etc-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 18px; }
.etc-time { padding: 11px 8px; border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line);
  font: inherit; font-size: 15px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.etc-time:hover { box-shadow: inset 0 0 0 1px var(--c-accent); }
.etc-time.is-active { background: var(--c-accent); color: #fff; box-shadow: none; }
.etc-form { display: grid; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.etc-form[hidden] { display: none; }
.etc-input { width: 100%; box-sizing: border-box; border: 0; border-radius: 14px; padding: 12px 16px; font: inherit; font-size: 16px;
  background: #f8fafc; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.etc-input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
textarea.etc-input { resize: vertical; min-height: 90px; }
.etc-pay { margin-top: 4px; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer; background: var(--c-accent); color: #fff;
  font: inherit; font-size: 16px; font-weight: 500; }
.etc-pay:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) { .etc { padding: 18px; border-radius: 20px; } }