@import "./tokens.css";

@import "../components/Button/button.css";
@import "../components/Card/card.css";
@import "../components/Header/header.css";
@import "../components/Footer/footer.css";
@import "../components/Hero/hero.css";
@import "../components/Input/input.css";
@import "../components/Progress/progress.css";
@import "../components/ServiceChoices/service-choices.css";
@import "../components/BookingStep/booking-step.css";
@import "../components/PetStep/pet-step.css";
@import "../components/VisitStep/visit-step.css";
@import "../components/AvailabilityCalendar/availability-calendar.css";
@import "../components/OwnerStep/owner-step.css";
@import "../components/DetailsStep/details-step.css";
@import "../components/ExtrasStep/extras-step.css";
@import "../components/ReviewStep/review-step.css";
@import "../components/ConfirmationStep/confirmation-step.css";
@import "../components/SegmentedChoice/segmented-choice.css";
@import "../components/ChipGroup/chip-group.css";

@import "./design/backgrounds.css";
@import "./design/header.css";
@import "./design/hero.css";
@import "./design/cards.css";
@import "./design/sections.css";
@import "./design/hero.css";
@import "./design/hero-themes.css";
/* =========================================================
   GLOBAL RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 16px;
}

body {
  min-height: 100vh;

  font-family: var(--font-body);
  color: var(--color-text);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

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


/* =========================================================
   APP SHELL
========================================================= */

.pp-app {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   DEFAULT PAGE CONTAINER
========================================================= */

.pp-container {
  width: min(100%, 560px);

  margin: 0 auto;
  padding: 24px 20px 64px;

  flex: 1;
}


/* =========================================================
   WIDE BOOKING PAGES
========================================================= */

.pp-container.pp-container--booking-flow,
.pp-container.pp-container--service-landing {
  width: min(100%, 1180px);

  padding-inline: 30px;
}


/* =========================================================
   TABLET AND DESKTOP
========================================================= */

@media (min-width: 768px) {
  .pp-container {
    padding-top: 34px;
    padding-bottom: 80px;
  }

  .pp-container.pp-container--booking-flow,
  .pp-container.pp-container--service-landing {
    padding-inline: 30px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  .pp-container,
  .pp-container.pp-container--booking-flow,
  .pp-container.pp-container--service-landing {
    width: 100%;

    padding:
      16px 14px
      48px;
  }
}