/* Container & General Layout */
.nexoy-container {
    background: #fff;
    padding: 35px;
    border-radius: 12px; /* Softer corners */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Premium shadow */
    max-width: 850px;
    margin-top: 25px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #3c434a;
}

/* Row Styling */
.nexoy-row {
    margin-bottom: 30px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /* Removed left border for a cleaner, modern look, adding subtle shadow instead */
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.nexoy-row:hover {
    border-color: #2271b1;
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.1);
}

/* Section Headers (e.g., Inclusion Rules) */
.nexoy-row p strong {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    display: block;
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f1;
    padding-bottom: 12px;
}

/* ---- LABELS & INPUTS ALIGNMENT FIX ---- */

/* General Labels */
.nexoy-row label {
    font-weight: 500;
    font-size: 15px;
    color: #3c434a;
    display: inline-block; /* Changed from flex to inline-block */
    vertical-align: middle;
    cursor: pointer;
    margin-bottom: 15px;
    line-height: 1.5;
    min-width: 240px; /* Fixed width for labels to align inputs vertically */
}

/* Labels that wrap checkboxes (e.g., Apply to All) need different styling */
.nexoy-row label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    min-width: auto; /* Reset min-width for checkbox labels */
}

/* Inputs Styling (Number & Text) */
input[type="number"], 
input[type="text"] {
    width: 320px; /* Fixed width instead of 100% - KEEPS IT ON SAME LINE */
    max-width: 100%;
    height: 44px; /* Slightly taller for premium feel */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 15px;
    font-size: 15px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.2s;
    display: inline-block; /* Sits next to the label */
    vertical-align: middle;
    margin-left: 10px; /* Spacing between label and input */
}

/* Focus state for inputs */
input[type="number"]:focus, 
input[type="text"]:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15); /* Modern thick focus ring */
    outline: none;
}

/* ---- SUB-OPTIONS (Hidden Boxes) ---- */
.nexoy-sub-option {
    margin-top: 15px;
    margin-bottom: 25px;
    margin-left: 35px; /* Indent sub-options */
    padding: 20px;
    background: #fcfcfc;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    display: none;
    position: relative;
}

/* Add a visual connector line */
.nexoy-sub-option::before {
    content: '';
    position: absolute;
    left: -20px;
    top: -17px;
    width: 2px;
    height: 30px;
    background: #e2e4e7;
}

/* Product ID inputs inside sub-options */
.nexoy-sub-option input[type="text"] {
    width: 100%; /* Full width inside the sub-box looks better */
    margin-left: 0;
    margin-bottom: 8px;
}

/* Checkbox lists inside sub-options */
.nexoy-sub-option div {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 6px;
    background: #fff;
}

.nexoy-sub-option label {
    margin-bottom: 0;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
    width: 100%;
    min-width: auto; /* Reset min-width here */
}

.nexoy-sub-option label:last-child {
    border-bottom: none;
}

/* Helper Text (e.g., comma separated IDs) */
.nexoy-desc {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #787c82;
}

/* ---- EXCLUSION SECTION (Red Theme) ---- */
.nexoy-row[style*="border-left-color: #d63638;"] {
    background: #fffbfb;
    border-color: #f0c0c0;
    border-left: none !important; /* Override PHP inline style */
    border-top: 4px solid #d63638; /* Top border instead for modern look */
}

.nexoy-row[style*="border-left-color: #d63638;"]:hover {
    border-color: #d63638;
    box-shadow: 0 4px 12px rgba(214, 54, 56, 0.1);
}

/* ---- CHECKBOX STYLING ---- */
input[type="checkbox"].nexoy-toggle,
input[name="nexoy_is_active"],
#nexoy_apply_all {
    accent-color: #2271b1;
    transform: scale(1.3); /* Larger checkboxes */
    margin-right: 15px;
    cursor: pointer;
}