/* ═══ WF Checkout Layout v3 — FK hiding + page structure ═══ */

/* Hide FK form — keep in DOM for WC JS, but invisible and non-interactive */
body:not(.woocommerce-order-pay) .wfacp_main_form {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* Our overlay takes over */
#wf-checkout-overlay {
  display: block;
}

/* Hide Astra elements on checkout */
#ast-scroll-top { display: none !important; }

/* ═══ PAGE LAYOUT ═══ */
.wfacp_main_wrapper {
  background: #fff !important;
}

/* Cart/summary column — grey */
.elementor-widget-wfacp_form_summary,
.elementor-widget-wfacp_form_summary .elementor-widget-container {
  background: #fafafa !important;
}
.elementor-widget-wfacp_form_summary {
  min-height: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.elementor-widget-wfacp_form_summary,
.elementor-widget-wfacp_form_summary .elementor-widget-container {
  align-self: stretch !important;
}
.elementor-widget-wfacp_form_summary.elementor-widget {
  height: 100% !important;
}
.elementor-widget-wfacp_form_summary .elementor-widget-container {
  position: sticky !important;
  top: 0 !important;
  padding: 28px 24px !important;
  margin-right: 0 !important;
}

/* Form column — gap + border */
.elementor-widget-wfacp_form .elementor-widget-container {
  padding: 28px 32px 40px 54px !important;
  border-left: 1px solid #e1e1e1 !important;
}

/* Hide Iconic WDS fields if still present */
.jckwds-order-delivery, .iconic-wds-fields,
#jckwds-delivery-date_field, #jckwds-delivery-time_field {
  display: none !important;
}

/* ═══ ORDER-PAY PAGE ═══ */
/* Hide overlay on order-pay */
body.woocommerce-order-pay #wf-checkout-overlay {
  display: none !important;
}
/* Hide footer */
body.woocommerce-order-pay .elementor-location-footer,
body.woocommerce-order-pay .site-footer { display: none !important; }
/* Centered payment form */
body.woocommerce-order-pay .woocommerce-order-pay { max-width: 680px; margin: 0 auto; padding-top: 20px; }
/* Order details list */
.woocommerce-js ul.order_details { margin: 1em; list-style: none; }

/* Unconstrain page height so the payment iframe (and its pay button) is never clipped.
   When the order details panel expands, the iframe grows — containers must grow with it. */
body.woocommerce-order-pay,
body.woocommerce-order-pay html,
body.woocommerce-order-pay #page,
body.woocommerce-order-pay .site-content,
body.woocommerce-order-pay .ast-container,
body.woocommerce-order-pay #primary,
body.woocommerce-order-pay .entry-content,
body.woocommerce-order-pay .woocommerce,
body.woocommerce-order-pay .woocommerce-order-pay,
body.woocommerce-order-pay form.woocommerce-pay,
body.woocommerce-order-pay .payment_box {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.woocommerce-order-pay iframe {
  max-height: none !important;
  width: 100% !important;
}

/* ═══ MOBILE ORDER SUMMARY — collapsible Shopify-style ═══ */
#wf-mobile-summary {
  display: none;
}

@media (max-width: 768px) {
  /* Stack columns vertically */
  .wfacp_main_wrapper .elementor-container,
  .wfacp_main_wrapper .e-con {
    flex-direction: column !important;
  }

  /* Cart summary — visually hidden but DOM accessible for JS to read values */
  .elementor-widget-wfacp_form_summary .elementor-widget-container {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    padding: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Mobile summary wrapper (injected by JS at top of page) */
  #wf-mobile-summary-wrap {
    margin: 8px 8px 0;
  }
  #wf-mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #e8e0f0;
    border-radius: 10px;
    cursor: pointer;
    direction: rtl;
  }
  #wf-mobile-summary.wf-open {
    border-radius: 10px 10px 0 0;
    border-bottom: none;
  }
  #wf-mobile-cart-content {
    display: none;
    background: #fafafa;
    border: 1px solid #e8e0f0;
    border-top: 1px solid #e1e1e1;
    border-radius: 0 0 10px 10px;
    padding: 14px 16px;
    direction: rtl;
    font-size: 13px;
  }
  #wf-mobile-cart-content.wf-open {
    display: block;
  }

  /* Product item row */
  .wf-mc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  .wf-mc-item:last-child {
    border-bottom: none;
  }

  /* Image with qty badge */
  .wf-mc-img-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    overflow: visible;
    background: #fff;
  }
  .wf-mc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
  }
  .wf-mc-qty-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    background: #707070;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .wf-mc-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
  }

  .wf-mc-price {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .wf-mc-coupon {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e1e1e1;
  }

  .wf-mc-totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e1e1e1;
  }
  .wf-mc-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #666;
  }
  .wf-mc-total {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid #e1e1e1;
    font-size: 16px !important;
    font-weight: 700;
    color: #1a1a1a !important;
  }

  #wf-mobile-summary .wf-ms-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #ab92bf;
  }
  #wf-mobile-summary .wf-ms-label svg {
    width: 16px;
    height: 16px;
    stroke: #ab92bf;
    stroke-width: 1.5;
    fill: none;
    transition: transform 0.2s;
  }
  #wf-mobile-summary.wf-open .wf-ms-label svg {
    transform: rotate(180deg);
  }
  #wf-mobile-summary .wf-ms-total {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
  }

  /* Form column — remove border + adjust padding */
  .elementor-widget-wfacp_form .elementor-widget-container {
    padding: 16px 8px 30px !important;
    border-left: none !important;
  }
}

/* ═══ HIDE WC CHECKOUT UPDATE SPINNER ═══ */
/* WooCommerce triggers blockUI overlay on checkout update — hide it since our overlay handles UX */
.wfacp_main_form .blockUI.blockOverlay,
.wfacp_main_form .blockUI.blockMsg,
form.woocommerce-checkout .blockUI.blockOverlay,
form.woocommerce-checkout .blockUI.blockMsg {
  display: none !important;
}

/* ═══ ORDER SUMMARY — FULL-WIDTH ITEM TITLE + ADDON META ═══ */
/* Fix: .wfacp_cart_title_sec is inline-block and shrinks to content, squeezing
   dl.variation (addon meta) into a narrow column where each word wraps on its
   own line. Force the title container + inner span to fill the row so the
   variation list uses full width. */
.wfacp_mini_cart_items .wfacp_cart_title_sec {
  display: block !important;
  width: 100% !important;
}
.wfacp_mini_cart_item_title {
  display: block !important;
  width: 100% !important;
}
.wfacp_mini_cart_item_title > span,
.wfacp_mini_cart_item_title .product-name {
  display: block !important;
  width: 100% !important;
  padding-right: 0 !important;
}
.wfacp_mini_cart_item_title dl.variation,
.wfacp_mini_cart_items .product-name dl.variation {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}
.wfacp_mini_cart_item_title dl.variation dt,
.wfacp_mini_cart_item_title dl.variation dd,
.wfacp_mini_cart_items .product-name dl.variation dt,
.wfacp_mini_cart_items .product-name dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
  float: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.wfacp_mini_cart_item_title dl.variation dd,
.wfacp_mini_cart_items .product-name dl.variation dd {
  margin-inline-end: 8px;
}
.wfacp_mini_cart_item_title dl.variation dd p,
.wfacp_mini_cart_items .product-name dl.variation dd p {
  display: inline;
  margin: 0;
}
/* Defensive standalone rules — apply regardless of ancestor class */
.wfacp_cart_title_sec {
  display: block !important;
  width: 100% !important;
}
dl.variation {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}