.search-main-box {
    background: transparent;
    padding: 0;
}

.search-controls-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.reference-panel {
    min-width: 0;
    padding: 12px 18px 16px;
    border: 2px solid #b7d69b;
    border-radius: 14px;
    background: #668d47;
    box-shadow: 0 10px 24px rgba(23, 44, 14, .22);
}

.manual-reference-panel {
    background: #557a39;
}

.reference-panel-title {
    margin: 0 0 12px;
    padding: 0 0 7px;
    border-bottom: 1px solid rgba(232, 246, 212, .45);
    color: #f2ffe5;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.manual-reference-fields {
    display: flex;
    gap: 18px;
    align-items: center;
}

.manual-surah-field,
.manual-ayah-field {
    flex: 1 1 0;
    min-width: 0;
}

.manual-surah-field .select2-container {
    width: 100% !important;
}

.search-reference-panel .search-box {
    margin-bottom: 0;
}

.search-reference-panel.is-active,
.manual-reference-panel.is-active {
    box-shadow: 0 0 0 3px #e3f3bf, 0 10px 24px rgba(23, 44, 14, .24);
}

@media (max-width: 991px) {
    .search-controls-layout { grid-template-columns: 1fr; gap: 14px; }
    .reference-panel { padding: 12px 14px 14px; }
    .reference-panel-title { font-size: 19px; margin-bottom: 10px; }
    .manual-reference-fields { gap: 10px; }
}

.search-dropdown {
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    z-index: 30;
}

.search-dropdown ul {
    position: static;
    width: 100%;
    max-height: min(68vh, 660px);
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    direction: rtl;
    background: #f1f6ea;
    border: 1px solid #a7c58d;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(25, 48, 17, .28);
    scrollbar-color: #8baa6d #e9f2df;
}

.search-dropdown ul li.search-result-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    margin-bottom: 7px;
    color: #345320;
    background: #e0edcf;
    border: 1px solid #bad39f;
    border-radius: 8px;
    font-size: 18px;
    cursor: default;
}

.search-result-summary strong {
    flex-shrink: 0;
    padding: 2px 10px;
    color: #fff;
    background: #4c6b30;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

.search-dropdown ul li.search-result-card {
    padding: 0;
    margin-bottom: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e6ca;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(37, 65, 25, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.search-dropdown ul li.search-result-card:last-child {
    margin-bottom: 0;
}

.search-dropdown ul li.search-result-card:hover,
.search-dropdown ul li.search-result-card:focus-within {
    border-color: #7fa65f;
    box-shadow: 0 3px 12px rgba(37, 65, 25, .14);
}

.search-dropdown .search-result-link {
    display: block;
    padding: 8px 15px 9px;
    color: #2e481f;
    text-align: right;
    text-decoration: none;
}

.search-dropdown .search-result-link:hover,
.search-dropdown .search-result-link:focus {
    color: #2e481f;
    background: #f8fbf4;
    text-decoration: none;
}

.search-dropdown .search-result-link:focus-visible {
    outline: 3px solid #73974d;
    outline-offset: -3px;
}

.search-dropdown .aya-ref {
    display: inline-block;
    float: none;
    margin-inline-end: 8px;
    padding: 2px 10px;
    color: #47682d;
    background: #e9f3df;
    border: 1px solid #d0e3bd;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.search-result-verse {
    display: inline;
    font-size: 21px;
    line-height: 2;
    overflow-wrap: normal;
}

.search-dropdown .highlight {
    padding: 0 3px;
    color: #324f1e;
    background: #f6e5a5;
    border-radius: 4px;
    font-weight: 700;
}

.root-search-message {
    color: #38551b;
    background: #eff9e7;
    direction: rtl;
    font-size: 16px;
    border-radius: 8px;
}

.root-search-credit {
    color: #d1e4be;
    font-size: .75rem;
    margin-top: -.6rem;
}

.root-search-credit a {
    color: #e4f5d5;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .search-dropdown ul { max-height: 62vh; padding: 5px; }
    .search-dropdown ul li.search-result-summary { font-size: 16px; }
    .search-dropdown .search-result-link { padding: 7px 11px 8px; }
    .search-result-verse { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .search-dropdown ul li.search-result-card { transition: none; }
}