/**
 * BulCommerce — Econt checkout picker styles
 *
 * Styles the office picker and address autocomplete that econt-frontend.js
 * renders inside the .flowcheckout-additional-fields mount div.
 *
 * DOM contract (from econt-frontend.js + Econt/Office.php + Econt/Address.php):
 *   Mount  : .flowcheckout-additional-fields[data-type="office|address"]
 *   Select : .fc-econt-select > .fc-econt-select__input
 *                              > .fc-econt-select__placeholder
 *                              > .fc-econt-select__single
 *                              > .fc-econt-select__results > .fc-econt-select__row
 *                              > .fc-econt-select__empty
 *   Address: .fc-econt-address > .fc-econt-address__street
 *                               > .fc-econt-address__num
 *                               > .fc-econt-address__extra
 *                               > .fc-econt-address__other
 *   States : .fc-econt-loading, .fc-econt-msg
 *   Misc   : .flowcheckout-econt-tracking
 */

/* ─── Design tokens ─────────────────────────────────────────────────────── */

.flowcheckout-additional-fields[data-type="office"],
.flowcheckout-additional-fields[data-type="address"] {
  --fc-blue:      #3b5ef5;
  --fc-blue-dark: #2545d4;
  --fc-gray-50:   #f8fafc;
  --fc-gray-100:  #f1f5f9;
  --fc-gray-200:  #e2e8f0;
  --fc-gray-400:  #94a3b8;
  --fc-gray-500:  #64748b;
  --fc-gray-700:  #334155;
  --fc-gray-900:  #0f172a;
  --fc-radius:    10px;
}

/* ─── Mount container ───────────────────────────────────────────────────── */

.flowcheckout-additional-fields {
  margin-top: 8px;
  padding: 12px 0 4px;
}

/* ─── Shared select widget ──────────────────────────────────────────────── */

.fc-econt-select {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

/* Econt-style dropdown: a chevron on the right, the value/placeholder on the
   left. The native input placeholder is transparent; the
   .fc-econt-select__placeholder span is the visible (overlay) hint, toggled by
   the JS on type, so "Search address" never shows twice. */
.fc-econt-select input.fc-econt-select__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--fc-gray-200, #e2e8f0);
  border-radius: 12px;
  /* Soft "search city"-style field, matching the Speedy office locator: a single
     light magnifier on the left, no dropdown chevron. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat left 16px center,
    #fbfcfe;
  background-size: 18px 18px, auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-gray-900, #0f172a);
  cursor: text;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fc-econt-select input.fc-econt-select__input::placeholder {
  color: transparent; /* the overlay span renders the visible hint instead */
}

.fc-econt-select input.fc-econt-select__input:hover {
  border-color: #cbd5e1;
  background-color: #fff;
}

