/** * Drunel Search Toggle – Styles v2.8.4 * * The icon lives inside the widget. * The overlay + bar are injected into by JS — completely isolated * from Elementor/Astra/WooCommerce style scopes. * All bar/input styles are set inline by JS; CSS here is fallback only. */ /* === Icon (only thing in the widget HTML) === */ .drunel-stoggle { display: inline-flex; align-items: center; } .drunel-stoggle__icon { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; padding: 8px; line-height: 1; } .drunel-stoggle__icon svg { display: block; width: 20px; height: 20px; } .drunel-stoggle__icon i { font-size: 20px; line-height: 1; } /* === View: Stacked (solid bg) === */ .drunel-stoggle-view-stacked .drunel-stoggle__icon { background-color: #818a91; color: #fff; fill: #fff; padding: 12px; } /* === View: Framed (border) === */ .drunel-stoggle-view-framed .drunel-stoggle__icon { border: 2px solid; padding: 12px; } /* === Shape: Circle === */ .drunel-stoggle-shape-circle .drunel-stoggle__icon { border-radius: 50%; } /* === Shape: Square === */ .drunel-stoggle-shape-square .drunel-stoggle__icon { border-radius: 4px; } /* === Overlay backdrop === */ .drunel-stoggle-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.15); } /* === Bar (fixed top popup) === */ .drunel-stoggle-overlay__bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-sizing: border-box; } /* === Close button (sits next to input) === */ .drunel-stoggle-overlay__close { flex: 0 0 auto; cursor: pointer; font-size: 14px; line-height: 1; color: #999; padding: 4px; margin: 0; user-select: none; -webkit-user-select: none; } .drunel-stoggle-overlay__close:hover { color: #333; }