/*
Plugin: Інформер наявності товару Woocommerce
File: ns-product-informer.css
Description: Styles for the product status informer and SKU shortcode.
*/

/* --- Configuration Variables (CSS) --- */
/* Define your colors, sizes, spacing, and timing here using CSS variables.
   These are applied to the root element of the informer for easy access. */
   #ns-product-informer-container {
    /* Status Colors */
    --ns-status-color-instock: #28a745;       /* Green for in stock */
    --ns-status-color-onbackorder: #ffc107;   /* Yellow/Orange for on order */
    --ns-status-color-outofstock: #dc3545;    /* Red for out of stock */
    --ns-status-color-unknown: #6c757d;       /* Grey for unknown status */

    /* SKU Color & Border */
    --ns-sku-color: #333;                     /* Default color for SKU text and icon */
    --ns-sku-border-color: #ccc;              /* Grey color for SKU border */

    /* Border & Padding for INDIVIDUAL BLOCKS */
    --ns-border-width: 1px;
    --ns-block-border-radius: 5px;
    --ns-block-padding-vertical: 8px;      /* Vertical padding inside each block */
    --ns-block-padding-horizontal: 15px;   /* Horizontal padding inside each block */

    /* Font & Spacing */
    --ns-text-font-size: 0.9em;               /* Font size for both status and SKU text */
    --ns-text-font-weight: normal;            /* Font weight for text */
    --ns-dot-size: 10px;                      /* Size of the status dot */
    --ns-dot-margin-right: 8px;               /* Space between status dot and text */
    /* Removed --ns-gap-between-blocks as space-between handles it */


    /* Pulsing Animation */
    --ns-pulse-duration: 1.5s;                /* Duration of the pulsing animation */
    --ns-pulse-scale: 1.1;                    /* How much the dot scales during pulse */
    --ns-pulse-opacity: 0.8;                  /* How much the dot fades during pulse */
}
/* --- End Configuration Variables (CSS) --- */


/* --- Main Container & Layout --- */
#ns-product-informer-container {
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;             /* Override theme/builder margins */
    padding: 0 !important;            /* Remove all padding from the container */
    display: flex;                    /* Use flexbox to align SKU and Status */
    align-items: center;              /* Vertically center flex items */
    justify-content: space-between;   /* Push items to the edges */
    flex-wrap: nowrap;                /* Prevent wrapping into a column */
    /* No border on the container itself */
    min-height: calc(2 * var(--ns-block-padding-vertical) + var(--ns-text-font-size) * 1.2 + 2 * var(--ns-border-width)); /* Ensure container has minimum height based on block content */
}


/* --- SKU Block Styling --- */
.ns-product-sku-block {
    display: inline-flex; /* Use inline-flex for blocks with borders */
    align-items: center;
    color: var(--ns-sku-color); /* Default color for SKU block text/icon */
    font-size: var(--ns-text-font-size);
    font-weight: var(--ns-text-font-weight);

    /* Add padding and border to the SKU block */
    border: var(--ns-border-width) solid var(--ns-sku-border-color); /* Grey border */
    border-radius: var(--ns-block-border-radius);
    padding: var(--ns-block-padding-vertical) var(--ns-block-padding-horizontal);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    /* No margins needed for spacing between items because of space-between */
    /* Ensure SKU block doesn't shrink */
    flex-shrink: 0;
}

.ns-sku-value {
     line-height: 1.2; /* Ensure line height is consistent */
}

.ns-copy-icon {
    margin-left: var(--ns-sku-icon-margin-left);
    cursor: pointer;
    display: inline-flex; /* Align icon nicely */
    align-items: center;
    width: 1em; /* Size icon relative to font size */
    height: 1em;
    color: var(--ns-sku-color); /* Icon color */
    transition: color 0.2s ease-in-out; /* Smooth hover effect */
}

.ns-copy-icon:hover {
    color: #007bff; /* Example hover color */
}

.ns-copy-icon svg {
    display: block; /* Remove extra space below SVG */
    width: 100%;
    height: 100%;
    fill: currentColor; /* Use the parent's text color */
}


