/* rooms - spaces */

#spaces {
  background-color: var(--white);
}

#spaces .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 76px;
  padding: 100px 0 140px;
}

#spaces .info-description {
  text-align: center;
  padding: 0 88px;
}

#spaces .info-description a {
  text-decoration: underline;
  color: var(--blue);
}

#spaces .main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 68px;
}

#spaces .split-container {
  display: flex;
  gap: 120px;
}

#spaces .left {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
  max-width: 400px;
}

#spaces .options {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

#spaces .option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

#spaces .option .selected-line {
  width: 0;
  height: 3px;
  transition: 0.3s width;
}

#spaces .option .selected-line.active {
  width: 84px;
  background-color: var(--turquoise);
}

#spaces .option-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#spaces .left .caption {
  font-style: italic;
}

#spaces .right {
  display: flex;
  align-items: center;
}

@media (max-width: 1100px) {
  #spaces .split-container {
    flex-direction: column-reverse;
    gap: 64px;
  }

  #spaces .left {
    max-width: 100%;
  }

  #spaces .options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  #spaces .content {
    grid-column-start: 1;
    grid-column-end: -1;
    gap: 60px;
    padding: 70px 0;
  }

  #spaces .info-description,
  #spaces .title,
  #spaces .left {
    padding: 0 var(--page-padding);
  }

  #spaces .main-section {
    align-items: flex-start;
    gap: 40px;
  }

  #spaces .split-container {
    gap: 56px;
  }

  #spaces .options {
    gap: 32px;
  }

  #spaces .option {
    gap: 8px;
  }

  #spaces .option .selected-line.active {
    background-color: var(--transparent);
  }

  #spaces .option-text {
    gap: 12px;
  }
}

@media (max-width: 600px) {
  #spaces .options {
    display: flex;
  }

  #spaces .option {
    cursor: default;
  }
}

/* rooms - two columns */

#two-columns {
  background: var(--gradient-light-blue);
  background-color: var(--white);
}

#two-columns .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 100px 0 76px;
}

#two-columns .column {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

#two-columns .title {
  color: var(--black);
}

#two-columns .list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#two-columns .item {
  border-left: 3px solid var(--turquoise);
  padding: 0 0 4px 24px;
  color: var(--black);
}

@media (max-width: 800px) {
  #two-columns .content {
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 70px 0;
  }

  #two-columns .column {
    gap: 36px;
  }

  #two-columns .item {
    gap: 28px;
  }
}

/* rooms - gallery above */

#gallery-above {
  background-color: var(--white);
}

#gallery-above .content {
  padding: 106px 0 72px;
}

#gallery-above .title {
  color: var(--black);
}

@media (max-width: 800px) {
  #gallery-above .content {
    padding: 72px 0 32px;
  }
}

/* rooms - gallery */

#rooms-gallery {
  background: var(--white);
}

@media (max-width: 800px) {
  #rooms-gallery .content {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

/* rooms - gallery below */

#gallery-below {
  height: 100px;
  background-color: var(--white);
}

@media (max-width: 800px) {
  #gallery-below {
    height: 58px;
  }
}

/* rooms - request space */

#request-space {
  background-color: var(--white);
}

#request-space .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding: 96px 0;
  z-index: 1;
}

#request-space .info {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 4px;
  color: var(--black);
}

#request-space .info .titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

#request-space form {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
}

#request-space form .row {
  display: flex;
  align-items: center;
  gap: 32px;
}

#request-space form .row input {
  width: 100%;
  border: 2px solid var(--black);
  border-radius: 30px;
  padding: 10px 32px;
  background-color: var(--semitransparent-white);
  color: var(--black);
}

#request-space form .row input::placeholder {
  color: var(--black);
}

#request-space form .radio-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#request-space form .radio-input,
.forminator-radio {
  display: flex !important;
  justify-content: center !important;
  padding-left: 32px !important;
}

#request-space form .radio-input label,
.forminator-radio label {
  display: block !important;
  position: relative !important;
  cursor: pointer !important;
  padding-left: 44px !important;
}

#request-space form .radio-input input,
.forminator-radio input {
  position: absolute !important;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}

