:root {
  --color-primary: #FF6B35;
  --color-secondary: #FFE5D9;
  --font-base: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mobile-width: 430px;
}

html {
  min-height: 100%;
  background-color: #f3f4f6;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  max-width: var(--mobile-width);
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-base);
  line-height: 1.5;
  background-color: #fff;
  color: #111;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

@media (min-width: 480px) {
  html {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  body {
    border-radius: 32px;
    width: var(--mobile-width);
    margin-left: 0;
    margin-right: 0;
  }

  nav.fixed {
    left: 50%;
    width: var(--mobile-width);
    transform: translateX(-50%);
    right: auto;
  }

  .fixed.inset-0 {
    left: 50%;
    right: auto;
    width: var(--mobile-width);
    transform: translateX(-50%);
  }

  #newReservationBtn {
    right: calc((100vw - var(--mobile-width)) / 2 + 1rem);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.no-scroll {
  overflow: hidden;
}

.tab-button {
  transition: color 0.2s ease;
}

.tab-button i,
.tab-button span {
  color: #9ca3af;
}

.tab-button.active i,
.tab-button.active span {
  color: var(--color-primary);
}