/* KR SDK Custom Styles — Embedded Credit Card Form */

/* ── Remove left padding from card number field ── */
.kr-field-element.kr-pan {
  padding-left: 0 !important;
}
.kr-field-wrapper-pan {
  padding-inline-start: 0 !important;
}

.kr-field-element .kr-icon-wrapper-root {
  display: none !important;
}

/* ── Input fields inside iframes ── */
.kr-input-field {
  height: 44px !important;
  padding: 0 16px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  font-size: 15px !important;
  font-family: inherit !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.kr-input-field:focus {
  border-color: #F3A416 !important;
  box-shadow: 0 0 0 3px rgba(243, 164, 22, 0.12) !important;
  outline: none !important;
}

.kr-input-field::placeholder {
  color: #9CA3AF !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

.kr-input-field.kr-state-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.kr-input-field.kr-state-valid {
  border-color: #10B981 !important;
}

/* ── Labels inside iframes ── */
.kr-input-label {
  font-size: 12px !important;
  color: #6B7280 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .kr-input-field {
    background: #2A2A2A !important;
    border-color: rgba(253, 253, 253, 0.12) !important;
    color: #FDFDFD !important;
  }

  .kr-input-field:focus {
    border-color: #F6E816 !important;
    box-shadow: 0 0 0 3px rgba(246, 232, 22, 0.12) !important;
  }

  .kr-input-label {
    color: rgba(253, 253, 253, 0.55) !important;
  }
}