/*! 
 * Local Minimal jQuery UI Styles for Admin Autocomplete
 * ----------------------------------------------------------------------------
 * This stylesheet provides custom styling for jQuery UI Autocomplete widgets
 * within the plugin's settings pages. 
 *
 * Architecture Note:
 * All selectors are strictly scoped to the `.smart-convert-currency-unit-conversion-settings-wrapper` parent class.
 * This isolation is critical to prevent style leakage that could inadvertently 
 * break the layout of other WordPress admin pages or third-party plugins that 
 * also utilize jQuery UI.
 *
 * License: MIT (inherited from jQuery UI)
 */

/* * Autocomplete Container Positioning & Layering
 * ----------------------------------------------------------------------------
 * Defines the main container for the suggestions list. 
 *
 * - position: absolute: Required for the dropdown overlay behavior.
 * - z-index: 100000: set strictly high to ensure the dropdown renders on top 
 * of all standard WordPress admin UI elements, including the Admin Bar and 
 * side menus.
 * - max-height/overflow: Implements a scrollable area for long lists to 
 * prevent the dropdown from extending beyond the viewport height.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-autocomplete {
  position: absolute;
  cursor: default;
  z-index: 100000; /* High index to overlay WP Admin elements */
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* * Menu Container Aesthetics
 * ----------------------------------------------------------------------------
 * Visual styling for the <ul> element representing the menu.
 * * This block resets standard list styles and applies a "card-like" appearance
 * (shadows, borders, white background) to distinguish the autocomplete 
 * results from the underlying page content.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  outline: none;
  background: #fff;
  border: 1px solid #ccd0d4;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  border-radius: 4px;
  width: 100%; /* Adapts to the width of the input field context */
  box-sizing: border-box;
}

/* * Menu Item Container
 * ----------------------------------------------------------------------------
 * Resets margins and padding for the individual list items (<li>) to ensure
 * consistent alignment across different browser user agents.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* * Content Wrapper for Menu Items
 * ----------------------------------------------------------------------------
 * Styles the interactive area within each menu item (usually a <div> or <a>).
 *
 * - padding/line-height: Increases hit area for better usability on both
 * desktop and touch devices.
 * - transition: Adds a subtle animation for state changes (hover), improving 
 * the perceived UI responsiveness.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 8px 12px;
  line-height: 1.4;
  display: block;
  cursor: pointer;
  font-size: 14px;
  color: #1A2F45;
  transition: all 0.1s ease;
}

/* * Interaction States (Hover & Active)
 * ----------------------------------------------------------------------------
 * Defines the visual feedback when a user hovers over an item or navigates 
 * via keyboard arrows (ui-state-active).
 *
 * NOTE on !important usage:
 * The `!important` flag is used here intentionally to override inline styles 
 * often injected by jQuery UI JavaScript or conflicting high-specificity 
 * styles from WordPress core themes.
 *
 * - background: #82C7C4: Applies the plugin's primary accent color.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-state-active,
.smart-convert-currency-unit-conversion-settings-wrapper .ui-menu .ui-menu-item-wrapper.ui-state-active,
.smart-convert-currency-unit-conversion-settings-wrapper .ui-menu .ui-menu-item-wrapper:hover {
  background: #82C7C4 !important; /* Plugin brand accent color */
  color: #fff !important;
  border: none !important;
  text-decoration: none;
}

/* * Accessibility (A11y) Helper
 * ----------------------------------------------------------------------------
 * Standard accessible hiding technique.
 * * This class hides elements visually (making them invisible to the eye) while 
 * keeping them accessible to screen readers (AT). This is often used for 
 * live-region updates or descriptive text associated with the autocomplete.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .ui-helper-hidden-accessible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* * Plugin-Specific Layout Overrides
 * ----------------------------------------------------------------------------
 * Targeted adjustments for specific setting sections within the wrapper.
 * * These IDs (#smart-conver-pro-defaults, #smart-conver-pro-appearance) 
 * correspond to distinct configuration blocks. We add a top border and 
 * spacing to visually separate these sections, creating a cleaner information 
 * hierarchy.
 */
.smart-convert-currency-unit-conversion-settings-wrapper #smart-conver-pro-defaults, 
.smart-convert-currency-unit-conversion-settings-wrapper #smart-conver-pro-appearance {
    border-top: 1px solid #d8d8d9;
    padding-top: 1.5rem;
}