/* Hide the spin buttons in WebKit browsers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spin buttons in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

select {
    appearance: none;
    /* Remove default dropdown styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22feather feather-chevron-down%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E");
    /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    /* Position the arrow */
    padding-right: 30px;
    /* Add padding to avoid text overlapping the arrow */
    background-color: transparent !important;
    color: black;
}

#form-section {
    position: relative;
    max-width: 100%;
    background-color: white;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    #form-section {
        max-width: 342px;
        border-radius: 20px;
    }
}

.form-header-text {
    font-size: 22px;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    line-height: 110%;
    color: black;
}

form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
    width: 100%;
    position: relative;
    margin-bottom: -16px;
}

.form-input-group {
    grid-column: span 2;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:checked:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 108%;
    height: 108%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20C7.34784 20 4.8043 18.9464 2.92893 17.0711C1.05357 15.1957 0 12.6522 0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10Z" fill="%2300B1E1"/><path d="M14.8841 6.21249C14.7948 6.12351 14.6885 6.05345 14.5715 6.00651C14.4545 5.95956 14.3293 5.93668 14.2033 5.93925C14.0772 5.94182 13.953 5.96977 13.8381 6.02145C13.7231 6.07312 13.6197 6.14745 13.5341 6.23999L9.19286 11.7712L6.57661 9.15374C6.3989 8.98814 6.16384 8.89798 5.92096 8.90227C5.67809 8.90655 5.44635 9.00494 5.27459 9.17671C5.10282 9.34847 5.00443 9.58021 5.00015 9.82308C4.99586 10.066 5.08601 10.301 5.25161 10.4787L8.55911 13.7875C8.64822 13.8764 8.75432 13.9465 8.87109 13.9936C8.98787 14.0406 9.11292 14.0636 9.2388 14.0613C9.36467 14.059 9.48878 14.0313 9.60373 13.98C9.71869 13.9286 9.82212 13.8547 9.90786 13.7625L14.8979 7.52499C15.068 7.34811 15.162 7.11158 15.1596 6.86618C15.1573 6.62079 15.0588 6.38609 14.8854 6.21249H14.8841Z" fill="white"/></svg>');
    background-color: #01b0e1;
    background-repeat: no-repeat;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #01b0e1;
}

input[type="checkbox"]:checked {
    border: none !important;
    /* Remove border when checked */
}

.form-input-group input,
.form-input-group select {
    height: 48px;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    border-radius: 50px;
    border: 3px solid black;
    width: 100%;
    padding-left: 24px;
}

.zip-group {
    position: relative;
}

.zip-spinner {
    position: absolute;
    right: 10px;
    top: 24%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #00b1e1;
    display: none;
}

.validation-error {
    font-size: 12px;
    color: #f00;
    font-family: "Open Sans", sans-serif;
    display: none;
}

.opt-in {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 2px;
    grid-column: span 2;
}

.opt-in label {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 0px;
}

.opt-in-check {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#termslink {
    color: black !important;
    text-decoration: underline;
}

.opt-in-text {
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    margin-left: 28px;
}

.submit-button {
    display: inline-flex;
    justify-content: center;
    padding: 16px 32px !important;
    align-items: center;
    gap: 24px;
    border-radius: 40px;
    background: #fdda13;
    cursor: pointer;
    transition: background-color 0.5s;
    font-family: "Open Sans", sans-serif;
    color: black;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    border: none !important;
    width: 100% !important;
}

.submit-button:hover {
    background-color: black;
    color: #fdda13;
}

.form-submit-spinner {
    animation: spin 1s linear infinite;
    position: absolute;
    bottom: 30%;
    left: 85%;
    transform: translate(-50%, -50%);
    z-index: 300;
    width: 20px;
    height: 20px;
    display: none;
    border-radius: 50%;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #00b1e1;
    margin-left: 8px;
}

.form-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    grid-column: span 2;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    form {
        max-width: 425px;
    }
}

/* Custom Location Dropdown Styles */
.custom-location-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid black;
    border-radius: 40px;
    background: white;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-height: 48px;
}

.dropdown-trigger:hover {
    border-color: #3498db;
}

.dropdown-trigger:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.dropdown-placeholder {
    color: #666;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
}

.dropdown-placeholder.selected {
    color: #333;
    font-weight: 500;
}

.dropdown-arrow {
    color: #666;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.dropdown-trigger[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid black;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid black;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover,
.dropdown-option:focus {
    background-color: #f8f9fa;
    outline: none;
}

.dropdown-option.selected {
    background-color: #e3f2fd;
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-name {
    font-weight: 500;
    color: #333;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
}

.location-distance {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    font-family: league_gothicregular;
}

.option-bottom {
    display: flex;
}

.location-address {
    color: #888;
    font-size: 16px;
    line-height: 1.3;
    font-family: 'Open Sans', sans-serif;
}

/* Hide the original select */
.form-input-group select#location {
    display: none !important;
}

/* Form section animations */
.form-input-group,
.opt-in,
.form-submit {
    opacity: 1;
    transform: translateY(0);
}

/* When elements are being shown */
.form-input-group.showing,
.opt-in.showing,
.form-submit.showing {
    animation: slideInUp 0.3s ease forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Add some visual indicators for the multi-step process */
.form-step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    transition: background-color 0.3s ease;
}

.step-dot.active {
    background-color: #3498db;
}

.step-dot.completed {
    background-color: #27ae60;
}


/* Style for when location section becomes visible */
.form-input-group:has(#location) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 16px;
    z-index: 2000;
}

/* Remove border from last visible section */
.form-submit {
    border-bottom: none;
    margin-bottom: 0;
}

/* Form header styling when location is selected */
.form-header-text.location-selected {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border-left: 4px solid #3498db;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    margin-right: 0px;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
}

.form-header-text.location-selected strong {
    color: black;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

.form-header-text.location-selected small {
    color: #666;
    font-weight: 500;
    font-family: league_gothicregular;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown-trigger {
        padding: 10px 12px;
        min-height: 44px;
    }

    .dropdown-option {
        padding: 10px 12px;
    }

    .location-name {
        font-size: 15px;
    }

    .location-distance {
        font-size: 13px;
    }

    .location-address {
        font-size: 13px;
    }
}

.location-selected {
    display: flex;
    margin-top: 16px;
}

.location-selected strong {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    align-items: center;
}