/* Fieldset Styles */
        fieldset {
            border: 1px solid #ADD8E6;
            border-radius: 7px; /* Slightly rounded corners for a modern look */
            padding: 20px; /* Add some internal spacing */
            margin-bottom: 20px; /* Space between fieldsets */
        }

        legend {
            color: #3498db;
            font-weight: bold;
            padding: 0 10px; /* Add padding around the legend text to "break" the border cleanly */
            background-color: #F5F5F5; /* Ensure the legend background matches the page background for the "cut-out" effect */
        }

        /* Example of an error state for fieldsets */
        fieldset.error {
            border-color: #e74c3c; /* Red border for errors */
        }

        fieldset.error legend {
            color: #e74c3c; /* Red legend text for errors */
        }
.input-wrapper {
        display: flex;
        align-items: center; /* Vertically aligns the input and the icon */
        min-width: 250px; /* Prevents the field from becoming too small */
    }
.input-wrapper .floating-label {
    flex-grow: 1;
    /* THIS IS THE ANCHOR: It contains the absolutely positioned label */
    position: relative;
}


.fields-row{
    display: flex;
        flex-wrap: wrap; /* Allows wrapping on small screens */
        gap: 5px; /* Space between the input wrappers */
        margin-top: 15px;
    }

 /* 1. The INITIAL STATE of the label (inside the input) */
.floating-label label {
    position: absolute;

    /* Vertically centered */
    top: 50%; transform: translateY(-50%);

    /* Positioned to look like a placeholder */
    left: 13px;
    color: #999;
    pointer-events: none; /* Allows you to click "through" the label onto the input */
    transition: all .3s ease-out;  /* The transition is defined ONCE on the base element */
}

    .floating-label input:focus ~ label,
    .floating-label input:not(:placeholder-shown) + label,
    .floating-label textarea:focus ~ label,
    .floating-label textarea:not(:placeholder-shown) + label {

    top: -20px;
    left: 0;
    transform: translateY(0)  scale(.85);
    color: #555;
    background-color: #F5F5F5;
    font-weight: bold;
    }

.errorPrompt{
       border: 2px solid red !important;
}
.floating-label select{
    border-radius: 7px ;
    height: 30px;
}

/* 2. Position the injected error message absolutely */
.floating-label p.ep1 {
    position: absolute;
    top: 100%; /* Position its top edge at the bottom of the container */
    left: 0;
    width: 100%;
    margin-top: 4px; /* Add a small gap below the input field */

    /* Text styling for the error */
    color: #D8000C;
    font-size: 0.75em;
    text-align: left;

    /* These ensure it doesn't affect the original layout */
    pointer-events: none;
}

/* 3. Add space below the field ONLY when an error exists */
/* This prevents the error message from overlapping the next row */
.floating-label:has(p.ep1) {
    margin-bottom: 25px; /* Adjust this value as needed */
}


.input-wrapper .floating-label {
        flex-grow: 1;
    }
