@charset "utf-8";
/* CSS Document */

        .invisible-autofill-input {
            position: absolute;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
            width: 1px;
            height: 1px;
            /* Keyframes to detect autofill */
            animation-name: onAutoFillStart;
            animation-duration: 0.1s;
        }
        
        /* Keyframes for the autofill detection animation */
        @keyframes onAutoFillStart {
            from {
                /*
                  This is a dummy keyframe to trigger the animation event.
                  The browser applies this animation automatically on autofill.
                */
            }
            to {
                /*
                  This is a dummy keyframe to trigger the animation event.
                */
            }
        }

        /* Override the browser's default autofill background color */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0px 1000px #d8c29d inset !important;
            -webkit-text-fill-color: #0b2819 !important;
            transition: background-color 5000s ease-in-out 0s;
        }
.form-wrapper {
  max-width: 600px; /* match your form width */
  width: 100%;
  box-sizing: border-box;
}

.form-card {
  width: 100%;
  max-width: 600px;
  background-color: #d7b47d;
  border: 2px solid #0b2819;
  box-sizing: border-box;
}
        /* Style for all form controls and the custom dropdown toggle */
        .form-control,
        #dropdown-selected {
            background-color: #faefe0;
            border-color: #0b2819;
            color: #0a1a30; /* New text color for input fields and dropdown */
        }

        /* Style the custom dropdown when autofilled, matching the inputs */
        #dropdown-selected.autofilled {
            background-color: #d8c29d;
        }
        
        /* Placeholder color */
        ::placeholder {
            color: #0a1a30 !important; /* New placeholder color */
            opacity: 1; /* Make sure placeholder is not transparent */
        }

        .form-control:focus,
        #dropdown-selected:focus {
            border-color: #0b2819;
            box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25);
        }

        .custom-dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #0a1a30; /* New text color for dropdown toggle */
            background-color: transparent;
        }

        .custom-dropdown-toggle:hover {
            color: #fff;
            background-color: #0b2819;
        }

        .custom-dropdown-toggle .fi,
        .custom-dropdown-toggle svg {
            color: #0a1a30; /* New color for icons */
        }

        .custom-dropdown-toggle:hover .fi,
        .custom-dropdown-toggle:hover svg {
            filter: brightness(0) invert(1);
        }

        .custom-dropdown-menu {
            background-color: #faefe0;
            max-height: 250px;
            overflow-y: auto;
        }
        
        /* Color for items within the dropdown */
        .dropdown-item {
            color: #0a1a30; /* New text color for dropdown items */

        }

        .dropdown-item:hover {
            background-color: #0b2819;
            color: #faefe0;
        }

        .sticky-search {
            position: sticky;
            top: 0;
            background-color: #faefe0;
            z-index: 1050;
        }

        /* Custom button styling */
        .btn-custom {
            background-color: #0b2819;
            color: #d7b47d;
            border-color: #0b2819;
        }

        .btn-custom:hover {
            background-color: #faefe0;
            color: #0b2819;
            border-color: #0b2819;
        }

        .btn-custom:focus,
        .btn-custom:active {
            background-color: #0b2819;
            color: #d7b47d;
            border-color: #0b2819;
            box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25);
        }
        
        /* New color for labels, headings, and paragraphs */
        .form-label, .form-paragraph, .form-check-label {
            color: #0b2819 !important;
			text-align: left;
        }

        /* Custom validation styles for the dropdown */
        .form-control.is-invalid,
        #dropdown-selected.is-invalid {
            border-color: #dc3545;
        }

        .form-control.is-invalid:focus,
        #dropdown-selected.is-invalid:focus {
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }

        /* NEW: Custom validation style for the required drop-zone */
        .drop-zone.is-invalid-file {
            border-color: #dc3545; /* Red border to match other validation errors */
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }

		/* Modal styling (MODIFIED: Centering the card and setting font) */
        .modal-content {
            /* 1. CARD CENTERING/SIZING FIX */
            max-width: 500px;
            margin: auto;
            font-family: 'Inter', sans-serif;

            background-color: #d7b47d;
            border: 2px solid #0b2819;
        }

        .modal-header {
            border-bottom: 2px solid #0b2819;
        }
        
        .modal-footer {
            border-top: 2px solid #0b2819;
        }
        
        .btn-close {
            filter: invert(1);
        }

        /* 2. TEXT ALIGNMENT FIX: Ensure all form fields are left-aligned */
        .modal-content .modal-body {
            text-align: left;
        }

        /* --- Custom Constraint for 80% Width and Centering (Re-added) --- */

        /* Target all columns that span the full width of the form (col-12) 
           and are NOT the two-column name fields (col-md-6) or the form title (first col-12 text-center) */
        .modal-content .row > .col-12:not(.col-md-6):not(.text-center),
        /* Also include the submit button column, which is explicitly targeted by class */
        .modal-content .col-12.mt-4.text-center {
            /* Force the column to be 80% wide and center it, overriding Bootstrap grid defaults */
            max-width: 80% !important;
            flex: 0 0 80% !important;
            width: 80% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* --- End Custom Constraint --- */

#responseMessage{
  scroll-margin-top: 90px; /* adjust to navbar height */
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1rem;
}
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23003366' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;

  padding-right: 35px; /* space for arrow */
}
@media (max-width: 575px){
  .form-card{
    width: auto;
    max-width: none;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}