/**
 * WC Smart Wizard - CSS Overrides
 * Minimal overrides for Cropper.js to match theme styling
 */

[x-cloak] { display: none !important; }

/* Cropper.js container */
.cropper-container {
    font-family: var(--font-body);
}

/* Cropper view box */
.cropper-view-box {
    outline: 2px solid hsl(var(--primary));
    outline-offset: -2px;
}

/* Cropper lines */
.cropper-line {
    background-color: hsl(var(--primary));
    opacity: 0.5;
}

/* Cropper points */
.cropper-point {
    background-color: hsl(var(--primary));
    opacity: 0.8;
}

.cropper-point:hover {
    opacity: 1;
}

/* Cropper modal (darkened area) */
.cropper-modal {
    background-color: hsl(var(--foreground));
    opacity: 0.5;
}

/* Wizard step transitions */
.wizard-step {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Disabled button state */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* File upload hover state */
.wcwiz-container [x-ref="fileInput"] {
    display: none;
}

/* ── Finish overlay ─────────────────────────────────────────────────────────
   The .wcwiz-finish-wrap container holds the photo and an absolutely-
   positioned overlay image. Three variant classes swap the blend mode and
   opacity to simulate the three wood-print finishes.
   Matches the Lovable reference values exactly:
     standard → soft-light / 0.08   (crisp, color-accurate)
     classic  → overlay    / 0.40   (warm grain, partial wood warmth)
     raw      → multiply   / 0.50   (image soaks into the grain)
   ──────────────────────────────────────────────────────────────────────── */
.wcwiz-finish-wrap {
    position: relative; /* overlay is positioned against this */
}

.wcwiz-finish-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* smooth transition when toggling between finishes */
    transition: opacity 0.25s ease;
    /* hidden until a finish class is applied */
    opacity: 0;
    mix-blend-mode: soft-light;
}

/* Standard — barely-there grain, image stays crisp and color-accurate */
.wcwiz-finish-standard .wcwiz-finish-overlay {
    mix-blend-mode: soft-light;
    opacity: 0.08;
}

/* Classic / Natural — warm overlay lets some wood warmth through */
.wcwiz-finish-classic .wcwiz-finish-overlay {
    mix-blend-mode: overlay;
    opacity: 0.4;
}

/* Raw — multiply darkens the image into the grain texture */
.wcwiz-finish-raw .wcwiz-finish-overlay {
    mix-blend-mode: multiply;
    opacity: 0.5;
}

/* ── Cart / checkout / thank-you photo strip ─────────────────────────── */

/* Strip container — used in both the thumbnail column and item meta */
.wcwiz-cart-photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Each cell in the strip is a finish-wrap with fixed square dimensions */
.wcwiz-strip-cell {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 3px;
    flex-shrink: 0;
}

/* The customer photo inside each strip cell */
.wcwiz-cart-thumb-mini {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

/* Single-slot cart thumbnail — fills the WC thumbnail column (typically 100px) */
.wcwiz-finish-wrap .wcwiz-cart-thumb {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure the finish overlay covers each strip cell correctly */
.wcwiz-strip-cell .wcwiz-finish-overlay {
    border-radius: 3px;
}

/* add specific styling for the note under the preview image */
.wizard-step .wizard-note {
    font-size: 0.7rem;
}
.wizard-step-5 .wcwiz-finish-wrap {
    margin-bottom: 0.5rem;
}