/**
 * SSC Product Designer — Product Page Styles
 *
 * Styles for the fabric.js canvas-based product customizer.
 * The canvas zone, upload UI, and controls are new; everything around
 * them (swatches, inputs, purchase zone, ATC button) reuse the same
 * visual language as the plugin's other recipe-driven product experiences.
 *
 * Class prefix: ssc-designer-
 * Shared classes: ssc-swatch-* (shared swatch renderer), ssc-fixed-price-*,
 *   ssc-price-* (shared pricing), and fully designer-prefixed field/input
 *   hooks for the recipe form rendered on this page.
 *
 * @since 3.1.0
 */

/* =========================================================================
   WRAPPER — Hide default WC variation UI
   ========================================================================= */

.ssc-designer-wrapper ~ .single_variation_wrap,
.ssc-designer-wrapper ~ .variations_form .variations,
.ssc-designer-wrapper ~ .woocommerce-variation-add-to-cart {
    display: none !important;
}

.ssc-designer-wrapper {
    position: relative;
    margin-top: 10px;
}

/* =========================================================================
   GALLERY HOST — Styles for the gallery container when hosting the canvas
   =========================================================================
   JavaScript relocates .ssc-designer-canvas-zone into the WooCommerce
   gallery container (div.images / .woocommerce-product-gallery) and adds
   the .ssc-designer-gallery-host class.  These rules clean up gallery
   chrome (Flexslider padding, overflow, opacity transitions) that don't
   apply when the gallery is serving as a canvas host.
   ========================================================================= */

.ssc-designer-gallery-host {
    overflow: visible !important;
    opacity: 1 !important;
}

/* WooCommerce galleries often have a wrapper for Flexslider / photoswipe
   that adds padding for thumbnails.  Reset to zero when hosting canvas. */
.ssc-designer-gallery-host .woocommerce-product-gallery__wrapper,
.ssc-designer-gallery-host .flex-viewport {
    display: none !important;
}

/* Hide gallery trigger (zoom icon), thumbnails, nav arrows */
.ssc-designer-gallery-host .woocommerce-product-gallery__trigger,
.ssc-designer-gallery-host .flex-control-thumbs,
.ssc-designer-gallery-host .flex-direction-nav,
.ssc-designer-gallery-host ol.flex-control-nav {
    display: none !important;
}

/* Ensure the gallery container has no minimum height from the hidden
   Flexslider that might cause extra whitespace below the canvas. */
.ssc-designer-gallery-host .woocommerce-product-gallery {
    min-height: 0 !important;
}

/* When .woocommerce-product-gallery IS the gallery host (JS adds the
   class to whichever element it finds first), ensure it also has no
   residual padding or margin from the WC gallery initialisation. */
.woocommerce-product-gallery.ssc-designer-gallery-host {
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* The div.images column wrapper may also be the gallery host.  Remove
   any bottom margin the theme adds so the canvas sits flush. */
div.images.ssc-designer-gallery-host {
    margin-bottom: 0;
}

/* =========================================================================
   CANVAS ZONE — fabric.js canvas + controls
   =========================================================================
   The canvas zone lives inside the gallery container (left column) after
   JavaScript relocation.  It takes the full width of the gallery column. */

.ssc-designer-canvas-zone {
    /* Hidden on page load — the WooCommerce product gallery stays visible
       with its normal product photography.  JavaScript shows the canvas
       zone (and relocates it into the gallery container) when the customer
       first interacts with any recipe input. */
    display: none;
    margin-bottom: 16px;
    /* Sticky positioning keeps the canvas visible as the customer scrolls
       through the input fields in the right column (sticky preview keeps
       the canvas in view while scrolling inputs).  The top offset accounts
       for typical sticky headers / admin bars. */
    position: sticky;
    top: 32px;
}

/* ── Canvas container ──────────────────────────────────────────────────── */

.ssc-designer-canvas-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* No border or background — clean canvas area that sits flush inside
       the gallery column with no decorative frame. */
    overflow: hidden;
    /* touch-action: none prevents the browser from hijacking touch events
       (scroll, pinch-zoom) while the customer interacts with the canvas.
       fabric.js handles all touch gestures (move/resize/rotate) internally. */
    touch-action: none;
}

