/**
 * Shopper Agent Experience Styles
 * 
 * Main stylesheet for the Shopper Agent plugin
 * This file contains styles for all the related UI components.
 * 
 * @author Salesforce Commerce Cloud
 * @version 1.0.0
 */
/**
 * Shopper Agent Header Button Styles
 * Matches minicart styling for proper alignment in header
 * 
 * @author Salesforce Commerce Cloud
 * @version 1.0.0
 */
.shopper-agent-header {
  vertical-align: top;
  line-height: 2.25em; /* 36/16 */
  height: auto;
}

.shopper-agent-button {
  vertical-align: top;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 3em;
  display: flex;
  justify-content: center;
}

.shopper-agent-button svg,
.shopper-agent-button .shopper-agent-icon {
  display: block;
  width: 28px;
  height: 28px;
}

.shopper-agent-icon path:hover {
  fill: #1e1e1e;
}

/* Responsive alignment - matches minicart behavior */
.navbar-header .shopper-agent-header {
  display: inline-block;
  margin: 1.4em 0 0 0.5em;
}

/* Ensure proper alignment on mobile */
@media (width <= 767.98px) {
  .shopper-agent-button {
    height: 3em;
    width: 3em;
  }
  .shopper-agent-header {
    margin: 1.4em 0 0 0.5em;
  }
}