/* =====================================================================
   Button FX — site-wide hover transition hook
   ---------------------------------------------------------------------
   Shared class .dm-btn-fx, added by the delmaguey_button() helper
   (inc/helpers.php) and by hand-written pill CTAs. Per the design board,
   hover/focus changes colour only — no lift, no shadow.

   The selector is doubled (.dm-btn-fx.dm-btn-fx) so this `transition`
   wins over a block stylesheet that prints later and sets its own.
   ===================================================================== */

.dm-btn-fx.dm-btn-fx {
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              border-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1),
              filter .3s cubic-bezier(0, 0, .2, 1),
              opacity .3s cubic-bezier(0, 0, .2, 1);
}

/* ---- Primary (forest) buttons -------------------------------------
   Board spec, same for with-icon, without-icon and icon-only:
   default forest, hover yellow with a 15% black hairline, focus/press
   adds a 2px forest ring 2px clear, disabled at 60%.
   The hairline is an inset shadow so un-bordered CTAs don't shift.
   (.dm-btn--primary in button.css follows the same spec.) */

:is(
  .dm-btn-fx--primary,
  .dm-ig__cta,
  .dm-intro-split__cta,
  .dm-learn__cta,
  .dm-shop__cta,
  .dm-villages__cta,
  .dm-simcock__browse,
  .dm-wte-btn,
  .dm-nlpop__submit,
  .dm-mezcales-apply,
  .dm-mezcales-filter-trigger,
  .dm-cocktails-filter-trigger
) {
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1),
              box-shadow .3s cubic-bezier(0, 0, .2, 1),
              opacity .3s cubic-bezier(0, 0, .2, 1);
}

:is(
  .dm-btn-fx--primary,
  .dm-ig__cta,
  .dm-intro-split__cta,
  .dm-learn__cta,
  .dm-shop__cta,
  .dm-villages__cta,
  .dm-simcock__browse,
  .dm-wte-btn,
  .dm-nlpop__submit,
  .dm-mezcales-apply,
  .dm-mezcales-filter-trigger,
  .dm-cocktails-filter-trigger
):is(:hover, :focus-visible, :active) {
  background-color: var(--dm-bg-accent-yellow);
  color: var(--dm-fg-default-primary);
  box-shadow: inset 0 0 0 1px var(--dm-border-default-dark);
}

:is(
  .dm-btn-fx--primary,
  .dm-ig__cta,
  .dm-intro-split__cta,
  .dm-learn__cta,
  .dm-shop__cta,
  .dm-villages__cta,
  .dm-simcock__browse,
  .dm-wte-btn,
  .dm-nlpop__submit,
  .dm-mezcales-apply,
  .dm-mezcales-filter-trigger,
  .dm-cocktails-filter-trigger
):is(:focus-visible, :active) {
  outline: 2px solid var(--dm-border-default-dark-strong);
  outline-offset: 2px;
}

:is(
  .dm-btn-fx--primary,
  .dm-ig__cta,
  .dm-intro-split__cta,
  .dm-learn__cta,
  .dm-shop__cta,
  .dm-villages__cta,
  .dm-simcock__browse,
  .dm-wte-btn,
  .dm-nlpop__submit,
  .dm-mezcales-apply,
  .dm-mezcales-filter-trigger,
  .dm-cocktails-filter-trigger
):is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: .6;
  pointer-events: none;
  cursor: default;
}

/* ---- Secondary (outlined) buttons ---------------------------------
   Board spec, same for with-icon, without-icon and icon-only:
   default transparent with a forest outline and forest ink; hover fills
   forest with white ink; focus/press adds a 2px forest ring 2px clear;
   disabled at 60%. (.dm-btn--secondary in button.css follows the same
   spec.) Each button keeps its own border width. */

:is(
  .dm-btn-fx--secondary,
  .dm-simcock__arrow,
  .dm-cur-navbtn,
  .dm-collections__arrow,
  .dm-shop__arrow,
  .dm-carousel__arrow,
  .dm-arc__nav,
  .dm-mezcales-card__compare,
  .dm-pdp__compare
) {
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              border-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1),
              opacity .3s cubic-bezier(0, 0, .2, 1);
}

:is(
  .dm-btn-fx--secondary,
  .dm-simcock__arrow,
  .dm-cur-navbtn,
  .dm-collections__arrow,
  .dm-shop__arrow,
  .dm-carousel__arrow,
  .dm-arc__nav,
  .dm-mezcales-card__compare,
  .dm-pdp__compare
):is(:hover, :focus-visible, :active) {
  background-color: var(--dm-bg-default-tertiary);
  border-color: var(--dm-border-default-dark-strong);
  color: var(--dm-fg-default-white);
}

:is(
  .dm-btn-fx--secondary,
  .dm-simcock__arrow,
  .dm-cur-navbtn,
  .dm-collections__arrow,
  .dm-shop__arrow,
  .dm-carousel__arrow,
  .dm-arc__nav,
  .dm-mezcales-card__compare,
  .dm-pdp__compare
):is(:focus-visible, :active) {
  outline: 2px solid var(--dm-border-default-dark-strong);
  outline-offset: 2px;
}

:is(
  .dm-btn-fx--secondary,
  .dm-simcock__arrow,
  .dm-cur-navbtn,
  .dm-collections__arrow,
  .dm-shop__arrow,
  .dm-carousel__arrow,
  .dm-arc__nav,
  .dm-mezcales-card__compare,
  .dm-pdp__compare
):is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: .6;
  pointer-events: none;
  cursor: default;
}

