.selms-adv-wrapper {
    margin: 0 0 20px 0;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.selms-adv-wrapper .selms-font-preview-box {
    font-size: 2.5em;
    min-height: 100px;
    padding: 15px;
    border: 1px dashed #ccc;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: break-word;
    font-weight: bold;
    background-size: cover;
    background-position: center;
}

/* Field Labels */
.selms-adv-wrapper .selms-field-label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #333;
}

/* Field Wrappers */
.selms-adv-wrapper .selms-field-wrapper {
    margin-bottom: 20px;
}

.selms-adv-wrapper .selms-field-wrapper:last-child {
    margin-bottom: 0;
}

.selms-adv-wrapper .selms-field-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* Text Inputs */
.selms-adv-wrapper input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.selms-adv-wrapper input[type="text"]:focus {
    outline: none;
    border-color: #007acc;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}

/* Dropdowns */
.selms-adv-wrapper select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.selms-adv-wrapper select:focus {
    outline: none;
    border-color: #007acc;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}

/* FIXED: Color Swatches - This was the main issue */
.selms-adv-wrapper .selms-color-swatches-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.selms-swatch-label-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selms-swatch-name {
    display: none;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
}

.selms-swatch-label-wrapper.selected .selms-swatch-name {
    display: block;
}

.selms-adv-wrapper .selms-color-swatch {
    width: 24px; /* Increased from 18px for better visibility */
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid #ddd;
    transition: all 0.2s ease;
    background-size: cover;
    background-position: center;
    display: inline-block;
    position: relative;
}

.selms-adv-wrapper .selms-color-swatch:hover {
    transform: scale(1.05);
    border-color: #999;
}

.selms-adv-wrapper .selms-color-swatch:focus {
    outline: 2px solid #005cee;
    outline-offset: 2px;
}

/* CRITICAL: Hide the radio inputs but keep functionality */
.selms-adv-wrapper .selms-color-swatches-wrapper input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* CRITICAL: Selected state styling */
.selms-adv-wrapper .selms-color-swatches-wrapper input[type="radio"]:checked + label {
    border-color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Font Size Control */
.selms-adv-wrapper .selms-font-size-control {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selms-adv-wrapper .selms-font-size-control label {
    font-weight: bold;
    margin: 0;
}

.selms-adv-wrapper .selms-font-size-control input[type="range"] {
    flex: 1;
    max-width: 200px;
}

.selms-adv-wrapper .selms-font-size-control span {
    font-weight: bold;
    min-width: 50px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .selms-adv-wrapper {
        padding: 12px;
        margin: 0 0 15px 0;
    }
    
    .selms-adv-wrapper .selms-color-swatch {
        width: 28px;
        height: 28px;
    }
    
    .selms-adv-wrapper .selms-color-swatches-wrapper {
        gap: 10px;
        max-height: 5rem; /* Show one row of swatches */
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease-in-out;
    }

    .selms-adv-wrapper .selms-color-swatches-wrapper.expanded {
        max-height: none; /* Allow container to expand fully */
        overflow-y: auto; /* Enable scrolling if content exceeds viewport */
    }

    .selms-show-more-swatches {
        width: 100%;
        text-align: center;
        padding: 10px;
        background: #f0f0f0;
        border: 1px solid #ddd;
        cursor: pointer;
        margin-top: 10px;
    }

    .selms-adv-wrapper .selms-color-swatches-wrapper.expanded + .selms-show-more-swatches {
        display: block;
    }

    .selms-swatch-label-wrapper {
        flex-direction: column;
    }

    .selms-swatch-name {
        display: block;
    }
    
    .selms-adv-wrapper .selms-font-preview-box {
        font-size: 2em;
        min-height: 80px;
        padding: 12px;
    }
}

@media (min-width: 769px) {
    .selms-show-more-swatches {
        display: none;
    }
}

@media (max-width: 480px) {
    .selms-adv-wrapper .selms-color-swatches-wrapper {
        gap: 8px;
    }
    
    .selms-adv-wrapper .selms-color-swatch {
        width: 26px;
        height: 26px;
    }
}

/* Styling for the main production notice */
.woocommerce-product-page .woocommerce-info {
    clear: both; /* Ensure it stands alone */
    background-color: #f7f7f7 !important; /* A very light, neutral background */
    border: 1px solid #ddd !important; /* A subtle border */
    border-left: 5px solid #0073aa !important; /* A strong blue accent on the left */
    padding: 1.2em 1.5em; /* Ample padding */
    margin: 1.5em 0; /* Clear vertical spacing */
    font-size: 0.95em;
    line-height: 1.6;
    color: #333; /* Good readability */
    border-radius: 4px; /* Slightly rounded corners for modern look */
}

/* Emphasize key parts of the notice */
.woocommerce-product-page .woocommerce-info strong {
    color: #005a87; /* Darker blue for emphasis */
    font-weight: 600; /* Slightly bolder */
}

/* Ensure the bullet points are clear */
.woocommerce-product-page .woocommerce-info br + strong {
    margin-top: 0.5em; /* Add space between lines if multiple strong tags */
    display: block;
}

/* Styling for the Rush Production box */
.selms-rush-production-product-wrapper {
    background-color: #fff8e1; /* A light, attention-grabbing yellow */
    border: 2px solid #ffb300; /* A vibrant orange-yellow border */
    border-radius: 6px; /* More rounded for a modern feel */
    padding: 1.5em; /* More padding to give it presence */
    margin: 1.5em 0 2em; /* Good spacing around it */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* A more pronounced shadow */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover effect to make it feel interactive */
.selms-rush-production-product-wrapper:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transform: translateY(-2px); /* Slight lift */
}

/* Styling for the checkbox label */
.selms-rush-production-product-wrapper .form-row label {
    display: flex; /* Use flexbox for better alignment of checkbox and text */
    align-items: center;
    font-size: 1.15em; /* Larger font for readability */
    font-weight: 700; /* Very bold */
    color: #e65100; /* A strong, urgent orange */
    cursor: pointer;
    line-height: 1.4;
}

/* Custom checkbox styling for a modern look (optional, requires more CSS) */
.selms-rush-production-product-wrapper input[type="checkbox"] {
    /* Hide default checkbox */
    position: absolute;
    opacity: 0;
}

/* Visual indicator for the custom checkbox */
.selms-rush-production-product-wrapper input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 1.25em; /* Size of custom checkbox */
    height: 1.25em;
    border: 2px solid #ffb300;
    border-radius: 4px;
    margin-right: 0.75em;
    background-color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Checked state for custom checkbox */
.selms-rush-production-product-wrapper input[type="checkbox"]:checked + label::before {
    background-color: #ffb300; /* Fill with accent color */
    border-color: #ffb300;
    /* Add a checkmark (e.g., using background-image or ::after) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: 70%;
    background-position: 50%;
    background-repeat: no-repeat;
}

/* Focus state for accessibility */
.selms-rush-production-product-wrapper input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 0 3px rgba(255,179,0,0.4);
}

/* Highlight the price within the label */
.selms-rush-production-product-wrapper .amount {
    color: #d84315; /* Even more prominent red-orange for the price */
    font-size: 1.1em;
    font-weight: 800;
    margin-left: 0.2em; /* Small space after the plus sign */
}