/* Muslim Baby Names — search bar, A-to-Z index strip, gender-colored badges. */

.services-add-btn {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo); color: #fff; font-size: .85rem; text-decoration: none;
    transition: background .12s ease;
}
.services-add-btn:hover { background: color-mix(in srgb, var(--indigo) 85%, black); }

.bn-search-form {
    display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.bn-search-form input[type="text"] {
    flex: 1; min-width: 160px;
    border: 1px solid var(--border); border-radius: 5px; padding: .55rem .75rem;
    background: var(--paper); color: var(--ink); font-family: inherit; font-size: .9rem;
}
.bn-search-form select {
    border: 1px solid var(--border); border-radius: 5px; padding: .55rem .65rem;
    background: var(--paper); color: var(--ink); font-family: inherit; font-size: .88rem;
}

.bn-index {
    display: flex; flex-wrap: wrap; gap: .3rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    padding: .6rem; margin-bottom: 1rem;
    position: sticky; top: .5rem; z-index: 5;
}
.bn-index-letter {
    width: 26px; height: 26px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 700; text-decoration: none;
    color: var(--indigo); background: var(--indigo-soft, var(--paper));
}
.bn-index-letter:hover { background: var(--indigo); color: #fff; }
.bn-index-letter-empty { color: var(--ink-soft); opacity: .35; background: transparent; }

.bn-section { margin-bottom: 1rem; scroll-margin-top: 3.2rem; }
.bn-section-heading {
    font-size: .95rem; font-weight: 800; color: var(--indigo);
    margin: 0 0 .4rem .2rem;
}
.bn-list {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    overflow: hidden;
}
.bn-row { padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.bn-row:last-child { border-bottom: none; }
.bn-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bn-row-text { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.bn-row-name { font-weight: 800; font-size: .95rem; color: var(--ink); }
.bn-row-meaning { font-size: .86rem; color: var(--ink-soft); }

.bn-row-gender {
    flex-shrink: 0; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    padding: .1rem .5rem; border-radius: 999px;
}
.bn-row-gender-boy { color: #1d4ed8; background: rgba(29,78,216,.12); }
.bn-row-gender-girl { color: #be185d; background: rgba(190,24,93,.12); }
.bn-row-gender-unisex { color: #6d28d9; background: rgba(109,40,217,.12); }

@media (max-width: 480px) {
    .bn-search-form { flex-direction: column; align-items: stretch; }
    .bn-index-letter { width: 22px; height: 22px; font-size: .7rem; }
}