/* fabric.js wraps the <canvas> in a div.canvas-container.  Ensure it
   fills the aspect-ratio container and that the canvas itself scales. */
.ssc-designer-canvas-container .canvas-container {
    width: 100% !important;
    height: 100% !important;
}

.ssc-designer-canvas-container .canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── Canvas loading skeleton ───────────────────────────────────────────── */

.ssc-designer-canvas-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.ssc-designer-canvas-loading p {
    font-size: 14px;
    color: #888;
    margin-top: 12px;
}

.ssc-designer-canvas-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #555;
    border-radius: 50%;
    animation: ssc-designer-spin 0.8s linear infinite;
}

@keyframes ssc-designer-spin {
    to { transform: rotate(360deg); }
}

/* Fade out the loading skeleton when canvas is ready */
.ssc-designer-canvas-loading.ssc-designer-loaded {
    opacity: 0;
    pointer-events: none;
}


/* ── Movement toolbar ─────────────────────────────────────────────────────
   Horizontal row of square control buttons (legacy hosted-editor style bar).
   Layout: flex, nowrap, 12% width per button, max-width 40px, #ccc
   background, opacity 0.7, square aspect via padding-bottom 100% on a
   pseudo-element.  Shown on all viewports (desktop and mobile). */

.ssc-designer-mobile-controls {
    display: none; /* Hidden until customer upload is on canvas */
    user-select: none;
    -webkit-user-select: none;
    pointer-events: all;
    position: relative;
    max-height: 100%;
    z-index: 45;
    justify-content: center;
    flex-wrap: nowrap;
    /* direction: rtl reverses DOM order (up, down, left, right, rotate,
       zoom-in, zoom-out) so zoom controls appear on the left and directional
       controls on the right. */
    direction: rtl;
    /* 0.5s opacity ease-out on the toolbar, aligned with the canvas container fade */
    transition: 0.5s opacity ease-out;
}

/* Show the toolbar when a customer upload is placed on the canvas */
.ssc-designer-canvas-zone.ssc-designer-controls-visible .ssc-designer-mobile-controls {
    display: flex;
}

/* Each button: small gray square with centered SVG icon */
.ssc-designer-mobile-control {
    width: 12%;
    max-width: 40px;
    margin: 1%;
    text-align: center;
    overflow: hidden;
    background: #ccc;
    opacity: 0.7;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    padding: 0;
    border-radius: 0;
    outline: none;
    color: #333;
}

.ssc-designer-mobile-control:hover {
    background: #eee;
}

.ssc-designer-mobile-control:active {
    background: #aaa;
}

/* Square aspect ratio via pseudo-element (padding-bottom trick on ::after) */
.ssc-designer-mobile-control::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* SVG icon sizing inside the square buttons */
.ssc-designer-control-icon {
    width: 70%;
    height: 70%;
    position: absolute;
}


/* =========================================================================
   UPLOAD ZONE — Compact upload control row (hosted-editor parity)
   =========================================================================
   Flex row holding: hidden file input, thumbnail, primary upload button,
   and X remove control.  Before upload: thumbnail and X hidden; primary
   button shows cloud icon.  After upload: thumbnail visible; primary button
   swaps to refresh icon; X appears.  No filename label.
   ========================================================================= */

.ssc-designer-upload-zone {
    margin-bottom: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 2px dashed transparent;
    padding: 8px;
    border-radius: 4px;
}

/* Drag-and-drop visual feedback */
.ssc-designer-upload-zone.ssc-designer-drag-over {
    background-color: rgba(35, 35, 44, 0.05);
    border-color: #23232c;
}

/* ── Upload row container (flex row for input + thumb + actions) ─────────── */

.ssc-designer-upload-row {
    display: flex;
    align-items: center;
}

