/** * RMRS Search Modal Styles * Custom search popup appended to - bypasses Elementor popup limitations */ /* ============================================================================= SEARCH MODAL - Main Container ============================================================================= */ .rmrs-search-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; visibility: hidden; pointer-events: none; } .rmrs-search-modal.is-open { visibility: visible; pointer-events: auto; } /* ============================================================================= SEARCH MODAL - Overlay ============================================================================= */ .rmrs-search-modal__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); opacity: 0; } /* ============================================================================= SEARCH MODAL - Content Container ============================================================================= */ .rmrs-search-modal__content { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 90vw; max-width: 700px; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); opacity: 0; overflow: hidden; } /* ============================================================================= SEARCH MODAL - Close Button ============================================================================= */ .rmrs-search-modal__close { position: absolute; top: -45px; right: 0; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 5px 10px; line-height: 1; opacity: 0.8; transition: opacity 0.2s ease; } .rmrs-search-modal__close:hover { opacity: 1; } .rmrs-search-modal__close:focus { outline: 2px solid #fff; outline-offset: 2px; } /* ============================================================================= SEARCH MODAL - Elementor Template Override Elementor hides [data-elementor-type=popup] by default. Force it visible when pulled into our custom modal. ============================================================================= */ .rmrs-search-modal__elementor-content [data-elementor-type="popup"] { display: block; } /* ============================================================================= SEARCH MODAL - Search Input Area ============================================================================= */ .rmrs-search-modal__input-wrap { display: flex; align-items: stretch; padding: 20px; gap: 12px; border-bottom: 1px solid #e5e7eb; } .rmrs-search-modal__input { flex: 1; padding: 14px 18px; font-size: 16px; font-family: inherit; border: 2px solid #213C7A; border-radius: 8px; outline: none; color: #333; } .rmrs-search-modal__input:focus { border-color: #2d4f99; box-shadow: 0 0 0 3px rgba(33, 60, 122, 0.15); } .rmrs-search-modal__input::placeholder { color: #9ca3af; } .rmrs-search-modal__submit { padding: 14px 30px; background-color: #F05033; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; font-family: inherit; letter-spacing: 0.5px; cursor: pointer; text-transform: uppercase; white-space: nowrap; transition: background-color 0.2s ease; } .rmrs-search-modal__submit:hover { background-color: #DF3213; } .rmrs-search-modal__submit:focus { outline: 2px solid #F05033; outline-offset: 2px; } /* ============================================================================= SEARCH MODAL - Results Area ============================================================================= */ .rmrs-search-modal__results { max-height: 55vh; overflow-y: auto; padding: 0; } /* Loading spinner */ .rmrs-search-modal__loading { display: flex; align-items: center; justify-content: center; padding: 30px; color: #6b7280; font-size: 14px; gap: 10px; } .rmrs-search-modal__spinner { width: 20px; height: 20px; border: 2px solid #e5e7eb; border-top-color: #213C7A; border-radius: 50%; animation: rmrs-spin 0.6s linear infinite; } @keyframes rmrs-spin { to { transform: rotate(360deg); } } /* No results */ .rmrs-search-modal__no-results { padding: 30px 20px; text-align: center; color: #6b7280; font-size: 15px; } /* Result count */ .rmrs-search-modal__count { padding: 10px 20px 5px; font-size: 13px; color: #6b7280; border-bottom: 1px solid #f3f4f6; } /* ============================================================================= SEARCH MODAL - Individual Result ============================================================================= */ .rmrs-search-modal__result { display: block; padding: 14px 20px; border-bottom: 1px solid #f3f4f6; text-decoration: none; color: inherit; transition: background-color 0.15s ease; } .rmrs-search-modal__result:last-child { border-bottom: none; } .rmrs-search-modal__result:hover { background-color: #f9fafb; } .rmrs-search-modal__result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .rmrs-search-modal__result-title { font-size: 15px; font-weight: 600; color: #213C7A; } .rmrs-search-modal__result:hover .rmrs-search-modal__result-title { text-decoration: underline; } .rmrs-search-modal__result-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; background-color: #e5e7eb; color: #4b5563; white-space: nowrap; } .rmrs-search-modal__result-type--event { background-color: #dbeafe; color: #1e40af; } .rmrs-search-modal__result-type--material { background-color: #d1fae5; color: #065f46; } .rmrs-search-modal__result-excerpt { font-size: 13px; color: #6b7280; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================= SEARCH MODAL - Loading More (infinite scroll) ============================================================================= */ .rmrs-search-modal__loading-more { display: flex; align-items: center; justify-content: center; padding: 16px; } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 767px) { .rmrs-search-modal__content { width: 95vw; top: 10%; } .rmrs-search-modal__input-wrap { flex-direction: column; padding: 15px; gap: 10px; } .rmrs-search-modal__submit { padding: 12px 20px; } .rmrs-search-modal__close { top: -40px; font-size: 28px; } } /* ============================================================================= ACCESSIBILITY - Reduced Motion ============================================================================= */ @media (prefers-reduced-motion: reduce) { .rmrs-search-modal__close { transition: none; } .rmrs-search-modal__result, .rmrs-search-modal__see-all, .rmrs-search-modal__submit { transition: none; } .rmrs-search-modal__spinner { animation: none; } }