/*все url('') указаны здесь таким образом, чтобы после сборки assets пути соответствовали структуре папок
            в web/bundles*/

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Regular.eot');
    src: local('SF UI Display Regular'), local('SFUIDisplay-Regular'),
        url('fonts/sf-ui-display/SFUIDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Regular.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Regular.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Ultralight.eot');
    src: local('SF UI Display Ultralight'), local('SFUIDisplay-Ultralight'),
        url('fonts/sf-ui-display/SFUIDisplay-Ultralight.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Ultralight.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Ultralight.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Ultralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Heavy.eot');
    src: local('SF UI Display Heavy'), local('SFUIDisplay-Heavy'),
        url('fonts/sf-ui-display/SFUIDisplay-Heavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Heavy.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Heavy.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Black.eot');
    src: local('SF UI Display Black'), local('SFUIDisplay-Black'),
        url('fonts/sf-ui-display/SFUIDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Black.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Black.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Semibold.eot');
    src: local('SF UI Display Semibold'), local('SFUIDisplay-Semibold'),
        url('fonts/sf-ui-display/SFUIDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Semibold.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Semibold.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Bold.eot');
    src: local('SF UI Display Bold'), local('SFUIDisplay-Bold'),
        url('fonts/sf-ui-display/SFUIDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Bold.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Bold.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Thin.eot');
    src: local('SF UI Display Thin'), local('SFUIDisplay-Thin'),
        url('fonts/sf-ui-display/SFUIDisplay-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Thin.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Thin.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Medium.eot');
    src: local('SF UI Display Medium'), local('SFUIDisplay-Medium'),
        url('fonts/sf-ui-display/SFUIDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Medium.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Medium.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('fonts/sf-ui-display/SFUIDisplay-Light.eot');
    src: local('SF UI Display Light'), local('SFUIDisplay-Light'),
        url('fonts/sf-ui-display/SFUIDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/sf-ui-display/SFUIDisplay-Light.woff2') format('woff2'),
        url('fonts/sf-ui-display/SFUIDisplay-Light.woff') format('woff'),
        url('fonts/sf-ui-display/SFUIDisplay-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* #region Vars */
:root {
  --c12-light-color: #FFFFFF;
  --c12-light-color-rgb: 255, 255, 255;

  --c12-dark-color: #0F1017;
  --c12-dark-color-rgb: 15, 16, 23;

  --c12c-primary-color: #2D1DEF;
  --c12c-primary-contrast-color: #FFFFFF;

  --c12c-secondary-color: #3F4045;
  --c12c-secondary-contrast-color: #DAD9F1;

  --c12c-tertiary-color: #DAD9F1;
  --c12c-tertiary-contrast-color: #0F1017;

  --c12c-text-color: var(--c12-dark-color);
  --c12c-text-gray-color: rgba(var(--c12-dark-color-rgb), 0.5);
  --c12c-text-green-light-color: #81CCAB;

  --c12c-green-back-color: #81CCAB;

  --c12c-radius-s3: 6px;
  --c12c-radius-s1: 12px;
  --c12c-radius: 16px;
  --c12c-radius-l1: 20px;
  --c12c-radius-l2: 24px;

  --c12-spacer-s1: 12px;
  --c12-spacer: 16px;
  --c12-spacer-l1: 20px;
  --c12-spacer-l2: 24px;
  --c12-spacer-l3: 42px;
  
  --c12-font-family: 'SF UI Display', 'Segoe UI', Tahoma, sans-serif;
  --c12-font-size: 1rem;        /* 16px */
  --c12-font-size-lg: 1.125rem; /* 18px */
  --c12-font-size-sm: 0.875rem; /* 14px */
  --c12-font-size-xs: 0.75rem;  /* 12px */
  --c12-font-size-xxs: 0.65rem;  /* 11px */

  --c12c-shadow: 0px 2px 10px 0px #EDEDED;

  --c12c-card-background-color: var(--c12-light-color);
  --c12c-card-radius: var(--c12c-radius);

  --c12c-body-background: linear-gradient(0deg, #FBFAFE 0%, #F9F9FA 100%);
  --c12c-page-max-width: 670px;

  --line-height: 1.25em;

  /*
   * Значения призванные ВИЗУАЛЬНО скорректировать вертикальные внешние отступы у текстовых блоков:
   * - для верхнего значения это разница межу загловной буквой и маленькой (П и п) в процентных единицах (1 ед = 100%).
   * - для нижнего базовая линия текста от нижнего края некоторых букв (например: у, р, q, j, ...).
   * Важно учитывать, что данные значения могут варьироваться в зависимости от семейства шрифтов.
   */
  --c12c-font-correct-top: 0.095em;
  --c12c-font-correct-bottom: 0.125em;
}
/* #endregion */

/* #region minireset.css v0.0.6 | MIT License */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

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

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
/* #endregion */

/*#region Main */
button,
input,
select,
textarea {
  font-family: inherit;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: var(--c12-font-family, sans-serif);
  line-height: var(--line-height, 1.25em);
}

body {
  background: var(--c12c-body-background, #ffffff);
}

/* Рассчитываем значения для корректировки отступов у текстовых блоков, имеющих междустрочнй интервал */
.c12u-correct-text-indents-calc-vars,
.c12u-correct-text-block-indents-v {
  --correct-indent-line-height: var(--line-height, 1.3em);
  --correct-indent-value: calc((var(--correct-indent-line-height) - 1em) / -2);
}

/*
 * WARNING: Важно, чтобы блок имел блочную модель, поддерживающую вертикальные отступы.
 * display: inline, <span> - работать не будет.
*/
.c12u-correct-text-block-indents-v {
  line-height: var(--correct-indent-line-height);
  margin-top: calc(var(--correct-indent-value) - var(--c12c-font-correct-top, 0));
  margin-bottom: calc(var(--correct-indent-value) - var(--c12c-font-correct-bottom, 0));
}

.w-full {
  width: 100% !important;
}

.mb-l3 {
  margin-bottom: var(--c12-spacer-l3, 42px) !important;
}

.text-uppercase {
  text-transform: uppercase;
}

.c12c-button {
  outline: none !important;
  font: inherit;
  border: none;
  background: var(--c12-dark-color);
  color: var(--c12-light-color);
  border-radius: var(--c12c-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--c12-spacer, 20px);
  min-height: 2.875rem;
  cursor: pointer;
  user-select: none;
}
.c12c-button.--color-primary {
  background: var(--c12c-primary-color);
  color: var(--c12c-primary-contrast-color);
}
.c12c-button.--size-large {
  min-height: 3.75rem;
  border-radius: var(--c12c-radius-l2);
}
.c12c-button:disabled {
  opacity: 0.35;
}
.c12c-button:hover {
  filter: contrast(95%) brightness(115%);
}
.c12c-button:active {
  filter: contrast(90%) brightness(90%);
}

.c12c-form-control-group {
  margin-bottom: var(--c12-spacer-l1, 20px);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--c12-spacer-l1, 20px);
}

.c12c-form-control {
  outline: none !important;
  border: 1px solid rgba(var(--c12-dark-color-rgb), 0.3);
  background: transparent;
  color: rgba(var(--c12-dark-color-rgb), 0.5);
  border-radius: var(--c12c-radius-s1, none);
  padding: calc(var(--c12-spacer-l1) - 0.24em) var(--c12-spacer-l1);
  font-size: var(--c12-font-size-sm);
  line-height: 1.4em;
}
.c12c-form-control:focus {
  border-color: rgba(var(--c12-dark-color-rgb), 0.75);
  color: rgba(var(--c12-dark-color-rgb), 1);
}

.c12c-form-control-stars {
  display: flex;
  font-size: 32px;
  justify-content: center;
  /*gap: calc(var(--c12-spacer-s1) - 4px);*/
}
.c12c-form-control-star-item {
  width: 1em;
  height: 1em;
  line-height: 1em;
  opacity: 0.12;
  cursor: pointer;
  padding: 0 4px;
  box-sizing: content-box;
}
.c12c-form-control-star-item.--hover {
  opacity: .5;
}
.c12c-form-control-star-item.--active {
  opacity: 1 !important;
}
.c12c-form-control-star-item.--active.--hover {
  opacity: .75 !important;
}
.c12c-form-control-star-item svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  pointer-events: none;
}
.c12c-form-error:empty {
  display: none;
}

.c12c-page {
  max-width: var(--c12c-page-max-width);
  margin: 0 auto;
}

.c12c-header {
  padding: var(--c12-spacer-l1) var(--c12-spacer-l2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c12c-page-content {
  padding: var(--c12-spacer-l1) var(--c12-spacer-l2);
}

.c12c-card {
  background: var(--c12c-card-background-color, #ffffff);
  box-shadow: var(--c12c-shadow, none);
  border-radius: var(--c12c-card-radius, none);
}

.c12c-title {
  font-size: var(--c12-font-size-lg, 1.1rem);
  font-weight: 600;
}

.c12c-title-s1 {
  font-size: var(--c12-font-size, 1rem);
  font-weight: 600;
}

.c12c-logo {
  display: flex;
  align-items: center;
  gap: var(--c12-spacer);
}
.c12c-logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.c12c-logo-text {
  font-weight: 500;
}

.c12c-bonus {
  font-size: var(--c12-font-size-lg, 1.1rem);
  font-weight: 600;
  line-height: 1em;
  padding: 5px 10px;
}
.c12c-bonus span {
  font-weight: normal;
  font-size: var(--c12-font-size-sm, 0.85rem);
}
/*#endregion Main */

/*#region Visit Photo */
.c12c-visit-photo-wrap {
  border-radius: var(--c12c-radius-l1);
  overflow: hidden;
  position: relative;
}
.c12c-visit-photo-wrap:before {
  content: '';
  display: block;
  padding: 30% 0;
}
.c12c-visit-photo-wrap > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
/*#endregion Visit Photo */

/*#region Visit Services */
.c12c-visit-head {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--c12-spacer-l2, 20px) var(--c12-spacer-l1, 20px);
}
.c12c-visit-title {
  font-size: var(--c12-font-size-lg, 1.1rem);
  font-weight: 600;
  line-height: 1em;
}
.c12c-visit-datetime {
  font-size: var(--c12-font-size-sm, 0.85rem);
}


.c12c-visit-services {
  padding: calc(var(--c12-spacer-l1, 20px) - 0.125em) var(--c12-spacer-l1, 20px); /* -0.25 визуальная корректировка относительно line-height */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--c12-spacer, 16px) - 0.125em); /* -0.25 визуальная корректировка относительно line-height */
}
.c12c-visit-service-item {
  line-height: 1.25em;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 140px);
}
.c12c-visit-service-title {
  line-height: inherit;
}
.c12c-visit-service-price {
  text-align: right;
  font-weight: 500;
  text-wrap: nowrap;
}
.c12c-visit-service-qty {
  display: block;
  font-size: var(--c12-font-size-xs, 0.65rem);
  color: var(--c12c-text-gray-color, inherit);
  line-height: 1em;
  font-weight: normal;
  text-wrap: nowrap;
  margin-top: 2px;
}
.c12c-visit-service-discount {
  font-size: var(--c12-font-size-xxs, 0.45rem);
  color: var(--c12-light-color, inherit);
  background-color: var(--c12c-green-back-color);
  line-height: 100%;
  font-weight: normal;
  text-wrap: nowrap;
  padding: 3px 6px;
  border-radius: 10px;
  margin-right: 5px;
  top: -2px;
  position: relative;
}

.c12c-visit-total {
  display: grid;
  grid-template-columns: 3fr 1fr;
  line-height: 1em;
  padding: var(--c12-spacer-l1, 20px);
  row-gap: 5px;
  column-gap: var(--c12-spacer-l1, 20px);
}

.c12c-visit-total-label,
.c12c-visit-total-price {
  font-size: var(--c12-font-size-lg, 1.1rem);
  font-weight: 600;
}

.c12c-visit-total-price,
.c12c-visit-total-addition-value {
  text-align: right;
  text-wrap: nowrap;
}

.c12c-visit-total-addition-label,
.c12c-visit-total-addition-value {
  color: rgba(var(--c12-dark-color-rgb), 0.4);
  font-size: var(--c12-font-size-xs, 0.75rem);
  font-weight: 600;
}
/*#endregion Visit Services */

/*#region Visit Review */
.c12c-review {
  padding: calc(var(--c12-spacer-l1, 20px) - 0.125em) var(--c12-spacer-l1, 20px); /* -0.25 визуальная корректировка относительно line-height */
}

.c12-review-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--c12-spacer-s1, 10px);
}
.c12-review-star {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  background-color: rgba(var(--c12-dark-color-rgb), 0.8);
  color: var(--c12-light-color);
  line-height: 1em;
  gap: 2px;
  border-radius: var(--c12c-radius-s3, none);
  font-weight: 700;
}
.c12-review-star svg {
  display: block;
  width: 14.5px;
  height: 14.5px;
  fill: var(--c12c-tertiary-color, currentColor);
}
.c12-review-datetime {
  color: var(--c12c-text-gray-color);
  font-size: var(--c12-font-size-xs, 0.75rem);
}