/* ── Hidden file input (off-screen but focusable / programmatically clickable) ─ */

.ssc-designer-upload-input {
    position: fixed !important;
    left: -99999px;
}

/* ── Thumbnail (shown after upload) ───────────────────────────────────── */

.ssc-designer-upload-thumb-wrap {
    display: inline-block;
    margin-right: 10px;
    flex-shrink: 0;
}

.ssc-designer-upload-thumb {
    display: inline-block;
    max-width: 64px;
    max-height: 64px;
    margin-bottom: -5px;
    border-radius: 10px;
    object-fit: contain;
}

/* ── Upload / re-upload button ────────────────────────────────────────────
   Dark upload button: 200×60, dark background, white text, flex centered.
   Before upload: cloud icon.  After upload: refresh icon.  JS toggles
   which icon SVG is visible. */

.ssc-designer-upload-btn {
    display: flex;
    position: relative;
    min-width: 200px;
    height: 60px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: #23232c;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 60px;
    text-align: center;
    border: none;
    cursor: pointer;
    border-radius: 0;
    transition: opacity 0.5s ease;
}

.ssc-designer-upload-btn:hover {
    opacity: 0.85;
}

.ssc-designer-upload-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

/* ── Remove button (X) — narrow dark strip beside upload, clears the image ─ */

.ssc-designer-upload-remove {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 60px;
    min-width: 44px;
    margin-left: 10px;
    padding: 0 15px;
    background-color: #23232c;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease;
    flex-shrink: 0;
}

.ssc-designer-upload-remove:hover {
    opacity: 0.75;
}

/* ── Upload progress ───────────────────────────────────────────────────── */

.ssc-designer-upload-progress {
    margin-top: 8px;
}