.input-wrapper button {
        flex-shrink: 0;
        margin-left: 2px !important; /* This creates the "butted up" but not touching effect */
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

        /* General Input and Textarea Styling - adapted for Floating Labels */
        textarea,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"]{
            width: 300px;
            height: 30px;
            padding: 8px 12px;
            margin-bottom: 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* Ensures padding and border are included in the width */
            font-size: 1em; /* Ensure consistent font size */
            outline: none; /* Remove default outline on focus */
            background-color: #fff; /* Solid background for label movement */
            transition: border-color 0.2s ease-in-out; /* Smooth transition for border */
        }

        textarea {
            height: 100px;
            resize: vertical; /* Allow vertical resizing, but keep width fixed */
            padding-top: 0; /* Added padding-top for textarea to avoid label overlap */
        }

        /* Placeholder Hiding on Focus/Content */
        input::placeholder,
        textarea::placeholder {
            transition: opacity 0.2s ease-in-out; /* Smooth fade-out */
            opacity: 1; /* Ensure it's visible by default */
            color: #999; /* Match initial label color */
        }

        #address1{
            width: 600px;
        }
        input:focus::placeholder,
        textarea:focus::placeholder,
        input:not(:placeholder-shown)::placeholder,
        textarea:not(:placeholder-shown)::placeholder {
            opacity: 0; /* Hide placeholder when input is focused or has content */
        }

        /* Google Maps Autocomplete Specific Styling */
        gmp-place-autocomplete {
            display: inline-block; /* Make it behave like a block-level input */
            width: 600px; /* Match width of other inputs */
            margin-bottom: 10px;
            box-shadow: none !important; /* REMOVE DEFAULT SHADOW */
        }

        /* Targeting the internal input element of the gmp-place-autocomplete component */
        gmp-place-autocomplete input {
            width: 100%; /* Make internal input take full width of its parent component */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-family: inherit;
            font-size: inherit;
            box-shadow: none !important; /* REMOVE DEFAULT SHADOW */
            transition: opacity 0.2s ease-in-out; /* For placeholder fade */
        }
        gmp-place-autocomplete input::placeholder {
            transition: opacity 0.2s ease-in-out;
            opacity: 1;
            color: #999;
        }

        gmp-place-autocomplete input:focus::placeholder,
        gmp-place-autocomplete input:not(:placeholder-shown)::placeholder {
            opacity: 0;
        }




        /* Address Autocomplete Group Layout */
        .address-autocomplete-group {
            display: flex;
            margin-bottom: 10px;
        }

        #autocomplete-container {

            line-height: 0; /* Helps align the autocomplete element better */
            margin-top: 5px; /* Adjust to better align with label */
            /* The gmp-place-autocomplete element itself has margin-bottom: 10px */
        }


        /* Flexbox for fields in the same row */
        .name-fields-row {
            display: flex; /* Makes the container a flex container */
            gap: 20px; /* Adds space between the two flex items (floating label groups) */
            margin-bottom: 10px; /* Space between rows of fields */
            flex-wrap: wrap; /* Allows fields to wrap to a new line on smaller screens */
            align-items: flex-start; /* Align groups to the top within the row */
        }

        .name-fields-row > .floating-label-group {
            width: 300px; /* Maintain the width for each label-input pair */
            flex-shrink: 1; /* Allow them to shrink if necessary */
            margin-bottom: 0; /* Reset margin-bottom as gap on parent handles it */
        }

        /* --- Floating Label Specific Styles --- */
        .floating-label-group {
            position: relative; /* Essential for positioning the label */
            padding-top: 10px; /* Create space for the label to move up from initial position */
            margin-bottom: 10px; /* Default spacing between standalone floating label groups */
            display: block; /* Ensures the group takes full available width */
        }

        /* Initial state of the floating label (inside the input) */
        .floating-label-group label {
            position: absolute;
            top: 60%; /* Start in the middle of the input's visual area */
            left: 12px; /* Align with input's padding */
            transform: translateY(-50%); /* Adjust for perfect vertical centering */
            color: #999; /* Placeholder-like initial color */
            pointer-events: none; /* Allows clicks to pass through to the input */
            transition: all 0.2s ease-out; /* Smooth animation for movement, size, color */
            font-weight: normal; /* Start as normal weight */
            width: auto; /* Allow label to shrink naturally */
            white-space: nowrap;
            overflow: hidden; /* Hide overflowing label text */
            text-overflow: ellipsis; /* Add ellipsis for overflowing text */
            max-width: calc(100% - 24px); /* Ensure label doesn't exceed input width - padding */
            /* Override default label styles that might conflict */
            display: block;
            margin-bottom: 0;
        }



        /* State of the floating label when input/textarea is focused OR has content */
        .floating-label-group input:focus + label,
        .floating-label-group input:not(:placeholder-shown) + label,
        .floating-label-group textarea:focus + label,
        .floating-label-group textarea:not(:placeholder-shown) + label {
            top: 7px; /* Move to the very top of the .floating-label-group container */
            transform: translateY(-50%) scale(0.85); /* Shrink slightly and perfect vertical alignment */
            font-size: 0.8em;
            color: #555; /* Darker color when active */
            background-color: #F5F5F5; /* Match body background to "lift" it off the input */
            padding: 0 5px; /* Small padding for the background 'cut-out' effect */
            left: -4px; /* Adjust left position after scaling/padding */
            font-weight: bold; /* Embolden the label when it floats up */
        }

/* ================ */
/* Membership Types */
/* ================ */

.membership-types-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1rem 0;
}

.membership-type {
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    box-shadow: var(--bs);
    border-radius: 5px;
    padding: 1rem;
}

.membership-type__title {
    font-weight: bold;
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
}

.pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.membership-type ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.membership-type li {
    display: grid;
    grid-template-areas: "icon title" "icon comment";
    gap: .5rem;
    justify-content: flex-start;
}
.membership-type .pricing {
    display: flex;
    gap: .25rem;

}
.membership-type .pricing p {
    padding: .15rem 1rem;
    color: whitesmoke;
    background: #0A8ED0;
    border-radius: 20px;
    width: fit-content;
    font-size: 0.85rem;
}
.membership-type .fa-circle-check {
    grid-area: icon;
    color: #00AF19;
    align-self: center;
}
.membership-type .title {
    grid-area: title;
}
.membership-type .comment {
    grid-area: comment;
    padding: 0;
    margin-top: -0.5rem;
    font-size: x-small;
    min-height: 0;
}

.membership-type label {
    text-align: center;
}

/* Hide the "Selected" text by default */
.membership-type label .selected-text {
    display: none;
}
.membership-type input:checked + label {
    background: var(--primary-btn-bg);
}
/* When the radio is checked, hide the "Select" text */
.membership-type input:checked + label .default-text {
    display: none;
}

/* And show the "Selected" text */
.membership-type input:checked + label .selected-text {
    display: inline;
}

.membership-type > .btn {
    /* 1. Make the label a block element */
    display: block;

    /* 2. Set the width to be only as wide as its content + padding */
    width: fit-content;

    /* 3. This is the magic: auto margins on the left and right will center it */
    margin-left: auto;
    margin-right: auto;

    /* Optional: Add some top margin to space it from the feature list */
    margin-top: 20px;
}

@media screen and (max-width: 800px) {
    .membership-types-container {
        flex-direction: column;
    }
}



        /* Responsive adjustments */
        @media (max-width: 650px) {
            .name-fields-row {
                flex-direction: column; /* Stack fields vertically on smaller screens */
                gap: 0; /* Remove gap when stacked */
            }
            .name-fields-row > .floating-label-group {
                width: 100%; /* Make full width when stacked */
                margin-bottom: 20px; /* Add back spacing between stacked fields */
            }
            #autocomplete-container {
                width: 100%; /* Make autocomplete container full width on small screens */
            }
        }
  .custom-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 14px;
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.custom-tooltip.is-showing {
    opacity: 1;
    visibility: visible;
    display: block;
}
.custom-tooltip p {
  margin: 0;
  padding: 0; /* Also good to add for consistency */
}

button[data-action="showTooltip"] {
    margin: 0 ;
    padding: 0;
}
legend {
    display: flex;
    align-items: center;
    gap: 10px;
   font-size: 1.5em;

}