.c12-review-comment {
  padding-top: calc(var(--c12-spacer-l1, 20px) - 0.125em);
}
.c12-review-comment-full:not(.shown) {
  display: none;
}

.c12-review-extend-button {
  outline: none !important;
  background: transparent;
  border: none;
  display: flex;
  padding: 0;
  align-items: center;
  line-height: 1em;
  color: var(--c12c-text-gray-color);
  font-size: var(--c12-font-size-xs, 0.75rem);
  margin-top: calc(var(--c12-spacer-s1, 12px) - 0.125em);
  position: relative;
  cursor: pointer;
  user-select: none;
}
.c12-review-extend-button .c12c-icon {
  width: 0.75em;
  height: 0.75em;
  fill: currentColor;
  position: relative;
  top: 1px; /* visual fix */
  margin: 0 2px;
}
.c12-review-extend-button .c12-fake-area {
  /* outline: 1px solid #f00; */
  position: absolute;
  top: -20px;
  left: -10px;
  right: -60px;
  bottom: -20px;
}
.c12-review-extend-button:active {
  opacity: 0.8;
}
/*#endregion Visit Review */

/*#region Visit Footer */
.c12c-visit-footer {
  font-size: var(--c12-font-size-sm, 0.85rem);
  line-height: 1.4em;
  color: var(--c12c-text-gray-color);
  padding: calc(var(--c12-spacer-l2, 20px) - 0.2em) var(--c12-spacer-l1, 20px);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--c12-spacer-l2, 20px);
}
.c12c-visit-addr {
  display: flex;
  align-items: start;
  gap: 2px;
}
.c12c-visit-addr .c12c-icon {
  color: var(--c12c-text-color);
  fill: currentColor;
  display: block;
  width: 1em;
  height: 1em;
  top: 2px;
  position: relative;
}
@media (max-width: 380px) {
  .c12c-visit-footer {
    grid-template-columns: 1fr;
  }

  .c12c-visit-status-message {
    padding-left: calc(1em + 2px);
  }
}
/*#endregion Visit Footer */

