/**
 * BMT Pricing Dropdown Buttons - Complete Responsive Stylesheet
 * Incorporates Spectra button layout paradigms, strict SVG dimensional locking,
 * clean Desktop (>=768px) vs Mobile (<768px) layout rules, customizable spacing,
 * pseudo-element resets, and custom caret SVG arrow icon.
 */

/* ==========================================================================
   0. Universal Pseudo-Element & Caret Resets (Blocksy & Theme Compatibility)
   ========================================================================== */
.bmt-btn::before,
.bmt-btn::after,
.bmt-btn-col::before,
.bmt-btn-col::after,
.bmt-dropdown-wrapper::before,
.bmt-dropdown-wrapper::after,
.bmt-dropdown-icon::before,
.bmt-dropdown-icon::after,
.editor-styles-wrapper .bmt-btn::before,
.editor-styles-wrapper .bmt-btn::after,
.editor-styles-wrapper .bmt-btn-col::before,
.editor-styles-wrapper .bmt-btn-col::after,
.editor-styles-wrapper .bmt-dropdown-wrapper::before,
.editor-styles-wrapper .bmt-dropdown-wrapper::after,
.editor-styles-wrapper .bmt-dropdown-icon::before,
.editor-styles-wrapper .bmt-dropdown-icon::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   1. Outer Container & Alignments
   ========================================================================== */
