.cssa-app {
  --cssa-primary: #5865f2;
  --cssa-primary-hover: #4854db;
  --cssa-primary-dark: #3f46c7;
  --cssa-primary-soft: #eef0ff;
  --cssa-primary-softer: #f7f6ff;
  --cssa-accent: #795cff;

  --cssa-border: #e1e5f0;
  --cssa-border-active: #c8ceff;

  --cssa-text: #182033;
  --cssa-muted: #8992aa;
  --cssa-surface: #ffffff;

  display: grid;
  gap: 28px;
  width: 100%;
  color: var(--cssa-text);
}

.cssa-section {
  padding: 30px 32px;
  border: 1px solid var(--cssa-border);
  border-radius: 22px;
  background:
    linear-gradient(135deg,
      rgb(255 255 255 / 99%),
      rgb(250 249 255 / 99%));
  box-shadow: 0 16px 45px rgb(48 55 110 / 7%);
}

.cssa-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.cssa-heading h2 {
  margin: 0 0 6px;
  color: var(--cssa-text);
  font-size: 24px;
  line-height: 1.2;
}

.cssa-heading p {
  margin: 0;
  color: var(--cssa-muted);
  line-height: 1.5;
}

.cssa-step {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgb(88 101 242 / 25%);
}

.cssa-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cssa-type {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--cssa-border);
  border-radius: 18px;
  background: #fff;
  color: var(--cssa-text);
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.cssa-type:hover {
  border-color: var(--cssa-border-active);
  background: var(--cssa-primary-softer);
  color: var(--cssa-text);
  box-shadow: 0 10px 24px rgb(88 101 242 / 10%);
  transform: translateY(-2px);
}

.cssa-type:focus-visible {
  border-color: var(--cssa-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgb(88 101 242 / 15%);
}

.cssa-type.is-selected,
.cssa-type.is-selected:hover,
.cssa-type.is-selected:focus,
.cssa-type.is-selected:active {
  border-color: var(--cssa-primary) !important;
  background:
    linear-gradient(135deg,
      #eef0ff,
      #f3efff) !important;
  color: var(--cssa-text) !important;
  box-shadow:
    0 0 0 3px rgb(88 101 242 / 12%),
    0 12px 30px rgb(88 101 242 / 10%) !important;
  transform: none;
}

.cssa-type-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background:
    linear-gradient(135deg,
      #eef0ff,
      #f1ebff);
  color: var(--cssa-primary);
  font-weight: 800;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.cssa-type:not(.is-selected) .cssa-type-icon {
  opacity: 0.75;
}

.cssa-type.is-selected .cssa-type-icon {
  background:
    linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent));
  color: #fff;
  opacity: 1;
}

.cssa-type-content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cssa-type-content strong {
  color: var(--cssa-text);
  font-size: 16px;
  line-height: 1.35;
}

.cssa-type-content small {
  color: var(--cssa-muted);
  line-height: 1.4;
}

.cssa-calendar {
  width: 100%;
  margin: 0 auto;
}

.cssa-calendar-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}

.cssa-calendar-header strong {
  color: var(--cssa-text);
  font-size: 18px;
  text-transform: capitalize;
}

