/**
 * AMQ Templates – Buy Box CSS
 *
 * BEM-structured styles for the variant picker.
 * All selectors scoped under .amq-bb to prevent conflicts.
 */

/* ── Root Wrapper ───────────────────────────────────────────────────────── */

.amq-bb {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: #2E2D2C;
  background: #E4ECF2;
  border-radius: 16px 16px 0 0;
  padding: 5px 0px 0px;
  margin-top: 15px;
  margin-bottom: 0 !important;
}

/* Eliminate Elementor widget gap between buy box and price section */
.amq-bb + *,
.elementor-widget:has(.amq-bb) + .elementor-widget,
.elementor-widget:has(.amq-bb) + .elementor-widget > .elementor-widget-container,
.elementor-widget:has(.amq-bb) + .elementor-widget #bestellen {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Force #bestellen top corners and border flat when it follows the buy box */
.has-amq-buy-box #bestellen {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-top: none !important;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Hide the unstyled default WooCommerce variation description */
.has-amq-buy-box .woocommerce-variation-description {
  display: none !important;
}

/* Hide legacy notice containers (replaced by our styled Buy Box notices) */
.has-amq-buy-box #kern-hinweis-container,
.has-amq-buy-box #partner-hinweis-container,
.has-amq-buy-box #deluxe-hinweis-container {
  display: none !important;
}

/* Close the gap in the parent Elementor column/container.
 * IMPORTANT: #bestellen is an .e-con that CONTAINS .amq-bb (inside the
 * add-to-cart widget). It must NOT have its gap killed because it also holds
 * the price widget and tagespreis-message as siblings – collapsing their gap
 * causes the "ab XXX €" price to overlap with "Entspricht X Cent pro Nacht".
 */