#request-space form .radio-input .radio-button,
.forminator-radio-bullet {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 24px !important;
  width: 24px !important;
  background-color: var(--semitransparent-white) !important;
  border: 2px solid var(--black) !important;
  border-radius: 50% !important;
}

#request-space form .radio-input .radio-button:after,
.forminator-radio-bullet::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: none !important;
  background-color: var(--black) !important;
  width: 100% !important;
  height: 100% !important;
}

#request-space form .radio-input input:checked ~ .radio-button:after,
.forminator-radio input:checked ~ .forminator-radio-bullet::before {
  display: block !important;
}

#request-space form .radio-input .radio-button:after,
.forminator-radio-bullet::before {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--black);
}

#request-space form .radio-input input::placeholder {
  color: var(--black);
}

#request-space form button {
  cursor: pointer;
  width: 100%;
}

#request-space
  .forminator-ui#forminator-module-243.forminator-design--default
  .forminator-error-message,
#request-space
  .forminator-ui#forminator-module-244.forminator-design--default
  .forminator-error-message {
  background-color: transparent !important;
  color: #d3053b !important;
  margin-top: 4px !important;
  padding-left: 32px !important;
}

#request-space
  .forminator-ui#forminator-module-243.forminator-design--default
  .forminator-label,
#request-space
  .forminator-ui#forminator-module-244.forminator-design--default
  .forminator-label {
  display: none !important;
}

#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-row {
  width: 100% !important;
  margin: 0 !important;
}

#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-row:nth-child(4),
#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-row:nth-child(5) {
  width: 46% !important;
}

#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-row:nth-child(6)
  .forminator-field {
  display: flex !important;
  justify-content: space-between !important;
}

#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-row:nth-child(6)
  .forminator-field
  .forminator-radio {
  margin: 0 !important;
}

#request-space
  .forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid="open"]
  .forminator-col {
  padding: 0 !important;
}

#request-space
  .forminator-ui#forminator-module-243.forminator-design--default
  .forminator-input,
#request-space
  .forminator-ui#forminator-module-244.forminator-design--default
  .forminator-input {
  width: 100% !important;
  padding: 14px 32px !important;
  border: 2px solid var(--black) !important;
  background-color: transparent !important;
  border-radius: 30px !important;
  color: var(--black) !important;
}

#request-space
  .forminator-ui#forminator-module-243.forminator-design--default
  .forminator-input::placeholder,
#request-space
  .forminator-ui#forminator-module-244.forminator-design--default
  .forminator-input::placeholder {
  color: var(--black) !important;
}

  #request-space .forminator-design--default .forminator-input:focus-visible,
  #request-space .forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:focus-visible,
  #request-space form button:focus-visible,
  .forminator-ui.forminator-custom-form[data-design=default] .forminator-radio .forminator-radio-bullet:focus-visible
  {
    outline:3px solid var(--black);
    outline-offset: 2px;
  }

@media (max-width: 1012px) {
  #request-space
    .forminator-ui.forminator-custom-form:not(
      .forminator-size--small
    )[data-grid="open"]
    .forminator-row:nth-child(4),
  #request-space
    .forminator-ui.forminator-custom-form:not(
      .forminator-size--small
    )[data-grid="open"]
    .forminator-row:nth-child(5) {
    width: 100% !important;
  }
}

@media (max-width: 800px) {
  #request-space .content {
    display: flex;
    flex-direction: column;
    padding: 70px 0;
  }

  #request-space .info {
    gap: 18px;
  }

  #request-space .info .titles {
    max-width: 100%;
    gap: 24px;
  }

  #request-space form {
    gap: 40px;
  }

  #request-space form .row {
    gap: 20px;
  }

  #request-space form .row input {
    padding: 12px 24px;
  }

  #request-space form .radio-input label {
    padding-left: 32px;
  }

  #request-space form .radio-input .radio-button {
    height: 20px;
    width: 20px;
  }

  #request-space form .radio-input .radio-button:after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
  }

  #radio-1 .forminator-field.forminator-has_error {
    position: relative !important;
  }

  #radio-1 .forminator-field.forminator-has_error .forminator-error-message {
    position: absolute !important;
    top: 24px !important;
  }

  #spaces .options .option {
    pointer-events: none;
  }
}

@media (max-width: 450px) {
  #request-space form .row:not(.radio-inputs) {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
}