.editor-styles-wrapper .bmt-btn-container,
.block-editor-block-list__block .bmt-btn-container,
.bmt-btn-container {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: var(--bmt-margin-top, 0px) !important;
  margin-bottom: var(--bmt-margin-bottom, 0px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  clear: both !important;
}

/* Desktop Alignments */
@media (min-width: 768px) {
  .bmt-align-desktop-left,
  .bmt-btn-container.bmt-align-left {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .bmt-align-desktop-center,
  .bmt-btn-container.bmt-align-center {
    justify-content: center !important;
    text-align: center !important;
  }

  .bmt-align-desktop-right,
  .bmt-btn-container.bmt-align-right {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .bmt-align-desktop-full,
  .bmt-btn-container.bmt-align-full {
    width: 100% !important;
    justify-content: stretch !important;
  }
}

/* Editor Canvas Alignments */
.editor-styles-wrapper .bmt-align-desktop-left { justify-content: flex-start !important; }
.editor-styles-wrapper .bmt-align-desktop-center { justify-content: center !important; }
.editor-styles-wrapper .bmt-align-desktop-right { justify-content: flex-end !important; }
.editor-styles-wrapper .bmt-align-desktop-full { width: 100% !important; justify-content: stretch !important; }

/* ==========================================================================
   2. Button Group Layouts
   ========================================================================== */
.editor-styles-wrapper .bmt-btn-group,
.block-editor-block-list__block .bmt-btn-group,
.bmt-btn-group {
  display: flex !important;
  gap: var(--bmt-gap, 12px) !important;
  align-items: stretch !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* --- DESKTOP (>= 768px) --- */
@media (min-width: 768px) {
  .bmt-btn-group.bmt-desktop-inline {
    flex-direction: row !important;
    display: inline-flex !important;
  }

  .bmt-btn-group.bmt-desktop-inline.bmt-full-width,
  .bmt-align-desktop-full .bmt-btn-group.bmt-desktop-inline {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bmt-btn-group.bmt-desktop-inline.bmt-full-width .bmt-btn-col,
  .bmt-align-desktop-full .bmt-btn-group.bmt-desktop-inline .bmt-btn-col {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  .bmt-btn-group.bmt-desktop-stacked {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bmt-btn-group.bmt-desktop-stacked .bmt-btn-col {
    width: 100% !important;
    flex: none !important;
  }

  .bmt-align-desktop-left .bmt-btn-group.bmt-desktop-stacked:not(.bmt-full-width) {
    max-width: 400px !important;
  }

  .bmt-align-desktop-center .bmt-btn-group.bmt-desktop-stacked:not(.bmt-full-width) {
    margin: 0 auto !important;
    max-width: 400px !important;
  }

  .bmt-align-desktop-right .bmt-btn-group.bmt-desktop-stacked:not(.bmt-full-width) {
    margin-left: auto !important;
    max-width: 400px !important;
  }
}

/* Editor Canvas Desktop Emulation */
.editor-styles-wrapper .bmt-btn-group.bmt-desktop-inline {
  flex-direction: row !important;
  display: inline-flex !important;
}

.editor-styles-wrapper .bmt-btn-group.bmt-desktop-inline.bmt-full-width,
.editor-styles-wrapper .bmt-align-desktop-full .bmt-btn-group.bmt-desktop-inline {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
}

.editor-styles-wrapper .bmt-btn-group.bmt-desktop-inline.bmt-full-width .bmt-btn-col,
.editor-styles-wrapper .bmt-align-desktop-full .bmt-btn-group.bmt-desktop-inline .bmt-btn-col {
  flex: 1 1 0 !important;
  width: auto !important;
}

.editor-styles-wrapper .bmt-btn-group.bmt-desktop-stacked {
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
}

.editor-styles-wrapper .bmt-btn-group.bmt-desktop-stacked .bmt-btn-col {
  width: 100% !important;
  flex: none !important;
}

/* Column Wrapper */
.editor-styles-wrapper .bmt-btn-col,
.block-editor-block-list__block .bmt-btn-col,
.bmt-btn-col {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3. Base Button Styling (Smooth Bi-directional Transitions)
   ========================================================================== */
.uagb-buttons__outer-wrap .bmt-btn,
.uagb-buttons__outer-wrap .bmt-btn *,
.editor-styles-wrapper .bmt-btn,
.editor-styles-wrapper .bmt-btn *,
.bmt-btn,
.bmt-btn *,
.bmt-btn-col,
.bmt-btn-col * {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.editor-styles-wrapper .bmt-btn,
.editor-styles-wrapper div.bmt-btn,
.editor-styles-wrapper a.bmt-btn,
.block-editor-block-list__block .bmt-btn,
.bmt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 50px !important;
  padding: 14px 24px !important;
  border-radius: 6px !important;
  font-family: var(--theme-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  outline: none !important;
  border: 1px solid transparent !important;
  user-select: none !important;
  position: static !important;
  vertical-align: middle !important;
}

.bmt-btn-label {
  display: inline-block !important;
  vertical-align: middle !important;
  color: inherit !important;
}

/* ==========================================================================
   4. Primary Button (Theme Palette & Dynamic Variable Colors)
   ========================================================================== */
.editor-styles-wrapper .bmt-btn-primary,
.editor-styles-wrapper div.bmt-btn-primary,
.editor-styles-wrapper a.bmt-btn-primary,
.bmt-btn-primary {
  background-color: var(--bmt-primary-bg, var(--theme-button-background-initial-color, var(--theme-palette-color-2, #e67e22))) !important;
  color: var(--bmt-primary-text, var(--theme-button-text-initial-color, var(--theme-palette-color-4, #ffffff))) !important;
  border: 1px solid var(--bmt-primary-border, transparent) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -1px 0 rgba(176, 99, 17, 0.4) inset, 0 4px 12px rgba(230, 126, 34, 0.25) !important;
}

.editor-styles-wrapper .bmt-btn-primary .bmt-btn-label,
.editor-styles-wrapper .bmt-btn-primary .bmt-dropdown-icon,
.bmt-btn-primary .bmt-btn-label,
.bmt-btn-primary .bmt-dropdown-icon {
  color: inherit !important;
}

.editor-styles-wrapper .bmt-btn-primary:hover,
.editor-styles-wrapper .bmt-dropdown-wrapper.is-open .bmt-btn-primary,
.editor-styles-wrapper .bmt-dropdown-wrapper:hover .bmt-btn-primary,
.bmt-btn-primary:hover,
.bmt-dropdown-wrapper.is-open .bmt-btn-primary,
.bmt-dropdown-wrapper:hover .bmt-btn-primary {
  background-color: var(--bmt-primary-hover-bg, var(--theme-button-background-hover-color, var(--theme-palette-color-15, #d35400))) !important;
  color: var(--bmt-primary-hover-text, var(--bmt-primary-text, var(--theme-button-text-hover-color, var(--theme-palette-color-14, #ffffff)))) !important;
  border-color: var(--bmt-primary-hover-border, var(--bmt-primary-border, transparent)) !important;
}

/* ==========================================================================
   5. Secondary Button (Light & Dark Section Tuning)
   ========================================================================== */
.editor-styles-wrapper .bmt-btn-secondary,
.editor-styles-wrapper div.bmt-btn-secondary,
.editor-styles-wrapper a.bmt-btn-secondary,
.bmt-btn-secondary {
  background-color: var(--bmt-secondary-bg, transparent) !important;
  color: var(--bmt-secondary-text, #0a1626) !important;
  border: 1px solid var(--bmt-secondary-border, rgba(10, 22, 38, 0.4)) !important;
  box-shadow: none !important;
}

.bmt-btn-secondary:hover,
.editor-styles-wrapper .bmt-btn-secondary:hover {
  background-color: var(--bmt-secondary-hover-bg, #f0f4f8) !important;
  color: var(--bmt-secondary-hover-text, var(--bmt-secondary-text, #0a1626)) !important;
  border-color: var(--bmt-secondary-hover-border, var(--bmt-secondary-border, #0a1626)) !important;
}

/* Dark Background Preset */
.bmt-on-dark .bmt-btn-secondary,
.editor-styles-wrapper .bmt-on-dark .bmt-btn-secondary {
  color: var(--bmt-secondary-text, #ffffff) !important;
  border-color: var(--bmt-secondary-border, rgba(255, 255, 255, 0.7)) !important;
  background-color: var(--bmt-secondary-bg, transparent) !important;
}

.bmt-on-dark .bmt-btn-secondary:hover,
.editor-styles-wrapper .bmt-on-dark .bmt-btn-secondary:hover {
  background-color: var(--bmt-secondary-hover-bg, rgba(255, 255, 255, 0.15)) !important;
  color: var(--bmt-secondary-hover-text, #ffffff) !important;
  border-color: var(--bmt-secondary-hover-border, #ffffff) !important;
}

/* Smooth Arrow Nudge */
.uagb-buttons-repeater:hover svg,
.bmt-btn:hover .bmt-btn-icon svg,
.bmt-btn-secondary:hover .bmt-btn-icon svg {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   6. Fixed SVG Dimensions & Dropdown Rotation
   ========================================================================== */
.bmt-btn-icon,
.bmt-dropdown-icon,
.bmt-item-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
}

.bmt-dropdown-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  fill: currentColor !important;
  overflow: visible !important;
  transform: translateX(0) rotate(0deg);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  border: none !important;
}

.bmt-dropdown-icon svg path {
  fill: currentColor !important;
}

.bmt-btn-icon svg,
.bmt-item-arrow svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  overflow: visible !important;
  transform: translateX(0);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  border: none !important;
}

.bmt-dropdown-wrapper:hover .bmt-dropdown-icon svg,
.bmt-dropdown-wrapper.is-open .bmt-dropdown-icon svg {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   7. Dropdown Menu Flyout
   ========================================================================== */
.editor-styles-wrapper .bmt-dropdown-menu,
.bmt-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  width: max-content !important;
  min-width: 290px !important;
  max-width: min(100vw - 32px, 380px) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px !important;
  list-style: none !important;
  background: var(--bmt-dropdown-bg, #ffffff) !important;
  border: 1px solid var(--bmt-dropdown-border, #d2e5f2) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(10, 22, 38, 0.14), 0 2px 6px rgba(10, 22, 38, 0.04) !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bmt-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Dropdown Placement */
@media (min-width: 768px) {
  .bmt-align-desktop-left .bmt-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: translateY(6px);
  }

  .bmt-align-desktop-left .bmt-dropdown-wrapper:hover .bmt-dropdown-menu,
  .bmt-align-desktop-left .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .bmt-align-desktop-center .bmt-dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(6px);
  }

  .bmt-align-desktop-center .bmt-dropdown-wrapper:hover .bmt-dropdown-menu,
  .bmt-align-desktop-center .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .bmt-align-desktop-right .bmt-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateY(6px);
  }

  .bmt-align-desktop-right .bmt-dropdown-wrapper:hover .bmt-dropdown-menu,
  .bmt-align-desktop-right .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .bmt-align-desktop-full .bmt-dropdown-menu,
  .bmt-btn-group.bmt-full-width .bmt-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: translateY(6px);
  }

  .bmt-align-desktop-full .bmt-dropdown-wrapper:hover .bmt-dropdown-menu,
  .bmt-align-desktop-full .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu,
  .bmt-btn-group.bmt-full-width .bmt-dropdown-wrapper:hover .bmt-dropdown-menu,
  .bmt-btn-group.bmt-full-width .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* Editor Dropdown Placements */
.editor-styles-wrapper .bmt-align-desktop-left .bmt-dropdown-menu { left: 0 !important; right: auto !important; }
.editor-styles-wrapper .bmt-align-desktop-center .bmt-dropdown-menu { left: 50% !important; right: auto !important; transform: translateX(-50%); }
.editor-styles-wrapper .bmt-align-desktop-right .bmt-dropdown-menu { right: 0 !important; left: auto !important; }
.editor-styles-wrapper .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* ==========================================================================
   8. Dropdown Tier List Items
   ========================================================================== */
.editor-styles-wrapper .bmt-dropdown-menu li,
.bmt-dropdown-menu li {
  list-style: none !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

.bmt-dropdown-menu li:last-child {
  margin-bottom: 0 !important;
}

.editor-styles-wrapper .bmt-dropdown-link,
.bmt-dropdown-link,
.bmt-dropdown-link * {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.editor-styles-wrapper .bmt-dropdown-link,
.bmt-dropdown-link {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  color: #0a1626 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.bmt-dropdown-link:hover,
.bmt-dropdown-link:focus {
  background-color: var(--bmt-dropdown-item-hover-bg, #f4f9fc) !important;
  border-color: #e2eff8 !important;
  color: var(--bmt-accent, #0071c1) !important;
  text-decoration: none !important;
}

.bmt-dropdown-link-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
}

.editor-styles-wrapper .bmt-plan-name,
.bmt-plan-name {
  font-family: var(--theme-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #0a1626 !important;
  text-decoration: none !important;
}

.bmt-dropdown-link:hover .bmt-plan-name,
.bmt-dropdown-link:focus .bmt-plan-name {
  color: var(--bmt-accent, #0071c1) !important;
}

.editor-styles-wrapper .bmt-plan-desc,
.bmt-plan-desc {
  font-size: 12px !important;
  color: #556980 !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.editor-styles-wrapper .bmt-plan-badge,
.bmt-plan-badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background-color: #e8f1f8 !important;
  color: var(--bmt-accent, #0071c1) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
  display: inline-block !important;
}

.bmt-item-arrow {
  color: #bcc3c7 !important;
}

.bmt-dropdown-link:hover .bmt-item-arrow,
.bmt-dropdown-link:focus .bmt-item-arrow {
  color: var(--bmt-accent, #0071c1) !important;
}

.bmt-dropdown-link:hover .bmt-item-arrow svg,
.bmt-dropdown-link:focus .bmt-item-arrow svg {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   9. Mobile Overrides (< 768px ONLY)
   ========================================================================== */
@media (max-width: 767px) {
  /* Mobile Alignments */
  .bmt-align-mobile-full,
  .bmt-btn-container.bmt-align-mobile-full {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .bmt-align-mobile-full .bmt-btn-group {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }

  .bmt-align-mobile-full .bmt-btn-col,
  .bmt-align-mobile-full .bmt-btn {
    width: 100% !important;
  }

  .bmt-align-mobile-center {
    justify-content: center !important;
    text-align: center !important;
  }

  .bmt-align-mobile-left {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .bmt-align-mobile-right {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  /* Mobile Stacking */
  .bmt-btn-group.bmt-mobile-stacked {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bmt-btn-group.bmt-mobile-stacked .bmt-btn-col {
    width: 100% !important;
    flex: none !important;
  }

  .bmt-btn-group.bmt-mobile-inline {
    flex-direction: row !important;
  }

  .bmt-btn-group.bmt-mobile-inline .bmt-btn-col {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  /* Mobile Dropdown Menu */
  .bmt-dropdown-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(6px) !important;
  }

  .bmt-align-center .bmt-dropdown-menu,
  .bmt-align-desktop-center .bmt-dropdown-menu,
  .bmt-align-mobile-center .bmt-dropdown-menu {
    left: 0 !important;
    transform: translateY(6px) !important;
  }

  .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu,
  .bmt-align-center .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu,
  .bmt-align-desktop-center .bmt-dropdown-wrapper.is-open .bmt-dropdown-menu {
    transform: translateY(0) !important;
  }
}