/*
 * FMM Monument Builder v16 — Layout CSS
 *
 * SCOPE: Every rule is scoped to .fmm-configurator, .fmm-canvas-wrap,
 * or .fmm-canvas-only-wrap. Nothing here touches the Elementor header,
 * footer, nav, or any element outside the FMM widgets.
 *
 * Sticky behaviour for the left column is handled entirely by Elementor's
 * own sticky setting on the container — NOT by this CSS.
 */

/* ── Configurator wrapper ─────────────────────────────────────── */
.fmm-configurator {
    width: 100%;
    box-sizing: border-box;
}

/* ── Canvas wrap: overflow MUST be visible for sticky to work ─── */
.fmm-canvas-wrap,
.fmm-canvas-only-wrap .fmm-canvas-wrap {
    overflow: visible;
    width: 100%;
    margin: 0;
    background: #1a1a1a;
    border-radius: 6px;
}

/* ── Canvas container ─────────────────────────────────────────── */
.fmm-canvas-container {
    position: relative;
    width: 100%;
    line-height: 0;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
}

.fmm-canvas-bg { display: none; }

.fmm-canvas-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.fmm-canvas-placeholder::after {
    content: 'Monument image will appear here';
    color: #666;
    font-size: 13px;
}

#fmm-canvas {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.fmm-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: rgba(0,0,0,0.8);
    flex-wrap: wrap;
}

.fmm-tool-btn {
    background: rgba(200,168,75,0.2);
    border: 1px solid #c8a84b;
    color: #c8a84b;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fmm-tool-btn:hover { background: #c8a84b; color: #fff; }

.fmm-toolbar-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

#fmm-proof-indicator {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.fmm-canvas-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    padding: 7px 12px;
    margin: 0;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.07);
    line-height: 1.5;
}

/* ── Variation selectors in left column ───────────────────────── */
.fmm-variations-only .single_add_to_cart_button,
.fmm-variations-only .quantity,
.fmm-variations-only .woocommerce-variation-price,
.fmm-variations-only .woocommerce-variation-availability {
    display: none !important;
}

.fmm-variations-only .variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.fmm-variations-only .variations td.label {
    font-weight: 600;
    font-size: 13px;
    padding-right: 12px;
    white-space: nowrap;
    vertical-align: middle;
    width: 70px;
}

.fmm-variations-only .variations select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
}

.fmm-variations-only .variations select:focus {
    outline: none;
    border-color: #c8a84b;
    box-shadow: 0 0 0 2px rgba(200,168,75,0.2);
}

.fmm-variations-only .reset_variations {
    font-size: 12px;
    color: #c8a84b;
    display: block;
    margin-top: 4px;
}

/* ── Add to Cart button in right column ───────────────────────── */
.fmm-cart-button-only .variations,
.fmm-cart-button-only .woocommerce-variation.single_variation {
    display: none !important;
}

.fmm-cart-button-only .single_add_to_cart_button {
    background-color: #c8a84b !important;
    border-color:     #b8943b !important;
    color:            #fff    !important;
    font-weight:      700     !important;
    font-size:        15px    !important;
    padding:          12px 28px !important;
    border-radius:    6px    !important;
    width:            100%   !important;
    cursor:           pointer !important;
    transition:       background 0.18s ease !important;
}

.fmm-cart-button-only .single_add_to_cart_button:hover {
    background-color: #b8943b !important;
}

/* ── Double monument divider line ─────────────────────────────── */
.fmm-double-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.fmm-col-left,
.fmm-col-right {
    border-left: 2px solid #ddd;
    padding-left: 14px;
}

.fmm-col-heading {
    font-size: 11px;
    font-weight: 800;
    color: #c8a84b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f5edd6;
}

@media ( max-width: 680px ) {
    .fmm-double-grid { grid-template-columns: 1fr; }
    .fmm-col-left, .fmm-col-right {
        border-left: none;
        border-top: 2px solid #ddd;
        padding-left: 0;
        padding-top: 12px;
    }
}

/* ── Product gallery in left column ───────────────────────────── */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
}

.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════
   v22 LAYOUT RULES
   Left  : canvas preview (sticky)
   Right : gallery + images + variations + engraving + button
═══════════════════════════════════════════════════════════════ */

/* ── Hide payment options on product page ─────────────────────
   Targets common payment express buttons (PayPal, Apple Pay,
   Google Pay, Stripe, Buy Now etc.) */