/*#region Footer Bot Button */
.c12c-footer-button-wrap {
  min-height: calc(3.75rem + var(--c12-spacer-l2, 20px));
  padding: 0 var(--c12-spacer-l1, 20px) var(--c12-spacer-l2, 20px);
}
.c12c-footer-fixed-button {
  position: fixed;
  bottom: var(--c12-spacer-l2, 20px);
  width: calc(100% - (var(--c12-spacer-l1, 20px) + var(--c12-spacer-l2, 20px)) * 2);
  max-width: calc(var(--c12c-page-max-width) - (var(--c12-spacer-l1, 20px) + var(--c12-spacer-l2, 20px)) * 2);
  left: auto;
  right: auto;
  text-decoration: none;
  outline: none;
}
/*#endregion Footer Bot Button */

.c12c-review-rating-card {
  padding: var(--c12c-spacer-l1, 20px);
  color: var(--c12c-text-gray-color);
  text-align: center;
  font-size: var(--c12-font-size-sm, 0.8rem);
}
.c12c-review-rating-card .c12c-form-control-stars {
  color: var(--c12c-primary-color);
  margin-bottom: var(--c12-spacer-s1);
  opacity: 0.9;
}

.c12c-review-comment {
  min-height: 152px;
  min-width: 100%;
  max-width: 100%;
  resize: none;
}