/*
 * @author Marco Rodríguez <mrodriguez@moorecoinc.com>
 *
 * @copyright Copyright (c) 2025.
 *
 */

.wp-editor-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.wp-editor-container textarea {
    border: none;
    box-shadow: none;
    font-size: 14px;
}

.wp-editor-container .quicktags-toolbar {
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.mc-product-selector__pdf-fields {
    grid-column: span 3; /* Make "Flyer Details" span all three columns */
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: 80%;
    margin: auto;
}


.mc-product-selector__pdf-fields input[type="range"] {
    width: 100%;
    margin-bottom: 5px;
}

.mc-product-selector__pdf-fields output {
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 10px;
}

#show-prices-container {
    margin-top: 10px;
}

input[type="checkbox"] {
    margin-right: 5px;
}

.mc-product-selector__pdf-fields h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.mc-product-selector__pdf-fields label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.mc-product-selector__pdf-fields input[type="text"],
.mc-product-selector__pdf-fields textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.mc-product-selector__pdf-fields textarea {
    resize: vertical;
}

.mc-product-selector__pdf-fields input[type="text"]:focus,
.mc-product-selector__pdf-fields textarea:focus {
    border-color: #009688;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 150, 136, 0.5);
}

.mc-product-selector {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Three-column layout for below sections */
    grid-template-rows: auto 1fr; /* Flyer Details in the first row, other sections in the second */
    gap: 20px;
    margin-inline: 50px;
    transition: grid-template-columns 0.3s ease; /* Smoothly animate column resizing */
}

.mc-product-selector__pdf-fields h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.mc-product-selector__filters, 
.mc-product-selector__product-list,
.mc-product-selector__selected-products {
    background: #ffffff;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}

.mc-product-selector__selected-products ul,
.mc-product-selector__product-list ul {
    list-style: none;
    padding: 0;
}

#filter-category,
#filter-family {
    display: block;
    margin-bottom: 5px;
    padding: 8px;
    width: 100%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
    margin-top: 5px;
}

/* Ensure the product list grid */
/* Grid layout for product list */
.mc-product-selector__product-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual product item */
.product-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Aligns children vertically */
    justify-content: space-between; /* Ensures the last child (button) stays at the bottom */
    height: 100%; /* Ensures all product items take the same vertical space */
    box-sizing: border-box; /* Include padding/border in height calculations */
}

.product-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

