/* Membership products: Join button, download button, live preview button */

/* Join Membership: full-width, no Add to Cart */
.single-product .product_cat-membership form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.single-product .product_cat-membership .single_add_to_cart_button {
  display: none !important;
}

.single-product .product_cat-membership .ux-buy-now-button {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Download button (primary, filled) */
.single-product {
  --insi-dl-bg: #B5EB00;
  --insi-dl-bg-hover: #A3D400;
  --insi-dl-text: #000000;
  --insi-dl-focus: #000000;
  --insi-dl-radius: 999px;
  --insi-dl-height: 48px;
  --insi-dl-font-size: 15px;
  --insi-dl-icon: 20px;
}

.single-product :is(.insi-membership-downloads, .insi-download-area) {
  display: block !important;
  width: 100% !important;
}

.single-product :is(.insi-membership-downloads, .insi-download-area) :is(p, div) {
  margin: 0 !important;
}

.single-product :is(
  a.insi-membership-download-button,
  .insi-membership-downloads a[href],
  .insi-download-area a[href]
) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: var(--insi-dl-height) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: var(--insi-dl-radius) !important;
  background: var(--insi-dl-bg) !important;
  color: var(--insi-dl-text) !important;
  box-shadow: none !important;
  font-size: var(--insi-dl-font-size) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

/* Icon: arrow onto a line, follows text colour */
.single-product :is(
  a.insi-membership-download-button,
  .insi-membership-downloads a[href],
  .insi-download-area a[href]
)::before {
  content: "" !important;
  flex: 0 0 var(--insi-dl-icon) !important;
  width: var(--insi-dl-icon) !important;
  height: var(--insi-dl-icon) !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 7v9M8 12.5l4 4 4-4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 7v9M8 12.5l4 4 4-4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.single-product :is(
  a.insi-membership-download-button,
  .insi-membership-downloads a[href],
  .insi-download-area a[href]
):hover {
  background: var(--insi-dl-bg-hover) !important;
  color: var(--insi-dl-text) !important;
}

.single-product :is(
  a.insi-membership-download-button,
  .insi-membership-downloads a[href],
  .insi-download-area a[href]
):focus-visible {
  outline: 2px solid var(--insi-dl-focus) !important;
  outline-offset: 2px !important;
}

/* Live preview button (secondary, outlined) */
.insi-live-preview-button {
  --insi-pv-text: #000000;
  --insi-pv-bg: #ffffff;
  --insi-pv-bg-hover: #f4fbdc;
  --insi-pv-border: #000000;
  --insi-pv-icon: 20px;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1.5px solid var(--insi-pv-border) !important;
  border-radius: 999px !important;
  background: var(--insi-pv-bg) !important;
  color: var(--insi-pv-text) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.insi-live-preview-button:hover {
  background: var(--insi-pv-bg-hover) !important;
  color: var(--insi-pv-text) !important;
}

.insi-live-preview-button:focus-visible {
  outline: 2px solid var(--insi-pv-border) !important;
  outline-offset: 2px !important;
}

.insi-live-preview-icon {
  display: inline-block !important;
  flex: 0 0 var(--insi-pv-icon) !important;
  width: var(--insi-pv-icon) !important;
  height: var(--insi-pv-icon) !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Hide the old inline SVG; the mask icon replaces it */
.insi-live-preview-icon svg {
  display: none !important;
}

@media only screen and (max-width: 849px) {
  .insi-live-preview-button {
    --insi-pv-icon: 18px;
  }
}