.fc-econt-select input.fc-econt-select__input:focus {
  outline: none;
  border-color: var(--fc-blue, #3b5ef5);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(59,94,245,.12);
}

/* wc/theme-override: inside ul#shipping_method (multi-method/locator case),
   WooCommerce's `ul#shipping_method li input` ID rule resets the input padding,
   sliding the typed value under the left magnifier. Pin the icon-clearing
   padding (the placeholder/value overlays are absolute at 48px already). */
ul#shipping_method li input.fc-econt-select__input,
.fc-econt-select input.fc-econt-select__input {
  padding: 12px 16px 12px 44px !important;
  /* Themes (Divi/WooCommerce) add a bottom margin to inputs; on this inline-block
     field that margin stretches the wrapper taller than the input, so the absolute
     value/placeholder overlays (top:50%) sit ~8px below the centered magnifier.
     Zero it so the wrapper matches the input and the text lines up with the icon. */
  margin: 0 !important;
}
.fc-econt-select__placeholder {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 400;
  color: var(--fc-gray-400, #94a3b8);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 60px);
  line-height: 1;
}

/* Chosen office/street label — overlays the input once a value is picked. */
.fc-econt-select__single {
  position: absolute;
  left: 44px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-gray-900, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  line-height: 1;
}

.fc-econt-select__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* The results box is a <ul>. Themes (Woodmart/Divi/Kadence…) apply a ~34px
     padding-inline-start and a disc marker to every <ul>, which left a big empty
     gutter on the left and pushed the whole list to the right. Force the reset. */
  margin: 0 !important;         /* wc/theme-override */
  padding: 4px !important;      /* wc/theme-override */
  list-style: none !important;  /* wc/theme-override */
  background: #fff;
  border: 1px solid var(--fc-gray-200, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16,24,40,.14);
  max-height: 240px;
  overflow-y: auto;
  z-index: 9999;
}

.fc-econt-select__row {
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fc-gray-900, #0f172a);
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  /* Rows are <li>; kill any theme list marker/indent so the pin+text align flush. */
  list-style: none !important; /* wc/theme-override */
  margin: 0 !important;        /* wc/theme-override */
}

.fc-econt-select__row::marker {
  content: "";
}

.fc-econt-select__row:hover,
.fc-econt-select__row.is-active {
  background: #eef2ff;
  color: var(--fc-blue-dark, #2545d4);
}

/* Rich office row — the shared pickup-list skin owns its appearance; see
   src/css/pickup-list.css. renderRows() emits .fc-pickup__row alongside
   .fc-econt-select__row--rich, so keeping a second copy of the layout here is
   how the two couriers' lists drifted apart. */

.fc-econt-select__row-ic {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--fc-blue, #3b5ef5);
}

.fc-econt-select__row--rich:hover .fc-econt-select__row-ic,
.fc-econt-select__row--rich.is-active .fc-econt-select__row-ic {
  color: var(--fc-blue-dark, #2545d4);
}

.fc-econt-select__row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fc-econt-select__row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fc-gray-900, #0f172a);
  line-height: 1.25;
}

.fc-econt-select__row-addr {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fc-gray-500, #64748b);
  line-height: 1.35;
}

.fc-econt-select__empty {
  padding: 14px 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--fc-gray-500, #64748b);
  text-align: center;
}

/* ─── Address form ──────────────────────────────────────────────────────── */

.fc-econt-address {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.fc-econt-address__street {
  width: 100%;
}

/* Street number + bl.vh.et. sit on one row as TWO separate cards with a gap
   between them (matching the Speedy address picker) — not a fused segmented
   control. */
.fc-econt-address__extra {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

/* Plain free-text fields matching the dropdown shell — no left icon, like the
   Econt reference's "Номер на улица" box. */
.fc-econt-address input.fc-econt-address__num,
.fc-econt-address input.fc-econt-address__other {
  min-height: 56px;
  padding: 16px 20px;
  border: 2px solid var(--fc-gray-200, #e2e8f0);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fc-gray-900, #0f172a);
  background-color: #fbfcfe;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fc-econt-address input.fc-econt-address__num {
  flex: 0 0 42%;
  border-radius: 12px;
}

.fc-econt-address input.fc-econt-address__other {
  flex: 1 1 0;
  border-radius: 12px;
}

.fc-econt-address input.fc-econt-address__num::placeholder,
.fc-econt-address input.fc-econt-address__other::placeholder {
  color: var(--fc-gray-500, #64748b);
  font-weight: 500;
}

.fc-econt-address input.fc-econt-address__num:hover,
.fc-econt-address input.fc-econt-address__other:hover {
  border-color: #cbd5e1;
  background-color: #fff;
}

.fc-econt-address input.fc-econt-address__num:focus,
.fc-econt-address input.fc-econt-address__other:focus {
  outline: none;
  border-color: var(--fc-blue, #3b5ef5);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(59,94,245,.12);
  /* lift the focused field so its blue ring/border sits above its neighbour */
  position: relative;
  z-index: 1;
}

/* wc/theme-override: WooCommerce's `ul#shipping_method li input` (ID-level
   specificity) injects a right/top margin, and the active theme (Divi) forces a
   1px input border. Neutralise both so the two inputs render as two clean cards
   separated only by the flex gap (matching the Speedy address picker). */
.fc-econt-address__extra input.fc-econt-address__num,
.fc-econt-address__extra input.fc-econt-address__other {
  margin: 0 !important;
  padding: 16px 20px !important;
  border: 2px solid var(--fc-gray-200, #e2e8f0) !important;
}
.fc-econt-address__extra input.fc-econt-address__num:hover,
.fc-econt-address__extra input.fc-econt-address__other:hover {
  border-color: #cbd5e1 !important;
}
.fc-econt-address__extra input.fc-econt-address__num:focus,
.fc-econt-address__extra input.fc-econt-address__other:focus {
  border-color: var(--fc-blue, #3b5ef5) !important;
}
/* keep the street dropdown flush-aligned with the row below it (Divi also
   forces a 2px input padding, so pin the left padding to match the fields). */
.fc-econt-address input.fc-econt-select__input {
  margin: 0 !important;
  padding: 16px 46px 16px 48px !important;
}

/* ─── Loading indicator ─────────────────────────────────────────────────── */

.fc-econt-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--fc-gray-500, #64748b);
}

.fc-econt-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fc-gray-200, #e2e8f0);
  border-top-color: var(--fc-blue, #3b5ef5);
  border-radius: 50%;
  animation: fc-econt-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes fc-econt-spin {
  to { transform: rotate(360deg); }
}

/* ─── Status / error message ────────────────────────────────────────────── */

.fc-econt-msg {
  padding: 6px 10px;
  border-radius: var(--fc-radius, 5px);
  font-size: 13px;
  background: var(--fc-gray-50, #f8fafc);
  color: var(--fc-gray-700, #334155);
  margin-top: 4px;
}

.fc-econt-msg:empty {
  display: none;
}

/* ─── Tracking notice ───────────────────────────────────────────────────── */

.flowcheckout-econt-tracking {
  font-size: 13px;
  color: var(--fc-gray-500, #64748b);
  margin: 4px 0 0;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .fc-econt-select__results {
    max-height: 180px;
  }
  .fc-econt-address input.fc-econt-address__num {
    max-width: 100%;
  }
}

/* ===========================================================================
   LOCATOR TEMPLATE — re-anchor the input overlays.

   This widget paints its hint and its chosen-value label as absolutely
   positioned spans on top of the input, centred with top:50% against
   .fc-econt-select. That works while the results are an out-of-flow dropdown
   and the wrapper is just the ~48px input.

   Under the Locator the results list sits IN the flow, so the wrapper grows to
   the height of input + list (measured: 396px). top:50% then resolves to ~198px
   and the "Search office" hint lands in the middle of the office list, printed
   over a row — which is exactly the ghost text in the bug report.

   Pin both overlays to the input band at the top of the wrapper instead. The
   48px matches .fc-econt-select__input's min-height above; if that changes,
   this changes with it.
   =========================================================================== */

body.flowcheckout--shipping-locator .fc-econt-select__placeholder,
body.flowcheckout--shipping-locator .fc-econt-select__single {
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  transform: none;
}