/* VERSION E15 — GOOGLE APPOINTMENT SCHEDULE INTEGRATION TEST
   Only the final booking integration differs from E14. */

.concept-e15-google-booking .google-booking-box {
  align-self: start;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid rgba(200, 169, 110, .34);
  border-radius: 18px;
  background: var(--cream);
  color: var(--charcoal);
}

.concept-e15-google-booking .google-booking-box h3 {
  margin-bottom: 1rem;
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
}

.concept-e15-google-booking .google-booking-frame {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 760px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
}

.concept-e15-google-booking .google-booking-frame iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}

.concept-e15-google-booking .booking-mobile-google-button {
  display: none;
}

@media (max-width: 767px) {
  .concept-e15-google-booking .google-booking-box {
    display: none;
  }

  .concept-e15-google-booking .booking-mobile-google-button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
    width: 100%;
    min-height: 48px;
    padding: .78rem 1.1rem;
    border: 1px solid #c5a263;
    border-radius: var(--radius);
    background: #c5a263;
    color: #173027;
    font-family: var(--font-body);
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(9, 22, 17, .14);
  }

  .concept-e15-google-booking .booking-mobile-google-button:hover,
  .concept-e15-google-booking .booking-mobile-google-button:focus-visible {
    border-color: #d0b175;
    background: #d0b175;
    color: #13271f;
    outline: 2px solid #f4e1b5;
    outline-offset: 3px;
  }
}