/* Container grouping Labour/Other Rates sections */
.rates-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Cohesive block for LH/RH columns - forces them to drop together on mobile */
.rates-column {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
}

/* Individual Rate Row */
.rate-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 10px;
}

/* Flexible Label - Wider and professional (150px instead of the old W120) */
.rate-label {
    flex: 0 0 170px;
    font-size: 0.9rem;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Maintaining your original input sizing */
.rate-input-wrapper {
    display: flex;
    align-items: center; /* Vertically centers items */
    gap: 5px; /* Consistent gap between boxes */
}

.rate-input, .rate-dropdown {
    height: 25px !important; /* Identical height for inputs and dropdowns */
    box-sizing: border-box; /* Ensures padding doesn't increase width/height */
    padding: 0 8px; /* Consistent internal spacing */
    border: 1px solid #ccc;
    border-radius: 4px; /* Softer corners */
    font-size: 13px; /* Uniform text size */
    line-height: normal; /* Prevents text alignment offsets */
    font-family: Arial, sans-serif; /* Ensures fonts match */
}

/* 2. Specifics for the Currency Inputs */
.rate-input {
    width: 75px !important; /* Fixed width for currency */
    text-align: right;
    padding-right:3px !important;
}






/* A wider column specifically for Other Rates to accommodate the dropdown */
.rates-column-wide {
    flex: 1 1 480px; /* Increased from 320px to fit Label + 2 Inputs + Dropdown */
    display: flex;
    flex-direction: column;
}

/* The new dropdown styling */
.rate-dropdown {
    height: 25px !important;
    box-sizing: border-box;
    padding: 0 8px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    width: 150px;
    margin: 0 0 0 5px !important; /* Reset top/bottom margins to 0. Keep Left margin 5px. */
    vertical-align: middle; /* Helps alignment in some browsers */
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

/* NEW: A container specifically for vertical lists (Other Rates) */
.rates-list-section {
    display: flex;
    flex-direction: column; /* Forces strict vertical stacking */
    gap: 4px; /* Tighter 4px gap between rows */  
    overflow: visible;
}

/* UPDATE: Remove margin-bottom, let the container gap handle spacing */
.rate-item-wide {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1px;
    /* margin-bottom: 8px; <--- REMOVED to reduce space */
}

/* Container to keep the checkbox and label together during wraps */
.fixed-price-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    white-space: nowrap;
}

.fixed-price-label {
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
}




/* Container for the icon column */
.fixed-price-column {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The SVG Icon Style */
.padlock-svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    fill: #bdc3c7; /* Subtle Grey for Unlocked */
}

/* Locked state - change color and "pop" slightly */
.is-fixed .padlock-svg {
    fill: #f39c12; /* Vibrant Orange for Locked */
    filter: drop-shadow(0px 0px 2px rgba(243, 156, 18, 0.4));
}

.padlock-svg:hover {
    transform: scale(1.15);
}

/* Hides the checkbox while keeping it functional for JavaScript data collection */
.hidden-check {
    display: none !important;
    visibility: hidden;
    position: absolute;
}