html,
body {
  font-family: "Montserrat", sans-serif;
  background: none;
  height: 100%;
}
.header {
  margin-top: 0;
}
.header .navbar-toggler-icon {
  background-image: url(../img/burger-black.svg);
}
.header .nav-link {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;

  color: #161616;
}
.cabinet-header-menu button {
  color: #161616 !important;
}
.background {
  height: 100%;
  width: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner {
  position: relative;
}
.banner-row {
  /* Firefox */
  min-height: -moz-calc(100% - 94px);
  /* WebKit */
  min-height: -webkit-calc(100% - 94px);
  /* Opera */
  min-height: -o-calc(100% - 94px);
  /* Standard */
  min-height: calc(100% - 94px);
  overflow: hidden;
}
.banner-row .content {
  margin-top: 70px;
}
.banner-row .content .banner-content {
  position: absolute;
  bottom: 10%;
  left: 50%;
  max-width: 650px;
  transform: translateX(-50%);
  width: 80%;
}
.banner-content h2 {
  color: #fefefe;
  text-shadow: 0 4px 150px 0 rgba(0, 0, 0, 0.2);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
}
.step .circle {
  width: 40px;
  height: 40px;
  background-color: #fefefe;
  border-radius: 20px;
  color: #161616;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step .step-info {
  color: #fefefe;
  text-shadow: 0 4px 150px 0 rgba(0, 0, 0, 0.2);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.banner-row .content h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 80px;
  line-height: 77px;
  color: #fefefe;
  text-shadow: 0 4px 150px rgba(0, 0, 0, 0.2);
}
.banner-row .content p {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #fefefe;
  text-shadow: 0 4px 150px rgba(0, 0, 0, 0.2);
}
.floating-label-group {
  position: relative;
  padding: 0;
}

.floating-label-group > .floating-input {
  width: 100%;
  padding: 20px 48px 20px 16px;
  background: #FEFEFE;
  border: 3px solid #E87722;
  border-radius: 16px;
  color: #161616;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.floating-label-group > .floating-input::placeholder {
  color: transparent;
}

.floating-label-group > label {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  color: #676767;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  pointer-events: none;
  transition: all 0.2s ease,background-color 0s;
  white-space: nowrap;
}

.floating-label-group > .floating-input:focus + label,
.floating-label-group > .floating-input:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  padding: 0 8px !important;
  background: #fff !important;
  color: #000;
  font-size: 14px;
  line-height: 20px;
}
.signup {
  padding: 24px;
  max-width: 488px;
  width: 100%;
  min-width: 0 !important;
}
.signup {
  h1,
  h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    color: #161616;
  }
}
.signup label {
  padding: 8px;
}
.signup .sign-up-form {
  border-bottom: 1px solid #a2aaad;
}
.signup .sign-up-form.no-border {
  border-bottom: none;
}
.signup .sign-up-form .error input[type="text"],
.signup .sign-up-form .error input[type="password"],
.signup .sign-up-form .error input[type="email"] {
  padding: 18px 16px;
}
.sign-up-form input[type="text"],
.sign-up-form input[type="password"],
.sign-up-form input[type="email"] {
  width: 100%;
  background: #f0f0f0;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 20px 16px;
  color: #a2aaad;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  outline: none;
}
/* Login and register form inputs sit on the white card with a white background;
   the light #f0f0f0 border from the shared .sign-up-form rule stays as the outline */
#user-login-form input[type="text"],
#user-login-form input[type="email"],
#user-login-form input[type="password"],
#user-register-form input[type="text"],
#user-register-form input[type="password"],
#user-register-form input[type="email"],
#user-register-form .phone-input-shell,
#registration-step-two-form input[type="text"],
#registration-step-two-form input[type="email"],
#registration-step-two-form .phone-input-shell {
  background: #ffffff;
}
/* step two city picker: same look as the business page's shipping-method picker
   (.business-individual__form .select-box.select-dropdown + the .calculator list rules):
   white 64px box, 3px light border, 16px radius; white list flush beneath with 16px rows.
   Selectors carry .select-dropdown.white so they outrank .calculator .select-dropdown.white. */
