/*
 * Neokred KYC verification badges.
 *
 * The badge sits INSIDE the field's own row, right-aligned — a seller reads
 * "this number is verified", not "something on this form is verified". Same
 * treatment on document slots, where a failed badge also carries the re-upload
 * arrow so the fix is one click from the problem.
 *
 * Shared by the sign-up wizard, the profile-completion modal and the store
 * detail KYC tab.
 */

/* The row a badge lives in. Padding keeps the input's own text from running
   underneath the badge on narrow viewports. */
.form-line.has_kyc_badge {
    position: relative;
}

.form-line.has_kyc_badge > .form-control,
.form-line.has_kyc_badge .doc_upload > .form-control {
    padding-right: 140px;
}

/* Document slots need the reservation on the ROW, not on the input. That input
   is the invisible file picker (absolute, opacity 0, padding forced to 0), so
   padding it reserves nothing — the things actually sitting at the right edge
   are .doc_upload's own flex children: the "Upload"/filename text and the
   file_upload icon. Without this the badge lands on top of them. */
.form-line.has_kyc_badge .doc_upload {
    padding-right: 160px;
}

/* Once a file is uploaded .doc_upload_active paints a generic green tick at
   `right 16px center` — the exact spot the badge occupies, which is what put
   the tick through the middle of "Verification Failed!". It is redundant next
   to a badge that names the state outright, so drop it and leave the badge to
   speak. (.doc_upload_active already hides the upload icon itself.) */
.form-line.has_kyc_badge .doc_upload.doc_upload_active {
    background-image: none;
}

/* A failed document row carries its own re-upload arrow inside the badge, so
   the slot's stock file_upload icon becomes a SECOND identical upload control
   on the same row. .doc_upload_active already hides that icon once a file is
   attached — but a slot showing a verdict with nothing uploaded to it never
   gets that class, which is exactly where the duplicate appeared. */
.form-line.has_kyc_retry .doc_upload > i.material-icons-outlined {
    display: none;
}

.kyc_verify_badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    /* Above the file input's own click layer, which covers the whole row on
       document slots — otherwise the retry arrow could never be clicked. */
    z-index: 3;
    pointer-events: none;
}

.kyc_verify_badge.is-verified {
    color: #16a34a;
}

.kyc_verify_badge.is-failed {
    color: #dc2626;
}

/* A document on file with no verdict yet (kyc-verification.js labels it
   "Pending"). Amber: neither a pass nor a rejection. */
.kyc_verify_badge.is-pending {
    color: #E09100;
}

.kyc_verify_badge.is-checking {
    color: #6b7280;
    font-style: italic;
}

/* Only the retry arrow takes clicks; the label itself stays inert so it never
   swallows a click meant for the input behind it. */
.kyc_verify_badge .kyc_badge_retry {
    font-size: 18px;
    color: #6d28d9;
    cursor: pointer;
    pointer-events: auto;
}

.kyc_verify_badge .kyc_badge_retry:hover {
    color: #4c1d95;
}

/* ---------------------------------------------------------------------------
   Back-office store-detail KYC tab (Store::getAccountSettings renders it
   server-side). That tab is a read-only detail panel, not a form, so a badge
   there is not sitting on an input row and the colour-only treatment above
   reads as loose stray text rather than a state. Both variants below are
   scoped to their own class names, so the sign-up wizard and the
   profile-completion modal keep the inline treatment they were designed for.
   --------------------------------------------------------------------------- */

/* Number and detail rows (PAN / GST / CIN / Aadhaar Card): a soft tinted pill
   carrying the wording, since those rows have the width for it and the value
   beside it is a number that says nothing about its own state. */
.kyc_verify_badge--pill {
    position: static;
    transform: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    pointer-events: auto;
}

.kyc_verify_badge--pill.is-verified {
    background: #dcfce7;
    color: #15803d;
}

.kyc_verify_badge--pill.is-failed {
    background: #fee2e2;
    color: #b91c1c;
}

/* Awaiting a verdict. Amber and muted on purpose: it is neither a pass nor a
   rejection, and staff reviewing a store need to tell "we have not checked this
   yet" apart from "there is nothing here to check". Only ever rendered on a row
   that HAS a value or a document, so it never becomes noise on empty rows. */
.kyc_verify_badge--pill.is-pending {
    background: #fef3c7;
    color: #92400e;
}

/* Attachment rows: a bare tick/cross against the file name. Deliberately not
   the pill — the row's own left column already names the document, so wording
   here would repeat it, and the file names are long enough that a pill pushed
   the download/replace controls onto a second line. */
.kyc_badge_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
    /* Never let the circle squash into an ellipse when the file name beside it
       is long enough to compete for the row's width. */
    flex: 0 0 auto;
}

.kyc_badge_icon.is-verified {
    background: #16a34a;
}

.kyc_badge_icon.is-failed {
    background: #dc2626;
}

/* An attachment on file that has not been judged. Hollow rather than solid, so
   it reads as "no verdict yet" instead of competing with the tick and cross. */
.kyc_badge_icon.is-pending {
    background: #fff;
    color: #b45309;
    box-shadow: inset 0 0 0 1.5px #f59e0b;
}

/* Neutral explainer under a field — e.g. telling the seller that PAN is verified
   from the uploaded card rather than from the number they typed. Muted, so it
   never competes with the red failure hint below it. */
.field_note {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}

/* What to do next. Sits under the field, where the existing per-field error text
   already lives.

   Muted by default: most hints describe the NEXT STEP ("upload the PAN card to
   verify this number") rather than a problem, and red would read as a rejection
   the seller did not earn. Only a genuine failure turns red. */
.kyc_verify_hint {
    display: none;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}

.kyc_verify_hint.is-failed {
    color: #dc2626;
}

/* Narrow screens: the badge would collide with the input text, so drop it below
   the row rather than overlapping it. */
@media (max-width: 575px) {
    .form-line.has_kyc_badge > .form-control,
    .form-line.has_kyc_badge .doc_upload > .form-control {
        padding-right: 12px;
    }

    .kyc_verify_badge {
        position: static;
        transform: none;
        margin-top: 6px;
    }
}

/* ---------------------------------------------------------------------------
   AADHAAR — one slot, one verdict.
   The card was two slots (front and back) with a badge each; it is one slot
   now, so the only thing it needs is room for its single badge/hint line.
   --------------------------------------------------------------------------- */
.aadhaar_card_group > .kyc_verify_hint,
.aadhaar_card_group > .uploaded_msg {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   PAN is always upper case: shown in capitals while typing (the value itself
   is converted in kyc-verification.js), placeholder left as written.
   --------------------------------------------------------------------------- */
input[data-kyc-verify="pan"] {
	text-transform: uppercase;
}
input[data-kyc-verify="pan"]::placeholder {
	text-transform: none;
}