@layer components {
  /* Quick Book Component */
  .quick-book {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .quick-book__instruction {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
  }

  .quick-book__lineup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .quick-book__lineup-item {
    display: block;
  }

  .quick-book__lineup-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .quick-book__lineup-link:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
  }

  .quick-book__lineup-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
  }

  .quick-book__lineup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  .quick-book__lineup-date,
  .quick-book__lineup-venue {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .quick-book__lineup-date::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
  }

  .quick-book__lineup-venue::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
  }

  .quick-book__empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
  }

  .quick-book__empty p {
    margin-bottom: var(--space-md);
  }

  .quick-book__error {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-error-light);
    border: 1px solid oklch(from var(--color-error) l c h / 30%);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 0.875rem;
  }
}