.sign-up-form .select-dropdown.white.select-city {
  position: relative;
  width: 100%;
  height: 64px;
  margin: 0;                      /* spacing to the next field comes from the -label wrapper's reserved error line, like every other field */
  padding: 0 16px;
  background: #FFFFFF;
  border: 3px solid #F0F0F0;
  border-radius: 16px;
}
.sign-up-form .select-dropdown.white.select-city .fixed-size {
  width: 100%;
  min-width: auto;
  /* no button inset: text starts at the wrapper's 16px padding; the arrow, in flow at the end of the flex
     button, ends at the same 16px on the right */
  padding: 0 !important;
  justify-content: space-between;
  text-align: left;
  color: #161616;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.sign-up-form .select-dropdown.white.select-city .fixed-size .value {
  margin: 0;
  padding: 0;
}
.sign-up-form .select-dropdown.white.select-city .value.is-placeholder {
  color: #676767;
}
.sign-up-form .select-dropdown.white.select-city .dropdown-toggle .arrow {
  position: static;
  margin: 0 0 0 12px;
  flex-shrink: 0;
}
/* while open, lift the field above the later (position: relative) fields and the button */
.sign-up-form .select-dropdown.white.select-city:has(.dropdown-toggle.show) {
  z-index: 20;
}
/* the list: flush under the box, spanning its inner width; white 16px rows come from the .calculator rules,
   the 250px scroll from .small-dropdown, the 8px radius and shadow from the generic .select-dropdown menu */
.sign-up-form .select-dropdown.white.select-city .dropdown-menu {
  padding: 0 !important;           /* the generic menu adds 8px 4px; the business picker's list has none */
  background: #FEFEFE;
}
.sign-up-form .select-dropdown.white.select-city .dropdown-menu.show {
  transform: translate(0, 61px) !important; /* 64px box minus the 3px border */
  z-index: 10000;
  max-height: 250px;
  overflow-y: auto;
}
.sign-up-form .city_id-label.error .select-dropdown.white.select-city {
  border-color: #E87722;
}
/* .banner-row clips its overflow, so an open city list was cut off at the bottom of the form area (right
   where the footer starts). On step two the form area may overflow; the banner pages keep their clipping. */
