/**
 * 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).
 */

@property --stop1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -50%; /* links außerhalb des Buttons */
}

@property --stop2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

/* normal */
.forminator-ui.forminator-design--material .forminator-button-submit,
.uagb-buttons-repeater.wp-block-button__link,
a.btn,
#menu-hauptmenu .sub-menu a,
.post-grid-filter .cat-list .cat-list_item {
  padding: 15px 30px !important;
  border: none !important;
  border-radius: 100px;

  /* + 40%" erzeugen die breite, weiche Kante zum Verwischen */
  background: linear-gradient(
    89deg,
    var(--ast-global-color-2) var(--stop1),
    #94836f calc(var(--stop1) + 40%),
    var(--ast-global-color-1) var(--stop2)
  );

  transition:
    --stop1 0.8s ease,
    --stop2 0.8s ease;
}
.forminator-ui#forminator-module-5512.forminator-design--material
  .forminator-button-submit:hover,
.uagb-buttons-repeater.wp-block-button__link:hover,
a.btn:hover,
#menu-hauptmenu .sub-menu a:hover,
.post-grid-filter .cat-list div .cat-list_item:hover,
.post-grid-filter .cat-list div .cat-list_item.active {
  --stop1: 100%;
  --stop2: 100%;
}

.uagb-buttons-repeater.wp-block-button__link .uagb-button__link,
a.btn,
.post-grid-filter .cat-list div .cat-list_item {
  position: relative;
  font-size: var(--btn-font-size);
  color: var(--ast-global-color-0) !important;
  font-family: var(--mainfont);
  font-weight: 600;
  line-height: 1.36;
  text-transform: none;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 15px;
}

.wp-block-button:not(.btn-anfragen, .btn-buchen, .btn-lage)
  .uagb-button__wrapper
  a.uagb-buttons-repeater
  .uagb-button__link::after,
a.btn.room-detail-btn::after,
a.btn.seiten-slide-link::after {
  content: "" !important;
  display: block !important;
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  --my-size: 0.9em;
  width: var(--my-size);
  height: var(--my-size);
}

a.btn {
  display: block;
  width: fit-content;
  display: flex;
  align-items: center;
  border: 1px solid var(--ast-global-color-0) !important;
  cursor: pointer;
}

a.btn:not(.room-detail-btn, .seiten-slide-link)::before,
.wp-block-button.btn-anfragen .uagb-button__link::before,
.wp-block-button.btn-buchen .uagb-button__link::before {
  content: "" !important;
  display: block !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  --my-size: 1.429em;
  width: var(--my-size);
  height: var(--my-size);
}

a.btn.room-plan::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-grundriss.svg);
}

a.btn.all-rooms::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-pfeil-button.svg);
  transform: rotate(180deg);
}

.wp-block-button.btn-anfragen .uagb-button__link::before,
#header-icons .buttons .btn-anfragen::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-anfrage.svg);
}

.wp-block-button.btn-buchen .uagb-button__link::before,
#header-icons .buttons .btn-buchen::before {
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-herz.svg);
}

/* Variablen für DIESEN Button neu */
@property --btn-stop1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -100%;
}

@property --btn-stop2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -50%;
}

.miniform-btn-wrapper > a:last-child,
#header-icons .buttons .btn-buchen,
.wp-block-button.btn-buchen a.uagb-buttons-repeater {
  background: linear-gradient(
    89deg,
    #ad9982 var(--btn-stop1),
    var(--ast-global-color-1) var(--btn-stop2),
    var(--ast-global-color-2) calc(var(--btn-stop2) + 40%)
  );
  transition:
    --btn-stop1 0.8s ease,
    --btn-stop2 0.8s ease;
}

.miniform-btn-wrapper > a:last-child:hover,
.wp-block-button.btn-buchen a.uagb-buttons-repeater:hover,
#header-icons .btn-buchen:hover {
  --btn-stop1: 0%;
  --btn-stop2: 100%;
}

.btn-lage a.wp-block-button__link {
  background: var(--ast-global-color-2);
  position: relative;
}

.btn-lage a.wp-block-button__link::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--ast-global-color-2);
}

.btn-lage-inverted a.wp-block-button__link {
  position: relative;
  background: white;
  border: 2px solid var(--ast-global-color-2) !important;
}

.btn-lage-inverted a.wp-block-button__link .uagb-button__link {
  color: var(--ast-global-color-2) !important;
}

/* Die äußere Spitze  */
.btn-lage-inverted a.wp-block-button__link::before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);

  /* Dreieck-Logik */
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--ast-global-color-2);
  z-index: 1;
}

/* Die innere Spitze (Überdeckt die Füllung der äußeren Spitze) */
.btn-lage-inverted a.wp-block-button__link::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  /* Dreieck-Logik (etwas kleiner als ::before) */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  z-index: 2;
}

@media only screen and (max-width: 976px) {
  .uagb-buttons__wrap {
    justify-content: flex-start !important;
  }
}

@media (max-width: 990px) {
  #nav-wrapper #header-icons .buttons > a.btn,
  #menu-hauptmenu .sub-menu > li > a.menu-link {
    padding: 0.5rem 1.15rem !important;
  }

  .wp-block-button.btn-lage .uagb-button__link {
    font-size: 0.8rem !important;
  }

  .btn-lage
    a.wp-block-button__link::after:not(
      .btn-lage-inverted a.wp-block-button__link::after
    ) {
    left: 35% !important;
  }

  .wp-block-uagb-container.cont-lage
    .btn-lage:not(.btn-lage-inverted)
    a.wp-block-button__link::after {
    left: 30%;
  }

  .btn-lage-inverted a.wp-block-button__link::before {
    top: 0;
    left: 13%;
    transform: translate(-62%, 100%);
    rotate: 180deg;
  }

  .btn-lage-inverted a.wp-block-button__link::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    transform: translate(-213%, 100%);
    rotate: 180deg;
  }
}
@media (max-width: 768px) {
  .forminator-ui.forminator-design--material .forminator-button-submit,
  .uagb-buttons-repeater.wp-block-button__link,
  a.btn,
  #menu-hauptmenu .sub-menu a,
  .post-grid-filter .cat-list .cat-list_item {
    padding: 11px 30px !important;
  }

  .cont-lage .uagb-buttons-repeater.wp-block-button__link {
    padding: 9px 20px !important;
  }
  .wp-block-uagb-container.cont-lage .wp-block-uagb-buttons .btn-lage-inverted {
    transform: translate(-86px, 48px) !important;
  }

  .wp-block-uagb-container.sticker {
    background-color: white;
    border-radius: 100%;
    --mysize: clamp(7.063rem, 3.971rem + 10.75vw, 16.875rem);
    width: var(--mysize) !important;
    height: calc(var(--mysize) * 0.98) !important;
    aspect-ratio: 1 / 1;
    box-shadow: 0 0 17px var(--color-shadow);
    position: absolute;
    top: 5%;
    right: 23%;
  }

  .btn-lage-inverted a.wp-block-button__link::after {
    transform: translate(-204%, 100%);
  }
}

@media (max-width: 560px) {
  .btn-lage-inverted a.wp-block-button__link::after {
    left: 137px;
    transform: translate(-46%, 100%);
  }
  .btn-lage-inverted a.wp-block-button__link::before {
    left: 71%;
  }

  .cont-room-btns .uagb-buttons-repeater.wp-block-button__link {
    padding: 9px 21px !important;
  }
  .cont-room-btns
    .uagb-buttons-repeater.wp-block-button__link
    .uagb-button__link {
    gap: 8px;
  }
}

.cont-room-btns .uagb-buttons__wrap {
  justify-content: center !important;
}