#selezionaRegione {
    background-color: #f0f0f0;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 12px 15px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #333;
    transition: border 0.3s ease;
}

#selezionaRegione:hover {
    border-color: #007BFF; /* Change to your preferred color */
}

#selezionaRegione:focus {
    outline: none;
    border-color: #007BFF;
}

/* Style the Cities List */
#listaCittaDisponibili {
    padding: 0;
    margin: 10px 0 20px 0; /* Added bottom margin for spacing below list */
    list-style: none;
    background: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* transition on container is okay if you animate the container itself */
    /* transition: all 0.3s ease; */
}

/* Styles for the individual city list items */
#listaCittaDisponibili li {
    padding: 10px 15px; /* Added horizontal padding */
    border-bottom: 1px solid #ddd;
    cursor: default; /* <<<< CHANGED from pointer to default */
    color: #333;      /* Explicitly set a readable text color */
    background-color: transparent; /* Ensure it doesn't have an unintended background */
    /* transition: background-color 0.3s ease; << REMOVED or comment out */
}


#listaCittaDisponibili li:hover {
   background-color: transparent; /* Ensure background doesn't change */
   color: #333; /* Ensure text color doesn't change */
   cursor: default; /* Ensure cursor stays default */
   text-decoration: none; /* Ensure no underline appears */
}

/* Show container when a region is selected */
#cittaDisponibiliContainer {
    display: none;
    padding: 10px 0;
    transition: all 0.4s ease;
}

#cittaDisponibiliContainer h4 {
    font-size: 18px;
    color: #333;
}

/* Form styling */
input[type="text"], input[type="email"], input[type="tel"], textarea {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 16px;
    border-radius: 5px;
    width: 100%;
    transition: border 0.3s ease;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
    outline: none;
    border-color: #007BFF;
}

button.custom-btn {
    background-color: #fff; /* White background for a clean, professional look */
    color: #333; /* Dark text color */
    border: 1px solid #ddd; /* Light gray border (cornice) */
    padding: 8px 20px; /* Slightly larger padding for balance */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Consistent font size */
    font-weight: normal; /* Regular weight for text */
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    text-align: left; /* Left-aligned text */
    display: inline-block; /* Inline button */
    margin: 0; /* No extra margin */
}

button.custom-btn:hover {
    background-color: #f7f7f7; /* Light gray background on hover */
    border-color: #bbb; /* Slightly darker border on hover */
    color: #111; /* Darker text color when hovered */
}

button.custom-btn:focus {
    outline: none; /* Remove focus outline */
    border-color: #007bff; /* Blue border on focus to indicate interaction */
}
/* Styling for the custom select wrapper */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 8px; /* Rounded corners for the dropdown */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Style the select element to remove default dropdown look */
.custom-select-wrapper select {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    border: none;
    background-color: transparent;
    appearance: none; /* Remove default arrow */
    cursor: pointer;
}

/* Add a custom arrow to the select element */
.custom-select-wrapper::after {
    content: '\f0d7'; /* Unicode for the down arrow icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #333;
}

/* Hover effect for the dropdown */
.custom-select-wrapper select:hover {
    border: 1px solid #007bff; /* Add a border on hover for better visibility */
    outline: none;
}

/* Style for the label */
.custom-select-wrapper label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Optional: Adding a focus effect to the select */
.custom-select-wrapper select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Centri Prelievo Section */
.centri-prelievo-section {
    padding: 40px 0;
}

/* Styling for the h4 title */
#cittaDisponibiliTitle {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

/* Styling for the cities list */
#listaCittaDisponibili {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
    margin-top: 10px;
}

/* Styling each city item in the list */
#listaCittaDisponibili li {
    padding: 8px 15px;
    background-color: #f7f7f7;
    margin: 5px 0;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Hover effect for each list item */
#listaCittaDisponibili li:hover {
    background-color: #e0e0e0;
}

/* Optional: Add a border to the entire container */
#cittaDisponibiliContainer {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 20px;
}

/* Success & Error Message */
#disponibilitaMessage {
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 16px;
}

#disponibilitaMessage.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#disponibilitaMessage.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .col-lg-8 {
        width: 100%;
    }

    .col-lg-4 {
        width: 100%;
    }
}

.custom-select-wrapper {
    position: relative; /* Crucial for positioning the custom arrow */
    width: 100%; /* Make it take the full width of its parent */
}

.custom-select-wrapper label[for="selezionaRegione"] {
    display: block; /* Makes the label take its own line */
    font-size: 14px;
    font-weight: 600; /* Bolder label text */
    color: #334155; /* A slightly muted dark color */
    margin-bottom: 8px; /* Space between label and select */
}

.custom-select-wrapper select#selezionaRegione {
    /* --- Appearance & Box Model --- */
    width: 100%;
    padding: 12px 40px 12px 15px; /* Top/Bottom, Right (for arrow), Left */
    background-color: #f8fafc; /* Light background */
    border: 1px solid #cbd5e1; /* Softer border color */
    border-radius: 8px; /* Rounded corners */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */

    /* --- Typography --- */
    font-family: inherit; /* Inherit font from parent */
    font-size: 16px;
    color: #1e293b; /* Dark text color for input */

    /* --- Custom Arrow --- */
    appearance: none; /* Remove default system arrow (most browsers) */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */

    /* --- Interaction --- */
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Custom Dropdown Arrow */
.custom-select-wrapper::after {
    content: '\f078'; /* Font Awesome icon for "angle-down" */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Required for Font Awesome solid icons */
    position: absolute;
    /*
     * Positioning the arrow:
     * 'top' calculation aims to vertically center the arrow within the select box
     * when the label is displayed above it.
     * It accounts for the label's approximate height and margin.
     * 'LABEL_EFFECTIVE_HEIGHT_APPROX' is roughly (label font-size * line-height + label margin-bottom).
     * E.g., if label is 14px, line-height 1.4 (19.6px), margin-bottom 8px. Total ~28px.
     * So, we push down from the wrapper's 50% mark by half of this.
     * Adjust the '14px' in calc if your label's effective height contribution is different.
    */
    top: calc(50% + 14px); /* Adjust 14px if label size/margin changes significantly */
    right: 15px; /* Distance from the right edge */
    transform: translateY(-50%); /* Vertically centers the arrow itself */
    font-size: 14px;
    color: #64748b; /* Arrow color */
    pointer-events: none; /* Ensures the arrow doesn't block clicks on the select */
    transition: color 0.2s ease-in-out;
}

/* --- Hover States --- */
.custom-select-wrapper:hover select#selezionaRegione {
    border-color: #007BFF; /* A primary color for hover */
}
.custom-select-wrapper:hover::after {
    color: #007BFF; /* Change arrow color on wrapper hover */
}

/* --- Focus States --- */
.custom-select-wrapper select#selezionaRegione:focus {
    outline: none; /* Remove default outline */
    border-color: #007BFF;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Modern focus ring */
}

/* Styling for the options within the dropdown (browser-dependent) */
.custom-select-wrapper select#selezionaRegione option {
    padding: 10px; /* Some browsers might respect this */
    background-color: #ffffff;
    color: #1e293b;
}