.cssa-calendar-arrow {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 5px 17px;
  border: 1px solid var(--cssa-border);
  border-radius: 13px;
  background: #fff;
  color: var(--cssa-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.cssa-calendar-arrow:hover:not(:disabled),
.cssa-calendar-arrow:focus:not(:disabled) {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgb(88 101 242 / 12%);
}

.cssa-calendar-arrow:active:not(:disabled) {
  border-color: var(--cssa-primary) !important;
  background: #e5e7ff !important;
  color: var(--cssa-primary-dark) !important;
}

.cssa-calendar-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cssa-weekdays,
.cssa-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cssa-weekdays {
  margin-bottom: 8px;
  color: var(--cssa-muted);
  font-size: 13px;
  text-align: center;
}

.cssa-day {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f5f6fa;
  color: #a2a9b8;
  font: inherit;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.cssa-day-empty {
  border-color: transparent;
  background: transparent;
}

.cssa-app button.cssa-day.is-available {
  border-color: var(--cssa-border);
  background: #fff;
  color: var(--cssa-text);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.cssa-app button.cssa-day.is-available:hover,
.cssa-app button.cssa-day.is-available:focus {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgb(88 101 242 / 10%) !important;
  transform: translateY(-1px);
}

.cssa-app button.cssa-day.is-selected,
.cssa-app button.cssa-day.is-selected:hover,
.cssa-app button.cssa-day.is-selected:focus,
.cssa-app button.cssa-day.is-selected:active {
  border-color: var(--cssa-primary) !important;
  background:
    linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent)) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 8px 20px rgb(88 101 242 / 25%) !important;
  transform: none;
}

.cssa-day.is-today {
  box-shadow: inset 0 0 0 2px rgb(88 101 242 / 22%);
}

.cssa-day.is-today.is-selected {
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 45%),
    0 8px 20px rgb(88 101 242 / 25%) !important;
}

.cssa-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cssa-time {
  min-width: 104px;
  padding: 13px 18px;
  border: 1px solid var(--cssa-border);
  border-radius: 13px;
  background: #fff;
  color: var(--cssa-text);
  font: inherit;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.cssa-app .cssa-time:hover,
.cssa-app .cssa-time:focus {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgb(88 101 242 / 10%) !important;
  transform: translateY(-1px);
}

.cssa-app .cssa-time.is-selected,
.cssa-app .cssa-time.is-selected:hover,
.cssa-app .cssa-time.is-selected:focus,
.cssa-app .cssa-time.is-selected:active {
  border-color: var(--cssa-primary) !important;
  background:
    linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent)) !important;
  color: #fff !important;
  outline: none;
  box-shadow: 0 8px 20px rgb(88 101 242 / 22%) !important;
  transform: none;
}

.cssa-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cssa-field {
  display: grid;
  gap: 8px;
}

.cssa-field span {
  color: var(--cssa-text);
  font-weight: 600;
}

.cssa-field-wide {
  grid-column: 1 / -1;
}

.cssa-field input,
.cssa-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cssa-border);
  border-radius: 13px;
  background: #fff;
  color: var(--cssa-text);
  font: inherit;
  outline: none;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.cssa-field textarea {
  resize: vertical;
}

.cssa-field input:hover,
.cssa-field textarea:hover {
  border-color: #cfd4e5;
}

.cssa-field input:focus,
.cssa-field textarea:focus {
  border-color: var(--cssa-primary);
  box-shadow: 0 0 0 4px rgb(88 101 242 / 12%);
}

