/* Container for the toggle buttons */
.custom-toggle-buttons {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* Each toggle button row should align the switch and label horizontally */
.custom-toggle-buttons .toggle-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Hide the actual radio buttons */
.custom-toggle-buttons input[type="radio"] {
    display: none;
}

/* Styling for the toggle button labels */
.toggle-button {
    position: relative;
    display: inline-block;
    width: 40px;
    /* Approx 1cm wide */
    height: 20px;
    /* Approx 0.5cm high */
    background-color: #ccc;
    /* Gray color for inactive state */
    border-radius: 15px;
    margin-right: 10px;
    /* Space between the toggle and label */
    cursor: pointer;
    transition: background-color 0.3s ease;
    vertical-align: middle;
}

/* Ball inside the toggle button */
.toggle-button::before {
    content: "";
    position: absolute;
    width: 18px;
    /* Ball size */
    height: 18px;
    background-color: white;
    border-radius: 50%;
    top: 1px;
    left: 2px;
    /* Position the ball to the left initially */
    transition: all 0.3s ease;
}

/* Active state when radio button is checked */
.custom-toggle-buttons input[type="radio"]:checked+.toggle-button {
    background-color: #ffd700;
    /* Yellow color for active state */
}

/* Move the ball to the right when checked */
.custom-toggle-buttons input[type="radio"]:checked+.toggle-button::before {
    transform: translateX(20px);
    /* Shift the ball to the right */
}

/* Labels for toggle buttons, positioned next to the switch */
.custom-toggle-buttons label {
  
 cursor: pointer;
color: #000000;
            font-family: "Sofia Sans Condensed", Sans-serif;
            font-size: 18px;
            font-weight: 600;
            text-transform: none;
            font-style: normal;
            letter-spacing: 0px;
        
}

.skiplocation {

    color: #000000;
    font-family: "Sofia Sans Condensed", Sans-serif;
    font-size: 31px;
    font-weight: 600;
    text-transform: none;
    font-style: normal;
    letter-spacing: 0px;
    line-height:60px;

}

.midfont {

    color: #000000;
    font-family: "Sofia Sans Condensed", Sans-serif;
    font-size: 31px;
    font-weight: 600;
    text-transform: none;
    font-style: normal;
    letter-spacing: 0px;
    line-height: 60px;

}

.smallfont {

    color: #000000;
    font-family: "Sofia Sans Condensed", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    font-style: normal;
    letter-spacing: 0px;
    line-height: 22px;

}

/* Style the date picker input */
#delivery_date {
    padding: 15px;
    /* Adjust padding for larger size */
    border: 2px solid #e0e0e0;
    /* Light gray border */
    border-radius: 5px;
    /* Rounded corners */
    width: 100%;
    /* Full width input */
    max-width: 400px;
    /* Maximum width */
    font-size: 16px;
    /* Larger font size */
    font-family: Arial, sans-serif;
    /* Matching font */
    color: #666;
    /* Placeholder text color */
    background-color: #f6f6f6;
    /* Light gray background */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle inner shadow */
    margin-bottom: 10px;
    /* Space below the input */
}
/* Style for the midfont class (Preferred date text) */


/* Style the date picker input */
#delivery_date {
    padding: 5px;
    /* Reduced padding for smaller depth */
    border: 2px solid #e0e0e0;
    /* Light gray border */
    border-radius: 5px;
    /* Rounded corners */
    width: 100%;
    /* Full width input */
    max-width: 400px;
    /* Maximum width */
    font-size: 16px;
    /* Keep the font size as is */
    font-family: "Sofia Sans Condensed", Sans-serif;
    /* Matching font */
    color: #666;
    /* Placeholder text color */
    background-color: #f6f6f6;
    /* Light gray background */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle inner shadow */
    margin-bottom: 15px;
    /* Space below the input */
}

/* Placeholder styling */
#delivery_date::placeholder {
    color: #b0b0b0;
    /* Lighter gray for placeholder text */
    font-style: italic;
}

/* Focus state for date picker input */
#delivery_date:focus {
    border-color: #ccc;
    /* Slightly darker border on focus */
    outline: none;
}

/* Style the WooCommerce variations dropdown to match the date picker */
select[name="attribute_pa_area"] {
    padding: 5px;
    /* Adjust padding for a smaller depth */
    border: 2px solid #e0e0e0;
    /* Light gray border */
    border-radius: 5px;
    /* Rounded corners */
    width: 100%;
    /* Full width input */
    max-width: 400px;
    /* Maximum width */
    font-size: 16px;
    /* Font size to match date picker */
    font-family: "Sofia Sans Condensed", Sans-serif;
    /* Matching font */
    color: #666;
    /* Text color */
    background-color: #f6f6f6;
    /* Light gray background */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle inner shadow */
    appearance: none;
    /* Remove default styling for select dropdown */
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-bottom: 10px;
    /* Space below the dropdown */
}

/* Placeholder styling for the first option */
select[name="attribute_pa_area"] option:first-child {
    color: #b0b0b0;
    /* Lighter gray for the "Choose an option" text */
}

/* Add a downward arrow for the select dropdown */
select[name="attribute_pa_area"] {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5H7z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Focus state for the dropdown */
select[name="attribute_pa_area"]:focus {
    border-color: #ccc;
    /* Slightly darker border on focus */
    outline: none;
}

/* Target the specific <td> containing the select dropdown and remove its padding */
td .value select#pa_area {
    padding: 0 !important;
}

/* To further ensure the td has no padding */
td .value {
    padding: 0 !important;
}

/* Overlay to cover the WooCommerce content except the radio buttons */
.road-permit-overlay {
    position: absolute;
    top: -97px;
    /* Original desktop positioning */
    left: 0;
    width: 100%;
    height: 85%;
 background-color: #f6d807;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 99999;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .road-permit-overlay {
        position: relative;
        /* Relative position so it doesn't cover the entire screen */
        top: 0;
        height: auto;
        width: 100%;
    background-color: #f6d807;
        z-index: 9999;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }

    .road-permit-content {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Close button */
    .road-permit-close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        cursor: pointer;
    }
}
/* Style for the content inside the overlay */
.road-permit-content {
    text-align: left;
    font-family: "rift", sans-serif;
    /* Using the Rift font */
    color: #000000;
    /* Black text */
    /* Optional: white background inside content */
    border: none;
    /* Remove the border */
    width: 90%;
    max-width: 600px;
    pointer-events: all;
    /* Enable interaction with the content inside the message */
}

/* Text styles */
.road-permit-content p {
 
            color: #000000;
            font-family: "Sofia Sans Condensed", Sans-serif;
            font-size: 31px;
            font-weight: 600;
            text-transform: none;
            font-style: normal;
            line-height: 33px;
            letter-spacing: 0px;
            margin-top:10px;
        
    /* Black text */
}

/* Larger call-to-action text */
.road-permit-content .call-action {
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Email button style */
.email-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: black;
    color: white!important;
    font-family: "rift", sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}