/* Override stylesheet to resist Elementor overrides */
.npr-converter-scope {
  --npr-primary: #4CAF50;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important;
}

.npr-converter-scope .npr-currency-card {
  background: #fff !important;
  border: 1px solid #dde2e7 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.06) !important;
  padding: 14px 18px 16px !important;
  border-radius: 10px !important;
}

.npr-converter-scope .npr-card-input,
.npr-converter-scope .npr-currency-select {
  background: linear-gradient(135deg,#ffffff 0%,#f6f9fc 100%) !important;
  border: 1px solid #c9d1d8 !important;
  font-weight: 600 !important;
  font-size: 20px;
  color: #111 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* Modern input specific adjustments */
.npr-converter-scope .npr-card-input {
  padding: 10px 14px !important;
  height: 54px !important;
  border-radius: 8px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: .5px;
}

/* Remove number input spinners (Chrome/Edge) */
.npr-converter-scope .npr-card-input::-webkit-outer-spin-button,
.npr-converter-scope .npr-card-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Firefox */
.npr-converter-scope .npr-card-input[type=number] { -moz-appearance: textfield; }

/* Placeholder styling */
.npr-converter-scope .npr-card-input::placeholder { color:#9aa3ab; font-weight:400; }

/* Focus elevation */
.npr-converter-scope .npr-card-input:focus { 
  border-color: var(--npr-primary) !important;
  box-shadow: 0 0 0 3px rgba(76,175,80,.25), 0 2px 6px rgba(0,0,0,.08) !important;
  background: linear-gradient(135deg,#ffffff 0%,#eef8f0 100%) !important;
}

/* Hover subtle lift */
.npr-converter-scope .npr-card-input:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08) !important; }

.npr-converter-scope .npr-currency-select {
  font-size: 13px !important;
  padding: 6px 28px 6px 10px !important;
  border-radius: 6px !important;
}

.npr-converter-scope .npr-currency-card[data-role="source"]::after {
  background: rgba(76,175,80,.12) !important;
  color: #4CAF50 !important;
}

/* Restore extra top padding for source card so badge doesn't overlap input */
.npr-converter-scope .npr-currency-card[data-role="source"] {
  padding-top: 40px !important; /* match base style */
}

/* Refine badge positioning & appearance */
.npr-converter-scope .npr-currency-card[data-role="source"]::after {
  top: 10px !important;
  right: 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  z-index: 2;
}

.npr-converter-scope .npr-arrow-icon svg { color: #999 !important; }

.npr-converter-scope .npr-footer { font-size: 12px!important; color:#555!important; }

/* Focus states */
.npr-converter-scope .npr-card-input:focus,
.npr-converter-scope .npr-currency-select:focus { outline: none !important; border-color: #4CAF50 !important; box-shadow: 0 0 0 3px rgba(76,175,80,.25)!important; }

/* Keep flags intact */
.npr-converter-scope .npr-flag { font-size:18px!important; }

/* ---------------------------------------------- */
/* Responsive sizing: keep cards compact on wider screens */
/* Desktop / tablet: narrow fixed-ish width via clamp */
@media (min-width: 600px) {
  .npr-converter-scope .npr-currency-card {
    /* Wider max width, shrink proportionally as viewport narrows */
    width: clamp(160px, 18vw, 200px) !important;
    flex: 0 1 clamp(160px, 18vw, 200px) !important;
  }
  .npr-converter-scope .npr-card-input { width: 100% !important; }
}

@media (min-width: 1100px) {
  .npr-converter-scope .npr-currency-card {
    /* Slightly increase upper bound for very wide screens */
    width: clamp(170px, 14vw, 210px) !important;
    flex: 0 1 clamp(170px, 14vw, 210px) !important;
  }
}

/* Mobile: full width stacking already handled by base stylesheet */