/* Image wrapper maintains aspect ratio */
.image-wrapper {
    height: 150px;
    position: relative;
    overflow: hidden;
    background-color: #f7f7f7; /* Placeholder background color */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    background-color: #e0e0e0; /* Placeholder color */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Styles for the loader spinner */
.loader {
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid var(--safety-yellow); /* Blue border */
    border-radius: 50%; /* Circle shape */
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 10px auto; /* Center the loader */
    display: block; /* Ensure proper display */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.product-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    height: 100%;
    width: auto;
}

.image-wrapper {
    position: relative;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product name and button */
.product-item p {
    margin: 15px 0 10px;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: auto; /* Pushes the button to the bottom */
}

.product-item button {
    background-color: #0073aa;
    color: white;
    margin-top: 10px; /* Adds a gap between the title and the button */
    border: none;
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1;
}

.product-item button:hover {
    background-color: #005a8e;
}

/* Ensure selected products use a grid layout */
.mc-product-selector__selected-products ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

.mc-product-selector__selected-products li {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 0 calc(33.333% - 15px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.mc-product-selector__selected-products li p {
    font-size: 0.9rem;
    margin: 0;
    flex-grow: 1;
    margin-bottom: 0 !important;
}

.remove-item {
    background: none; /* No background for a clean look */
    border: none; /* Remove any borders */
    color: #d32f2f; /* Red color for the "X" */
    font-size: 16px; /* Adjust the size of the "X" */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    line-height: 1;
    cursor: pointer; /* Hand cursor for clickable elements */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.remove-item:hover {
    color: #b71c1c; /* Slightly darker red on hover */
    transform: scale(1.2); /* Slight enlarge effect */
    transition: color 0.2s ease, transform 0.2s ease;
}

.customize-btn {
    background: none; /* Remove default background */
    border: none; /* Remove default border */
    color: #1976d2; /* Blue color for the pencil icon */
    font-size: 16px; /* Adjust the size of the character or SVG */
    cursor: pointer; /* Change cursor to pointer for interactivity */
    padding: 0; /* Add some padding for click area */
    line-height: 1;
    display: flex;
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    border-radius: 4px; /* Optional: Add slight rounding on hover */
    transition: color 0.2s ease, transform 0.2s ease;
    rotate: -90deg;
    width: 21px;
    height: 15px;
    margin-top: 5px;
}

.customize-btn:hover {
    color: #1565c0; /* Darker blue on hover */
    transform: scale(1.1); /* Slightly enlarge the button */
}

.customize-btn:active {
    transform: scale(0.95); /* Shrinks slightly on click for feedback */
}

.mc-product-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Highlight already added products */
.product-added {
    border: 2px solid #28a745;
    background-color: #e6ffe6;
}

/* Remove button distinction */
.product-added button {
    background-color: #cc4444;
}

.product-added button:hover {
    background-color: #aa3333;
}

#generate-pdf-btn {
    background-color: #009688; /* Primary color */
    color: #fff; /* White text */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Padding for width and height */
    font-size: 16px; /* Font size */
    font-weight: bold;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow effect */
    line-height: 1;
    margin-top: 20px;
    width: 100%;
}

#generate-pdf-btn:hover {
    background-color: #00796b; /* Darker shade on hover */
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Increase shadow */
}

#generate-pdf-btn:active {
    transform: scale(0.95); /* Slightly shrink on click */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

#generate-pdf-btn:disabled {
    background-color: #cccccc; /* Light gray background for disabled state */
    color: #666666; /* Darker gray text */
    cursor: not-allowed; /* Prevent user interaction */
}

/* Handle hidden columns */
.mc-product-selector__filters.collapsed,
.mc-product-selector__selected-products.collapsed {
    display: none;
}

.mc-product-selector {
    grid-template-columns: 1fr 2fr 1fr; /* Default three-column layout */
    transition: grid-template-columns 0.3s ease; /* Smooth transition of width */
}

.mc-product-selector.collapsed-filters {
    grid-template-columns: 3fr 1fr; /* Hide Filters column */
}

.mc-product-selector.collapsed-selected-products {
    grid-template-columns: 1fr 3fr; /* Hide Selected Products column */
}

.mc-product-selector.collapsed-filters.collapsed-selected-products {
    grid-template-columns: 3fr; /* Show only Products column */
}

/* Optional: Style for toggle buttons */
.collapse-btn {
    background-color: #fff;
    color: #0073aa;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
    line-height: 1;
}

.collapse-btn:hover {
    background: lightgray;
    cursor: pointer !important;
}

/* Modify placement inside the product list */
.mc-product-selector__product-list .collapse-btn {
    margin-top: 10px; /* Adds consistent spacing for buttons inside product list */
    display: block; /* Ensures buttons are stacked vertically if needed */
    background-color: #0073aa;
    color: white;
    border: none;
}

.mc-product-selector__product-list .collapse-btn:hover {
    background-color: #005a8e;
}

/* Optional: position the buttons near the affected columns */
.collapse-btn[data-target="filters"] {
    grid-column: 1; /* Relates to grid layout of parent container */
    justify-self: start; /* Push button to the left */
    float: right;
}

.collapse-btn[data-target="selected-products"] {
    grid-column: 3; /* Place the button near the Selected Products column */
    justify-self: end; /* Push button to the right */
}

.mc-product-selector__product-list .collapse-btn[data-target="filters"] {
    position: fixed;
    left: 0;
    rotate: 90deg;
    left: -47px;
    top: 150px;
    z-index: 1;
}

.mc-product-selector__product-list .collapse-btn[data-target="selected-products"] {
    position: fixed;
    right: 0;
    rotate: -90deg;
    right: -102px;
    top: 205px;
    z-index: 1;
}