/* ---- Tertiary (white) buttons -------------------------------------
   Board spec, for dark grounds: default white fill with forest ink;
   hover yellow; focus/press yellow plus a 2px white ring 2px clear;
   disabled at 60%. (.dm-btn--tertiary in button.css follows the same
   spec.) The composed village result keeps its own outlined button. */

:is(
  .dm-btn-fx--tertiary,
  .dm-tips__btn,
  .dm-fpb__cta,
  .dm-mezcal-banner__btn,
  .dm-cocktails-featured__body .dm-featured-btn,
  .dm-vmap__btn,
  .dm-vs-result:not(.dm-vs-result--composed) .dm-vs-result__btn
) {
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1),
              opacity .3s cubic-bezier(0, 0, .2, 1);
}

:is(
  .dm-btn-fx--tertiary,
  .dm-tips__btn,
  .dm-fpb__cta,
  .dm-mezcal-banner__btn,
  .dm-cocktails-featured__body .dm-featured-btn,
  .dm-vmap__btn,
  .dm-vs-result:not(.dm-vs-result--composed) .dm-vs-result__btn
):is(:hover, :focus-visible, :active) {
  background-color: var(--dm-bg-accent-yellow);
  color: var(--dm-fg-default-primary);
}

:is(
  .dm-btn-fx--tertiary,
  .dm-tips__btn,
  .dm-fpb__cta,
  .dm-mezcal-banner__btn,
  .dm-cocktails-featured__body .dm-featured-btn,
  .dm-vmap__btn,
  .dm-vs-result:not(.dm-vs-result--composed) .dm-vs-result__btn
):is(:focus-visible, :active) {
  outline: 2px solid var(--dm-border-default-light-strong);
  outline-offset: 2px;
}

:is(
  .dm-btn-fx--tertiary,
  .dm-tips__btn,
  .dm-fpb__cta,
  .dm-mezcal-banner__btn,
  .dm-cocktails-featured__body .dm-featured-btn,
  .dm-vmap__btn,
  .dm-vs-result:not(.dm-vs-result--composed) .dm-vs-result__btn
):is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: .6;
  pointer-events: none;
  cursor: default;
}

/* ---- Tertiary icon-only (white discs: social / share icons) --------
   Default white, hover yellow; focus/press yellow plus a 2px forest ring
   2px clear (forest, not white, because these sit on light grounds). */

:is(
  .dm-footer-social-link,
  .dm-author-social__link,
  .dm-post-bar__social,
  .dm-cpd__share
) {
  background-color: var(--dm-bg-default-white);
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1),
              opacity .3s cubic-bezier(0, 0, .2, 1);
}

:is(
  .dm-footer-social-link,
  .dm-author-social__link,
  .dm-post-bar__social,
  .dm-cpd__share
):is(:hover, :focus-visible, :active) {
  background-color: var(--dm-bg-accent-yellow);
  color: var(--dm-fg-default-primary);
}

:is(
  .dm-footer-social-link,
  .dm-author-social__link,
  .dm-post-bar__social,
  .dm-cpd__share
):is(:focus-visible, :active) {
  outline: 2px solid var(--dm-border-default-dark-strong);
  outline-offset: 2px;
}

/* ---- Home hero CTA (yellow pill on the dark hero) ------------------
   Not on the board: it rests in the tertiary hover colour, so its hover
   is the reverse — white fill — with the tertiary white ring on focus. */

.dm-home-hero__cta {
  transition: background-color .3s cubic-bezier(0, 0, .2, 1),
              color .3s cubic-bezier(0, 0, .2, 1);
}

.dm-home-hero__cta:is(:hover, :focus-visible, :active) {
  background-color: var(--dm-bg-default-white);
  color: var(--dm-fg-default-primary);
}

.dm-home-hero__cta:is(:focus-visible, :active) {
  outline: 2px solid var(--dm-border-default-light-strong);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Price info (i) tooltip — shared component.
 *
 * The listing card has its own right-aligned variant
 * (.dm-mezcales-card__tip in mezcales-listing.css); this is the shared one
 * used by the PDP price row, the "Similar mezcales" cards on the product and
 * cocktail templates, and the compare table, where the icon sits at the start
 * of the row so the bubble is left-aligned. Markup comes from
 * delmaguey_price_info_tip() in inc/setup/mezcales-listing.php.
 * ------------------------------------------------------------------ */
.dm-price-tip {
  position: relative;
  display: inline-flex;
}

.dm-price-tip__btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-forest, var(--dm-fg-default-primary));
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.dm-price-tip__btn:hover,
.dm-price-tip__btn:focus-visible {
  opacity: 1;
}

.dm-price-tip__btn:focus-visible {
  outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
  outline-offset: 2px;
  border-radius: 999px;
}

/* White bubble above the icon, left-aligned to it. Hover on pointers, focus on
   keyboards, and a tap focuses the button on touch. */
.dm-price-tip__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -6px;
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dm-ext-black) 8%, transparent);
  background: var(--dm-bg-default-white);
  color: var(--dm-fg-default-primary);
  font-family: var(--font-default);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--dm-ext-black) 14%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

.dm-price-tip__btn:hover + .dm-price-tip__bubble,
.dm-price-tip__btn:focus-visible + .dm-price-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dm-price-tip__bubble {
    transition: none;
  }
}