/* ========================================
   Advanced Woo Search (AWS) - Tendeal Theme Overrides
   Override AWS default styles to match Tendeal's UI
   ======================================== */

/* Wrapper styling to match Tendeal's top-nav-search */
.top-nav-search .aws-container {
  width: 100%;
}

/* Remove AWS default form height and apply Tendeal's input styling */
.top-nav-search .aws-container .aws-search-form {
  height: auto;
  min-height: 3rem; /* 48px - matches Tendeal input height */
  border-radius: 0.75rem; /* rounded-xl */
  background-color: var(--color-ghost-white);
  border: 1px solid var(--color-border-25);
  transition: all 0.2s ease;
}

/* When the search has focus */
.top-nav-search .aws-container .aws-search-form.aws-form-active {
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

/* Override wrapper styles */
.top-nav-search .aws-container .aws-search-form .aws-wrapper {
  border-radius: 0.75rem; /* rounded-xl */
  overflow: visible;
}

/* Override input field styling to match Tendeal's .input class */
.top-nav-search .aws-container .aws-search-field {
  width: 100%;
  height: 100%;
  min-height: 3rem; /* 48px */
  padding: 0.875rem; /* p-3.5 */
  padding-inline-start: 2.5rem; /* ps-10 for icon on start */
  padding-inline-end: 2.5rem; /* pe-10 for loader/clear on end */
  background-color: transparent;
  border: none !important;
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 0.75rem; /* small-regular */
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--color-gray-lighter);
  transition: all 0.2s ease;
}

.top-nav-search .aws-container .aws-search-field::placeholder {
  color: var(--color-gray-lighter);
}

/* Focus state for input */
.top-nav-search .aws-container .aws-search-field:focus {
  outline: none;
  color: var(--color-gray-darker);
  background-color: transparent;
}

/* Placeholder styling matching the theme placeholder */
.top-nav-search .aws-container .aws-search-field:focus::placeholder {
  color: var(--color-gray-lighter);
}

/* Has value state */
.top-nav-search .aws-container .aws-search-field:not(:placeholder-shown) {
  color: var(--color-gray-darker);
}

/* Override search button styling */
.top-nav-search .aws-container .aws-search-form .aws-form-btn {
  background: transparent;
  border: none !important;
  width: 2.5rem; /* 40px */
  min-width: 2.5rem;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0.75rem 0.75rem 0; /* Match right side radius */
  transition: all 0.2s ease;
}

.top-nav-search .aws-container .aws-search-form .aws-form-btn:hover,
.top-nav-search .aws-container .aws-search-form .aws-form-btn:focus {
  background: transparent;
}

/* Style search button icon */
.top-nav-search .aws-container .aws-search-form .aws-search-btn_icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  color: var(--color-gray-lighter);
  transition: color 0.2s ease;
}

.top-nav-search .aws-container .aws-search-form.aws-form-active .aws-search-btn_icon {
  color: var(--color-gray-darker);
}

/* Hide the button if not needed - you can show it by removing this */
.top-nav-search .aws-container .aws-search-form .aws-search-btn {
  display: none;
}

/* Add search icon on the start (left in LTR, right in RTL) */
.top-nav-search .aws-container .aws-search-form .aws-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0.875rem; /* start-3.5 */
  transform: translateY(-50%);
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z' stroke='%23A0AEC0' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* Loader - position on the end side (opposite of search icon) */
/* In LTR: end = right, In RTL: end = left */
.top-nav-search .aws-container .aws-search-form .aws-loader {
  left: auto !important;
  right: 0.875rem !important; /* Override AWS default right: 10px */
}

/* Clear button - position on the end side (opposite of search icon) */
.top-nav-search .aws-container .aws-search-form .aws-search-clear {
  left: auto !important;
  right: 0 !important;
  color: var(--color-gray-lighter);
}

.top-nav-search .aws-container .aws-search-form .aws-search-clear:hover {
  color: var(--color-gray-darker);
}

/* RTL: Flip loader and clear button to the left side */
[dir="rtl"] .top-nav-search .aws-container .aws-search-form .aws-loader {
  right: auto !important;
  left: 0.875rem !important;
}

[dir="rtl"] .top-nav-search .aws-container .aws-search-form .aws-search-clear {
  right: auto !important;
  left: 0 !important;
}

/* ========================================
   Search Results Dropdown
   ======================================== */

.aws-search-result {
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid var(--color-border-25);
  box-shadow: 0 8px 12px rgba(91, 116, 130, 0.1); /* shadow-3 */
  margin-top: 0.5rem;
  overflow: hidden;
  /* Inherit direction from parent for RTL support */
  direction: inherit;
  text-align: start;
}

.aws-search-result ul {
  max-height: 350px;
  direction: inherit;
}

.aws-search-result ul li {
  border-color: var(--color-border-25);
  direction: inherit;
  text-align: start;
}

.aws-search-result .aws_result_link {
  padding: 0.75rem 1rem;
  direction: inherit;
  text-align: start;
}

.aws-search-result .aws_result_content {
  direction: inherit;
  text-align: start;
}

.aws-search-result .aws_result_item:hover,
.aws-search-result .aws_result_item.hovered {
  background: var(--color-ghost-white);
}

.aws-search-result .aws_result_title {
  color: var(--color-gray-darker);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: start;
}

.aws-search-result .aws_result_image {
  float: inline-start; /* Use logical property for RTL */
  padding-inline-end: 10px;
  padding-inline-start: 0;
}

.aws-search-result .aws_result_image img {
  border-radius: 0.5rem;
  width: 60px;
}

.aws-search-result .aws_result_price {
  color: var(--color-primary);
  font-weight: 600;
  text-align: start;
}

.aws-search-result .aws_result_excerpt {
  color: var(--color-gray);
  font-size: 0.75rem;
  text-align: start;
}

.aws-search-result .aws_result_excerpt a {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important; /* gap-1 */
}

.aws-search-result .aws_search_more a {
  color: var(--color-primary);
  font-weight: 500;
  line-height: 48px;
  transition: background-color 0.2s ease;
  text-align: center;
}

.aws-search-result .aws_search_more a:hover {
  background: var(--color-ghost-white);
}

.aws-search-result .aws_no_result {
  padding: 1rem;
  color: var(--color-gray);
  text-align: center;
}

/* ========================================
   RTL Support
   ======================================== */

/* Force RTL direction on search results when page is RTL */
[dir="rtl"] .aws-search-result {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .aws-search-result ul,
[dir="rtl"] .aws-search-result ul li,
[dir="rtl"] .aws-search-result .aws_result_link,
[dir="rtl"] .aws-search-result .aws_result_content,
[dir="rtl"] .aws-search-result .aws_result_title,
[dir="rtl"] .aws-search-result .aws_result_price,
[dir="rtl"] .aws-search-result .aws_result_excerpt {
  direction: rtl;
  text-align: right;
}

/* Fix image float in RTL */
[dir="rtl"] .aws-search-result .aws_result_image {
  float: right;
  padding-right: 0;
  padding-left: 10px;
}

/* ========================================
   Mobile Responsiveness
   ======================================== */

@media (max-width: 640px) {
  .top-nav-search .aws-container .aws-search-form {
    min-height: 3rem;
  }
  
  .top-nav-search .aws-container .aws-search-field {
    font-size: 1rem; /* Prevent iOS zoom */
  }
}