.ssc-designer-upload-progress-track {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.ssc-designer-upload-progress-fill {
    width: 0%;
    height: 100%;
    background: #272727;
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* =========================================================================
   INPUT ZONE — Recipe-driven input fields
   Designer-specific field/input hooks mirror the shared recipe-form styling.
   ========================================================================= */

.ssc-designer-input-zone {
    margin-bottom: 0;
}

.ssc-designer-input-fields {
    /* Container for JS-rendered recipe input fields */
}

/* Designer-specific field primitives.  These intentionally mirror the shared
   recipe-form styling values so the designer stays visually consistent with
   the rest of the plugin while keeping its DOM fully `ssc-designer-*`. */

.ssc-designer-field {
    margin-bottom: 2px;
}

.ssc-designer-field-label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    text-align: left;
    margin-bottom: 6px;
}

.ssc-designer-field-control {
    position: relative;
    overflow: visible;
}

.ssc-designer-text-input,
.ssc-designer-textarea-input,
.ssc-designer-select-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d3d3d3;
    border-radius: 1px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.ssc-designer-text-input:focus,
.ssc-designer-textarea-input:focus,
.ssc-designer-select-input:focus {
    outline: none;
    border-color: #272727;
    box-shadow: 0 0 0 2px rgba(39, 39, 39, 0.1);
}

.ssc-designer-textarea-input {
    resize: vertical;
    min-height: 44px;
    line-height: 1.35;
    overflow-y: auto;
}

.ssc-designer-char-counter {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

/* =========================================================================
   POST-CANVAS ZONE — After-canvas inputs (Notes to Artist, etc.)
   ========================================================================= */

.ssc-designer-post-canvas-zone {
    margin-bottom: 16px;
}

/* =========================================================================
   PURCHASE ZONE — Qty stepper/grid + pricing + Add to Cart
   Mirrors the shared recipe-driven purchase-zone layout and styling.
   ========================================================================= */

.ssc-designer-purchase-zone {
    margin-top: 10px;
}

/* ── Sizing zone ───────────────────────────────────────────────────────── */

.ssc-designer-sizing-zone {
    margin-bottom: 16px;
}

.ssc-designer-sizing-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ssc-designer-size-grid {
    /* Container for size input row or qty stepper */
}

/* ── Multi-size grid layout ───────────────────────────────────────────── */

.ssc-designer-size-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ssc-designer-size-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.ssc-designer-size-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    text-align: center;
}

.ssc-designer-size-input {
    width: 56px;
    padding: 8px 4px;
    text-align: center;
    border: 1.5px solid #d3d3d3;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.ssc-designer-size-input::-webkit-outer-spin-button,
.ssc-designer-size-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ssc-designer-size-input:focus {
    outline: none;
    border-color: #272727;
}

/* ── Simple qty purchase zone layout ───────────────────────────────────────
   When .ssc-designer-simple-qty is added to the purchase zone, CSS grid
   arranges the stepper and price side-by-side to match the shared
   recipe-driven purchase layout. */

.ssc-designer-purchase-zone.ssc-designer-simple-qty {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 20px;
    align-items: start;
}

.ssc-designer-purchase-zone.ssc-designer-simple-qty .ssc-designer-sizing-zone {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}

.ssc-designer-purchase-zone.ssc-designer-simple-qty .ssc-designer-price-wrapper {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.ssc-designer-purchase-zone.ssc-designer-simple-qty .ssc-price-break-notice {
    grid-column: 1 / -1;
}

.ssc-designer-purchase-zone.ssc-designer-simple-qty .ssc-designer-addtocart {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
}

/* ── Pricing display ──────────────────────────────────────────────────── */

.ssc-designer-price-wrapper {
    display: none;
    text-align: left;
    width: fit-content !important;
}

.ssc-designer-price-wrapper .ssc-cart-impact {
    display: none;
}

/* ── Add to Cart button ───────────────────────────────────────────────── */

.ssc-designer-addtocart {
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ssc-designer-addtocart:hover:not(.disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ssc-designer-addtocart:active:not(.disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.ssc-designer-addtocart.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* =========================================================================
   TOAST NOTIFICATIONS — Shared recipe-page notification pattern
   ========================================================================= */

.ssc-designer-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 10000;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #333;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 90vw;
    text-align: center;
}

.ssc-designer-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ssc-designer-toast-success { background: #4caf50; }
.ssc-designer-toast-warning { background: #ff9800; }
.ssc-designer-toast-error   { background: #e53935; }
.ssc-designer-toast-info    { background: #333; }

/* =========================================================================
   RESPONSIVE — Tablet / stacked layout adjustments
   =========================================================================
   At 1050px the site's style.css stacks both columns to 100% width.
   Disable the sticky canvas and ensure the gallery host goes full width
   to match the stacked layout. */

@media (max-width: 1050px) {
    .ssc-designer-gallery-host {
        width: 100% !important;
        float: none !important;
    }

    .ssc-designer-canvas-zone {
        position: static;
    }
}

/* =========================================================================
   RESPONSIVE — Mobile adjustments
   ========================================================================= */

@media (max-width: 768px) {
    .ssc-designer-wrapper {
        margin-top: 5px;
    }

    /* Canvas takes full width on mobile — no decorative border/radius */
    .ssc-designer-canvas-container {
        max-width: 100% !important;
    }

    /* Stack simple-qty purchase zone vertically on mobile */
    .ssc-designer-purchase-zone.ssc-designer-simple-qty {
        grid-template-columns: 1fr;
    }

    .ssc-designer-purchase-zone.ssc-designer-simple-qty .ssc-designer-price-wrapper {
        grid-column: 1;
        grid-row: auto;
    }

    /* Smaller swatch items on mobile (shared styles) */
    .ssc-designer-input-zone .ssc-swatch-item {
        width: 56px;
    }

    .ssc-designer-input-zone .ssc-swatch-image,
    .ssc-designer-input-zone .ssc-swatch-text {
        width: 44px;
        height: 44px;
    }

    .ssc-designer-size-row {
        gap: 8px;
    }

    .ssc-designer-size-input {
        width: 48px;
        padding: 6px 2px;
    }
}