.agl-request-form {
    margin: 0 auto 30px;
    max-width: 1100px;
}

.tailwind-form {

    textarea {
        color: black !important;
    }

    margin-top: 30px;

    & > fieldset:not(:first-of-type) {
        --tw-bg-opacity: 1;
        background-color: rgb(241 244 244 / var(--tw-bg-opacity));
        padding: 30px;
        grid-column: 2;
    }
    
    & > fieldset:last-of-type p {
        display: none;
    }
    
    & > fieldset:first-of-type {
        color: white;
        
        .field-validation-error {
            color: white;
        }

        input,
        select {
            color: black;
        }
    }
    
    & > fieldset:not(:first-of-type):not(:last-of-type) {
        padding-bottom: 0;
    }
    
    & > fieldset:not(:first-of-type):not(:last-of-type):after { 
        content: "";
        width: 100%;
        height: 2px;
        background-color: white;
        display: block;
        margin: 30px auto 0;
    }
    
    /* Dont override flex-tw */
    label:not(.flex) {
        display: grid;
        grid-template-areas: 'label helpertext'
            'input input';
        gap: 6px;

        span:first-of-type {
            grid-area: label;
        }

        &:not(:has(textarea)) {
            span:nth-of-type(2) {
                grid-area: helpertext;
                display: flex;
                align-items: flex-end;
                flex-direction: column;
            }
        }

        .umbraco-forms-field-wrapper {
            grid-area: input;
            grid-column: span 2;
        }
    }
    
    legend .form-field-title {
        margin-bottom: 6px;
        display: block;
    }

    .umbraco-forms-hidden {
        display: none;
    }
    
    input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
    textarea,
    select {
        width: 100%;
        border-radius: 0.25em;
        border: none;
    }
    
    input[type="radio"] {
        border: none;
        color: black;
        outline-color: black;
    }
    
    input[type="checkbox"] {
        border: none;
        border-radius: 5px;
    }
    
    textarea {
        resize: none;
    }
    
    span.field-description {
        font-weight: 500;
    }
    
    .longanswer label {
        display: flex;
        flex-direction: column;
    }
    
    select {
        font-weight: 500;
    }
    
    textarea,
    .radionbuttonlist-item,
    input[type="radio"] ~ label {
        font-weight: 500;
    }
    
    .radionbuttonlist-item,
    input[type="radio"] ~ label {
        margin-left: 0.5em;
    }
    
    .afbestilingsforsikring {
        display: grid;
        gap: 15px;
    }
    
    .afbestilingsforsikring label {
        grid-column: 1 / span 2;
    }
    
    .afbestilingsforsikring .umbraco-forms-field-wrapper {
        grid-column: 1;
        grid-row: 2;
    }
    
    .afbestilingsforsikring .field-description {
        grid-column: 2;
    }
    
    .form-group.umbraco-forms-field.checkbox label {    
        display: grid;
        grid-template-areas: 'title title'
        'checkbox description';
        grid-template-columns: 1fr 20fr;
        gap: 6px;
        
        & .form-field-title {
            grid-area: title;
            display: flex;
            align-items: center;
        }
    
        & .field-description {
            grid-area: description;
            grid-column: span 2;
            align-items: flex-start;
        }
        
        & .umbraco-forms-field-wrapper {
            grid-area: checkbox;
        }
    }
    
    input {
        font-weight: 500 !important;
    }
}

/* --- FINAL CALENDAR STYLES (based on original design) --- */

/* Main container: white, rounded, with shadow */
.pika-single {
    z-index: 9999;
    background: #fff;
    border-radius: 13px;
    padding: 1rem;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .2);
    width: 320px;
    border: none;
}

/* Header: Month Year <> - NEW STABLE VERSION using absolute positioning */
.pika-title {
    position: relative; /* Positioning context for the arrows */
    text-align: center; /* Center the month/year dropdowns */
    padding-bottom: 1rem;
    height: 40px; /* Give a fixed height to contain the absolutely positioned elements */
}

/* This is the container for the dropdowns in the middle */
.pika-label {
    display: inline-flex; /* Align dropdowns side-by-side */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
}

/* The actual dropdowns */
.pika-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: transparent;
    border: none;
    padding: 0.25rem;
    color: #082A36;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}
/* NEW: Target month and year specifically and force font size */
.pika-select-month,
.pika-select-year {
    font-size: 1.75rem !important;
}
.pika-select-month {
    font-weight: bold !important; /* Month is bold */
}
.pika-select-year {
    font-weight: normal !important; /* Year is regular */
}
.pika-select:hover {
    background-color: #F3F4F6; /* light gray on hover */
}

/* Prev/Next arrows - positioned absolutely */
.pika-prev,
.pika-next {
    position: absolute !important;
    top: 50%;
    margin-top: -12px; /* Half of height to vertically center */
    width: 24px !important;
    height: 24px !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.7;
    transition: opacity 0.2s;
    background-image: none !important;
}
.pika-prev {
    left: 0;
}
.pika-next {
    right: 0;
}

.pika-title .pika-prev:hover,
.pika-title .pika-next:hover {
    opacity: 1;
}

/* We still need the ::before pseudo-elements for the SVG icons */
.pika-title .pika-prev::before,
.pika-title .pika-next::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}
.pika-title .pika-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23082A36'%3E%3Cpath fill-rule='evenodd' d='M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
.pika-title .pika-next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23082A36'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Calendar table - with a single background for the grid */
.pika-table {
    width: 100%;
    border-collapse: collapse;
}

/* Weekday headers (m, t, w, etc.) */
.pika-table th {
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151; /* gray-700 */
    text-align: center;
    text-transform: lowercase; /* As per original image */
    border-bottom: 1px solid #E2E8F0; /* Solid light gray line */
}

/* This is the <td> cell for each day */
.pika-day {
    padding: 1px 0; /* A little vertical space between rows */
}

/* The circular button for each day */
.pika-button {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    color: #082A36 !important;
    transition: background-color 0.2s;
}

/* GENERAL HOVER - This is the main change. It's simple and direct. */
.pika-button:hover {
    background-color: #E2E8F0 !important; /* gray-200 */
}

/* SELECTED date: Light gray background */
.pika-day.is-selected .pika-button {
    background-color: #E2E8F0 !important; /* gray-200 */
    color: #082A36 !important;
    font-weight: bold !important;
}

/* Keep the selected date gray on hover (override general hover) */
.pika-day.is-selected .pika-button:hover {
    background-color: #E2E8F0 !important; /* Stays gray */
}

/* TODAY's date: No special styling, just a normal button */
.pika-day.is-today .pika-button {
    font-weight: normal !important; /* Reset any bolding from other states */
}

/* DISABLED/OUTSIDE DATES */
.pika-day.is-disabled .pika-button,
.pika-day.is-outside-current-month .pika-button {
    background: transparent !important;
    color: #D1D5DB !important; /* gray-300 */
    pointer-events: none !important;
}

/* Keep disabled/outside dates transparent on hover (override general hover) */
.pika-day.is-disabled .pika-button:hover,
.pika-day.is-outside-current-month .pika-button:hover {
    background: transparent !important;
}