/**
 * YITH WAPO Product Select Field Styling
 * Styles for the JavaScript-generated select fields that replace product addon cards
 */

/* Hide the original product addon options */
.yith-wapo-option.yith-wapo-hidden {
    display: none !important;
}

/* Select field wrapper */
.yith-wapo-product-select-wrapper {
    margin: 15px 0;
    position: relative;
}

/* Select field styling */
.yith-wapo-product-select,
.yith-wapo-color-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #ADD5F4;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    cursor: pointer;
}

.yith-wapo-product-select:focus,
.yith-wapo-color-select:focus {
    outline: none;
    border: 1px solid #ADD5F4;
}

.yith-wapo-color-select:disabled,
.yith-wapo-product-select:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Option styling */
.yith-wapo-product-select option {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}

.yith-wapo-product-select option:disabled {
    color: #6c757d;
    font-style: italic;
}

/* Ensure proper spacing within addon blocks */
.yith-wapo-addon-type-product .yith-wapo-product-select-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Hide the original product cards when select is present */
.yith-wapo-addon-type-product.yith-wapo-processed .yith-wapo-option {
    display: none !important;
}

/* Show only the select field */
.yith-wapo-addon-type-product.yith-wapo-processed .yith-wapo-product-select-wrapper {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .yith-wapo-product-select {
        font-size: 14px;
        padding: 10px 14px;
        padding-right: 36px;
    }
}

/* Ensure compatibility with existing YITH WAPO styles */
.yith-wapo-addon .yith-wapo-product-select-wrapper {
    margin: 10px 0;
}

/* Hide quantity inputs and add to cart buttons for product addons when using select */
.yith-wapo-addon-type-product.yith-wapo-processed .option-add-to-cart {
    display: none !important;
}

/* Ensure the select field fits well within the addon container */
.yith-wapo-addon-type-product .options {
    display: block;
}

.yith-wapo-addon-type-product .options-container {
    margin-top: 10px;
}

/* ====== COLOR SELECT FIELD STYLES ====== */

/* Color select field wrapper */
.yith-wapo-color-select-wrapper {
    margin: 15px 0;
    position: relative;
}

/* Color select field styling */
.yith-wapo-color-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #ADD5F4;
    background: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    cursor: pointer;
}

.yith-wapo-color-select:focus {
    outline: none;
    border: 1px solid #ADD5F4;
}

.yith-wapo-color-select:hover {
    border-color: #b8c5d1;
}

.yith-wapo-color-select:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Color select option styling */
.yith-wapo-color-select option {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}

.yith-wapo-color-select option:disabled {
    color: #6c757d;
    font-style: italic;
}

/* Ensure proper spacing within color addon blocks */
.yith-wapo-addon-type-color .yith-wapo-color-select-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Hide the original color options when select is present */
.yith-wapo-addon-type-color.yith-wapo-processed .yith-wapo-option {
    display: none !important;
}

/* Show only the color select field */
.yith-wapo-addon-type-color.yith-wapo-processed .yith-wapo-color-select-wrapper {
    display: block;
}

/* Responsive adjustments for color selects */
@media (max-width: 768px) {
    .yith-wapo-color-select {
        font-size: 14px;
        padding: 10px 14px;
        padding-right: 36px;
    }
}

/* Ensure compatibility with existing YITH WAPO styles for color addons */
.yith-wapo-addon .yith-wapo-color-select-wrapper {
    margin: 10px 0;
}

/* Ensure the color select field fits well within the addon container */
.yith-wapo-addon-type-color .options {
    display: block;
}

.yith-wapo-addon-type-color .options-container {
    margin-top: 10px;
}