/**
 * Theme Button Styles
 * 
 * This file contains all custom styles related to buttons using the UAGB 
 * button component, especially the `.standard` style variations.
 * 
 * If additional button styles or variations become too large, create a 
 * separate sub-file and name it accordingly (e.g., theme_buttons-outline.css).
 */

.wp-block-uagb-buttons .uagb-buttons__wrap {
  flex-wrap: wrap;
}

.wp-block-uagb-buttons .wp-block-button__link {
  font-size: var(--btn-font-size);
  background-color: var(--ast-global-color-1);
  border: 1px solid var(--ast-global-color-1) !important;
  color: var(--ast-global-color-4);
  font-weight: 500;
  padding: 15.5px 30px;
  transition: all 0.5s ease-in-out;
  line-height: 1.077em;
}

.wp-block-button .wp-block-button__link .uagb-button__link {
  color: var(--ast-global-color-5);
  transition: all 0.5s ease-in-out;
}

.wp-block-uagb-buttons .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
  background-color: var(--ast-global-color-5);
  border: 1px solid var(--ast-global-color-1) !important;
}

.wp-block-button .wp-block-button__link:hover .uagb-button__link,
.wp-block-button .wp-block-button__link:focus .uagb-button__link {
  color: var(--ast-global-color-3) !important;
}

/* BUTTONS ZIMMER SEITEN */
.wp-block-uagb-buttons.btn-grundriss a {
  --my-size: clamp(68px, 3.659rem + 2.05vw, 98px);
  font-size: clamp(10px, 0.507rem + 0.41vw, 16px);
  color: var(--ast-global-color-0);
  line-height: 1;
  flex-direction: column;
  background-color: var(--ast-global-color-1);
  justify-content: center;
  border-radius: 50% !important;
  width: var(--my-size);
  height: var(--my-size);
  white-space: nowrap;
  border: 1px solid var(--ast-global-color-0);
  padding: 0 !important;
  gap: 5px;
}

.wp-block-uagb-buttons.btn-grundriss a::before {
  content: "";
  display: block;
  width: clamp(26px, 1.428rem + 0.68vw, 36px);
  height: clamp(14px, 0.777rem + 0.34vw, 19px);
  background-image: url(../../img/icon-360-3d.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease-in-out;
}

.wp-block-uagb-buttons.btn-grundriss a:hover::before {
  background-image: url(../../img/icon-360-3d-dark.svg);
}

.wp-block-uagb-container.cont-rooms-btns .wp-block-uagb-buttons-child a {
  color: var(--ast-global-color-0);
  padding: calc(var(--gap-m) / 1.25) 0 !important;
  border: unset !important;
  border-radius: 0 !important;
}

.wp-block-uagb-buttons-child.btn-anfragen a,
.wp-block-uagb-buttons-child.btn-preis a {
  background-color: var(--ast-global-color-1);
}
.wp-block-uagb-buttons-child.btn-buchen a {
  background-color: var(--ast-global-color-3);
}

.cont-rooms-btns .uagb-buttons-repeater {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 15px;
}

.cont-rooms-btns .uagb-buttons-repeater::before {
  --my-size: 16px;
  content: "";
  display: block;
  width: var(--my-size);
  height: calc(var(--my-size) * 1.2);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease-in-out;
}
.cont-rooms-btns .btn-anfragen .uagb-buttons-repeater::before {
  background-image: url(../../img/icon-anfragen.svg);
}
.cont-rooms-btns .btn-preis .uagb-buttons-repeater::before {
  background-image: url(../../img/icon-preisrechner.svg) !important;
}
.cont-rooms-btns .btn-buchen .uagb-buttons-repeater::before {
  background-image: url(../../img/icon-bestpreis.svg) !important;
}

@media (max-width: 1500px) {
  .cont-img-txt .btn-grundriss {
    transform: translate(-25%, -60%) !important;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .btns-ausflüge {
    gap: 10px !important;
  }
}
@media (max-width: 768px) {
  .cont-rooms-btns .uagb-buttons-repeater {
    gap: 9px;
  }
  .wp-block-uagb-container.cont-rooms-btns .wp-block-uagb-buttons-child a {
    padding: 13.5px 0 !important;
  }

  .uagb-button__link {
    white-space: nowrap;
  }
}
.consent-gate__button:hover {
  background: var(--ast-global-color-5) !important;
  background-color: var(--ast-global-color-5) !important;
  color: var(--ast-global-color-3);
  border-color: var(--ast-global-color-5) !important;
  filter: none !important;
}