.cssa-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 24px;
  padding: 14px 26px;
  border: 0;
  border-radius: 13px;
  background:
    linear-gradient(90deg,
      #5368f5,
      #7759f6);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 12px 26px rgb(88 101 242 / 23%);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.cssa-app .cssa-submit:hover:not(:disabled),
.cssa-app .cssa-submit:focus:not(:disabled) {
  border: 0 !important;
  background:
    linear-gradient(90deg,
      #485bdc,
      #6848e1) !important;
  color: #fff !important;
  outline: none;
  box-shadow: 0 15px 30px rgb(88 101 242 / 30%) !important;
  transform: translateY(-1px);
}

.cssa-app .cssa-submit:active:not(:disabled) {
  border: 0 !important;
  background:
    linear-gradient(90deg,
      #414fc4,
      #5e40ca) !important;
  color: #fff !important;
  transform: translateY(0);
}

.cssa-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.cssa-date-time {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 42px;
  align-items: start;
}

.cssa-date-time__calendar,
.cssa-date-time__time {
  min-width: 0;
}

.cssa-date-time__time {
  padding-top: 2px;
}

.cssa-time-heading {
  margin: 0 0 8px;
  color: var(--cssa-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.cssa-selected-date-text {
  margin: 0 0 20px;
  color: var(--cssa-muted);
  font-size: 14px;
  line-height: 1.5;
}

.cssa-date-time__time .cssa-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.cssa-date-time__time .cssa-time {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 10px;
}

.cssa-notice {
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.cssa-notice.is-success {
  border-color: #ccebd7;
  background: #eaf8ef;
  color: #18783c;
}

.cssa-notice.is-error {
  border-color: #ffd2d2;
  background: #fff0f0;
  color: #b42318;
}

.cssa-loading,
.cssa-empty {
  margin: 0;
  color: var(--cssa-muted);
  line-height: 1.5;
}

.cssa-types--locked {
  pointer-events: none;
  opacity: 0.65;
}

.cssa-types--locked .cssa-type {
  cursor: default;
}

.cssa-types--locked .cssa-type.is-selected {
  opacity: 1;
}

.cssa-booking-blocked {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 720px;
  margin: 40px auto;
  padding: 32px;
  border: 1px solid var(--cssa-border, #e1e5f0);
  border-radius: 24px;
  background: #fff;
  color: var(--cssa-text, #182033);
  box-shadow: 0 16px 45px rgb(48 55 110 / 8%);
}

.cssa-booking-blocked__icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #f0edff;
  color: #6848e1;
  font-size: 24px;
  font-weight: 700;
}

.cssa-booking-blocked__content h2 {
  margin: 0 0 10px;
  color: var(--cssa-text, #182033);
}

.cssa-booking-blocked__content p {
  margin: 0 0 20px;
  color: var(--cssa-muted, #667085);
  line-height: 1.6;
}

.cssa-booking-blocked__button {
  display: inline-flex;
  width: auto;
  margin-top: 0;
  text-decoration: none;
}

.cssa-app button,
.cssa-app input,
.cssa-app textarea {
  font-family: inherit;
}

.cssa-app button {
  letter-spacing: normal;
  text-transform: none;
}

.cssa-app button::before,
.cssa-app button::after {
  display: none;
}

.cssa-app button:focus {
  outline: none;
}

.cssa-app button.cssa-day,
.cssa-app button.cssa-time,
.cssa-app button.cssa-type,
.cssa-app button.cssa-calendar-arrow,
.cssa-app button.cssa-submit {
  text-decoration: none;
}

.cssa-app button.cssa-day:hover,
.cssa-app button.cssa-day:focus,
.cssa-app button.cssa-day:active,
.cssa-app button.cssa-time:hover,
.cssa-app button.cssa-time:focus,
.cssa-app button.cssa-time:active,
.cssa-app button.cssa-type:hover,
.cssa-app button.cssa-type:focus,
.cssa-app button.cssa-type:active,
.cssa-app button.cssa-calendar-arrow:hover,
.cssa-app button.cssa-calendar-arrow:focus,
.cssa-app button.cssa-calendar-arrow:active {
  text-decoration: none !important;
}

@media (max-width: 767px) {
  .cssa-app {
    gap: 20px;
  }

  .cssa-section {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .cssa-heading {
    gap: 12px;
    margin-bottom: 22px;
  }

  .cssa-step {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .cssa-heading h2 {
    font-size: 20px;
  }

  .cssa-types,
  .cssa-fields {
    grid-template-columns: 1fr;
  }

  .cssa-field-wide {
    grid-column: auto;
  }

  .cssa-type {
    min-height: 90px;
    padding: 16px;
  }

  .cssa-calendar-header {
    grid-template-columns: 40px 1fr 40px;
  }

  .cssa-calendar-arrow {
    width: 40px;
    height: 40px;
  }

  .cssa-weekdays,
  .cssa-days {
    gap: 5px;
  }

  .cssa-day {
    border-radius: 9px;
    font-size: 13px;
  }

  .cssa-time {
    flex: 1 0 calc(33.333% - 10px);
    min-width: 75px;
    padding: 12px 10px;
  }

  .cssa-submit {
    width: 100%;
  }

  .cssa-booking-blocked {
    gap: 14px;
    margin: 24px auto;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .cssa-booking-blocked__icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .cssa-date-time {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cssa-date-time__time {
    padding-top: 0;
  }

  .cssa-date-time__time .cssa-times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cssa-app button:hover,
.cssa-app button:focus,
.cssa-app [type="button"]:hover,
.cssa-app [type="button"]:focus,
.cssa-app [type="submit"]:hover,
.cssa-app [type="submit"]:focus {
  background-color: initial;
  color: inherit;
  text-decoration: none;
}

.cssa-app .cssa-type:hover,
.cssa-app .cssa-type:focus {
  border-color: var(--cssa-border-active) !important;
  background: var(--cssa-primary-softer) !important;
  color: var(--cssa-text) !important;
}

.cssa-app .cssa-calendar-arrow:hover:not(:disabled),
.cssa-app .cssa-calendar-arrow:focus:not(:disabled) {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
}

.cssa-app button.cssa-day.is-available:hover,
.cssa-app button.cssa-day.is-available:focus {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
}

.cssa-app button.cssa-day.is-selected,
.cssa-app button.cssa-day.is-selected:hover,
.cssa-app button.cssa-day.is-selected:focus,
.cssa-app button.cssa-day.is-selected:active {
  border-color: var(--cssa-primary) !important;
  background: linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent)) !important;
  color: #fff !important;
}

.cssa-app .cssa-time:hover,
.cssa-app .cssa-time:focus {
  border-color: var(--cssa-primary) !important;
  background: var(--cssa-primary-soft) !important;
  color: var(--cssa-primary) !important;
}

.cssa-app .cssa-time.is-selected,
.cssa-app .cssa-time.is-selected:hover,
.cssa-app .cssa-time.is-selected:focus,
.cssa-app .cssa-time.is-selected:active {
  border-color: var(--cssa-primary) !important;
  background: linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent)) !important;
  color: #fff !important;
}

.cssa-app .cssa-submit:hover:not(:disabled),
.cssa-app .cssa-submit:focus:not(:disabled) {
  background: linear-gradient(90deg,
      #485bdc,
      #6848e1) !important;
  color: #fff !important;
}

.cssa-app button.cssa-day.is-selected:hover {
  background: linear-gradient(135deg,
      var(--cssa-primary),
      var(--cssa-accent)) !important;
  color: #fff !important;
}


/* =========================================================
   COMPACT BOOKING
   ========================================================= */

.cssa-app--compact {
  width: 100%;
  margin: 0 auto;

  padding: 50px;

  border: 1px solid var(--cssa-border, #e1e5f0);
  border-radius: 24px;

  background: #fff;

  box-shadow:
    0 16px 45px rgb(48 55 110 / 8%);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.cssa-app--compact .cssa-compact-body {
  display: flex;
  align-items: start;

  gap: 42px;
}


/* =========================================================
   LEFT COLUMN
   Header + steps
   ========================================================= */

.cssa-app--compact .cssa-compact-sidebar {
  flex: 0 0 190px;

  width: 190px;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   HEADER
   ========================================================= */

.cssa-app--compact .cssa-compact-header {
  margin-bottom: 54px;
}

.cssa-app--compact .cssa-compact-header h2 {
  margin: 0;

  color: var(--cssa-text, #182033);

  font-size: 28px;
  font-weight: 700;

  line-height: 1.15;
}

.cssa-app--compact .cssa-compact-header p {
  margin: 5px 0 0;

  color: var(--cssa-muted, #667085);

  font-size: 15px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.cssa-app--compact .cssa-compact-progress {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.cssa-app--compact .cssa-compact-progress__item {
  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  color: #98a2b3;

  font: inherit;

  font-size: 13px;
  font-weight: 600;

  text-align: left;

  cursor: default;
}

.cssa-app--compact .cssa-compact-progress__item span {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  background: #f1f3f8;

  color: #98a2b3;

  font-size: 13px;
}

.cssa-app--compact .cssa-compact-progress__item.is-active {
  color: var(--cssa-primary);
}

.cssa-app--compact .cssa-compact-progress__item.is-active span {
  background: var(--cssa-primary);

  color: #fff;

  box-shadow:
    0 8px 20px rgb(80 88 255 / 20%);
}

.cssa-app--compact .cssa-compact-progress__item.is-completed {
  color: var(--cssa-text);
}

.cssa-app--compact .cssa-compact-progress__item.is-completed span {
  background: var(--cssa-primary-soft);

  color: var(--cssa-primary);
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.cssa-app--compact .cssa-compact-content {
  /* position: relative; */

  flex: 1 1 auto;

  min-width: 0;

  /* padding-bottom: 48px; */
}


/* =========================================================
   SECTIONS
   ========================================================= */

.cssa-app--compact .cssa-section {
  display: none;

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;
}

.cssa-app--compact .cssa-section.cssa-section--compact-active {
  display: block;

  animation:
    cssaCompactStepIn 0.2s ease;
}


/* =========================================================
   HIDE DUPLICATE STEP HEADING
   ========================================================= */

/*
 * У стандартній секції є:
 *
 *   [2] Оберіть дату та час
 *   Оберіть доступну дату...
 *
 * Номер 2 нам тут більше не потрібен,
 * тому прибираємо весь стандартний heading.
 *
 * Етап уже показаний у sidebar.
 */

.cssa-app--compact .cssa-heading {
  display: none;
}


/* =========================================================
   DATE + TIME
   ========================================================= */

.cssa-app--compact .cssa-date-time {
  display: flex;
  align-items: flex-start;

  gap: 40px;
}

.cssa-app--compact .cssa-date-time__calendar {
  flex: 1 1 auto;

  min-width: 0;
}

.cssa-app--compact .cssa-date-time__time {
  flex: 0 0 280px;

  width: 280px;

  margin-top: 0;
  padding-top: 0;
}


/* =========================================================
   CALENDAR
   ========================================================= */

.cssa-app--compact .cssa-calendar {
  width: 100%;
}

.cssa-app--compact .cssa-calendar-header {
  margin-bottom: 14px;
}

.cssa-app--compact .cssa-weekdays,
.cssa-app--compact .cssa-days {
  gap: 6px;
}


/*
 * Круглі дні календаря
 */

.cssa-app--compact .cssa-day {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  min-height: 42px;

  padding: 0;

  border-radius: 50%;

  font-size: 13px;
}


/*
 * Важливо:
 * самі колонки календаря залишаються
 * рівномірними.
 */

.cssa-app--compact .cssa-weekdays,
.cssa-app--compact .cssa-days {
  width: 100%;
}


/* =========================================================
   AVAILABLE TIME
   ========================================================= */

.cssa-app--compact .cssa-time-heading {
  margin-bottom: 8px;

  font-size: 18px;
}

.cssa-app--compact .cssa-selected-date-text {
  margin-bottom: 14px;
}

.cssa-app--compact .cssa-times {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.cssa-app--compact .cssa-time {
  flex: 1 1 calc(50% - 4px);

  min-width: 120px;

  height: 42px;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.cssa-app--compact .cssa-fields {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

.cssa-app--compact .cssa-submit {
  width: 100%;

  margin-top: 18px;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.cssa-app--compact .cssa-compact-back {
  position: absolute;

  left: 50px;
  bottom: 20px;

  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: var(--cssa-muted, #667085);

  font: inherit;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.cssa-app--compact .cssa-compact-back:hover {
  color: var(--cssa-primary);
}

.cssa-app--compact .cssa-compact-back[hidden] {
  display: none !important;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes cssaCompactStepIn {

  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


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


@media (max-width: 1020px) {
  .cssa-app.cssa-app--compact .cssa-date-time {
    flex-direction: column;
    align-items: stretch;
  }

  .cssa-app--compact .cssa-date-time__time {
    width: 100%;
  }
}

@media (max-width: 910px) {
  .cssa-app.cssa-app--compact {
    padding: 30px 30px 30px 30px;
  }

  .cssa-app.cssa-app--compact .cssa-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cssa-app.cssa-app--compact .cssa-type {
    padding: 10px;
    min-height: 80px;
  }

  .cssa-app.cssa-app--compact .cssa-date-time {
    align-items: center;
  }

  .cssa-app.cssa-app--compact .cssa-compact-content {
    align-self: stretch;
  }


}

@media (max-width: 767px) {

  .cssa-app--compact .cssa-compact-back {
    top: 30px;
    bottom: auto;
  }

  .cssa-app--compact {
    padding: 22px 18px;

    border-radius: 18px;
  }


  .cssa-app--compact .cssa-compact-body {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }


  .cssa-app--compact .cssa-compact-sidebar {
    flex: none;
    align-items: center;
    width: 100%;
    text-align: center;
  }


  .cssa-app--compact .cssa-compact-header {
    margin-bottom: 24px;
  }


  .cssa-app--compact .cssa-compact-header h2 {
    font-size: 24px;
  }


  .cssa-app--compact .cssa-compact-progress {
    flex-direction: row;

    gap: 6px;
  }


  .cssa-app--compact .cssa-compact-progress__item {
    width: auto;
  }


  .cssa-app--compact .cssa-compact-progress__item strong {
    display: none;
  }


  .cssa-app--compact .cssa-date-time {
    flex-direction: column;

    gap: 24px;
  }


  .cssa-app--compact .cssa-date-time__time {
    flex: none;

    width: 100%;
  }


  .cssa-app--compact .cssa-day {
    width: 38px;
    height: 38px;

    min-height: 38px;
  }
}

@media (max-width: 500px) {
  .cssa-app.cssa-app--compact .cssa-types {
    grid: none;
  }

  .cssa-app.cssa-app--compact {
    padding: 15px;
  }

  .cssa-app--compact .cssa-compact-back {
    top: 20px;
    left: 20px;
  }
}

@media (max-width: 375px) {
  .cssa-app--compact .cssa-compact-back {
    left: 10px;
  }

  .cssa-app--compact .cssa-compact-header h2 {
    font-size: 20px;
  }
}