.woocommerce-variation-add-to-cart .wc-ppec-cart-buttons-wrap,
.woocommerce div.product .ppcpcc-container,
.woocommerce div.product #woo_pp_ec_button_product,
.woocommerce div.product .wp-block-woocommerce-product-button,
.single-product .woocommerce-buy-now,
.single-product .woocommerce_after_single_product_summary,
.single-product [class*="stripe-button"],
.single-product [class*="ppcp-button"],
.single-product [class*="apple-pay"],
.single-product [class*="google-pay"],
.single-product .wc-stripe-elements-field,
.single-product #wc-stripe-payment-request-wrapper,
.woocommerce div.product .woocommerce-product-rating,
div.product .wp-block-woocommerce-product-price ~ div[class*="buy"],
.woopay-express-button-wrapper,
.wc-block-components-express-payment,
.wp-block-woocommerce-product-add-to-cart .wc-block-components-express-payment {
    display: none !important;
}

/* ── Product gallery in right column ─────────────────────────
   Override WooCommerce's default float and width so the
   gallery fills the right column naturally */
.fmm-product-gallery-right .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.fmm-product-gallery-right .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.fmm-product-gallery-right .flex-viewport {
    border-radius: 4px;
    overflow: hidden;
}

/* ── Left column: canvas only, no padding waste ───────────── */
.fmm-preview-col {
    width: 100%;
}

.fmm-preview-col .fmm-canvas-wrap {
    margin: 0;
}

/* ── Right column: tighter gallery → variations → fields ─── */
.elementor-widget-woocommerce-product-add-to-cart.fmm-variations-only {
    margin-bottom: 8px;
}

.elementor-widget-fmm_engraving_fields {
    margin-top: 8px;
}

/* ── Hide monument type indicator (determined by category) ── */
.fmm-type-badge,
.fmm-type-badge-wrap {
    display: none !important;
}

/* ── Left col sticky: canvas preview sticks at top ───────── */
.fmm-canvas-only-wrap,
.fmm-preview-col {
    position: sticky;
    top: 30px;
    overflow: visible;
}

.admin-bar .fmm-canvas-only-wrap,
.admin-bar .fmm-preview-col {
    top: 62px;
}

@media (max-width: 767px) {
    .fmm-canvas-only-wrap,
    .fmm-preview-col {
        position: relative;
        top: auto;
    }
}

/* ── Hide express payment buttons on ALL single product pages ─
   These are not appropriate for custom engraved monuments      */
.single-product .wc-ppec-cart-buttons-wrap,
.single-product #woo_pp_ec_button_product,
.single-product .ppcpcc-container,
.single-product .woopay-express-button-wrapper,
.single-product .wc-block-components-express-payment,
.single-product #wc-stripe-payment-request-wrapper,
.single-product [id*="payment-request"],
.single-product [class*="ppcp-button"],
.single-product [class*="woopay"],
.single-product [class*="gpay"],
.single-product [class*="apple-pay"],
.single-product [class*="venmo"],
.single-product .klarna-payments-osm,
.single-product .affirm-as-low-as,
.single-product #afterpay-placement,
.single-product .payment-method-badge {
    display: none !important;
}

/* ── Hide Monument Type toggle (type determined by product/category) ── */
.fmm-monument-type-row,
.fmm-type-toggle-wrap,
[class*="fmm-type-toggle"],
.fmm-config-panel .fmm-step-body:has(.fmm-type-btn) {
    display: none !important;
}

/* ── Variations: only show inside our fmm-variations-only widget ──
   Hide the default WC variations table that appears outside our widgets. */
.woocommerce div.product form.cart .variations {
    display: none !important;
}

/* Show variations inside our dedicated variation widget */
.fmm-variations-only .variations,
.fmm-variations-only form.cart .variations {
    display: table !important;
    width: 100%;
}

/* PayPal "Starting at" / pay later messages are intentionally visible */

/* ── Product gallery thumbnails — smaller size ────────────── */
.fmm-product-gallery-right .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

.fmm-product-gallery-right .flex-control-thumbs li {
    width: 72px !important;
    float: none !important;
    margin: 0 !important;
}

.fmm-product-gallery-right .flex-control-thumbs li img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.fmm-product-gallery-right .flex-control-thumbs li img:hover,
.fmm-product-gallery-right .flex-control-thumbs li img.flex-active {
    opacity: 1;
}