/* ==========================================================================
   Avangard Gold - Calculator "Vinde aur"
   Sursa: portare a snippets/sell-calculator.liquid + regulile din
   assets/style.css (tema Shopify), scoase de sub .component-hero.
   ========================================================================== */

.avg-sell {
  /* ---- Personalizeaza culorile aici ---- */
  --avg-gold: #dfb869;
  --avg-gold-light: #f9f6bb;
  --avg-card: #ffffff;
  --avg-border: #f7f7f7;
  --avg-text: #000000;
  --avg-label: #333333;
  --avg-muted: #666666;
  --avg-bar: #000000;
  --avg-bar-text: #ffffff;
  --avg-error: #dc3545;
  --avg-radius: 10px;

  box-sizing: border-box;
  width: 100%;
  color: var(--avg-text);
  font-family: inherit;
}

.avg-sell *,
.avg-sell *::before,
.avg-sell *::after { box-sizing: border-box; }

/* ---------- Cardul alb ---------- */
.avg-sell__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 24px 0;
  border-radius: var(--avg-radius) var(--avg-radius) 0 0;
  background: var(--avg-card);
  box-shadow: 0 0 20px 2px rgba(73, 42, 0, 0.02);
}

.avg-sell__title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(18px, 1.54vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.6px;
  color: var(--avg-text);
}

/* ---------- Randul de campuri ---------- */
.avg-sell__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avg-sell__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.avg-sell__label {
  color: var(--avg-label);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
}

.avg-sell__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--avg-border);
  border-radius: 4px;
  background: var(--avg-card);
  box-shadow: 0 0 20px 2px rgba(73, 42, 0, 0.02);
}

.avg-sell__control:focus-within { border-color: var(--avg-gold); }

.avg-sell__control--select { position: relative; }

.avg-sell__control--select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 5px;
  background-repeat: no-repeat;
  background-size: 9px 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M4.375 4.98755L5.712e-07 0.61255L0.612501 4.98256e-05L4.375 3.76255L8.1375 4.91678e-05L8.75 0.612549L4.375 4.98755Z' fill='%23333333'/%3E%3C/svg%3E");
  pointer-events: none;
}

.avg-sell__input,
.avg-sell__select {
  flex: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--avg-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
}

.avg-sell__input::placeholder {
  color: var(--avg-muted);
  opacity: 1;
}

.avg-sell__input:focus,
.avg-sell__select:focus {
  outline: none;
  box-shadow: none;
}

.avg-sell__input:focus-visible,
.avg-sell__select:focus-visible { box-shadow: none; }

.avg-sell__select {
  padding-right: 24px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;   /* tema WordPress poate pune propria sageata */
  cursor: pointer;
}

/* Ascunde sagetile de la input number, daca tema le adauga */
.avg-sell__input::-webkit-outer-spin-button,
.avg-sell__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.avg-sell__control--static { padding: 0 16px; }

.avg-sell__static-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--avg-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Total ---------- */
.avg-sell__total-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-bottom: 30px;
  color: var(--avg-label);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.14px;
}

.avg-sell__total-value {
  color: var(--avg-gold);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mesaj de eroare (lipseste in Shopify) ---------- */
.avg-sell__msg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -8px 0 0;
  padding: 0 0 24px;
  color: var(--avg-error);
  font-size: 13px;
  line-height: 1.5;
}

.avg-sell__msg[hidden] { display: none; }

.avg-sell__retry {
  padding: 5px 14px;
  border: 1px solid var(--avg-gold);
  border-radius: 999px;
  background: transparent;
  color: #8a6a26;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.avg-sell__retry:hover { background: rgba(223, 184, 105, 0.12); }
.avg-sell__retry:focus-visible { outline: 2px solid var(--avg-gold); outline-offset: 2px; }

/* Cat timp se incarca, valorile sunt gri, nu negre - ca sa nu para preturi reale */
.avg-sell[data-state="loading"] .avg-sell__static-value,
.avg-sell[data-state="error"] .avg-sell__static-value { color: var(--avg-muted); font-weight: 400; }

.avg-sell[data-state="loading"] .avg-sell__total-value,
.avg-sell[data-state="error"] .avg-sell__total-value { color: var(--avg-muted); }

/* ---------- Bara neagra ---------- */
.avg-sell__bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 11px 0 11px 11px;
  border-radius: 0 0 var(--avg-radius) var(--avg-radius);
  background: var(--avg-bar);
}

.avg-sell__note { width: 50%; }

.avg-sell__note p {
  margin: auto;
  padding-left: 10px;
  color: var(--avg-bar-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: -0.1px;
}

/* Butonul - replica .button din tema (schema alba: fond auriu, text negru,
   patrat negru cu sageata in dreapta). */
.avg-sell__button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  min-height: 50px;
  padding: 11px 80px 11px 30px;
  border: 0;
  border-radius: 4px;
  background-color: var(--avg-gold);
  color: var(--avg-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.avg-sell__button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: #000 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'><path d='M7.25 7L1 13.25L0.125 12.375L5.5 7L0.125001 1.625L1 0.75L7.25 7Z' fill='white'/></svg>") no-repeat center;
  background-size: 8px;
}

.avg-sell__button:hover { transform: translateY(-1px); color: var(--avg-text); }
.avg-sell__button:focus-visible { outline: 2px solid var(--avg-gold-light); outline-offset: 2px; }

.avg-sell__button[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* ---------- Desktop: 25 / 50 / 25 ---------- */
@media (min-width: 750px) {
  .avg-sell__row { flex-direction: row; }
  .avg-sell__field:first-child { width: 25%; }
  .avg-sell__field:nth-child(2) { width: 50%; }
  .avg-sell__field:last-child { width: 25%; }
}

/* ---------- Telefon: bara se aseaza pe doua randuri ---------- */
@media (max-width: 519px) {
  .avg-sell__top { padding: 16px 16px 0; }

  .avg-sell__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .avg-sell__note { width: 100%; }
  .avg-sell__note p { padding-left: 0; text-align: center; }
  .avg-sell__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .avg-sell__button { transition: none; }
  .avg-sell__button:hover { transform: none; }
}