/* Currency Converter — scoped UI (Mad Lads card styles live in index.html; do not duplicate here) */

.tool-page.cc-page .hero h1{
  font-weight:500;
  letter-spacing:-0.02em;
}

.tool-page.cc-page .cc-converter .cc-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.tool-page.cc-page .cc-converter .cc-pair-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  align-items:end;
}

.tool-page.cc-page .cc-converter .cc-field label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size:14px;
  color:var(--text);
}

.tool-page.cc-page .cc-converter .cc-field{
  position:relative;
}

.tool-page.cc-page .cc-converter .cc-select-native{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.tool-page.cc-page .cc-converter .cc-combo-list{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  max-height:240px;
  overflow-y:auto;
  border-radius:12px;
}

.tool-page.cc-page .cc-converter .cc-combo-option{
  display:block;
  width:100%;
  min-height:var(--control-h);
  padding:10px 14px;
  border:none;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:background-color 120ms ease,color 120ms ease;
}

.tool-page.cc-page .cc-converter .cc-combo-option:last-child{
  border-bottom:none;
}

.tool-page.cc-page .cc-converter .cc-combo-option:hover,
.tool-page.cc-page .cc-converter .cc-combo-option.is-highlighted{
  background:var(--brand-cyan-dim);
  color:var(--text);
}

.tool-page.cc-page .cc-converter .cc-combo-option[aria-selected="true"]{
  font-weight:700;
  color:var(--brand-cyan);
}

.tool-page.cc-page .cc-converter .cc-combo-option.is-highlighted[aria-selected="true"]{
  color:var(--text);
  box-shadow:inset 3px 0 0 var(--brand-cyan);
}

.tool-page.cc-page .cc-converter .cc-combo-list:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

.tool-page.cc-page .cc-converter .cc-select{
  margin-top:6px;
}

.tool-page.cc-page .cc-converter .cc-select-native{
  margin-top:0;
}

.tool-page.cc-page .cc-converter .cc-swap-col{
  display:flex;
  align-items:flex-end;
  padding-bottom:2px;
}

.tool-page.cc-page .cc-converter .cc-swap-btn{
  min-height:var(--control-h);
  min-width:var(--control-h);
  padding:10px 14px;
  font-weight:700;
  white-space:nowrap;
  transition:opacity 150ms ease,transform 120ms ease,background 150ms ease;
}
.tool-page.cc-page .cc-converter .cc-swap-btn:hover:not(:disabled){
  background:var(--hover);
}
.tool-page.cc-page .cc-converter .cc-swap-btn:active:not(:disabled){
  transform:translateY(1px);
}
.tool-page.cc-page .cc-converter .cc-swap-btn:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

.tool-page.cc-page .cc-converter .cc-amount{
  max-width:100%;
}

@media (max-width:720px){
  .tool-page.cc-page .cc-converter .cc-pair-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "from"
      "swap"
      "to";
    gap:14px;
  }
  .tool-page.cc-page .cc-converter .cc-from{ grid-area:from; }
  .tool-page.cc-page .cc-converter .cc-swap-col{
    grid-area:swap;
    justify-content:center;
    padding-bottom:0;
  }
  .tool-page.cc-page .cc-converter .cc-to{ grid-area:to; }
  .tool-page.cc-page .cc-converter .cc-swap-btn{
    width:100%;
    max-width:280px;
    margin:0 auto;
  }
}

.tool-page.cc-page .cc-converter .input,
.tool-page.cc-page .cc-converter .select,
.tool-page.cc-page .cc-converter .searchbox{
  background:var(--menu-bg);
  color:var(--text);
  border-color:var(--border);
  transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease;
}
.tool-page.cc-page .cc-converter .select option{
  background:var(--menu-bg);
  color:var(--text);
}
.tool-page.cc-page .cc-converter .input::placeholder,
.tool-page.cc-page .cc-converter .searchbox::placeholder{
  color:var(--muted);
}

.tool-page.cc-page .cc-toolbar .btn{
  min-height:var(--control-h);
}

/* Primary CTA — global signature gradient only (no local solid-color overrides) */
.tool-page.cc-page .cc-toolbar .btn.btn-primary-gradient{
  border:none;
  background:var(--btn-primary-gradient);
  color:#ffffff;
  font-weight:600;
  box-shadow:var(--btn-primary-shadow);
}
.tool-page.cc-page .cc-toolbar .btn.btn-primary-gradient:hover:not(:disabled){
  background:var(--btn-primary-gradient);
  filter:brightness(1.06);
  box-shadow:var(--btn-primary-shadow-hover);
}
.tool-page.cc-page .cc-toolbar .btn.btn-primary-gradient:active:not(:disabled){
  transform:translateY(1px);
  filter:brightness(0.98);
}
.tool-page.cc-page .cc-toolbar .btn.btn-primary-gradient.is-loading{
  opacity:0.65;
  cursor:wait;
  box-shadow:none;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .tool-page.cc-page .cc-converter .input,
  .tool-page.cc-page .cc-converter .select,
  .tool-page.cc-page .cc-converter .searchbox,
  .tool-page.cc-page .cc-toolbar .btn,
  .tool-page.cc-page .cc-converter .cc-swap-btn{
    transition:none;
  }
}

/* Result card — trading pair logos */
.tool-page.cc-page .cc-result-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.tool-page.cc-page .cc-pair-logos{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.tool-page.cc-page .cc-pair-logo{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--border);
  object-fit:cover;
  display:block;
  flex-shrink:0;
  background:var(--soft);
  image-rendering:high-quality;
  image-rendering:-webkit-optimize-contrast;
}

.tool-page.cc-page .cc-pair-logo + .cc-pair-logo{
  margin-left:-10px;
  box-shadow:-2px 0 0 var(--soft);
}

.tool-page.cc-page .cc-pair-logo--fiat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  color:#ffffff;
  background-color:#1e293b;
  border-color:rgba(255,255,255,0.12);
  line-height:1;
}

.tool-page.cc-page .cc-result-main{
  margin:0;
  font-size:22px;
  font-weight:700;
  line-height:1.35;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
}