/* ========================
   Frame It — Frontend UI
   ======================== */

/* Utility */
.is-hidden { display: none !important; }

/* Wrapper */
.frameit-v4 {
  border: 1px solid #eee;
  padding: 14px;
  border-radius: 10px;
  margin: 16px 0;
  background: #fff;
}
.frameit-v4 .fi-header h3 { margin: 0 0 6px; }
.frameit-v4 .fi-sub { font-size: 12px; color: #666; margin-bottom: 10px; }
.fi-empty { font-style: italic; color: #666; }

/* Ensure module sits above add-to-cart & spans full width */
.woocommerce div.product form.cart .frameit-v4,
.woocommerce div.product .woocommerce-variation-add-to-cart .frameit-v4 {
  display: block;
  width: 100%;
  flex: 0 0 100%;
  clear: both;
  margin: 0 0 14px 0;
}

/* Card grid: 3 → 2 → 1 columns */
.fi-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .fi-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fi-card-grid { grid-template-columns: 1fr; } }

/* Cards */
.fi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.fi-card:hover { border-color: #cfcfcf; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.fi-card:active { transform: scale(.997); }

/* Hide native radio but keep it accessible */
.fi-card-radio {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Image box */
.fi-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.fi-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fi-noimg { width: 50%; height: 50%; background: #e9e9e9; border-radius: 6px; }

/* Title */
.fi-card-title {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: #222;
}

/* Selected */
.fi-card.is-selected { border: 2px solid #2c7be5; box-shadow: none; }
.fi-card-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #2c7be5; color: #fff;
  display: none;
  align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.fi-card.is-selected .fi-card-check { display: flex; }

/* Focus handling */
.fi-card-radio:focus + .fi-card-thumb,
.fi-card-radio:focus ~ .fi-card-title { outline: none; }
.fi-card:focus-within { outline: 2px solid #2c7be5; outline-offset: 2px; }

/* Recommendation link */
.fi-rec-line + .fi-sub { margin-top: -6px; }
.fi-take-recommendation { text-decoration: underline; cursor: pointer; }

/* Visibility helpers */
.frameit-v4 .is-hidden { display: none !important; }
.frameit-v4 .is-disabled { pointer-events: none; }
.frameit-v4 .fi-card-item.fi-no-frame { display: none !important; } /* always hide "No Frame" card */
.fi-frame-section.is-hidden { display: none; }
.fi-card--hidden { display: none !important; } /* safety */
.fi-frames-empty { font-size: 13px; color:#888; margin-top:6px; }
.fi-frames-empty.is-hidden { display:none; }
.fi-h { margin: 0 0 10px; font-weight: 600; }

/* Make sure cards are always clickable */
.frameit-v4 .fi-card { pointer-events: auto; cursor: pointer; }
.frameit-v4 .fi-card input.fi-card-radio { pointer-events: auto; }
.frameit-v4 .fi-card-check { pointer-events: none; }
.frameit-v4 .fi-card.is-selected { pointer-events: auto; }

/* Paper flow: glass hidden until a mount is selected */
.frameit-v4 .fi-glass-section { display: none; }
.frameit-v4.has-mount .fi-glass-section { display: block; }

/* Stacking */
.frameit-v4 .fi-mount-section { position: relative; z-index: 2; }
.frameit-v4 .fi-frame-options { position: relative; z-index: 1; margin-top: 12px; }
.frameit-v4 .fi-card { position: relative; }

/* Busy indicator */
.frameit-v4 .fi-busy {
  display: none;
  align-items: center;
  gap: .5rem;
  margin: 8px 0 12px;
  font-size: .95em;
  opacity: .85;
}
.frameit-v4.is-busy .fi-busy { display: flex !important; }
.frameit-v4 .fi-spinner {
  width: 16px; height: 16px;
  border: 2px solid #bbb; border-top-color: #111;
  border-radius: 50%;
  display: inline-block;
  animation: fi-spin 0.8s linear infinite;
}
@keyframes fi-spin { to { transform: rotate(360deg); } }

/* While busy, dim & block interactions */
.frameit-v4.is-busy .fi-card,
.frameit-v4.is-busy .fi-take-rec,
.frameit-v4.is-busy .fi-no-frame-toggle {
  pointer-events: none;
  opacity: .5;
}

/* Paper journey: keep frames hidden until a mount is selected */
.frameit-v4 .is-hidden-until-mount { display: none; }
.frameit-v4.has-mount .is-hidden-until-mount { display: block; }

/* =========================================
   Add-to-Cart Disabled (Elementor + Woo)
   ========================================= */

/* Frame It — keep theme/Elementor styles; just dim and block clicks */
.frameit-active form.cart .single_add_to_cart_button.fi-atc-disabled,
.frameit-active .elementor .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button.fi-atc-disabled,
.frameit-active .elementor .elementor-add-to-cart .elementor-button.fi-atc-disabled,
.single_add_to_cart_button.fi-guard-disabled,
.elementor-button.single_add_to_cart_button.fi-guard-disabled {
  opacity: 0.5 !important;
  /*pointer-events: none !important;*/
  cursor: not-allowed !important;
  filter: none !important;
  /* no background/color/border overrides here */
}

/* prevent hover/focus from changing the look while disabled */
.frameit-active form.cart .single_add_to_cart_button.fi-atc-disabled:is(:hover,:focus),
.frameit-active .elementor .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button.fi-atc-disabled:is(:hover,:focus),
.frameit-active .elementor .elementor-add-to-cart .elementor-button.fi-atc-disabled:is(:hover,:focus),
.single_add_to_cart_button.fi-guard-disabled:is(:hover,:focus),
.elementor-button.single_add_to_cart_button.fi-guard-disabled:is(:hover,:focus) {
  opacity: 0.5 !important;
  /*pointer-events: none !important;*/
  filter: none !important;
}

/* browsers that force :disabled visuals */
.single_add_to_cart_button.fi-atc-disabled:disabled,
.elementor-button.single_add_to_cart_button.fi-atc-disabled:disabled,
.single_add_to_cart_button.fi-guard-disabled:disabled,
.elementor-button.single_add_to_cart_button.fi-guard-disabled:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  /* still no bg/color overrides */
}

/* ============================================================
   Force "not-allowed" cursor on disabled Add to Cart
   ============================================================ */
.single_add_to_cart_button.fi-atc-disabled,
.single_add_to_cart_button.fi-guard-disabled,
.elementor-button.single_add_to_cart_button.fi-atc-disabled,
.elementor-button.single_add_to_cart_button.fi-guard-disabled,
.frameit-active form.cart .single_add_to_cart_button.fi-atc-disabled,
.frameit-active .elementor .elementor-add-to-cart .elementor-button.fi-atc-disabled {
    opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Also enforce on hover/focus/active */
.single_add_to_cart_button.fi-atc-disabled:hover,
.single_add_to_cart_button.fi-atc-disabled:focus,
.single_add_to_cart_button.fi-atc-disabled:active,
.single_add_to_cart_button.fi-guard-disabled:hover,
.single_add_to_cart_button.fi-guard-disabled:focus,
.single_add_to_cart_button.fi-guard-disabled:active,
.elementor-button.single_add_to_cart_button.fi-atc-disabled:hover,
.elementor-button.single_add_to_cart_button.fi-atc-disabled:focus,
.elementor-button.single_add_to_cart_button.fi-atc-disabled:active,
.elementor-button.single_add_to_cart_button.fi-guard-disabled:hover,
.elementor-button.single_add_to_cart_button.fi-guard-disabled:focus,
.elementor-button.single_add_to_cart_button.fi-guard-disabled:active {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
/* Ensure widget is a containing block */
.frameit-v4 { position: relative; }

/* Full overlay busy layer */
.frameit-v4 .fi-busy{
  display: none;              /* JS toggles */
  position: absolute;
  inset: 0;
  z-index: 999;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(1px);
  align-items: center;
  justify-content: center;
  text-align: center;
}





.frameit-v4 .fi-busy-text{
  font-size: 14px;
  color: #333;
}

@keyframes fi-spin {
  to { transform: rotate(360deg); }
}
/* frameit-v4-frontend.css */
.frameit-v4 .fi-busy { display:none; }
.frameit-v4.is-busy .fi-busy { display:flex; } /* or block */


.frameit-v4 { position: relative; }
.frameit-v4 .fi-busy {
  display: none; /* shown by JS */
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,0.65);
  align-items: center;
  justify-content: center;
}
.frameit-v4 .fi-busy .fi-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid #bbb; border-top-color: #333;
  animation: fi-spin 0.8s linear infinite;
}

.fi-result-hidden { display: none; }

/* Spinner defaults to hidden */
.frameit-v4 .fi-busy { display: none; align-items: center; gap: 8px; }

/* When the wrapper is busy, show it */
.frameit-v4.is-updating .fi-busy { display: inline-flex; }

/* Optional: spinner circle if your .fi-spinner is blank */
.frameit-v4 .fi-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  animation: fi-spin 0.8s linear infinite;
}
@keyframes fi-spin { to { transform: rotate(360deg); } }


















/* === Frame It V4 — mobile 3-per-row for MOUNTS === */
@media (max-width: 768px) {
  /* If your markup has a .fi-mount-options wrapper, this is enough */
  .frameit-v4 .fi-mount-section .fi-card-grid, .fi-frame-options .fi-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .frameit-v4 .fi-mount-section .fi-card-grid > .fi-card-item, .fi-frame-options .fi-card-grid > .fi-card-item {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .frameit-v4 .fi-mount-section .fi-card, .fi-frame-options .fi-card  {
    height: 100%;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
  }

  .frameit-v4 .fi-mount-section .fi-card img, .fi-frame-options .fi-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
  }

  .frameit-v4 .fi-mount-section .fi-card-title {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 4px;
  }
}

.elementor-menu-cart__product .variation
{display:block!important}



/* Desktop-only hover preview */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  #fi-hover-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 320px;            /* max preview width */
    max-width: 35vw;         /* keep it responsive on large screens */
    height: auto;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
    pointer-events: none;    /* never steal mouse events */
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.98);
    transition: opacity 120ms ease, transform 120ms ease;
  }
  #fi-hover-preview.show {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
  #fi-hover-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Optional: show a subtle “zoom” cursor when a preview is available */
  .fi-card[data-fi-preview] {
    cursor: zoom-in;
  }
}