/* ============================================================
   DR Header Icons — header-icons.css
   ============================================================ */

/* ----- Wrapper ----- */
.dr-header-icons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.dr-header-icons svg {
	width: 20px;
	height: 20px;
}

.dr-header-icons .dr-cart-link svg {
	width: 24px;
}

/* ----- Base icon button / link ----- */
.dr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: currentColor;
  line-height: 1;
  position: relative;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.dr-icon-btn:hover {
  opacity: 0.6;
}

.dr-icon-btn svg {
  display: block;
  fill: currentColor;
}

/* ----- Favorites — header heart ----- */
.dr-favorites-trigger svg {
  transition: fill 0.2s ease;
}

.dr-favorites-trigger.is-favorited svg {
  fill: var(--dr-favorite-color, #ff5408);
}

/* ----- [dr_favorite_btn] — product card heart ----- */
.dr-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: currentColor;
  line-height: 1;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.dr-favorite-btn svg {
  display: block;
  fill: currentColor;
  opacity: 0.35;
  transition:
    fill 0.2s ease,
    opacity 0.2s ease;
}

.dr-favorite-btn:hover svg {
  opacity: 0.7;
}

.dr-favorite-btn.is-favorited svg {
  fill: var(--dr-favorite-color, #ff5408);
  opacity: 1;
}

.dr-favorite-btn:hover {
  transform: scale(1.1);
}

.dr-favorite-btn.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ----- Cart count badge ----- */
.dr-cart-link {
  gap: 4px;
}

.dr-cart-count {
  font-family: "Korolev-Medium", "Korolev", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  min-width: 1ch;
}

.dr-cart-count.is-empty {
  opacity: 0.4;
}

/* ============================================================
   Search Dropdown
   ============================================================ */
.dr-search-wrap {
  position: relative;
  display: flex;
}

.dr-search-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 280px;
  background: #fff;
  z-index: 999;

  /* animation */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.dr-search-dropdown[hidden] {
  display: block; /* keep in flow for CSS transition */
  visibility: hidden;
}

.dr-search-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  visibility: visible;
}

.dr-search-dropdown__form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid currentColor;
  gap: 10px;
}

.dr-search-dropdown__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  color: inherit;
  padding: 10px 0;
  appearance: none;
}

.dr-search-dropdown__input::placeholder {
  opacity: 0.35;
}

.dr-search-dropdown__input::-webkit-search-cancel-button {
  display: none;
}

.dr-search-dropdown__submit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  display: inline-flex;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.dr-search-dropdown__submit:hover {
  opacity: 0.5;
}

.dr-search-dropdown__submit svg {
  fill: currentColor;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .dr-header-icons {
    gap: 16px;
  }

  .dr-search-dropdown {
    width: 220px;
  }
}