/* bulldial.com — converter.
 *
 * Layered on bd.css and markets.css (for the shared footer). The widget
 * is one card holding two rows and a swap between them: the shape every
 * exchange app uses, because it makes the direction of the conversion
 * legible without a label saying "from" and "to".
 */

.conv-page { max-width: 620px; }

.conv-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: var(--sp-4);
  box-shadow: var(--e-2); margin-top: var(--sp-5);
}

.conv-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-3); padding: 14px 16px;
  transition: border-color var(--d-1) var(--smooth);
}
.conv-row:focus-within { border-color: var(--accent); }

.conv-amount {
  flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
  font-size: 1.55rem; font-weight: 650; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.conv-result { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.conv-result::-webkit-scrollbar { display: none; }

.conv-select {
  flex: none; display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); border-radius: var(--r-full); padding: 8px 12px;
  font-size: var(--t-sm); font-weight: 650;
  white-space: nowrap;
  transition: background var(--d-1) var(--smooth), border-color var(--d-1) var(--smooth),
              transform var(--d-1) var(--spring);
}
.conv-select:hover { background: var(--surface-3); border-color: var(--line-3); }
.conv-select:active { transform: scale(.96); }

/* The swap sits on the seam between the two rows and overlaps both, so
   it reads as acting on the pair rather than on either one. */
.conv-swap {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: -10px auto;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--accent); border-radius: 50%;
  box-shadow: var(--e-1);
  transition: transform var(--d-3) var(--spring), background var(--d-1) var(--smooth);
}
.conv-swap:hover { background: var(--surface-2); }
.conv-swap:active { transform: scale(.88) rotate(180deg); }

.conv-rate {
  margin-top: var(--sp-4); font-size: var(--t-xs); color: var(--ink-3);
  text-align: center;
}

/* ------------------------------------------------------------- picker --
   A dialog on a pointer, a bottom sheet on a phone — the same two
   presentations bd.css gives .sheet, so the converter's own picker does
   not feel like a different product from the rest of the site. */

.conv-picker {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--sp-4) var(--sp-4);
  animation: bd-fade var(--d-2) var(--smooth);
}
.conv-picker[hidden] { display: none; }

.conv-picker-inner {
  width: 100%; max-width: 420px; max-height: 70svh;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-4); box-shadow: var(--e-3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: bd-pop var(--d-3) var(--spring);
}
.conv-search { margin: var(--sp-3); height: 40px; }

.conv-picker-list {
  list-style: none; overflow-y: auto; border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.conv-picker-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer; font-size: var(--t-sm);
  transition: background var(--d-1) var(--smooth);
}
.conv-picker-list li:hover { background: var(--surface-2); }
.conv-picker-list .cpn { font-weight: 620; }
.conv-picker-list .cpt { color: var(--ink-3); margin-left: 5px; font-size: var(--t-xs); text-transform: uppercase; }

@media (max-width: 620px) {
  .conv-picker { align-items: flex-end; padding: 0; }
  .conv-picker-inner {
    max-width: none; max-height: 84svh;
    border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0;
    padding-bottom: var(--safe-b);
    animation: bd-sheet-up var(--d-3) var(--ease);
  }
  .conv-picker-inner .sheet-grip { display: block; margin: var(--sp-3) auto 0; }
}