/* CR-3D Such-Popup (Header-Lupe -> Bootstrap-Modal .bs-search-modal-lg) im Site-Design (Teal-Akzent, Montserrat) statt der unstylten Bootstrap-Defaults. Nutzt die bereits sitewide geladenen --cr3d-* Variablen aus mini-cart-redesign.css. */ .bs-search-modal-lg .modal-content { border: none; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } /* WICHTIG: Es existiert bereits eine aeltere Regel in der WordPress-Customizer "Zusaetzliches CSS" (.search-box-wrapper .modal-title, Farbe #00767a, 40px, padding-top:30px) - die wird sehr spaet im ausgegeben und gewinnt daher gegen normal eingebundene Theme-Dateien. Statt dagegen anzukaempfen: hier bewusst dieselbe, sitewide etablierte Marken-Teal-Farbe (#00767a, NICHT die neuere --cr3d-accent #07737a aus dem Checkout-Redesign) verwenden und alle relevanten Werte mit !important ueberschreiben, damit KEIN Zwei-Farben-Bruch entsteht. */ .bs-search-modal-lg .modal-header { position: relative; background: #00767a !important; padding: 18px 52px !important; display: block !important; border: none; height: auto; } .bs-search-modal-lg .modal-title { display: block; color: #fff !important; font-family: 'Good Times', var(--cr3d-font-heading, 'Montserrat'), sans-serif; font-weight: 700; font-size: 20px !important; letter-spacing: .06em; text-align: center !important; padding: 0 !important; margin: 0 !important; background: none !important; } .bs-search-modal-lg .modal-header .close { position: absolute !important; top: 50%; right: 18px; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .15) !important; color: #fff; opacity: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: background .15s ease; } .bs-search-modal-lg .modal-header .close:hover { background: rgba(255, 255, 255, .3) !important; } .bs-search-modal-lg .modal-header .close span { margin-top: -1px; } .bs-search-modal-lg .modal-body { padding: 28px 24px 24px; background: #fff; } /* FiboSearch-Eingabefeld an den Site-Look angleichen */ .bs-search-modal-lg .dgwt-wcas-search-wrapp { width: 100% !important; } .bs-search-modal-lg .dgwt-wcas-search-input { font-family: var(--cr3d-font-body, 'Montserrat', sans-serif) !important; background: #fff !important; border: 1px solid var(--cr3d-border-input, #d7dbdf) !important; border-radius: 6px !important; padding: 12px 48px 12px 16px !important; font-size: 15px !important; transition: border-color .15s ease; } .bs-search-modal-lg .dgwt-wcas-search-input:focus { border-color: var(--cr3d-accent, #07737a) !important; box-shadow: 0 0 0 3px rgba(7, 115, 122, .12) !important; outline: none; } /* FiboSearchs "pirx"-Stil platziert die Lupe standardmaessig LINKS (erst nach Eingabe rechts) - hier stattdessen immer rechts und vertikal zentriert. */ .bs-search-modal-lg .dgwt-wcas-search-submit, .bs-search-modal-lg.dgwt-wcas-search-filled .dgwt-wcas-search-submit, .bs-search-modal-lg .dgwt-wcas-style-pirx .dgwt-wcas-search-submit, .bs-search-modal-lg .dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-search-submit { left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; color: var(--cr3d-accent, #07737a) !important; } .bs-search-modal-lg .dgwt-wcas-ico-magnifier path { fill: var(--cr3d-accent, #07737a) !important; } /* Vorschlagsliste: FiboSearch haengt das Dropdown per JS direkt an an, nicht verschachtelt im Modal - daher hier ohne ".bs-search-modal-lg"-Praefix (das faerbt nebenbei auch die Sidebar-/Kopfzeilen-Sucheinstanzen einheitlich mit ein, was gewollt ist). */ .dgwt-wcas-suggestions-wrapp { border-radius: 6px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important; border: 1px solid var(--cr3d-border-input, #d7dbdf) !important; margin-top: 8px !important; } .dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: rgba(7, 115, 122, .07) !important; } .dgwt-wcas-suggestion-title mark { color: var(--cr3d-accent, #07737a) !important; background: transparent !important; font-weight: 700; } .dgwt-wcas-price ins, .dgwt-wcas-price { color: var(--cr3d-accent, #07737a) !important; } .dgwt-wcas-st-all-results { color: var(--cr3d-accent, #07737a) !important; font-family: var(--cr3d-font-heading, 'Montserrat', sans-serif) !important; font-weight: 700 !important; }