.banner-row:has(#registration-step-two-form) {
  overflow: visible;
}
.sign-up-form select {
  width: 100%;
  background-color: #ffffff;
  border: 2px solid #dadada;
  border-radius: 16px;
  padding: 20px 16px;
  color: #393939;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  outline: none;
  appearance: none;
  background-image: url("../img/arrow-down-black.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.input {
  border: 3px solid #dadada;
  background: transparent;
  padding: 19px;
  border-radius: 16px;
  color: #393939;
  transition: all 0.5s;
  gap: 8px;
}
.input .select-box {
  height: auto;
}
.input .blank-input {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.signup .sign-up-form input:focus,
.signup .sign-up-form input:not(:placeholder-shown) {
  color: #a2aaad;
  background-color: #fff;
  border: 3px solid #f0f0f0;
  outline: none;
}
.signup .sign-up-form input:focus::placeholder {
  color: transparent;
}
.signup .sign-up-form input::placeholder {
  color: #a2aaad;
  opacity: 1;
}
.signup .sign-up-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 10px 0 0;
  width: 24px;
  height: 24px;
  border: 2px solid #E87722;
  border-radius: 8px;
  background-color: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  position: relative;
}

.signup .sign-up-form input[type="checkbox"]::before {
  content: "";
  width: 14px;
  height: 11px;
  opacity: 0;
  transition: opacity 120ms ease-in-out;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M13 1L4.75 9.25L1 5.5' stroke='%23FEFEFE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.signup .sign-up-form input[type="checkbox"]:checked {
  background-color: #E87722;
  border-color: #E87722;
}
.floating-phone-group {
  position: relative;
}

.floating-phone-group > label {
  position: absolute;
  z-index: 3;
  left: 133px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  color: #676767;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  pointer-events: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.floating-phone-group:has(.phone-floating-input:focus) > label,
.floating-phone-group:has(.phone-floating-input:not(:placeholder-shown)) > label {
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  padding: 0 8px !important;
  background: #fff !important;
  color: #000;
  font-size: 14px;
  line-height: 20px;
}
.floating-phone-group:has(.phone-floating-input:focus) .input,
.floating-phone-group:has(.phone-floating-input:not(:placeholder-shown)) .input,
.floating-phone-group:has(.phone-floating-input:focus) .phone-input-shell,
.floating-phone-group:has(.phone-floating-input:not(:placeholder-shown)) .phone-input-shell {
  background-color: #fff !important;
}
.floating-phone-group:has(.phone-floating-input:focus) .input {
  border-width: 3px;
  border-color: #000;
}
.phone-input-shell {
  border-color:#F0F0F0 ;
  background: #F0F0F0;
  position: relative;
  min-height: 64px;
  padding-top: 18px;
  padding-bottom: 10px;
}

.phone-floating-input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 0 34px 0 12px !important;
  min-height: auto !important;
  color: #393939;
}

.phone-floating-input::placeholder {
  color: transparent;
}

.phone_number-label .clear-input-field {
  right: 16px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 4;
}

.phone_number-label .select-box {
  position: relative;
  z-index: 4;
  min-width: 96px;
  /* never shrink below flag + code + arrow: on narrow phones the number input's intrinsic width
     squeezed the picker to 96px and the absolutely-positioned arrow landed on the code */
  flex-shrink: 0;
}
/* the number input must give way instead (it is a flex item with a large default intrinsic width) */
.phone_number-label .phone-input-shell .phone-floating-input {
  min-width: 0;
  width: 100%;
}

.signup .sign-up-form input[type="checkbox"]:checked::before {
  opacity: 1;
}
.signup .sign-up-form input[type="checkbox"]:focus {
  outline: none;
}
.signup .sign-up-form input[type="checkbox"]:disabled {
  --form-control-color: #959495;
  color: #959495;
  cursor: not-allowed;
}
.signup .sign-up-form .checkbox-row {
  padding: 8px;
}
.signup .sign-up-form .checkbox-row span {
  margin: 0;
  color: #676767;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.signup .sign-up-form .checkbox-row a {
  text-decoration: none;
  color: #e87722;
}
.signup .sign-up-form .button {
  width: 100%;
  padding: 17px;
  background: #e87722;
  border-radius: 16px;
  border: none;
  color: #fefefe;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.signup .sign-up-form .button:hover {
  background: rgba(22, 22, 22, 1);
  color: rgba(254, 254, 254, 1);
}
.sent-message-box .button:disabled {
  background: #a2aaad;
  opacity: 0.5;
}
.signup p {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #161616;
}
.signup a {
  text-decoration: none;
}
.signup p a {
  text-decoration: none;
  color: #e87722;
  font-weight: 700;
}
.signup .access-alt-way p {
  margin-bottom: 8px;
}
.signup .forgot-pass {
  font-size: 16px;
  line-height: 24px;
}
.signup .forgot-pass a {
  color: #161616;
}
.recover {
  padding: 24px;
  max-width: 488px;
  width: 100%;
}
.recover input {
  padding: 20px;
  width: 100%;
  background: #fefefe;
  border: 3px solid #e87722;
  border-radius: 16px;
  color: #161616;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.recover input:focus {
  outline: none;
  border: 3px solid #e87722;
}
.recover h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  color: #161616;
}
.full-width{
  /* 100vw includes the vertical scrollbar in browsers that reserve space for it, so the card was a
     scrollbar's width wider than the page and caused a small horizontal scroll. 100% needs a parent
     with a definite width, hence the row rule below (the row is a flex item of a centred column and
     would otherwise shrink-wrap). */
  width: 100%;
}
.row:has(> .signup.full-width) {
  /* the column's full width plus the row's own negative gutter margins, i.e. what width:auto
     would give if the row were not a flex item */
  width: calc(100% + var(--bs-gutter-x));
  justify-content: center;
}
.recover.sent-success .button {
  background: #34b78f !important;
}
.recover.sent-success .label-group label {
  color: #34b78f;
}
.recover.sent-success input {
  border: 3px solid #34b78f;
}
.recover.sent-success input:focus {
  border: 3px solid #34b78f;
}
.recover .button {
  width: 100%;
  padding: 17px;
  background: #e87722;
  border-radius: 16px;
  border: none;
  color: #fefefe;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.recover .button:hover {
  background: rgba(22, 22, 22, 1);
  color: rgba(254, 254, 254, 1);
}
.label-group {
  position: relative;
}
.label-group:not(.floating-label-group) label {
  position: absolute;
  z-index: 2;
  top: 19px;
  left: 16px;
  background-color: white;
  padding: 0 8px;
  color: #e87722;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.label-group .clear-field {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
}
.footer {
  padding: 32px 16px;
  background: #000000;
  position: relative;
}
.footer-row {
  /*height: 30px;*/
}
.footer a {
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #fefefe;
}
.form-tabs {
  border: none;
  justify-content: center;
}
.form-tabs .nav-link {
  border: none;
  padding: 16px;
  color: #161616;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}
.form-tabs .nav-link.active {
  border-radius: 9999px;
  background: #e87722;
  color: #fefefe;
}
.content {
  padding-top: 64px;
  /* Firefox */
  min-height: -moz-calc(100% - 94px);
  /* WebKit */
  min-height: -webkit-calc(100% - 94px);
  /* Opera */
  min-height: -o-calc(100% - 94px);
  /* Standard */
  min-height: calc(100% - 94px);
  overflow: hidden;
}
.page-head h1 {
  color: #161616;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
.page-head p {
  color: #676767;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  margin: 0;
}
.map-area {
  position: relative;
  height: 100%;
}
.search-row {
  z-index: 1;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 16px;
  position: absolute;
  padding: 20px 16px;
  width: calc(100% - 32px);
  top: 16px;
  left: 16px;
}
.search-area {
  display: flex;
}
.search-area img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
.search-area input {
  width: 100%;
  border: none;
  background: none;
  color: #a2aaad;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.search-area input::placeholder {
  color: #a2aaad;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.search-area input:focus {
  outline: none;
  border: none;
  background: none;
}
img.map {
  width: 100%;
}
.filters {
  border-radius: 16px;
  border: 3px solid #f0f0f0;
  background: #fefefe;
  box-shadow: 0 4px 16px 0 rgba(17, 17, 17, 0.04);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filters p {
  color: #676767;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  margin: 0;
}
.points-area .nav-tabs {
  border-bottom: none;
}
.points-area .tab-content {
  overflow-y: auto;
}
.points-area .nav-link {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  color: #161616;
  padding: 0 0 9px 0;
  margin: 0 20px 0 0;
  border: none;
}
.points-area .nav-link.active {
  color: #161616;
  background: none;
  border-bottom: 4px solid #e87722;
}
.points-area .point-row {
  padding: 16px;
  border-radius: 16px;
  border: 3px solid #f0f0f0;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(17, 17, 17, 0.04);

  margin-bottom: 16px;
  display: flex;
}
.points-area .point-row.active {
  display: block;
}
.points-area .point-row .img {
  width: 99px;
  height: 99px;
  min-width: 99px;
  min-height: 99px;
  margin-right: 32px;
  transition:
    0.5s width,
    height ease;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
}
.points-area .point-row.active .img {
  width: 100%;
  height: 169px !important;
  margin-right: 0;
  background-position: 50%;
  margin-bottom: 16px;
}
.points-area .point-row h2 {
  margin: 0 0 6px 0;
  padding: 0;
  color: #161616;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.points-area .point-row p {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #161616;
}
.points-area .point-row p.hours {
  color: #676767;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.points-area .point-row.active .working-hours {
  display: none;
}
.points-area .point-row .flat-button {
  display: none;
}
.points-area .point-row.active .flat-button {
  display: block;
}
.points-area .point-row .additional-info {
  display: none;
}
.points-area .point-row.active .additional-info {
  display: block;
  margin-bottom: 42px;
}
.points-area .point-row .additional-text-title {
  margin-top: 16px;
  margin-bottom: 6px;
  color: #a2aaad;
}
.see-more {
  cursor: pointer;
}
.address-modal .blue-button {
  display: block;
  width: max-content;
}
.ymaps-2-1-79-balloon {
  border-radius: 16px !important;
  /*overflow: hidden!important;*/
}
.ymaps-2-1-79-balloon__content {
  background-color: #f0f0f0 !important;
}
.ymaps-2-1-79-balloon__layout {
  background-color: #f0f0f0 !important;
  border-radius: 16px !important;
}
.ymaps-2-1-79-balloon__tail:after {
  background-color: #f0f0f0 !important;
}
.search-results {
  position: absolute;
  top: 65px;
  left: 0;
  background-color: #f0f0f0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cccccc;
  max-height: 400px;
  overflow: scroll;
}
.search-results .item {
  cursor: pointer;
  padding: 5px 5px 5px 42px;
}
.search-results .item span {
  font-size: 15px;
  line-height: 30px;
  color: #676767;
  margin-left: 25px;
}
.search-results .item:hover {
  background-color: #ffffff !important;
}
.carousel-control-prev {
  margin-left: 15px;
  display: none;
}
.carousel-control-next {
  margin-right: 20px;
  display: none;
}
.point-row.active .carousel-control-prev,
.point-row.active .carousel-control-next {
  display: flex;
  align-items: center;
  width: auto;
  opacity: 1;
}
.point-row.active .carousel-control-prev img,
.point-row.active .carousel-control-next img {
  width: 32px;
  height: 32px;
}
/* Bootstrap slides carousel items as 100%-wide floats shifted by
   transform — keep the width at 100% or neighbouring slides bleed
   into the frame; each slide fills the box and crops via object-fit */
.img .carousel-inner {
  overflow: hidden;
  height: 100%;
}
.img .carousel-item,
.img .carousel-item a {
  height: 100%;
}
.img .carousel-item a {
  display: block;
  width: 100%;
}
.img .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.select-dropdown .dropdown-item img {
  border-radius: 24px;
}

@media (max-width: 991.98px) {
  html,
  body {
    min-height: 100%;
  }

  .h-100.no-gutters {
    min-height: 100vh;
  }

  .banner-row {
    min-height: calc(100vh - 94px) !important;
    overflow: visible;
  }

  .recover-form-column {
    min-height: calc(100vh - 167px);
    padding: 0 16px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .recover-form-column .signup {
    padding:0 !important;
  }

  #recover-box,
  #sent-message-box {
    width: 100%;
    max-width: 488px;
    margin: 0 auto !important;
    padding: 0;
    transform: none !important;
    justify-content: center;
  }
}
@media (max-width: 575px) {
  .banner-row {
      min-height: calc(100vh - 147px) !important;
  }
    .recover-form-column {
      min-height: calc(100vh - 200px);
    border-radius: 24px;
}

.how-to-find-block {
    margin-top: 30px;
    margin-bottom: 10px;

    .how-to-find-title {
        font-size: 16px;
        line-height: 24px;
        color: #161616 !important;
    }

    .how-to-find-content {
        display: flex;
        flex-wrap: nowrap;
        gap: 11px;
        margin-top: 6px;
        text-align: center;

        .how-to-find-item {
            min-width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;

            .how-to-find-img {
                width: 40px;
                gap: 10px;
                angle: 0deg;
                opacity: 1;
                border-radius: 8px;
                text-align: center;

                img {
                    width: 100%;
                    height: auto;
                }
            }

            p {
                margin-top: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
}}
/* Chrome autofill (picking a saved account) paints a blue background the
   transition trick in style.css no longer defeats; cover it with the
   inputs' own white fill instead */
.sign-up-form input:-webkit-autofill,
.sign-up-form input:-webkit-autofill:hover,
.sign-up-form input:-webkit-autofill:focus,
.sign-up-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #161616;
  caret-color: #161616;
}

/* Slide-in error toast (choose-location step): rests off-screen right,
   .show brings it in with a right-to-left ease and fades it */
.step-error-toast {
  position: fixed;
  top: 96px;
  right: 16px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 20px;
  background: #FDEDED;
  border: 1px solid #EB5757;
  border-radius: 16px;
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}
.step-error-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.step-error-toast svg {
  flex-shrink: 0;
}
.step-error-toast b {
  display: block;
  color: #EB5757;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 4px;
}
.step-error-toast p {
  margin: 0;
  color: #EB5757;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  /* long descriptions ellipsize on one line like the design */
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wh-load-more-wrap {
    padding: 8px 0 4px;
}
.wh-load-more-btn {
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #A2AAAD;
    border-radius: 12px;
    padding: 10px;
    background: transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.wh-load-more-btn:disabled {
    opacity: .5;
    cursor: default;
}


/* 3rd-party registration (iframe embed, layouts/embed): the sign-up card alone, centred in the frame */
.signup-embed {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #ffffff;
}
.signup-embed .signup {
  max-width: 488px;
  width: 100%;
}
/* the phone input is a flex item with an intrinsic width (~236px); below ~400px it could not shrink and pushed
   the page wider than the frame. Let it shrink to the shell. */
.signup-embed .phone-input-shell .phone-floating-input {
  min-width: 0;
  width: 100%;
}
.signup-embed .sign-up-form .phone_number-label .select-box {
  flex-shrink: 0;
}
/* very narrow frames (~320px): the resting phone label sits after the code picker and can be longer than the
   room left; clip it with an ellipsis instead of widening the page. Raised (focused / filled) it has the full
   width minus the shell padding. */
.signup-embed .floating-phone-group > label {
  max-width: calc(100% - 149px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.signup-embed .floating-phone-group:has(.phone-floating-input:focus) > label,
.signup-embed .floating-phone-group:has(.phone-floating-input:not(:placeholder-shown)) > label {
  max-width: calc(100% - 32px);
}
/* redesign.css gives .signup `min-width: 488px !important` from 441px up (via :is(.signup, #abstract-id), ID
   specificity): in a frame narrower than ~520px that overflowed. The embed card is fluid at every width. */
:is(.signup-embed, #abstract-id) .signup {
  min-width: 0 !important;
  max-width: 488px;
  padding-top: 24px;
}