/* Theme base styles that use variables from variables.css */
html,body{
  height:100%;
}
body{
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-mid));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Generic container/card */
.rv-container {
  padding: 1rem;
}
.rv-main-card, .card, .rv-finish-card, .rv-modal__card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.rv-main-card:focus, .rv-main-card:active, .rv-main-card:hover{
  box-shadow: var(--shadow-hover);
}

/* Buttons default */
.rv-submit-button, .rv-btn, .rv-reserve-button {
  font-family: inherit;
  transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}
.rv-btn--primary, .rv-submit-button, .rv-reserve-button {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
}
.rv-btn--primary:hover, .rv-submit-button:hover, .rv-reserve-button:hover{
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}

/* Focus outlines */
:focus{
  outline: 3px solid rgba(37,99,235,0.14);
  outline-offset: 2px;
}

/* Card helpers */
.card { padding: 1rem; }

/* Text helpers */
.text-muted { color: var(--color-text-light); }

/* Toast */
.toast-welcome{ background: linear-gradient(90deg,var(--color-primary-light),var(--color-secondary-light)); color:var(--color-text-primary); padding:10px 14px; border-radius:12px; display:inline-block;}

/* iPhone 375x667 and small phones */
@media (max-width: 420px) {
  body {
    font-size: 15px;
    line-height: 1.45;
  }

  main.container {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .rv-container {
    padding: 0.75rem;
  }

  .rv-main-card, .card, .rv-finish-card, .rv-modal__card {
    border-radius: 14px;
  }

  h1, .h1 {
    font-size: clamp(1.45rem, 5.2vw, 2rem);
    line-height: 1.1;
  }
  h2, .h2 {
    font-size: clamp(1.1rem, 3.6vw, 1.5rem);
    line-height: 1.2;
  }
  h3, .h3 {
    font-size: clamp(1rem, 3.2vw, 1.25rem);
    line-height: 1.25;
  }

  p {
    font-size: 0.95rem;
  }

  .btn, .rv-btn, .rv-submit-button, .rv-reserve-button {
    font-size: 0.95rem;
  }
}