/* ========================================================== UIP Search Panel Відкривається по кліку через script.js ========================================================== */ /* Панель — переміщується до через JS, position:fixed відносно вікна */ .uip-search-panel { display: none; position: fixed; left: 0; right: 0; width: 100%; background: #fff; border-top: 1px solid var(--color-border-light, #E8EFF5); border-bottom: 1px solid var(--color-border-light, #E8EFF5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); z-index: 9999; animation: uip-search-in 0.2s ease; } /* Відкрита панель */ .uip-search-panel.is-open { display: block; } @keyframes uip-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Внутрішній контейнер — обмежуємо ширину */ .uip-search-panel__inner { max-width: var(--container-width, 1280px); margin: 0 auto; padding: var(--space-lg, 1.5rem) var(--space-lg, 1.5rem); } /* Форма */ .uip-search-form { display: flex; align-items: center; gap: var(--space-md, 1rem); margin: 0; } /* Поле вводу */ .uip-search-form input[type="search"] { flex: 1; height: 54px; background: var(--color-bg, #F7F9FC); border: 1px solid var(--color-border-light, #E8EFF5); padding: 0 24px; font-size: var(--font-size-lg, 1.125rem); font-family: inherit; color: var(--color-text, #1A2332); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; border-radius: 0; box-shadow: none; -webkit-appearance: none; margin: 0; border-radius: 6px; } .uip-search-form input[type="search"]:focus { background: #fff; border-color: var(--color-primary, #033899); box-shadow: 0 0 0 4px rgba(3, 56, 153, 0.06); } /* Кнопка "Знайти" */ .uip-search-submit { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 28px; background: var(--color-primary, #033899); color: #fff; font-size: var(--font-size-base, 1rem); font-weight: 500; font-family: inherit; border: none; cursor: pointer; white-space: nowrap; transition: background 0.2s ease; border-radius: 0; flex-shrink: 0; margin: 0; } .uip-search-submit:hover { background: var(--color-primary-dark, #022870); } /* Іконка-тригер — підсвічування коли відкрито */ .uip-search-toggle.is-active { color: var(--color-primary, #033899); } /* position:relative більше не потрібен — панель використовує position:fixed */ /* Адаптив */ @media (max-width: 767px) { .uip-search-submit span { display: none; } .uip-search-submit { padding: 0 16px; } .uip-search-panel__inner { padding: var(--space-md, 1rem); } }