.elementor-widget:has(.amq-bb) {
  margin-bottom: 0 !important;
}
.elementor-column:has(.amq-bb),
.elementor-element:has(.amq-bb):not(#bestellen) > .elementor-widget-wrap,
.elementor-widget-wrap:has(.amq-bb),
.elementor-element:has(.amq-bb):not(#bestellen) > .elementor-container,
.e-con:has(.amq-bb):not(#bestellen) {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Override Elementor widget spacing via margin on the widgets themselves.
 * Scoped to .elementor-widget-wrap only (old Elementor layout) – this does
 * not match .e-con children, so #bestellen widgets keep their spacing.
 */
.elementor-widget-wrap:has(.amq-bb) > .elementor-widget {
  margin-bottom: 0 !important;
}
.elementor-widget-wrap:has(.amq-bb) > .elementor-widget + .elementor-widget {
  margin-top: 0 !important;
}

/* Remove Elementor column vertical padding that creates the gap */
.elementor-column:has(.amq-bb),
.elementor-element:has(.amq-bb):not(#bestellen),
.elementor-column:has(.amq-bb) > .elementor-widget-wrap,
.elementor-element:has(.amq-bb):not(#bestellen) > .elementor-widget-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Section (per attribute) ────────────────────────────────────────────── */

.amq-bb__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.amq-bb__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 19px;
  flex-wrap: wrap;
  gap: 4px;
}

.amq-bb__label {
  display: flex;
  align-items: center;
  gap: 2px;
}

.amq-bb__title {
  font-size: 15px;
}

.amq-bb__unit {
  font-size: 12px;
}

.amq-bb__current {
  font-size: 15px;
  font-weight: 700;
}

.amq-bb__popular {
  font-size: 12px;
  padding: 2px 4px;
}

/* ── Härtegrad hint link ────────────────────────────────────────────────── */

.amq-bb__hint {
  display: flex;
  padding: 1px 4px 2px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: rgba(114, 144, 172, 0.30);
  cursor: pointer;
  color: #003466;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
}

.amq-bb__hint-icon {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #003466;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.amq-bb__grid {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── Button (generic attribute value) ───────────────────────────────────── */

.amq-bb__btn {
  position: relative;
  overflow: visible;
  width: calc((100% + 4px) / var(--cols) - 4px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
}

/* Override amq-accessibility plugin: div:focus { text-decoration: underline }
 * H4: Preserve keyboard focus ring via :focus-visible for WCAG 2.4.7 compliance.
 * Only suppress outline for mouse/touch users (:focus:not(:focus-visible)).
 */
.amq-bb .amq-bb__btn,
.amq-bb .amq-bb__btn *,
.amq-bb .amq-bb__btn:hover,
.amq-bb .amq-bb__btn:active,
.amq-bb .amq-bb__btn:hover *,
.amq-bb .amq-bb__btn:active * {
  text-decoration: none !important;
}
.amq-bb .amq-bb__btn:focus:not(:focus-visible),
.amq-bb .amq-bb__btn:focus:not(:focus-visible) * {
  text-decoration: none !important;
  outline: none;
}
.amq-bb .amq-bb__btn:focus-visible {
  outline: 2px solid #003466;
  outline-offset: 2px;
  border-radius: 5px;
}

.amq-bb__btn-label {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 5px;
  border: 1px solid #F2F5F7;
  background: #FFF;
  text-align: center;
  transition: border-color 0.15s ease, font-weight 0.1s ease;
}

/* ── Check Icon (top-right corner dot) ──────────────────────────────────── */

.amq-bb__check {
  display: none;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 50%;
  background: #003466;
}

.amq-bb__check svg {
  width: 6px;
  height: 4px;
}

/* ── Button States ──────────────────────────────────────────────────────── */

/* Selected (active) */
.amq-bb__btn.is-active .amq-bb__btn-label {
  border-color: #003466;
  font-weight: 700;
}
.amq-bb__btn.is-active .amq-bb__check {
  display: flex;
  background: #003466;
}

/* Matratzenfinder recommended */
.amq-bb__btn.is-recommended .amq-bb__btn-label {
  border-color: #5E9602;
}
.amq-bb__btn.is-recommended .amq-bb__check {
  display: flex;
  background: #5E9602;
}

/* Matratzenfinder mismatch */
.amq-bb__btn.is-mismatch .amq-bb__btn-label {
  border-color: #B80028;
}
.amq-bb__btn.is-mismatch .amq-bb__check {
  display: flex;
  background: #B80028;
}

/* Disabled (not available for current combination) */
.amq-bb__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hover (only for non-active, non-disabled buttons) */
.amq-bb__btn:not(.is-active):not(.is-recommended):not(.is-mismatch):not(.is-disabled):hover .amq-bb__btn-label {
  border-color: #7290AC;
}
.amq-bb__card:not(.is-active):not(.is-recommended):not(.is-mismatch):not(.is-disabled):hover .amq-bb__card-inner {
  border-color: #7290AC;
}

/* ── Card (variant type) ────────────────────────────────────────────────── */

.amq-bb__section--card .amq-bb__grid {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.amq-bb__card {
  display: flex;
  flex-direction: column;
  width: calc((100% + 4px) / var(--cols) - 4px);
}

.amq-bb__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #F2F5F7;
  background: #FFF;
  text-align: center;
  transition: border-color 0.15s ease;
}

.amq-bb__card-label {
  display: flex;
  padding: 12px 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #F2F5F7;
  color: #003466;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  transition: border-color 0.15s ease;
}

/* Remove bottom spacing and border if the label is the ONLY element in the card */
.amq-bb__card-inner:has(> .amq-bb__card-label:last-child) {
  padding-bottom: 0;
}
.amq-bb__card-label:last-child {
  border-bottom: none;
}

.amq-bb__card-value {
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}

.amq-bb__card-sub {
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
}

/* Card active states */
.amq-bb__card.is-active .amq-bb__card-inner,
.amq-bb__card.is-active .amq-bb__card-label {
  border-color: #003466;
}
.amq-bb__card.is-active .amq-bb__card-label {
  font-weight: 700;
}

.amq-bb__card.is-recommended .amq-bb__card-inner,
.amq-bb__card.is-recommended .amq-bb__card-label {
  border-color: #5E9602;
}

.amq-bb__card.is-mismatch .amq-bb__card-inner,
.amq-bb__card.is-mismatch .amq-bb__card-label {
  border-color: #B80028;
}

/* ── Badge ──────────────────────────────────────────────────────────────── */

.amq-bb__badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -7px;
  width: max-content;
  border-radius: 4px;
  background: #003466;
  padding: 1px 8px 2px;
  color: #FFF;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  z-index: 1;
}

/* ── Swatch (color circle) ─────────────────────────────────────────────── */

.amq-bb__swatch {
  width: auto;
  padding: 3px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amq-bb__swatch-circle {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

/* Light colors (white/cream) need a visible border */
.amq-bb__swatch-circle[data-light="true"] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Swatch hover */
.amq-bb__swatch:not(.is-active):not(.is-recommended):not(.is-mismatch):not(.is-disabled):hover {
  border-color: #7290AC;
}

/* Swatch active states */
.amq-bb__swatch.is-active {
  border-color: #003466;
}
.amq-bb__swatch.is-active .amq-bb__check {
  display: flex;
  background: #003466;
  top: -2px;
  right: -2px;
}

.amq-bb__swatch.is-recommended {
  border-color: #5E9602;
}
.amq-bb__swatch.is-recommended .amq-bb__check {
  display: flex;
  background: #5E9602;
  top: -2px;
  right: -2px;
}

.amq-bb__swatch.is-mismatch {
  border-color: #B80028;
}
.amq-bb__swatch.is-mismatch .amq-bb__check {
  display: flex;
  background: #B80028;
  top: -2px;
  right: -2px;
}

.amq-bb__swatch.is-disabled {
  opacity: 0.3;
}

/* ── Message Block ──────────────────────────────────────────────────────── */

.amq-bb__msg--positive,
.amq-bb__msg--negative {
  display: none;
  padding: 8px;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
}

.amq-bb__msg--positive {
  background: linear-gradient(91deg, #D3DBC5 0%, #E7EFD9 33.53%, #E7EFD9 99.39%), #FFF;
}

.amq-bb__msg--negative {
  background: linear-gradient(91deg, #ED8199 0%, #EF98AB 12.69%, #FFC0CE 99.39%), #FFF;
}

.amq-bb__msg--positive.is-visible,
.amq-bb__msg--negative.is-visible {
  display: flex;
}

.amq-bb__msg-icon {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.amq-bb__msg-icon--pos {
  background: #F3F7EC;
}

.amq-bb__msg-icon--neg {
  background: linear-gradient(0deg, rgba(184, 0, 40, 0.02) 0%, rgba(184, 0, 40, 0.02) 100%), #FFF;
}

.amq-bb__msg-text {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
}

/* ── Notices (dynamic product hints) ─────────────────────────────────── */

.amq-bb__notice {
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(114, 144, 172, 0.15);
  font-size: 13px;
  line-height: 1.5;
}

.amq-bb__notice-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.amq-bb__notice-content strong {
  font-size: 14px;
  font-weight: 700;
  color: #003466;
}

.amq-bb__notice-content a {
  color: #003466;
  text-decoration: none;
  font-weight: 600;
}

.amq-bb__notice-content a:hover {
  text-decoration: underline;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.amq-bb__modal {
  position: fixed;
  /* M5: Longhand fallback for iOS Safari <14.5 which lacks inset shorthand */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.15);
  z-index: 100000;
}

.amq-bb__modal.is-open {
  display: flex;
}

@keyframes amq-bb-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* M9: Respect user motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .amq-bb__modal-container {
    animation: none;
  }
}

.amq-bb__modal-container {
  position: relative;
  overflow: hidden;
  animation: amq-bb-slide-up 0.4s ease;
  display: flex;
  width: 100%;
  padding: 20px 20px 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 6px 6px 0 0;
  background: #fff;
}

.amq-bb__modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
}

.amq-bb__modal-close:hover {
  opacity: 0.7;
}
/* H5: Suppress outline for mouse/touch, show for keyboard */
.amq-bb__modal-close:focus:not(:focus-visible) {
  background: none;
  outline: none;
}
.amq-bb__modal-close:focus-visible {
  outline: 2px solid #003466;
  outline-offset: 2px;
  border-radius: 4px;
}

.amq-bb__modal-body {
  width: 100%;
  height: 500px;
}

.amq-bb__modal-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.amq-bb__modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amq-bb__modal-footer {
  display: flex;
  width: calc(100% + 40px);
  margin-left: -20px;
  padding: 16px 20px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: #f9f9f9;
}

.amq-bb__modal-footer-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.amq-bb__modal-footer-text {
  flex: 1 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.amq-bb__modal-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.amq-bb__modal-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hide WooCommerce native dropdowns when buy box is present ──────────── */
/* Body class 'has-amq-buy-box' is added server-side and reinforced by JS. */

.has-amq-buy-box .variations_form .variations tr {
  display: none !important;
}

/* Also hide the quantity field – scoped to buy-box pages only */
.has-amq-buy-box .woocommerce-variation-add-to-cart .quantity {
  display: none !important;
}

.has-amq-buy-box .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  margin: 0 !important;
  border-radius: 5px !important;
}

/* Body scroll lock when modal is open (toggled via JS class) */
body.amq-modal-open {
  overflow: hidden !important;
}

/* ── Utility ────────────────────────────────────────────────────────────── */

.amq-bb__desktop-only {
  display: none;
}

/* ── Desktop ────────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  /* Wider grids on desktop for size/mass attributes */
  .amq-bb__section[data-attribute="pa_groesse"],
  .amq-bb__section[data-attribute="pa_masse"] {
    --cols: 6;
  }

  /* H3: Compact button height on desktop – only for mouse/trackpad users.
   * Tablets at 768px+ use touch input and need the larger 44px targets.
   * pointer:fine matches mice/trackpads but not touch screens. */
  @media (pointer: fine) {
    .amq-bb__btn-label {
      min-height: 32px;
      padding: 2px 4px;
    }
  }

  .amq-bb__desktop-only {
    display: block;
  }

  /* Modal desktop layout */
  .amq-bb__modal {
    align-items: center;
  }

  .amq-bb__modal-container {
    padding: 24px 32px 32px;
    flex-direction: row;
    gap: 24px;
    max-width: 758px;
    align-items: flex-end;
    border-radius: 6px;
  }

  .amq-bb__modal-close {
    top: 24px;
    right: 32px;
  }

  .amq-bb__modal-body {
    width: 335px;
    min-width: 335px;
    height: auto;
    position: relative;
  }

  .amq-bb__modal-footer {
    margin-bottom: 24px;
    padding: 16px;
    width: 100%;
    margin-left: 0;
    position: relative;
  }

  .amq-bb__modal-footer-text {
    font-size: 16px;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .amq-bb__desktop-only {
    display: none !important;
  }
  .amq-bb {
    padding: 15px 0px 0px;
  }
  .amq-bb__section[data-attribute="pa_breite"],
  .amq-bb__section[data-attribute="pa_laenge"],
  .amq-bb__section[data-attribute="pa_groesse"],
  .amq-bb__section[data-attribute="pa_masse"] {
    --cols: 4 !important;
  }
}