/* --- Status Informer Styling --- */
/* The #ns-product-status-informer is now one of the main blocks */
#ns-product-status-informer.ns-status-block { /* Use the status-block class */
    display: inline-flex; /* Use inline-flex for blocks with borders */
    align-items: center;
    line-height: 1.2;     /* Adjust line height if needed */

    /* Add padding and border to the Status block */
    border-width: var(--ns-border-width);
    border-style: solid;
    border-radius: var(--ns-block-border-radius);
    padding: var(--ns-block-padding-vertical) var(--ns-block-padding-horizontal);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    /* Border color is set below based on status class applied to THIS block */

    /* No margins needed for spacing between items because of space-between */
    flex-shrink: 0; /* Prevent block from shrinking */
}

.ns-status-wrapper {
    display: flex; /* Arrange dot and text */
    align-items: center; /* Vertically center dot and text */
    /* No padding here; padding is on the status-block container */
}

.ns-status-dot {
    display: inline-block;
    width: var(--ns-dot-size);
    height: var(--ns-dot-size);
    border-radius: 50%; /* Make it round */
    margin-right: var(--ns-dot-margin-right);
    flex-shrink: 0;     /* Prevent dot from shrinking */
    /* Dot color is set below based on status class applied to the status block */
}

.ns-status-text {
    font-size: var(--ns-text-font-size); /* Use shared font size variable */
    font-weight: var(--ns-text-font-weight); /* Use shared font weight variable */
    line-height: inherit; /* Inherit line height from wrapper */
    /* Text color is set below based on status class applied to the status block */
    background-color: transparent !important; /* Ensure no background from theme */
}


/* --- Color Assignments based on status class (on the status block itself) --- */
/* These classes are now applied directly to #ns-product-status-informer.ns-status-block */

/* Instock */
#ns-product-status-informer.ns-status-instock {
    border-color: var(--ns-status-color-instock);
}
#ns-product-status-informer.ns-status-instock .ns-status-dot {
    background-color: var(--ns-status-color-instock);
}
#ns-product-status-informer.ns-status-instock .ns-status-text {
    color: var(--ns-status-color-instock);
}

/* On Backorder */
#ns-product-status-informer.ns-status-onbackorder {
    border-color: var(--ns-status-color-onbackorder);
}
#ns-product-status-informer.ns-status-onbackorder .ns-status-dot {
    background-color: var(--ns-status-color-onbackorder);
}
#ns-product-status-informer.ns-status-onbackorder .ns-status-text {
    color: var(--ns-status-color-onbackorder);
}

/* Out of Stock */
#ns-product-status-informer.ns-status-outofstock {
     border-color: var(--ns-status-color-outofstock);
}
#ns-product-status-informer.ns-status-outofstock .ns-status-dot {
     background-color: var(--ns-status-color-outofstock);
}
#ns-product-status-informer.ns-status-outofstock .ns-status-text {
     color: var(--ns-status-color-outofstock);
}

/* Unknown Status (Fallback) */
#ns-product-status-informer.ns-status-unknown {
     border-color: var(--ns-status-color-unknown);
}
#ns-product-status-informer.ns-status-unknown .ns-status-dot {
     background-color: var(--ns-status-color-unknown);
}
#ns-product-status-informer.ns-status-unknown .ns-status-text {
     color: var(--ns-status-color-unknown);
}


/* --- Pulsing Animation --- */
@keyframes ns-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(var(--ns-pulse-scale)); opacity: var(--ns-pulse-opacity); } /* Pulse slightly larger and fade */
    100% { transform: scale(1); opacity: 1; }
}

/* Apply animation ONLY to the dot when it has the 'ns-pulsing-dot' class */
.ns-status-dot.ns-pulsing-dot {
    animation: ns-pulse var(--ns-pulse-duration) ease-in-out infinite; /* Apply animation */
}

/* Removed the mobile media query to keep blocks in one row */


/* --- End NS Product Status Informer Styles --- */