/* ============================================= */
/*           Search Results Styling              */
/* ============================================= */

.result-card {
    position: absolute; /* Crucial: Positioned relative to nearest positioned ancestor or body */
    display: none;      /* Initially hidden */
    max-height: 70vh;   /* Limit vertical size */
    overflow-y: auto;   /* Add scrollbar if content exceeds max-height */
    background-color: #fff !important; /* Force white background */
    border: 1px solid #dee2e6; /* Standard Bootstrap border color */
    border-radius: 0.4rem;      /* Standard Bootstrap border radius */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Standard Bootstrap shadow */
    z-index: 1060;       /* High z-index (above navbar, below modals usually) */
    padding-bottom: 0.5rem; /* Space at the bottom */
    max-width: 600px;    /* Optional max width for very wide screens */
    /* top, left, width are set dynamically by JavaScript */
}

/* Styling for the list container */
.result-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

/* Styling for individual list items (<li>) */
.result-list-item {
    padding: 0; /* Padding applied to the link instead */
    margin: 0;
}

/* Styling for the anchor tag (<a>) inside each list item */
.result-item {
    display: flex;           /* Use flexbox for alignment */
    align-items: center;     /* Vertically center content */
    padding: 0.6rem 1rem;    /* Padding inside the link */
    color: #212529;          /* Default text color */
    text-decoration: none;   /* Remove underline */
    transition: background-color 0.15s ease-in-out; /* Smooth hover transition */
    border-bottom: 1px solid #f8f9fa; /* Very light separator line */
}
.result-list-item:last-child .result-item {
    border-bottom: none; /* No border on the very last item in a list */
}

.result-item:hover,
.result-item:focus { /* Add focus style for accessibility */
    background-color: #f8f9fa; /* Light gray background on hover/focus */
    color: #000;             /* Darken text slightly on hover */
    outline: none;           /* Remove default focus outline if needed */
}

/* Styling for the logo image */
.result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;    /* Ensure image covers the area */
    border-radius: 50%;   /* Circular logos */
    /* border-radius: .25rem; Use .rounded class instead if you prefer square */
    margin-right: 0.75rem; /* Space between logo and text */
    flex-shrink: 0;       /* Prevent image from shrinking */
}

/* Styling for the text container next to the logo */
.result-item .flex-grow-1 {
    overflow: hidden; /* Needed for text-truncate to work */
}

/* Styling for company/brand name */
.result-item .fw-bold {
    white-space: nowrap;      /* Prevent wrapping */
    overflow: hidden;         /* Hide overflow */
    text-overflow: ellipsis;  /* Add ellipsis (...) for long text */
}

/* Styling for location text */
.result-item .small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Styling for Loading/Error/No Results Messages inside .result-card */
.result-card .loading-message,
.result-card .error-message,
.result-card .no-results-message {
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d; /* Bootstrap's text-muted color */
}

.result-card .error-message {
    color: var(--bs-danger); /* Use Bootstrap's danger color variable */
}

/* Styling for Section Headers (Dispensaries, Brands) */
.result-card .dropdown-header {
    background-color: #f8f9fa;  /* Light background */
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    margin-top: -1px;          /* Collapse borders */
    padding: .5rem 1rem;       /* Adjust padding */
    font-weight: 600;          /* Slightly bolder */
}
/* Add space above a header if it follows a list (e.g., above Brands if Dispensaries exist) */
.result-card .list-unstyled + .dropdown-header {
    margin-top: 0.5rem;
}

/* Divider between sections */
.result-card hr {
    margin: 0.25rem 1rem; /* Add some horizontal margin to the divider */
    border-top-color: rgba(0,0,0,0.05); /* Lighter divider */
}